{% extends "base.html" %}

{% block title %}Tusk Cluster - Distributed Query Execution{% endblock %}

{% block header_actions %}
<button hx-get="/api/cluster/status"
        hx-target="#cluster-status"
        hx-swap="innerHTML"
        class="px-3 py-1.5 bg-[#21262d] hover:bg-[#30363d] rounded text-sm flex items-center gap-2">
    <i data-lucide="refresh-cw" class="w-4 h-4"></i>
    Refresh
</button>
{% endblock %}

{% block content %}
<!-- Left Sidebar - Cluster Config -->
<aside class="sidebar flex flex-col flex-shrink-0 overflow-hidden relative" x-data="resizableSidebar('cluster')" style="min-width: 180px; max-width: 480px;">
    <div @mousedown="startResize($event)" class="absolute top-0 right-0 w-1 h-full cursor-col-resize hover:bg-[#6366f1]/50 active:bg-[#6366f1] z-10 transition-colors"></div>
    <div class="flex flex-col flex-1 overflow-hidden" x-data="clusterSidebar()">
    <!-- Scheduler Connection -->
    <div class="p-3 border-b border-[#30363d]">
        <div class="flex items-center justify-between mb-3">
            <span class="text-xs font-semibold text-[#8b949e] uppercase tracking-wide">Scheduler</span>
            <span id="scheduler-status" class="w-2 h-2 rounded-full"
                  :class="schedulerOnline ? 'bg-green-500' : 'bg-gray-600'"></span>
        </div>

        <!-- Connection Form -->
        <div class="space-y-2 mb-3">
            <div class="flex gap-2">
                <input x-model="host" type="text" placeholder="Host"
                    :disabled="connected"
                    :class="connected && 'opacity-50'"
                    class="flex-1 bg-[#0d1117] border border-[#30363d] rounded px-2 py-1.5 text-sm focus:outline-none focus:border-indigo-500">
                <input x-model="port" type="number" placeholder="Port"
                    :disabled="connected"
                    :class="connected && 'opacity-50'"
                    class="w-20 bg-[#0d1117] border border-[#30363d] rounded px-2 py-1.5 text-sm focus:outline-none focus:border-indigo-500">
            </div>
            <div class="flex gap-2">
                <button x-show="!connected" @click="connect()"
                    :disabled="connecting"
                    class="flex-1 bg-[#238636] hover:bg-[#2ea043] px-3 py-1.5 rounded text-sm font-medium flex items-center justify-center gap-1.5">
                    <template x-if="connecting">
                        <i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i>
                    </template>
                    <template x-if="!connecting">
                        <i data-lucide="plug" class="w-3.5 h-3.5"></i>
                    </template>
                    <span x-text="connecting ? 'Connecting...' : 'Connect'"></span>
                </button>
                <button x-show="connected" @click="disconnect()"
                    x-cloak
                    class="flex-1 bg-[#da3633] hover:bg-[#f85149] px-3 py-1.5 rounded text-sm font-medium flex items-center justify-center gap-1.5">
                    <i data-lucide="unplug" class="w-3.5 h-3.5"></i>
                    Disconnect
                </button>
            </div>
        </div>

        <div class="text-sm text-[#8b949e]" x-text="schedulerInfo">
            Not connected
        </div>
    </div>

    <!-- Workers List (HTMX polling) -->
    <div class="flex-1 p-3 overflow-auto">
        <div class="flex items-center justify-between mb-3">
            <span class="text-xs font-semibold text-[#8b949e] uppercase tracking-wide">Workers</span>
        </div>
        <div id="cluster-workers" class="space-y-2"
             hx-get="/api/cluster/workers"
             hx-trigger="load, every 5s"
             hx-swap="innerHTML">
            <div class="text-[#8b949e] text-sm py-2">Loading...</div>
        </div>
    </div>

    <!-- Local Cluster - Quick Start -->
    <div class="p-3 border-t-2 border-indigo-500/50 bg-indigo-500/5"
         x-data="localCluster()">
        <div class="flex items-center justify-between mb-3">
            <span class="text-xs font-semibold text-indigo-400 uppercase tracking-wide flex items-center gap-1.5">
                <i data-lucide="zap" class="w-3.5 h-3.5"></i>
                Quick Start
            </span>
            <span class="text-xs" :class="running ? 'text-green-400' : 'text-[#8b949e]'" x-text="statusText">Stopped</span>
        </div>
        <p class="text-xs text-[#8b949e] mb-3">Start a local cluster for testing</p>
        <div class="flex gap-2 mb-3">
            <select x-model="workers" :disabled="running" :class="running && 'opacity-50'"
                class="flex-1 bg-[#0d1117] border border-[#30363d] rounded px-2 py-1.5 text-sm">
                <option value="1">1 worker</option>
                <option value="2">2 workers</option>
                <option value="3">3 workers</option>
                <option value="4">4 workers</option>
            </select>
        </div>
        <div class="flex gap-2">
            <button x-show="!running" @click="start()"
                :disabled="starting"
                class="flex-1 bg-[#238636] hover:bg-[#2ea043] px-3 py-2 rounded text-sm font-medium flex items-center justify-center gap-1.5">
                <template x-if="starting">
                    <i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i>
                </template>
                <template x-if="!starting">
                    <i data-lucide="play" class="w-4 h-4"></i>
                </template>
                <span x-text="starting ? 'Starting...' : 'Start Local Cluster'"></span>
            </button>
            <button x-show="running" @click="stop()"
                x-cloak
                :disabled="stopping"
                class="flex-1 bg-[#da3633] hover:bg-[#f85149] px-3 py-2 rounded text-sm font-medium flex items-center justify-center gap-1.5">
                <template x-if="stopping">
                    <i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i>
                </template>
                <template x-if="!stopping">
                    <i data-lucide="square" class="w-4 h-4"></i>
                </template>
                <span x-text="stopping ? 'Stopping...' : 'Stop'"></span>
            </button>
        </div>
    </div>

    <!-- CLI Reference -->
    <div class="p-3 border-t border-[#30363d]">
        <div class="text-xs text-[#8b949e] mb-2">
            <strong>CLI Commands:</strong>
        </div>
        <div class="space-y-1 text-xs font-mono text-[#8b949e]">
            <div><code class="bg-[#0d1117] px-1 rounded">tusk cluster</code></div>
        </div>
    </div>
    </div>
</aside>

<!-- Main Panel - Jobs -->
<main class="flex-1 flex flex-col overflow-hidden">
    <!-- Stats Header (HTMX polling) -->
    <div class="px-4 py-3 border-b border-[#30363d] bg-[#161b22]">
        <div id="cluster-status"
             hx-get="/api/cluster/status"
             hx-trigger="load, every 5s"
             hx-swap="innerHTML">
            <div class="text-[#8b949e] text-sm">Loading cluster status...</div>
        </div>
    </div>

    <!-- Submit Job -->
    <div class="px-4 py-3 border-b border-[#30363d]">
        <form hx-post="/api/cluster/jobs"
              hx-target="#cluster-jobs"
              hx-swap="innerHTML"
              @htmx:after-request.camel="if ($event.detail.successful) { $el.reset() }"
              class="flex gap-3">
            <input name="sql" placeholder="Enter SQL query to execute on cluster..." class="flex-1 bg-[#0d1117] border border-[#30363d] rounded-lg px-4 py-2 text-sm font-mono focus:outline-none focus:border-indigo-500">
            <button type="submit" class="bg-[#238636] hover:bg-[#2ea043] px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2">
                <i data-lucide="send" class="w-4 h-4"></i>
                Submit Job
            </button>
        </form>
    </div>

    <!-- Jobs (HTMX polling) -->
    <div class="flex-1 overflow-auto p-4">
        <div id="cluster-jobs"
             hx-get="/api/cluster/jobs"
             hx-trigger="load, every 3s"
             hx-swap="innerHTML">
            <div class="text-[#8b949e] text-sm">Loading jobs...</div>
        </div>
    </div>
</main>
{% endblock %}

{% block scripts %}
<script>
    function clusterSidebar() {
        return {
            host: 'localhost',
            port: 8814,
            connected: false,
            connecting: false,
            schedulerOnline: false,
            schedulerInfo: 'Not connected',

            async init() {
                try {
                    const [configRes, localRes] = await Promise.all([
                        fetch('/api/cluster/config'),
                        fetch('/api/cluster/local/status')
                    ]);
                    const config = await configRes.json();
                    this.host = config.scheduler_host || 'localhost';
                    this.port = config.scheduler_port || 8814;
                    this.connected = config.connected;
                    if (config.connected) {
                        this.schedulerOnline = true;
                        this.schedulerInfo = `Connected to ${this.host}:${this.port}`;
                    }
                } catch (e) {
                    console.error('Failed to load config:', e);
                }
            },

            async connect() {
                this.connecting = true;
                try {
                    const res = await fetch('/api/cluster/connect', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ host: this.host, port: this.port })
                    });
                    const data = await res.json();
                    if (data.connected) {
                        this.connected = true;
                        this.schedulerOnline = true;
                        this.schedulerInfo = `Connected to ${data.address}`;
                    } else {
                        this.schedulerInfo = data.error || 'Connection failed';
                    }
                } catch (e) {
                    this.schedulerInfo = 'Error: ' + e.message;
                } finally {
                    this.connecting = false;
                    this.$nextTick(() => lucide.createIcons());
                }
            },

            async disconnect() {
                try {
                    await fetch('/api/cluster/disconnect', { method: 'POST' });
                    this.connected = false;
                    this.schedulerOnline = false;
                    this.schedulerInfo = 'Not connected';
                } catch (e) {
                    console.error('Failed to disconnect:', e);
                }
            }
        };
    }

    function localCluster() {
        return {
            running: false,
            starting: false,
            stopping: false,
            workers: '3',
            statusText: 'Stopped',

            async init() {
                try {
                    const res = await fetch('/api/cluster/local/status');
                    const data = await res.json();
                    this.running = data.running;
                    this.statusText = data.running ? `Running (PID: ${data.pid})` : 'Stopped';
                } catch (e) {
                    console.error('Failed to load local status:', e);
                }
            },

            async start() {
                this.starting = true;
                try {
                    const res = await fetch('/api/cluster/local/start', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ workers: parseInt(this.workers) })
                    });
                    const data = await res.json();
                    if (data.started) {
                        this.running = true;
                        this.statusText = `Running (PID: ${data.pid})`;
                    } else {
                        tuskToast('Error: ' + (data.error || 'Failed to start'), 'error');
                    }
                } catch (e) {
                    tuskToast('Error: ' + e.message, 'error');
                } finally {
                    this.starting = false;
                    this.$nextTick(() => lucide.createIcons());
                }
            },

            async stop() {
                this.stopping = true;
                try {
                    const res = await fetch('/api/cluster/local/stop', { method: 'POST' });
                    const data = await res.json();
                    if (data.stopped) {
                        this.running = false;
                        this.statusText = 'Stopped';
                    } else {
                        tuskToast('Error: ' + (data.error || 'Failed to stop'), 'error');
                    }
                } catch (e) {
                    tuskToast('Error: ' + e.message, 'error');
                } finally {
                    this.stopping = false;
                    this.$nextTick(() => lucide.createIcons());
                }
            }
        };
    }
</script>
{% endblock %}