{% 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="btn btn-sm">
    <i data-lucide="refresh-cw"></i>
    Refresh
</button>
{% endblock %}

{% block content %}
<div class="studio-shell w-full">
    <aside class="r-sidebar relative" x-data="resizableSidebar('cluster')">
        <div class="resize-handle" @mousedown="startResize($event)"></div>
        <div x-data="clusterSidebar()" style="display:flex;flex-direction:column;flex:1;overflow:hidden">

            <div class="side-section">
                <div class="side-label" style="display:flex;justify-content:space-between;align-items:center">
                    <span>Scheduler</span>
                    <span class="dot" :class="schedulerOnline ? 'green' : 'gray'"></span>
                </div>
                <div style="padding:0 8px;display:flex;flex-direction:column;gap:6px;margin-top:4px">
                    <div style="display:flex;gap:6px">
                        <input x-model="host" type="text" placeholder="Host"
                               :disabled="connected" style="flex:1">
                        <input x-model="port" type="number" placeholder="Port"
                               :disabled="connected" style="width:84px">
                    </div>
                    <button x-show="!connected" @click="connect()" :disabled="connecting"
                            class="btn btn-sm" style="background:var(--green);color:#fff;border-color:var(--green);justify-content:center">
                        <template x-if="connecting"><i data-lucide="loader-2" class="animate-spin"></i></template>
                        <template x-if="!connecting"><i data-lucide="plug"></i></template>
                        <span x-text="connecting ? 'Connecting…' : 'Connect'"></span>
                    </button>
                    <button x-show="connected" @click="disconnect()" x-cloak
                            class="btn btn-sm" style="background:var(--red);color:#fff;border-color:var(--red);justify-content:center">
                        <i data-lucide="unplug"></i>Disconnect
                    </button>
                    <div style="font-size:12px;color:var(--fg-3)" x-text="schedulerInfo">Not connected</div>
                </div>
            </div>

            <div class="side-section" style="flex:1;overflow:auto;min-height:0">
                <div class="side-label"><span>Workers</span></div>
                <div id="cluster-workers" style="padding:0 4px"
                     hx-get="/api/cluster/workers" hx-trigger="load, every 5s" hx-swap="innerHTML">
                    <div class="side-empty">Loading…</div>
                </div>
            </div>

            <div class="side-section" x-data="localCluster()"
                 style="border-top:2px solid var(--brand-tint);background:var(--brand-soft)">
                <div class="side-label" style="display:flex;justify-content:space-between;align-items:center">
                    <span style="color:var(--brand);display:flex;align-items:center;gap:6px"><i data-lucide="zap" style="width:11px;height:11px"></i>Quick start</span>
                    <span style="font-size:11px" :style="running ? 'color:var(--green)' : 'color:var(--fg-3)'" x-text="statusText">Stopped</span>
                </div>
                <div style="padding:0 8px;display:flex;flex-direction:column;gap:8px;margin-top:6px">
                    <p style="font-size:11.5px;color:var(--fg-3)">Start a local cluster for testing</p>
                    <select x-model="workers" :disabled="running">
                        <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>
                    <button x-show="!running" @click="start()" :disabled="starting"
                            class="btn btn-sm" style="background:var(--green);color:#fff;border-color:var(--green);justify-content:center">
                        <template x-if="starting"><i data-lucide="loader-2" class="animate-spin"></i></template>
                        <template x-if="!starting"><i data-lucide="play"></i></template>
                        <span x-text="starting ? 'Starting…' : 'Start local cluster'"></span>
                    </button>
                    <button x-show="running" @click="stop()" x-cloak :disabled="stopping"
                            class="btn btn-sm" style="background:var(--red);color:#fff;border-color:var(--red);justify-content:center">
                        <template x-if="stopping"><i data-lucide="loader-2" class="animate-spin"></i></template>
                        <template x-if="!stopping"><i data-lucide="square"></i></template>
                        <span x-text="stopping ? 'Stopping…' : 'Stop'"></span>
                    </button>
                </div>
            </div>

            <div class="side-section" style="border-top:1px solid var(--border)">
                <div class="side-label"><span>CLI</span></div>
                <div style="padding:0 10px;font-size:11.5px;color:var(--fg-3)">
                    <code style="background:var(--surface-2);padding:2px 6px;border-radius:4px">tusk cluster</code>
                </div>
            </div>
        </div>
    </aside>

    <main class="dash-page" style="flex:1;overflow:auto">
        <!-- Cluster status bar -->
        <div id="cluster-status"
             hx-get="/api/cluster/status" hx-trigger="load, every 5s" hx-swap="innerHTML"
             style="margin-bottom:18px">
            <div style="color:var(--fg-3);font-size:13px">Loading cluster status…</div>
        </div>

        <!-- Submit job -->
        <div class="card" style="padding:14px;margin-bottom:18px">
            <form hx-post="/api/cluster/jobs"
                  hx-target="#cluster-jobs" hx-swap="innerHTML"
                  @htmx:after-request.camel="if ($event.detail.successful) { $el.reset() }"
                  style="display:flex;gap:10px;align-items:center">
                <input name="sql" placeholder="Enter SQL query to execute on cluster…"
                       style="flex:1;font-family:var(--font-mono)">
                <button type="submit" class="btn btn-primary"><i data-lucide="send"></i>Submit job</button>
            </form>
        </div>

        <!-- Jobs -->
        <div id="cluster-jobs"
             hx-get="/api/cluster/jobs" hx-trigger="load, every 3s" hx-swap="innerHTML">
            <div style="color:var(--fg-3);font-size:13px">Loading jobs…</div>
        </div>
    </main>
</div>
{% 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 %}