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

const props = defineProps({
  license: Object,
  recent_requests: Array,
  daily_usage: Array,
});

const deactivateForm = useForm({ activation_id: null });

const deactivate = (activationId) => {
  if (!confirm('Are you sure you want to deactivate this domain?')) return;
  deactivateForm.activation_id = activationId;
  deactivateForm.post(`/storesight/dashboard/license/${props.license.id}/deactivate`);
};

const maxUsage = Math.max(...(props.daily_usage.map(d => d.count) || [1]), 1);
</script>

<template>
  <DashboardLayout>
    <Head title="License Details" />

    <div class="flex items-center space-x-3 mb-6">
      <Link :href="$url('/dashboard')" class="text-gray-400 hover:text-gray-600">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
      </Link>
      <h1 class="text-2xl font-bold text-gray-900">License Details</h1>
    </div>

    <!-- License Info -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
      <div class="grid md:grid-cols-2 gap-6">
        <div>
          <p class="text-sm text-gray-500">License Key</p>
          <p class="font-mono text-lg font-bold text-gray-900 mt-1">{{ license.license_key }}</p>
        </div>
        <div>
          <p class="text-sm text-gray-500">Status</p>
          <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 mt-1">{{ license.status }}</span>
        </div>
        <div>
          <p class="text-sm text-gray-500">Created</p>
          <p class="text-sm text-gray-900 mt-1">{{ license.created_at }}</p>
        </div>
        <div v-if="license.expires_at">
          <p class="text-sm text-gray-500">Expires</p>
          <p class="text-sm text-gray-900 mt-1">{{ license.expires_at }}</p>
        </div>
      </div>
    </div>

    <!-- Activations -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-6">
      <div class="px-6 py-4 border-b border-gray-100">
        <h2 class="text-lg font-semibold text-gray-900">Activated Sites</h2>
      </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">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">Last Seen</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="act in license.activations" :key="act.id">
              <td class="px-6 py-4 text-sm text-gray-900">{{ act.domain }}</td>
              <td class="px-6 py-4">
                <span :class="{
                  'bg-green-100 text-green-800': act.status === 'active',
                  'bg-gray-100 text-gray-600': act.status === 'inactive',
                  'bg-red-100 text-red-800': act.status === 'revoked',
                }" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize">{{ act.status }}</span>
              </td>
              <td class="px-6 py-4 text-sm text-gray-500">{{ act.activated_at || '—' }}</td>
              <td class="px-6 py-4 text-sm text-gray-500">{{ act.last_seen_at || '—' }}</td>
              <td class="px-6 py-4">
                <button v-if="act.status === 'active'" @click="deactivate(act.id)" class="text-sm text-red-500 hover:underline">Deactivate</button>
              </td>
            </tr>
            <tr v-if="!license.activations.length">
              <td colspan="5" class="px-6 py-8 text-center text-gray-400">No activations yet.</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Usage Chart -->
    <div v-if="daily_usage.length" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">AI Usage (Last 7 Days)</h2>
      <div class="flex items-end justify-between h-48 gap-3">
        <div v-for="day in daily_usage" :key="day.date" class="flex-1 flex flex-col items-center">
          <div class="w-full bg-primary/60 rounded-t transition-all" :style="{ height: (day.count / maxUsage * 100) + '%' }"></div>
          <span class="text-xs text-gray-400 mt-2">{{ day.date.slice(5) }}</span>
          <span class="text-xs text-gray-500 font-medium">{{ day.count }}</span>
        </div>
      </div>
    </div>

    <!-- Recent 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 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 class="min-w-0 flex-1 mr-4">
            <p class="text-sm text-gray-900 truncate">"{{ req.prompt }}"</p>
            <p class="text-xs text-gray-400">{{ req.request_type }} &middot; {{ req.tokens_used }} tokens &middot; {{ req.response_time_ms }}ms</p>
          </div>
          <span class="text-xs text-gray-400 whitespace-nowrap">{{ req.created_at }}</span>
        </div>
        <div v-if="!recent_requests.length" class="px-6 py-8 text-center text-gray-400">No requests yet.</div>
      </div>
    </div>
  </DashboardLayout>
</template>
