<!-- Camera App Content Fragment -->
<!-- Uses classes from shell.rml -->

<div class="camera-content">
    <!-- Top Bar -->
    <div class="camera-top-bar">
        <div style="display: flex; gap: 12px;">
            <div class="camera-btn" id="flash-btn" onclick="toggleFlash()">
                <img src="../../icons/flash.tga" style="width: 24px; height: 24px;"/>
            </div>
            <div class="camera-btn" onclick="toggleTimer()">
                <img src="../../icons/timer.tga" style="width: 24px; height: 24px;"/>
            </div>
        </div>
        <span id="flash-indicator" style="font-size: 12px; color: #FFFFFF; background-color: rgba(0, 0, 0, 0.4); padding: 6px 12px; border-radius: 16px;">Flash: Auto</span>
        <div class="camera-btn" onclick="openCameraSettings()">
            <img src="../../icons/settings.tga" style="width: 24px; height: 24px;"/>
        </div>
    </div>

    <!-- Recording Indicator -->
    <div id="recording-indicator" style="position: absolute; top: 80px; left: 50%; display: none; align-items: center; gap: 8px; background-color: rgba(0, 0, 0, 0.6); padding: 8px 16px; border-radius: 20px;">
        <div style="width: 12px; height: 12px; border-radius: 6px; background-color: #F44336;"></div>
        <span id="recording-time" style="font-size: 14px; color: #FFFFFF; font-weight: bold;">00:00</span>
    </div>

    <!-- Viewfinder -->
    <div class="viewfinder-container" onclick="tapToFocus()">
        <div class="viewfinder" id="viewfinder">
            <span style="font-size: 64px; color: #444444; margin-bottom: 16px;">C</span>
            <span style="color: #666666; font-size: 18px;">Camera Preview</span>
            <span style="font-size: 14px; color: #555555; margin-top: 8px;">Tap to focus</span>
        </div>
        <div id="focus-indicator" style="position: absolute; width: 80px; height: 80px; border-radius: 8px; opacity: 0;"></div>
    </div>

    <!-- Zoom Controls -->
    <div style="position: absolute; bottom: 180px; left: 50%; display: flex; gap: 16px;">
        <div onclick="setZoom(0.5)" style="width: 40px; height: 40px; border-radius: 20px; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 12px; font-weight: bold; cursor: pointer;">0.5x</div>
        <div id="zoom-1x" onclick="setZoom(1)" style="width: 40px; height: 40px; border-radius: 20px; background-color: #FFFFFF; display: flex; align-items: center; justify-content: center; color: #000000; font-size: 12px; font-weight: bold; cursor: pointer;">1x</div>
        <div onclick="setZoom(2)" style="width: 40px; height: 40px; border-radius: 20px; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 12px; font-weight: bold; cursor: pointer;">2x</div>
    </div>

    <!-- Mode Selector -->
    <div class="camera-mode-selector">
        <span class="camera-mode" id="mode-night" onclick="switchMode('night')">Night</span>
        <span class="camera-mode" id="mode-portrait" onclick="switchMode('portrait')">Portrait</span>
        <span class="camera-mode active" id="mode-photo" onclick="switchMode('photo')">Photo</span>
        <span class="camera-mode" id="mode-video" onclick="switchMode('video')">Video</span>
    </div>

    <!-- Bottom Controls -->
    <div class="camera-bottom-bar">
        <div class="camera-gallery-preview" onclick="openGallery()"></div>
        <div class="camera-shutter-btn" id="shutter-btn" onclick="capture()">
            <div id="shutter-inner" class="camera-shutter-inner"></div>
        </div>
        <div class="camera-switch-btn" onclick="switchCamera()">
            <img src="../../icons/switch-camera.tga" style="width: 28px; height: 28px;"/>
        </div>
    </div>
</div>

<script>
local current_mode = "photo"
local flash_mode = "auto"
local timer_mode = "off"
local is_front = false
local is_recording = false
local record_time = 0
local record_timer = nil
local zoom_level = 1

local function getDoc()
    return shell_document
end

function switchMode(mode)
    current_mode = mode
    local doc = getDoc()
    if not doc then return end

    local modes = {"night", "portrait", "photo", "video"}
    for _, m in ipairs(modes) do
        local el = doc:GetElementById("mode-" .. m)
        if el then
            el:SetClass("active", m == mode)
        end
    end

    local inner = doc:GetElementById("shutter-inner")
    if inner then
        if mode == "video" then
            inner:SetClass("camera-shutter-inner", false)
            inner:SetClass("camera-shutter-video", true)
        else
            inner:SetClass("camera-shutter-video", false)
            inner:SetClass("camera-shutter-inner", true)
        end
    end

    print("[Camera] Mode: " .. mode)
    if showToast then
        showToast(mode:sub(1,1):upper() .. mode:sub(2) .. " mode")
    end
end

function toggleFlash()
    if flash_mode == "auto" then
        flash_mode = "on"
    elseif flash_mode == "on" then
        flash_mode = "off"
    else
        flash_mode = "auto"
    end

    local doc = getDoc()
    if doc then
        local indicator = doc:GetElementById("flash-indicator")
        if indicator then
            indicator.inner_rml = "Flash: " .. flash_mode:sub(1,1):upper() .. flash_mode:sub(2)
        end
    end

    print("[Camera] Flash: " .. flash_mode)
end

function toggleTimer()
    if timer_mode == "off" then
        timer_mode = "3s"
    elseif timer_mode == "3s" then
        timer_mode = "10s"
    else
        timer_mode = "off"
    end

    print("[Camera] Timer: " .. timer_mode)
    if showToast then
        showToast("Timer: " .. timer_mode)
    end
end

function setZoom(level)
    zoom_level = level
    print("[Camera] Zoom: " .. level .. "x")
    if showToast then
        showToast(level .. "x zoom")
    end
end

function switchCamera()
    is_front = not is_front
    local doc = getDoc()
    if doc then
        local vf = doc:GetElementById("viewfinder")
        if vf then
            if is_front then
                vf.inner_rml = [[
                    <span style="font-size: 64px; color: #444444; margin-bottom: 16px;">F</span>
                    <span style="color: #666666; font-size: 18px;">Front Camera</span>
                    <span style="font-size: 14px; color: #555555; margin-top: 8px;">Tap to focus</span>
                ]]
            else
                vf.inner_rml = [[
                    <span style="font-size: 64px; color: #444444; margin-bottom: 16px;">C</span>
                    <span style="color: #666666; font-size: 18px;">Camera Preview</span>
                    <span style="font-size: 14px; color: #555555; margin-top: 8px;">Tap to focus</span>
                ]]
            end
        end
    end

    print("[Camera] Switched to " .. (is_front and "front" or "back") .. " camera")
    if showToast then
        showToast(is_front and "Front camera" or "Back camera")
    end
end

function capture()
    if current_mode == "video" then
        if is_recording then
            stopRecording()
        else
            startRecording()
        end
    else
        takePhoto()
    end
end

function takePhoto()
    print("[Camera] Photo captured!")
    if showToast then
        showToast("Photo saved")
    end
end

function startRecording()
    is_recording = true
    record_time = 0

    local doc = getDoc()
    if doc then
        local indicator = doc:GetElementById("recording-indicator")
        if indicator then
            indicator.style.display = "flex"
        end
        local inner = doc:GetElementById("shutter-inner")
        if inner then
            inner:SetClass("camera-shutter-video", false)
            inner:SetClass("camera-shutter-stop", true)
        end
    end

    if setInterval then
        record_timer = setInterval(function()
            record_time = record_time + 1
            local mins = math.floor(record_time / 60)
            local secs = record_time % 60
            local doc = getDoc()
            if doc then
                local time_el = doc:GetElementById("recording-time")
                if time_el then
                    time_el.inner_rml = string.format("%02d:%02d", mins, secs)
                end
            end
        end, 1000)
    end

    print("[Camera] Recording started")
end

function stopRecording()
    is_recording = false

    if record_timer and clearInterval then
        clearInterval(record_timer)
        record_timer = nil
    end

    local doc = getDoc()
    if doc then
        local indicator = doc:GetElementById("recording-indicator")
        if indicator then
            indicator.style.display = "none"
        end
        local inner = doc:GetElementById("shutter-inner")
        if inner then
            inner:SetClass("camera-shutter-stop", false)
            inner:SetClass("camera-shutter-video", true)
        end
    end

    local mins = math.floor(record_time / 60)
    local secs = record_time % 60
    print("[Camera] Recording stopped: " .. string.format("%02d:%02d", mins, secs))
    if showToast then
        showToast(string.format("Video saved (%02d:%02d)", mins, secs))
    end
end

function tapToFocus()
    print("[Camera] Tap to focus")
end

function openGallery()
    print("[Camera] Opening gallery")
    if showToast then
        showToast("Gallery")
    end
end

function openCameraSettings()
    print("[Camera] Camera settings")
    if showToast then
        showToast("Camera settings")
    end
end

print("[Camera] Content loaded")
</script>
