{% extends "base.html" %}

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

{% block styles %}
<style>/* Styles in /static/styles.css */</style>
{% endblock %}

{% block header_actions %}
<button onclick="refreshCluster()" 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="w-64 sidebar flex flex-col flex-shrink-0 overflow-hidden">
    <!-- 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 bg-gray-600"></span>
        </div>

        <!-- Connection Form -->
        <div class="space-y-2 mb-3">
            <div class="flex gap-2">
                <input id="scheduler-host" type="text" value="localhost" placeholder="Host"
                    class="flex-1 bg-[#0d1117] border border-[#30363d] rounded px-2 py-1.5 text-sm focus:outline-none focus:border-indigo-500">
                <input id="scheduler-port" type="number" value="8814" placeholder="Port"
                    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 id="btn-connect" onclick="connectScheduler()" 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">
                    <i data-lucide="plug" class="w-3.5 h-3.5"></i>
                    Connect
                </button>
                <button id="btn-disconnect" onclick="disconnectScheduler()" 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 hidden">
                    <i data-lucide="unplug" class="w-3.5 h-3.5"></i>
                    Disconnect
                </button>
            </div>
        </div>

        <div id="scheduler-info" class="text-sm text-[#8b949e]">
            Not connected
        </div>
    </div>

    <!-- Workers List -->
    <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>
            <span id="workers-count" class="text-xs text-[#8b949e]">0/0</span>
        </div>
        <div id="workers-list" class="space-y-2">
            <div class="text-[#8b949e] text-sm py-2">No workers connected</div>
        </div>
    </div>

    <!-- Local Cluster - Quick Start -->
    <div class="p-3 border-t-2 border-indigo-500/50 bg-indigo-500/5">
        <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 id="local-status" class="text-xs text-[#8b949e]">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 id="local-workers" 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" selected>3 workers</option>
                <option value="4">4 workers</option>
            </select>
        </div>
        <div class="flex gap-2">
            <button id="btn-start-local" onclick="startLocalCluster()" 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">
                <i data-lucide="play" class="w-4 h-4"></i>
                Start Local Cluster
            </button>
            <button id="btn-stop-local" onclick="stopLocalCluster()" 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 hidden">
                <i data-lucide="square" class="w-4 h-4"></i>
                Stop
            </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>
</aside>

<!-- Main Panel - Jobs -->
<main class="flex-1 flex flex-col overflow-hidden">
    <!-- Stats Header -->
    <div class="px-4 py-3 border-b border-[#30363d] bg-[#161b22]">
        <div class="flex items-center gap-6">
            <div class="flex items-center gap-2">
                <div class="p-2 bg-[#238636]/20 rounded-lg">
                    <i data-lucide="server" class="w-5 h-5 text-[#3fb950]"></i>
                </div>
                <div>
                    <div id="stat-workers" class="text-xl font-bold">0</div>
                    <div class="text-xs text-[#8b949e]">Workers Online</div>
                </div>
            </div>
            <div class="w-px h-10 bg-[#30363d]"></div>
            <div class="flex items-center gap-2">
                <div class="p-2 bg-[#58a6ff]/20 rounded-lg">
                    <i data-lucide="activity" class="w-5 h-5 text-[#58a6ff]"></i>
                </div>
                <div>
                    <div id="stat-active" class="text-xl font-bold">0</div>
                    <div class="text-xs text-[#8b949e]">Active Jobs</div>
                </div>
            </div>
            <div class="w-px h-10 bg-[#30363d]"></div>
            <div class="flex items-center gap-2">
                <div class="p-2 bg-[#a371f7]/20 rounded-lg">
                    <i data-lucide="check-circle" class="w-5 h-5 text-[#a371f7]"></i>
                </div>
                <div>
                    <div id="stat-completed" class="text-xl font-bold">0</div>
                    <div class="text-xs text-[#8b949e]">Completed</div>
                </div>
            </div>
            <div class="w-px h-10 bg-[#30363d]"></div>
            <div class="flex items-center gap-2">
                <div class="p-2 bg-[#f0883e]/20 rounded-lg">
                    <i data-lucide="hard-drive" class="w-5 h-5 text-[#f0883e]"></i>
                </div>
                <div>
                    <div id="stat-bytes" class="text-xl font-bold">0 B</div>
                    <div class="text-xs text-[#8b949e]">Processed</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Submit Job -->
    <div class="px-4 py-3 border-b border-[#30363d]">
        <div class="flex gap-3">
            <input id="job-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 onclick="submitJob()" 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>
        </div>
    </div>

    <!-- Active Jobs -->
    <div class="flex-1 overflow-auto p-4">
        <div class="mb-4">
            <h3 class="text-sm font-semibold text-[#8b949e] uppercase tracking-wide mb-3">Active Jobs</h3>
            <div id="active-jobs" class="space-y-3">
                <div class="text-[#8b949e] text-sm">No active jobs</div>
            </div>
        </div>

        <div>
            <h3 class="text-sm font-semibold text-[#8b949e] uppercase tracking-wide mb-3">Job History</h3>
            <div id="job-history" class="space-y-2">
                <div class="text-[#8b949e] text-sm">No job history</div>
            </div>
        </div>
    </div>
</main>
{% endblock %}

{% block scripts %}
<script src="/static/cluster.js"></script>
{% endblock %}