<script setup>
import { Head, Link } from '@inertiajs/vue3';
import DashboardLayout from '@/Layouts/DashboardLayout.vue';

const props = defineProps({
  stats: Object,
  licenses: Array,
  recent_requests: Array,
});
</script>

<template>
  <DashboardLayout>
    <Head title="Dashboard" />
    <h1 class="text-2xl font-bold text-gray-900 mb-6">Dashboard</h1>

    <!-- Stats -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
      <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-200">
        <p class="text-sm text-gray-500">Total Licenses</p>
        <p class="text-3xl font-bold text-gray-900 mt-1">{{ stats.total_licenses }}</p>
      </div>
      <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-200">
        <p class="text-sm text-gray-500">Active Sites</p>
        <p class="text-3xl font-bold text-green-600 mt-1">{{ stats.active_sites }}</p>
      </div>
      <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-200">
        <p class="text-sm text-gray-500">AI Requests Today</p>
        <p class="text-3xl font-bold text-primary mt-1">{{ stats.ai_requests_today }}</p>
      </div>
      <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-200">
        <p class="text-sm text-gray-500">Account Status</p>
        <p class="text-lg font-bold mt-1" :class="stats.account_status === 'Active' ? 'text-green-600' : 'text-gray-500'">{{ stats.account_status }}</p>
      </div>
    </div>

    <!-- Licenses Table -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-8">
      <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
        <h2 class="text-lg font-semibold text-gray-900">Your Licenses</h2>
        <Link href="/storesight/dashboard/license/generate-test" method="post" as="button" class="text-sm bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition">Generate Test License</Link>
      </div>
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead class="bg-gray-50">
            <tr>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">License Key</th>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Domain</th>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Status</th>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Activated</th>
              <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3"></th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100">
            <tr v-for="license in licenses" :key="license.id">
              <td class="px-6 py-4 font-mono text-sm text-gray-900">{{ license.license_key }}</td>
              <td class="px-6 py-4 text-sm" :class="license.domain ? 'text-gray-600' : 'text-gray-400'">{{ license.domain || '—' }}</td>
              <td class="px-6 py-4">
                <span :class="{
                  'bg-green-100 text-green-800': license.status === 'active',
                  'bg-gray-100 text-gray-600': license.status === 'inactive',
                  'bg-red-100 text-red-800': license.status === 'revoked',
                }" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize">{{ license.status }}</span>
              </td>
              <td class="px-6 py-4 text-sm text-gray-500">{{ license.activated_at || '—' }}</td>
              <td class="px-6 py-4">
                <Link :href="$url(`/dashboard/license/${license.id}`)" class="text-sm text-primary hover:underline">View</Link>
              </td>
            </tr>
            <tr v-if="!licenses.length">
              <td colspan="5" class="px-6 py-8 text-center text-gray-400">No licenses yet. Purchase one to get started.</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Recent AI Requests -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
      <div class="px-6 py-4 border-b border-gray-100">
        <h2 class="text-lg font-semibold text-gray-900">Recent AI Requests</h2>
      </div>
      <div class="divide-y divide-gray-100">
        <div v-for="req in recent_requests" :key="req.id" class="px-6 py-4 flex items-center justify-between">
          <div>
            <p class="text-sm font-medium text-gray-900">{{ req.domain }}</p>
            <p class="text-xs text-gray-500 mt-0.5">"{{ req.prompt }}"</p>
          </div>
          <div class="text-right">
            <p class="text-xs text-gray-400">{{ req.created_at }}</p>
            <p class="text-xs text-gray-400">{{ req.tokens_used }} tokens</p>
          </div>
        </div>
        <div v-if="!recent_requests.length" class="px-6 py-8 text-center text-gray-400">No AI requests yet.</div>
      </div>
    </div>
  </DashboardLayout>
</template>
