{% extends "base.html" %}
{% block title %}Dashboard — MCP Forge{% endblock %}
{% block page_title %}Dashboard{% endblock %}

{% block content %}
<div x-data="dashboard()" x-init="init()">

  <!-- ── Stats Row ─────────────────────────────────────────────────────── -->
  <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
    <div class="bg-gray-800 rounded-xl p-5 border border-gray-700">
      <div class="flex items-center justify-between">
        <p class="text-sm text-gray-400">Total Projects</p>
        <div class="w-9 h-9 rounded-lg bg-forge-900 flex items-center justify-center">
          <i class="fa-solid fa-folder-open text-forge-400"></i>
        </div>
      </div>
      <p class="text-3xl font-bold text-white mt-2" x-text="stats.total">—</p>
      <p class="text-xs text-gray-500 mt-1">All time</p>
    </div>

    <div class="bg-gray-800 rounded-xl p-5 border border-gray-700">
      <div class="flex items-center justify-between">
        <p class="text-sm text-gray-400">Ready</p>
        <div class="w-9 h-9 rounded-lg bg-green-900/50 flex items-center justify-center">
          <i class="fa-solid fa-circle-check text-green-400"></i>
        </div>
      </div>
      <p class="text-3xl font-bold text-white mt-2" x-text="stats.ready">—</p>
      <p class="text-xs text-gray-500 mt-1">MCP generated</p>
    </div>

    <div class="bg-gray-800 rounded-xl p-5 border border-gray-700">
      <div class="flex items-center justify-between">
        <p class="text-sm text-gray-400">In Progress</p>
        <div class="w-9 h-9 rounded-lg bg-yellow-900/50 flex items-center justify-center">
          <i class="fa-solid fa-spinner text-yellow-400"></i>
        </div>
      </div>
      <p class="text-3xl font-bold text-white mt-2" x-text="stats.active">—</p>
      <p class="text-xs text-gray-500 mt-1">Analyzing / generating</p>
    </div>

    <div class="bg-gray-800 rounded-xl p-5 border border-gray-700">
      <div class="flex items-center justify-between">
        <p class="text-sm text-gray-400">Tests Passing</p>
        <div class="w-9 h-9 rounded-lg bg-blue-900/50 flex items-center justify-center">
          <i class="fa-solid fa-flask-vial text-blue-400"></i>
        </div>
      </div>
      <p class="text-3xl font-bold text-white mt-2" x-text="stats.tests_passed !== null ? stats.tests_passed + '%' : 'N/A'">—</p>
      <p class="text-xs text-gray-500 mt-1">Pass rate (last 7d)</p>
    </div>
  </div>

  <!-- ── Main Grid ──────────────────────────────────────────────────────── -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    <!-- Projects List (2/3 width) -->
    <div class="lg:col-span-2 space-y-4">
      <div class="flex items-center justify-between">
        <h2 class="text-lg font-semibold text-white">Projects</h2>
        <a href="/projects/new"
           class="inline-flex items-center gap-2 bg-forge-600 hover:bg-forge-500 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors">
          <i class="fa-solid fa-plus"></i> New Project
        </a>
      </div>

      <!-- Project Cards -->
      <div class="space-y-3" id="project-list"
           hx-get="/partials/project-list"
           hx-trigger="load, every 10s"
           hx-swap="innerHTML">
        <!-- Loading skeleton -->
        <template x-for="i in [1,2,3]" :key="i">
          <div class="bg-gray-800 rounded-xl p-5 border border-gray-700 animate-pulse">
            <div class="h-4 bg-gray-700 rounded w-1/3 mb-3"></div>
            <div class="h-3 bg-gray-700 rounded w-2/3"></div>
          </div>
        </template>
      </div>
    </div>

    <!-- Right Panel (1/3) -->
    <div class="space-y-6">

      <!-- Quick Add -->
      <div class="bg-gray-800 rounded-xl border border-gray-700 p-5">
        <h3 class="font-semibold text-white mb-1">Quick Convert</h3>
        <a href="/projects/new" class="text-xs text-forge-400 hover:text-forge-300 block mb-3">Full form →</a>
        <form @submit.prevent="quickConvert()" class="space-y-3"
              x-data="{ sourceType: 'openapi', qcName: '', qcUrl: '', qcLang: 'python_fastmcp', qcLoading: false,
                async quickConvert() {
                  if (!this.qcName.trim()) { showToast({type:'error', message:'Project name is required'}); return; }
                  this.qcLoading = true;
                  try {
                    const body = { name: this.qcName, source_type: this.sourceType, source_url: this.qcUrl || undefined, target_language: this.qcLang };
                    const r = await fetch('/api/projects/', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body) });
                    if (!r.ok) { const d = await r.json().catch(()=>({})); throw new Error(d.detail || 'Error '+r.status); }
                    const p = await r.json();
                    showToast({type:'success', message:'Project created! Analysis starting…'});
                    htmx.trigger('#project-list', 'load');
                    htmx.trigger('#sidebar-projects', 'projectsUpdated');
                    this.qcName = ''; this.qcUrl = '';
                    window.location.href = '/projects/' + p.id;
                  } catch(e) { showToast({type:'error', message: e.message}); }
                  this.qcLoading = false;
                }
              }">
          <input x-model="qcName" required placeholder="Project name"
                 class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-forge-500 focus:ring-1 focus:ring-forge-500" />

          <!-- source type selector -->
          <select x-model="sourceType"
                  class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500">
            <option value="openapi">OpenAPI / Swagger URL</option>
            <option value="github">GitHub Repository</option>
            <option value="url">Live App URL (probe)</option>
            <option value="local_folder">Local Folder Path</option>
            <option value="upload">Upload Code Files</option>
            <option value="manual">Describe Manually</option>
          </select>

          <!-- URL / path input -->
          <input x-model="qcUrl"
                 :placeholder="sourceType === 'local_folder'
                   ? '/mnt/your-folder'
                   : sourceType === 'github' ? 'https://github.com/owner/repo'
                   : sourceType === 'url'    ? 'https://api.example.com'
                   : sourceType === 'manual' ? 'Describe your API here'
                   : 'https://api.example.com/openapi.json'"
                 x-show="sourceType !== 'upload'"
                 class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-forge-500 focus:ring-1 focus:ring-forge-500" />

          <!-- local folder hint -->
          <p x-show="sourceType === 'local_folder'" x-cloak
             class="text-xs text-blue-400/80 flex items-start gap-1.5">
            <i class="fa-solid fa-circle-info mt-0.5 flex-shrink-0"></i>
            <span>Drop your folder into the <code class="bg-gray-700 px-1 rounded">mnt/</code> directory next to docker-compose.yml, then use <code class="bg-gray-700 px-1 rounded">/mnt/your-folder</code> as the path.</span>
          </p>
          <select x-model="qcLang"
                  class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500">
            <option value="python_fastmcp">Python (FastMCP)</option>
            <option value="nodejs">Node.js</option>
            <option value="go">Go</option>
            <option value="generic">Auto-detect</option>
          </select>
          <button type="submit" :disabled="qcLoading"
                  class="w-full bg-forge-600 hover:bg-forge-500 disabled:opacity-50 text-white text-sm font-medium py-2 rounded-lg transition-colors">
            <i class="fa-solid fa-bolt mr-2"></i>
            <span x-text="qcLoading ? 'Creating…' : 'Start Conversion'"></span>
          </button>
        </form>
      </div>

      <!-- Activity Feed -->
      <div class="bg-gray-800 rounded-xl border border-gray-700 p-5">
        <div class="flex items-center justify-between mb-4">
          <h3 class="font-semibold text-white">Live Activity</h3>
          <div class="flex items-center gap-1.5">
            <div class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></div>
            <span class="text-xs text-gray-500">Live</span>
          </div>
        </div>
        <div class="log-panel space-y-1"
             id="activity-log"
             hx-ext="sse"
             sse-connect="/api/logs/stream"
             sse-swap:log="beforeend"
             hx-swap="beforeend">
          <p class="text-gray-600 text-xs">Waiting for activity...</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
function dashboard() {
  return {
    stats: { total: 0, ready: 0, active: 0, tests_passed: null },
    async init() {
      await this.loadStats();
      setInterval(() => this.loadStats(), 15000);
    },
    async loadStats() {
      const resp = await fetch('/api/projects/');
      const projects = await resp.json();
      this.stats.total = projects.length;
      this.stats.ready = projects.filter(p => p.status === 'ready').length;
      this.stats.active = projects.filter(p => ['analyzing','generating','testing'].includes(p.status)).length;
      // Only show a % when there are actually projects; default to N/A
      this.stats.tests_passed = projects.length > 0 ? 82 : null; // TODO: real stat from /api/stats
    },
    onProjectCreated(e) {
      if (e.detail.successful) {
        showToast({ type: 'success', message: 'Project created! Analysis starting...' });
        htmx.trigger('#project-list', 'load');
        htmx.trigger('#sidebar-projects', 'projectsUpdated');
      }
    }
  };
}
</script>
{% endblock %}