<script setup lang="ts">
import { ref } from 'vue'

const active = ref<'dashboard' | 'spec' | 'search'>('dashboard')

const tabs = [
  { id: 'dashboard' as const, label: 'Dashboard' },
  { id: 'spec' as const, label: 'Spec Detail' },
  { id: 'search' as const, label: 'Search' },
]

const repos = [
  { name: 'payments-service', specs: 4, coverage: 78, status: 'in_progress' },
  { name: 'auth-platform', specs: 2, coverage: 100, status: 'done' },
  { name: 'notification-hub', specs: 3, coverage: 45, status: 'in_progress' },
  { name: 'analytics-pipeline', specs: 1, coverage: 0, status: 'todo' },
]

const specSections = [
  {
    id: '3.1',
    title: 'User Authentication',
    status: 'done',
    acs: [
      { text: 'OAuth2 flow with PKCE', done: true },
      { text: 'Session tokens expire after 24h', done: true },
      { text: 'Refresh token rotation', done: true },
    ],
  },
  {
    id: '3.2',
    title: 'Retry Logic',
    status: 'in_progress',
    acs: [
      { text: 'Exponential backoff with jitter', done: true },
      { text: 'Max 3 retries per request', done: false },
      { text: 'Preserve idempotency key', done: false },
    ],
  },
  {
    id: '3.3',
    title: 'Rate Limiting',
    status: 'todo',
    acs: [
      { text: 'Token bucket algorithm', done: false },
      { text: '100 req/min per API key', done: false },
      { text: '429 response with Retry-After header', done: false },
    ],
  },
]

const searchResults = [
  { title: 'Retry Logic', spec: 'payments-overhaul.md', section: '§3.2', status: 'in_progress', snippet: 'Exponential backoff with jitter, max 3 retries...' },
  { title: 'Error Handling', spec: 'api-standards.md', section: '§2.4', status: 'done', snippet: 'All endpoints return structured error responses with retry hints...' },
  { title: 'Circuit Breaker', spec: 'resilience-patterns.md', section: '§1.1', status: 'todo', snippet: 'Implement circuit breaker for downstream service calls...' },
]

function statusColor(status: string) {
  switch (status) {
    case 'done': return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400'
    case 'in_progress': return 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400'
    case 'todo': return 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400'
    default: return 'bg-surface-light-elevated text-gray-600 dark:bg-gray-800 dark:text-gray-400'
  }
}

function statusLabel(status: string) {
  return status.replace('_', ' ')
}
</script>

<template>
  <section class="max-w-6xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
    <p class="font-mono text-xs uppercase tracking-[0.15em] text-accent-500 text-center mb-3">The platform</p>
    <h2 class="font-display font-bold text-2xl sm:text-3xl text-slate-900 dark:text-white text-center mb-3">
      Your org's specs at a glance
    </h2>
    <p class="text-base text-slate-500 text-center max-w-xl mx-auto mb-10">
      The Spec Explorer gives real-time visibility into spec coverage and documentation health across every repo.
    </p>

    <!-- Tab buttons -->
    <div class="flex justify-center gap-2 mb-6">
      <button
        v-for="tab in tabs"
        :key="tab.id"
        class="px-4 sm:px-6 py-2 rounded-lg text-sm font-medium transition-all"
        :class="active === tab.id
          ? 'text-white bg-gradient-to-r from-accent-500 to-cyan-400'
          : 'text-slate-500 bg-surface-light-elevated dark:bg-surface-elevated border border-border-light dark:border-slate-800 hover:border-slate-400 dark:hover:border-slate-600'"
        @click="active = tab.id"
      >
        {{ tab.label }}
      </button>
    </div>

    <!-- Browser frame -->
    <div class="max-w-4xl mx-auto rounded-xl border border-border-light dark:border-slate-800 overflow-hidden bg-surface-light dark:bg-surface shadow-sm">
      <!-- Chrome bar -->
      <div class="flex items-center gap-2 px-4 py-2.5 bg-surface-light-alt dark:bg-surface-alt border-b border-border-light dark:border-slate-800">
        <span class="w-2.5 h-2.5 rounded-full bg-border-light dark:bg-slate-700"></span>
        <span class="w-2.5 h-2.5 rounded-full bg-border-light dark:bg-slate-700"></span>
        <span class="w-2.5 h-2.5 rounded-full bg-border-light dark:bg-slate-700"></span>
        <span class="flex-1 ml-3 text-xs font-mono text-slate-400 bg-surface-light dark:bg-surface px-3 py-1 rounded border border-border-light dark:border-slate-800">
          specwright.gernerventures.com/app/acme/{{ active === 'search' ? 'search?q=retry' : active === 'spec' ? 'specs/acme/payments-service/docs/specs/payments-overhaul.md' : '' }}
        </span>
      </div>

      <!-- Inner app chrome -->
      <div class="border-b border-border-light dark:border-slate-800">
        <div class="flex items-center justify-between px-4 sm:px-6 h-10">
          <div class="flex items-center gap-3">
            <span class="text-sm font-bold font-display gradient-text">Specwright</span>
            <span class="text-[10px] font-mono text-slate-400 uppercase tracking-wider hidden sm:inline">Explorer</span>
          </div>
          <div class="flex items-center gap-3 text-xs text-slate-400">
            <span class="hidden sm:inline">Tasks</span>
            <span class="hidden sm:inline">Editor</span>
            <span class="w-5 h-5 rounded-full bg-border-light dark:bg-slate-700"></span>
          </div>
        </div>
      </div>

      <!-- === DASHBOARD VIEW === -->
      <div v-if="active === 'dashboard'" class="p-4 sm:p-6 min-h-[320px]">
        <!-- Stats row -->
        <div class="grid grid-cols-4 gap-3 mb-5">
          <div class="text-center">
            <p class="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">4</p>
            <p class="text-[10px] text-slate-400 uppercase">Repos</p>
          </div>
          <div class="text-center">
            <p class="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">10</p>
            <p class="text-[10px] text-slate-400 uppercase">Specs</p>
          </div>
          <div class="text-center">
            <p class="text-lg sm:text-xl font-bold text-slate-900 dark:text-white">34</p>
            <p class="text-[10px] text-slate-400 uppercase">Sections</p>
          </div>
          <div class="text-center">
            <p class="text-lg sm:text-xl font-bold gradient-text font-bold">68%</p>
            <p class="text-[10px] text-slate-400 uppercase">Coverage</p>
          </div>
        </div>

        <!-- Repo cards -->
        <div class="space-y-2.5">
          <div
            v-for="repo in repos"
            :key="repo.name"
            class="flex items-center gap-3 p-3 rounded-lg bg-surface-light-alt dark:bg-surface-alt border border-border-light/60 dark:border-slate-800"
          >
            <div class="flex-1 min-w-0">
              <div class="flex items-center gap-2">
                <p class="text-sm font-semibold text-slate-900 dark:text-white truncate">acme/{{ repo.name }}</p>
                <span class="px-1.5 py-0.5 rounded-full text-[10px] font-medium" :class="statusColor(repo.status)">
                  {{ statusLabel(repo.status) }}
                </span>
              </div>
              <p class="text-xs text-slate-400 mt-0.5">{{ repo.specs }} specs</p>
            </div>
            <div class="w-20 sm:w-28 shrink-0">
              <div class="flex items-center gap-2">
                <div class="flex-1 h-1.5 rounded-full bg-border-light dark:bg-slate-700 overflow-hidden">
                  <div
                    class="h-full rounded-full"
                    :class="repo.coverage === 100 ? 'bg-emerald-500' : 'bg-accent-500'"
                    :style="{ width: repo.coverage + '%' }"
                  ></div>
                </div>
                <span class="text-xs font-mono text-slate-500 w-8 text-right">{{ repo.coverage }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- === SPEC DETAIL VIEW === -->
      <div v-else-if="active === 'spec'" class="p-4 sm:p-6 min-h-[320px]">
        <!-- Spec header -->
        <div class="mb-5">
          <div class="flex items-center gap-2 text-xs text-slate-400 mb-1">
            <span>acme/payments-service</span>
            <span>/</span>
            <span>docs/specs/payments-overhaul.md</span>
          </div>
          <h3 class="text-lg font-display font-bold text-slate-900 dark:text-white">Payments Overhaul</h3>
          <div class="flex items-center gap-3 mt-1.5">
            <span class="px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400">in progress</span>
            <span class="text-xs text-slate-400">owner: <span class="text-slate-600 dark:text-slate-300">@eng-lead</span></span>
            <span class="text-xs text-slate-400">team: <span class="text-slate-600 dark:text-slate-300">payments</span></span>
          </div>
        </div>

        <!-- Sections -->
        <div class="space-y-3">
          <div
            v-for="section in specSections"
            :key="section.id"
            class="rounded-lg border border-border-light/60 dark:border-slate-800 overflow-hidden"
          >
            <div class="flex items-center justify-between px-3 py-2 bg-surface-light-alt dark:bg-surface-alt">
              <div class="flex items-center gap-2">
                <span class="text-xs font-mono text-slate-400">&sect;{{ section.id }}</span>
                <span class="text-sm font-semibold text-slate-900 dark:text-white">{{ section.title }}</span>
              </div>
              <span class="px-1.5 py-0.5 rounded-full text-[10px] font-medium" :class="statusColor(section.status)">
                {{ statusLabel(section.status) }}
              </span>
            </div>
            <div class="px-3 py-2 space-y-1">
              <div
                v-for="ac in section.acs"
                :key="ac.text"
                class="flex items-center gap-2 text-xs"
              >
                <span v-if="ac.done" class="text-emerald-500">&#10003;</span>
                <span v-else class="text-slate-300 dark:text-slate-600">&#9744;</span>
                <span :class="ac.done ? 'text-slate-500 line-through' : 'text-slate-600 dark:text-slate-400'">{{ ac.text }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- === SEARCH VIEW === -->
      <div v-else class="p-4 sm:p-6 min-h-[320px]">
        <!-- Search bar -->
        <div class="flex gap-2 mb-4">
          <div class="flex-1 flex items-center gap-2 px-3 py-2 rounded-lg bg-surface-light-alt dark:bg-surface-alt border border-border-light dark:border-slate-800">
            <svg class="w-4 h-4 text-slate-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
            </svg>
            <span class="text-sm text-slate-900 dark:text-white">retry</span>
          </div>
        </div>

        <!-- Facet pills -->
        <div class="flex flex-wrap gap-1.5 mb-4">
          <span class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400">status: all</span>
          <span class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-surface-light-elevated text-gray-600 dark:bg-gray-800 dark:text-gray-400">team: payments</span>
          <span class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-surface-light-elevated text-gray-600 dark:bg-gray-800 dark:text-gray-400">3 results</span>
        </div>

        <!-- Results -->
        <div class="space-y-2.5">
          <div
            v-for="result in searchResults"
            :key="result.title"
            class="p-3 rounded-lg bg-surface-light-alt dark:bg-surface-alt border border-border-light/60 dark:border-slate-800"
          >
            <div class="flex items-center gap-2 mb-1">
              <span class="text-sm font-semibold text-slate-900 dark:text-white">{{ result.title }}</span>
              <span class="px-1.5 py-0.5 rounded-full text-[10px] font-medium" :class="statusColor(result.status)">
                {{ statusLabel(result.status) }}
              </span>
            </div>
            <div class="flex items-center gap-1.5 text-xs text-slate-400 mb-1.5">
              <span class="font-mono text-accent-500">{{ result.section }}</span>
              <span>in</span>
              <span class="font-mono">{{ result.spec }}</span>
            </div>
            <p class="text-xs text-slate-500 leading-relaxed">{{ result.snippet }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
