<!-- Calling Screen Content Fragment -->
<!-- In-call interface with controls -->

<style>
    .calling-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    }

    .calling-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 48px 24px;
    }

    .calling-avatar {
        width: 120px;
        height: 120px;
        border-radius: 60px;
        background-color: #BB86FC;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48px;
        color: #FFFFFF;
        font-weight: 500;
        margin-bottom: 24px;
    }

    .calling-name {
        font-size: 32px;
        color: #FFFFFF;
        font-weight: 500;
        margin-bottom: 8px;
    }

    .calling-status {
        font-size: 18px;
        color: #B0B0B0;
        margin-bottom: 8px;
    }

    .calling-timer {
        font-size: 24px;
        color: #FFFFFF;
        font-weight: 300;
    }

    /* Call controls */
    .call-controls {
        padding: 32px 24px 48px;
    }

    .controls-row {
        display: flex;
        justify-content: center;
        gap: 32px;
        margin-bottom: 32px;
    }

    .control-btn {
        width: 64px;
        height: 64px;
        border-radius: 32px;
        background-color: rgba(255, 255, 255, 0.15);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .control-btn:hover {
        background-color: rgba(255, 255, 255, 0.25);
    }

    .control-btn.active {
        background-color: #FFFFFF;
    }

    .control-btn.active img {
        filter: invert(1);
    }

    .control-btn img {
        width: 28px;
        height: 28px;
    }

    .control-label {
        font-size: 12px;
        color: #FFFFFF;
        margin-top: 8px;
        text-align: center;
    }

    .control-btn.active .control-label {
        color: #000000;
    }

    /* End call button */
    .end-call-row {
        display: flex;
        justify-content: center;
    }

    .end-call-btn {
        width: 72px;
        height: 72px;
        border-radius: 36px;
        background-color: #F44336;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .end-call-btn:hover {
        background-color: #E53935;
    }

    .end-call-btn img {
        width: 36px;
        height: 36px;
        transform: rotate(135deg);
    }

    /* Dialpad overlay */
    .dialpad-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #1a1a1a;
        padding: 24px;
        border-radius: 24px 24px 0 0;
        display: none;
    }

    .dialpad-overlay.visible {
        display: block;
    }

    .dialpad-row {
        display: flex;
        justify-content: center;
        gap: 24px;
        margin-bottom: 16px;
    }

    .dialpad-key {
        width: 64px;
        height: 64px;
        border-radius: 32px;
        background-color: #2d2d2d;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .dialpad-key:hover {
        background-color: #3d3d3d;
    }

    .dialpad-digit {
        font-size: 24px;
        color: #FFFFFF;
    }

    .dialpad-letters {
        font-size: 10px;
        color: #888888;
    }

    .dialpad-close {
        text-align: center;
        padding: 16px;
        color: #BB86FC;
        font-size: 16px;
        cursor: pointer;
    }
</style>

<div class="calling-content">
    <div class="calling-info">
        <div id="calling-avatar" class="calling-avatar">J</div>
        <div id="calling-name" class="calling-name">John Smith</div>
        <div id="calling-status" class="calling-status">Calling...</div>
        <div id="calling-timer" class="calling-timer"></div>
    </div>

    <div class="call-controls">
        <div class="controls-row">
            <div class="control-btn" id="btn-mute" onclick="toggleMute()">
                <img src="../../icons/mic.tga"/>
                <span class="control-label">Mute</span>
            </div>
            <div class="control-btn" id="btn-keypad" onclick="toggleKeypad()">
                <img src="../../icons/keypad.tga"/>
                <span class="control-label">Keypad</span>
            </div>
            <div class="control-btn" id="btn-speaker" onclick="toggleSpeaker()">
                <img src="../../icons/speaker.tga"/>
                <span class="control-label">Speaker</span>
            </div>
        </div>
        <div class="controls-row">
            <div class="control-btn" id="btn-add" onclick="addCall()">
                <img src="../../icons/add.tga"/>
                <span class="control-label">Add call</span>
            </div>
            <div class="control-btn" id="btn-hold" onclick="toggleHold()">
                <img src="../../icons/pause.tga"/>
                <span class="control-label">Hold</span>
            </div>
            <div class="control-btn" id="btn-video" onclick="toggleVideo()">
                <img src="../../icons/camera.tga"/>
                <span class="control-label">Video</span>
            </div>
        </div>
        <div class="end-call-row">
            <div class="end-call-btn" onclick="endCall()">
                <img src="../../icons/phone.tga"/>
            </div>
        </div>
    </div>

    <!-- Dialpad overlay -->
    <div id="dialpad-overlay" class="dialpad-overlay">
        <div class="dialpad-row">
            <div class="dialpad-key" onclick="dialDTMF('1')">
                <span class="dialpad-digit">1</span>
            </div>
            <div class="dialpad-key" onclick="dialDTMF('2')">
                <span class="dialpad-digit">2</span>
                <span class="dialpad-letters">ABC</span>
            </div>
            <div class="dialpad-key" onclick="dialDTMF('3')">
                <span class="dialpad-digit">3</span>
                <span class="dialpad-letters">DEF</span>
            </div>
        </div>
        <div class="dialpad-row">
            <div class="dialpad-key" onclick="dialDTMF('4')">
                <span class="dialpad-digit">4</span>
                <span class="dialpad-letters">GHI</span>
            </div>
            <div class="dialpad-key" onclick="dialDTMF('5')">
                <span class="dialpad-digit">5</span>
                <span class="dialpad-letters">JKL</span>
            </div>
            <div class="dialpad-key" onclick="dialDTMF('6')">
                <span class="dialpad-digit">6</span>
                <span class="dialpad-letters">MNO</span>
            </div>
        </div>
        <div class="dialpad-row">
            <div class="dialpad-key" onclick="dialDTMF('7')">
                <span class="dialpad-digit">7</span>
                <span class="dialpad-letters">PQRS</span>
            </div>
            <div class="dialpad-key" onclick="dialDTMF('8')">
                <span class="dialpad-digit">8</span>
                <span class="dialpad-letters">TUV</span>
            </div>
            <div class="dialpad-key" onclick="dialDTMF('9')">
                <span class="dialpad-digit">9</span>
                <span class="dialpad-letters">WXYZ</span>
            </div>
        </div>
        <div class="dialpad-row">
            <div class="dialpad-key" onclick="dialDTMF('*')">
                <span class="dialpad-digit">*</span>
            </div>
            <div class="dialpad-key" onclick="dialDTMF('0')">
                <span class="dialpad-digit">0</span>
                <span class="dialpad-letters">+</span>
            </div>
            <div class="dialpad-key" onclick="dialDTMF('#')">
                <span class="dialpad-digit">#</span>
            </div>
        </div>
        <div class="dialpad-close" onclick="toggleKeypad()">Hide</div>
    </div>
</div>

<script>
-- Calling state
local call_state = {
    is_muted = false,
    is_speaker = false,
    is_hold = false,
    is_connected = false,
    call_duration = 0,
    keypad_visible = false
}

local timer_id = nil

local function getDoc()
    return shell_document
end

-- Simulate call connection
local function simulateConnection()
    if setTimeout then
        setTimeout(function()
            call_state.is_connected = true
            local doc = getDoc()
            if doc then
                local status = doc:GetElementById("calling-status")
                if status then
                    status.inner_rml = "Connected"
                end
            end
            startCallTimer()
        end, 2000)
    end
end

-- Start call timer
function startCallTimer()
    if setInterval then
        timer_id = setInterval(function()
            call_state.call_duration = call_state.call_duration + 1
            updateTimerDisplay()
        end, 1000)
    end
end

-- Update timer display
function updateTimerDisplay()
    local doc = getDoc()
    if not doc then return end

    local timer = doc:GetElementById("calling-timer")
    if timer then
        local mins = math.floor(call_state.call_duration / 60)
        local secs = call_state.call_duration % 60
        timer.inner_rml = string.format("%02d:%02d", mins, secs)
    end
end

-- Toggle mute
function toggleMute()
    call_state.is_muted = not call_state.is_muted
    local doc = getDoc()
    if doc then
        local btn = doc:GetElementById("btn-mute")
        if btn then
            btn:SetClass("active", call_state.is_muted)
        end
    end
    if showToast then
        showToast(call_state.is_muted and "Muted" or "Unmuted")
    end
    print("[Calling] Mute: " .. tostring(call_state.is_muted))
end

-- Toggle speaker
function toggleSpeaker()
    call_state.is_speaker = not call_state.is_speaker
    local doc = getDoc()
    if doc then
        local btn = doc:GetElementById("btn-speaker")
        if btn then
            btn:SetClass("active", call_state.is_speaker)
        end
    end
    if showToast then
        showToast(call_state.is_speaker and "Speaker on" or "Speaker off")
    end
    print("[Calling] Speaker: " .. tostring(call_state.is_speaker))
end

-- Toggle hold
function toggleHold()
    call_state.is_hold = not call_state.is_hold
    local doc = getDoc()
    if doc then
        local btn = doc:GetElementById("btn-hold")
        if btn then
            btn:SetClass("active", call_state.is_hold)
        end
        local status = doc:GetElementById("calling-status")
        if status then
            if call_state.is_hold then
                status.inner_rml = "On Hold"
            elseif call_state.is_connected then
                status.inner_rml = "Connected"
            end
        end
    end
    if showToast then
        showToast(call_state.is_hold and "Call on hold" or "Call resumed")
    end
    print("[Calling] Hold: " .. tostring(call_state.is_hold))
end

-- Toggle keypad
function toggleKeypad()
    call_state.keypad_visible = not call_state.keypad_visible
    local doc = getDoc()
    if doc then
        local overlay = doc:GetElementById("dialpad-overlay")
        if overlay then
            overlay:SetClass("visible", call_state.keypad_visible)
        end
    end
    print("[Calling] Keypad: " .. tostring(call_state.keypad_visible))
end

-- Dial DTMF tone
function dialDTMF(digit)
    print("[Calling] DTMF: " .. digit)
    if showToast then
        showToast("DTMF: " .. digit)
    end
end

-- Add call
function addCall()
    if showToast then
        showToast("Add call not available")
    end
end

-- Toggle video
function toggleVideo()
    if showToast then
        showToast("Video call not available")
    end
end

-- End call
function endCall()
    print("[Calling] Ending call")

    -- Stop timer
    if timer_id and clearInterval then
        clearInterval(timer_id)
        timer_id = nil
    end

    if showToast then
        local mins = math.floor(call_state.call_duration / 60)
        local secs = call_state.call_duration % 60
        showToast(string.format("Call ended (%02d:%02d)", mins, secs))
    end

    -- Navigate back
    if shellGoBack then
        shellGoBack()
    end
end

-- Initialize on load
simulateConnection()
print("[Calling] Content loaded")
</script>
