<script setup>
import { onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useAlertQualityStore } from '@/stores/alertQuality'
import { alertTypeLabel } from '@/api/normalize'
import Card from '@/components/ui/Card.vue'
import Badge from '@/components/ui/Badge.vue'
import Button from '@/components/ui/Button.vue'
import Skeleton from '@/components/ui/Skeleton.vue'
import AlertQualityChart from '@/components/charts/AlertQualityChart.vue'

const store = useAlertQualityStore()
const { summaryStats, byAlertType, snapshots, loading, error, periodDays } = storeToRefs(store)

const periodOptions = [
  { label: '7 days', value: 7 },
  { label: '14 days', value: 14 },
  { label: '30 days', value: 30 },
]

onMounted(() => store.loadDashboard())

function changePeriod(days) {
  store.setPeriodDays(days)
  store.loadDashboard()
}
</script>

<template>
  <div class="w-full min-w-0 space-y-8">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h1 class="text-xl font-bold dark:text-white">Alert Quality Analytics</h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
          Clinician feedback and acknowledgement metrics from the last {{ periodDays }} days.
        </p>
      </div>
      <div class="flex flex-wrap gap-2">
        <Button
          v-for="opt in periodOptions"
          :key="opt.value"
          size="sm"
          :variant="periodDays === opt.value ? 'primary' : 'secondary'"
          @click="changePeriod(opt.value)"
        >
          {{ opt.label }}
        </Button>
        <Button variant="secondary" size="sm" :disabled="loading" @click="store.loadDashboard()">
          Refresh
        </Button>
      </div>
    </div>

    <p v-if="error" class="text-sm text-red-600 dark:text-red-400">{{ error }}</p>

    <!-- KPI cards -->
    <div v-if="loading" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      <Skeleton v-for="n in 4" :key="n" class="h-24" />
    </div>
    <div v-else class="grid w-full min-w-0 grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      <Card>
        <div class="text-center">
          <div class="text-3xl font-bold dark:text-white">{{ summaryStats.totalAlerts }}</div>
          <div class="text-sm text-gray-500 dark:text-gray-400">Total Alerts</div>
        </div>
      </Card>
      <Card>
        <div class="text-center">
          <div class="text-3xl font-bold text-green-600">{{ summaryStats.usefulRate }}%</div>
          <div class="text-sm text-gray-500 dark:text-gray-400">Useful Rate</div>
        </div>
      </Card>
      <Card>
        <div class="text-center">
          <div class="text-3xl font-bold text-red-600">{{ summaryStats.falsePositiveRate }}%</div>
          <div class="text-sm text-gray-500 dark:text-gray-400">False Positive Rate</div>
        </div>
      </Card>
      <Card>
        <div class="text-center">
          <div class="text-3xl font-bold text-blue-600">{{ summaryStats.acknowledgementRate }}%</div>
          <div class="text-sm text-gray-500 dark:text-gray-400">Acknowledgement Rate</div>
        </div>
      </Card>
    </div>

    <!-- Secondary KPIs -->
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
      <Card>
        <div class="text-center">
          <div class="text-2xl font-bold dark:text-white">{{ summaryStats.totalFeedback }}</div>
          <div class="text-sm text-gray-500 dark:text-gray-400">Feedback Submissions</div>
        </div>
      </Card>
      <Card>
        <div class="text-center">
          <div class="text-2xl font-bold dark:text-white">{{ summaryStats.avgAckMinutes }} min</div>
          <div class="text-sm text-gray-500 dark:text-gray-400">Avg Time to Acknowledge</div>
        </div>
      </Card>
      <Card>
        <div class="text-center">
          <div class="text-2xl font-bold dark:text-white">{{ summaryStats.avgResolveMinutes }} min</div>
          <div class="text-sm text-gray-500 dark:text-gray-400">Avg Time to Resolve</div>
        </div>
      </Card>
    </div>

    <!-- Charts -->
    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
      <AlertQualityChart
        :snapshots="snapshots"
        metric="usefulRate"
        title="Useful Rate by Alert Type"
      />
      <AlertQualityChart
        :snapshots="snapshots"
        metric="falsePositiveRate"
        title="False Positive Rate by Alert Type"
      />
    </div>

    <!-- Per alert type table -->
    <Card>
      <h2 class="mb-4 text-lg font-semibold dark:text-white">By Alert Type</h2>
      <div class="divide-y divide-gray-200 dark:divide-gray-700">
        <div
          v-for="(rows, alertType) in byAlertType"
          :key="alertType"
          class="flex flex-col gap-2 py-4 sm:flex-row sm:items-center sm:justify-between"
        >
          <div>
            <span class="text-sm font-medium dark:text-white">{{ alertTypeLabel(alertType) }}</span>
            <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">
              ({{ rows.reduce((s, r) => s + r.totalAlerts, 0) }} alerts)
            </span>
          </div>
          <div class="flex flex-wrap gap-2">
            <Badge variant="success" size="xs">
              {{ Math.round(rows.at(-1)?.usefulRate * 100 ?? 0) }}% useful
            </Badge>
            <Badge variant="critical" size="xs">
              {{ Math.round(rows.at(-1)?.falsePositiveRate * 100 ?? 0) }}% FP
            </Badge>
            <Badge variant="info" size="xs">
              {{ Math.round(rows.at(-1)?.acknowledgementRate * 100 ?? 0) }}% ack
            </Badge>
          </div>
        </div>
        <p v-if="!Object.keys(byAlertType).length" class="py-4 text-sm text-gray-400">
          No aggregated metrics yet. Metrics appear after the hourly aggregation cycle runs.
        </p>
      </div>
    </Card>
  </div>
</template>