{% extends "base.html" %}
{% block title_suffix %} - Gemini CLI{% endblock %}

{% block content %}
<div class="ac-page-header">
    <h2>Gemini CLI</h2>
    <p>Interactive Gemini CLI agent terminal powered by <a href="https://github.com/tsl0922/ttyd" target="_blank">ttyd</a></p>
</div>

{# --- Status warnings (shown/hidden by JS) --- #}
<div id="gemini-ttyd-warning" class="pf-v6-c-card" style="display:none;margin-bottom:1.25rem;">
    <div class="pf-v6-c-card__body" style="padding:2rem;text-align:center;">
        <div style="font-size:1.5rem;margin-bottom:0.75rem;">ttyd Not Installed</div>
        <p style="color:var(--pf-t--global--text--color--subtle);margin:0 0 1rem;">
            ttyd is required to run terminal sessions in the browser.
        </p>
        <code style="display:inline-block;padding:0.5rem 1rem;background:var(--pf-t--global--background--color--secondary--default);border:1px solid var(--pf-t--global--border--color--default);border-radius:var(--pf-t--global--border--radius--small);font-size:0.95rem;">brew install ttyd</code>
        <p style="color:var(--pf-t--global--text--color--subtle);margin:1rem 0 0;font-size:0.85rem;">
            On Ubuntu: <code>sudo apt install ttyd</code>
        </p>
    </div>
</div>

<div id="gemini-not-installed" class="pf-v6-c-card" style="display:none;margin-bottom:1.25rem;">
    <div class="pf-v6-c-card__body" style="padding:2rem;text-align:center;">
        <div style="font-size:1.5rem;margin-bottom:0.75rem;">Gemini CLI Not Found</div>
        <p style="color:var(--pf-t--global--text--color--subtle);margin:0 0 1rem;">
            The <code>gemini</code> command was not found on your system PATH.
        </p>
        <p style="color:var(--pf-t--global--text--color--subtle);font-size:0.85rem;margin:0;">
            Install it from <a href="https://github.com/google-gemini/gemini-cli" target="_blank" style="color:var(--pf-t--global--color--brand--default);">google-gemini/gemini-cli</a> and ensure it is on your PATH.
        </p>
    </div>
</div>

{# --- Terminal section --- #}
<div id="gemini-terminal-section">
    <div class="ac-terminal-wrapper">
        <div class="ac-terminal-toolbar">
            <div style="display:flex;align-items:center;gap:0.75rem;flex:1;min-width:0;">
                <label for="gemini-cwd" style="font-size:0.85rem;white-space:nowrap;color:var(--pf-t--global--text--color--subtle);">Working directory</label>
                <span class="pf-v6-c-form-control" style="flex:1;min-width:0;">
                    <input type="text" id="gemini-cwd" value="{{ default_cwd }}" style="font-family:var(--pf-t--global--font--family--mono);font-size:0.85rem;">
                </span>
            </div>
            <div style="display:flex;gap:0.5rem;margin-left:0.75rem;">
                <button type="button" class="pf-v6-c-button pf-m-primary" id="gemini-launch-btn">Launch</button>
                <button type="button" class="pf-v6-c-button pf-m-danger" id="gemini-stop-btn" style="display:none;">Stop</button>
            </div>
        </div>
        <div id="gemini-terminal" class="ac-terminal" style="position:relative;">
            <div id="gemini-placeholder" style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--pf-t--global--text--color--subtle);font-size:0.95rem;">
                Click <strong style="margin:0 0.25rem;">Launch</strong> to start a Gemini CLI session.
            </div>
        </div>
    </div>
</div>

<script>
(function() {
    var ttydWarning = document.getElementById('gemini-ttyd-warning');
    var notInstalled = document.getElementById('gemini-not-installed');
    var termSection = document.getElementById('gemini-terminal-section');
    var launchBtn = document.getElementById('gemini-launch-btn');
    var stopBtn = document.getElementById('gemini-stop-btn');
    var cwdInput = document.getElementById('gemini-cwd');
    var termContainer = document.getElementById('gemini-terminal');
    var placeholder = document.getElementById('gemini-placeholder');
    var iframe = null;

    function setSessionActive(active) {
        launchBtn.style.display = active ? 'none' : '';
        stopBtn.style.display = active ? '' : 'none';
        cwdInput.disabled = active;
        cwdInput.style.opacity = active ? '0.5' : '';
    }

    function showIframe(port) {
        if (iframe) iframe.remove();
        placeholder.style.display = 'none';
        iframe = document.createElement('iframe');
        iframe.src = 'http://127.0.0.1:' + port;
        iframe.style.cssText = 'width:100%;height:100%;border:none;display:block;';
        termContainer.appendChild(iframe);
    }

    function removeIframe() {
        if (iframe) { iframe.remove(); iframe = null; }
        placeholder.style.display = '';
    }

    function checkStatus() {
        fetch('/api/agents/gemini/status')
            .then(function(r) { return r.json(); })
            .then(function(data) {
                ttydWarning.style.display = 'none';
                notInstalled.style.display = 'none';

                if (!data.ttyd_available) {
                    termSection.style.display = 'none';
                    ttydWarning.style.display = '';
                } else if (!data.gemini_installed) {
                    termSection.style.display = 'none';
                    notInstalled.style.display = '';
                } else if (data.ttyd_running) {
                    setSessionActive(true);
                    showIframe(data.ttyd_port);
                }
            })
            .catch(function() {
                termSection.style.display = 'none';
                ttydWarning.style.display = '';
            });
    }

    function launchTerminal() {
        launchBtn.disabled = true;

        fetch('/api/agents/gemini/start-terminal', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ cwd: cwdInput.value.trim() || null })
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            launchBtn.disabled = false;
            if (!data.success) {
                alert(data.error || 'Failed to start terminal');
                setSessionActive(false);
                return;
            }
            setSessionActive(true);
            showIframe(data.port);
        })
        .catch(function(err) {
            launchBtn.disabled = false;
            setSessionActive(false);
            alert('Error: ' + err.message);
        });
    }

    function stopTerminal() {
        stopBtn.disabled = true;
        fetch('/api/agents/gemini/stop-terminal', { method: 'POST' })
            .then(function(r) { return r.json(); })
            .then(function() {
                removeIframe();
                setSessionActive(false);
                stopBtn.disabled = false;
                launchBtn.disabled = false;
            })
            .catch(function() {
                stopBtn.disabled = false;
            });
    }

    launchBtn.addEventListener('click', launchTerminal);
    stopBtn.addEventListener('click', stopTerminal);

    checkStatus();
})();
</script>
{% endblock %}