<script setup lang="ts">
import type { IndexingOverview } from '@/api/types'

defineProps<{ overview: IndexingOverview }>()

defineEmits<{ reindex: [installationId: number] }>()

function statusClass(status: string): string {
  const map: Record<string, string> = {
    running: 'bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-400',
    completed: 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-400',
    failed: 'bg-red-50 text-red-700 dark:bg-red-900/50 dark:text-red-400',
    pending: 'bg-yellow-50 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-400',
  }
  return map[status] || 'bg-gray-100 text-gray-600'
}
</script>

<template>
  <div>
    <!-- Active tasks -->
    <div v-if="overview.active_tasks.length > 0" class="mb-8">
      <h2 class="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-4">Active Tasks</h2>
      <div class="space-y-3">
        <div v-for="task in overview.active_tasks" :key="task.task_id" class="p-4 border border-border-light dark:border-slate-700 rounded-lg">
          <div class="flex items-center justify-between mb-2">
            <span class="font-medium text-slate-700 dark:text-slate-300">{{ task.org_login }}</span>
            <span class="text-xs px-2 py-0.5 rounded" :class="statusClass(task.status)">{{ task.status }}</span>
          </div>
          <div class="flex items-center gap-4 text-xs text-slate-500">
            <span>{{ task.repos_done }}/{{ task.repos_total }} repos</span>
            <span>{{ task.specs_indexed }} specs indexed</span>
            <span v-if="task.errors > 0" class="text-red-500">{{ task.errors }} errors</span>
          </div>
          <div v-if="task.repos_total > 0" class="mt-2">
            <div class="h-1.5 bg-gray-200 dark:bg-slate-700 rounded-full overflow-hidden">
              <div class="h-full bg-accent-500 rounded-full transition-all" :style="{ width: Math.round((task.repos_done / task.repos_total) * 100) + '%' }"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Installations -->
    <div class="mb-8">
      <h2 class="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-4">Installations</h2>
      <div class="overflow-x-auto">
        <table class="w-full text-sm">
          <thead>
            <tr class="border-b border-border-light dark:border-slate-700">
              <th class="text-left py-2 px-3 font-medium text-slate-600 dark:text-slate-400">Organization</th>
              <th class="text-left py-2 px-3 font-medium text-slate-600 dark:text-slate-400">Status</th>
              <th class="text-left py-2 px-3 font-medium text-slate-600 dark:text-slate-400">Repos</th>
              <th class="text-left py-2 px-3 font-medium text-slate-600 dark:text-slate-400">Last Indexed</th>
              <th class="text-left py-2 px-3"></th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100 dark:divide-slate-800">
            <tr v-for="inst in overview.installations" :key="inst.installation_id">
              <td class="py-2 px-3 text-slate-700 dark:text-slate-300">{{ inst.org_login }}</td>
              <td class="py-2 px-3"><span class="text-xs px-2 py-0.5 rounded" :class="statusClass(inst.status)">{{ inst.status }}</span></td>
              <td class="py-2 px-3 text-slate-500">{{ inst.repos_count }}</td>
              <td class="py-2 px-3 text-slate-500">{{ inst.last_indexed_at || 'Never' }}</td>
              <td class="py-2 px-3">
                <button
                  class="text-xs text-accent-500 hover:text-accent-400"
                  @click="$emit('reindex', inst.installation_id)"
                >
                  Re-index
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Recent jobs -->
    <div v-if="overview.recent_jobs.length > 0">
      <h2 class="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-4">Recent Jobs</h2>
      <div class="overflow-x-auto">
        <table class="w-full text-sm">
          <thead>
            <tr class="border-b border-border-light dark:border-slate-700">
              <th class="text-left py-2 px-3 font-medium text-slate-600 dark:text-slate-400">Repo</th>
              <th class="text-left py-2 px-3 font-medium text-slate-600 dark:text-slate-400">Status</th>
              <th class="text-left py-2 px-3 font-medium text-slate-600 dark:text-slate-400">Specs</th>
              <th class="text-left py-2 px-3 font-medium text-slate-600 dark:text-slate-400">Errors</th>
              <th class="text-left py-2 px-3 font-medium text-slate-600 dark:text-slate-400">Completed</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100 dark:divide-slate-800">
            <tr v-for="(job, i) in overview.recent_jobs" :key="i">
              <td class="py-2 px-3 text-slate-700 dark:text-slate-300">{{ job.repo }}</td>
              <td class="py-2 px-3"><span class="text-xs px-2 py-0.5 rounded" :class="statusClass(job.status)">{{ job.status }}</span></td>
              <td class="py-2 px-3 text-slate-500">{{ job.specs_indexed }}</td>
              <td class="py-2 px-3" :class="job.errors > 0 ? 'text-red-500' : 'text-slate-500'">{{ job.errors }}</td>
              <td class="py-2 px-3 text-slate-500">{{ job.completed_at }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
