import { getPlatformHealthMetrics } from '@/lib/platform-health'
import { getI18nForUserId } from '@/lib/i18n/server'
import { requireAdminUser } from '@/lib/role-guard'

function formatPercent(value: number) {
  return `${Math.round(value * 100)}%`
}

function formatNumber(value: number) {
  return new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 }).format(value)
}

export default async function PlatformHealthPage() {
  const admin = await requireAdminUser()
  const i18n = await getI18nForUserId(admin.id)
  const t = i18n.t
  const metrics = await getPlatformHealthMetrics(admin.tenantId)

  return (
    <main className="min-h-screen bg-zinc-50 px-4 py-10 text-zinc-950 dark:bg-zinc-950 dark:text-zinc-100">
      <div className="mx-auto max-w-6xl space-y-8">
        <div>
          <h1 className="text-2xl font-semibold text-zinc-950 dark:text-white">{t('platformHealth.title')}</h1>
          <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
            {t('platformHealth.intro')}
          </p>
        </div>

        <section className="space-y-3">
          <h2 className="text-sm font-semibold text-zinc-950 dark:text-white">{t('platformHealth.adoption')}</h2>
          <div className="grid gap-3 md:grid-cols-4">
            <Metric label={t('platformHealth.activeThisWeek')} value={metrics.adoption.activeThisWeek.total.toString()} detail={roleDetail(metrics.adoption.activeThisWeek.byRole)} />
            <Metric label={t('platformHealth.activeThisMonth')} value={metrics.adoption.activeThisMonth.total.toString()} detail={roleDetail(metrics.adoption.activeThisMonth.byRole)} />
            <Metric label={t('platformHealth.activationRate')} value={formatPercent(metrics.adoption.activationRate)} detail={t('platformHealth.activationRateDetail')} />
            <Metric
              label={t('platformHealth.ticketsPerActiveLm')}
              value={formatNumber(metrics.adoption.ticketsPerActiveLineManagerPerWeek.at(-1)?.value ?? 0)}
              detail={t('platformHealth.ticketsPerActiveLmDetail')}
            />
          </div>
          <TrendTable rows={metrics.adoption.weeklySubmissions} weekLabel={t('platformHealth.week')} submissionsLabel={t('platformHealth.submissions')} />
        </section>

        <section className="space-y-3">
          <h2 className="text-sm font-semibold text-zinc-950 dark:text-white">{t('platformHealth.ticketFlowHealth')}</h2>
          <div className="grid gap-3 md:grid-cols-4">
            <Metric label={t('platformHealth.orphanedTickets')} value={metrics.ticketFlow.orphanedTickets.toString()} detail={t('platformHealth.orphanedTicketsDetail')} />
            <Metric label={t('platformHealth.medianFirstAction')} value={`${formatNumber(metrics.ticketFlow.medianHoursToFirstExpertAction)}h`} detail={t('platformHealth.medianFirstActionDetail')} />
            <Metric label={t('platformHealth.followUpRate')} value={formatPercent(metrics.ticketFlow.followUpRate)} detail={t('platformHealth.followUpRateDetail')} />
            <Metric label={t('platformHealth.closedWithoutClarification')} value={formatPercent(metrics.ticketFlow.resolvedWithoutExternalChannelsRate)} detail={t('platformHealth.closedWithoutClarificationDetail')} />
          </div>
          <p className="text-xs text-zinc-500 dark:text-zinc-400">
            {t('platformHealth.closedWithoutClarificationNote')}
          </p>
        </section>

        <section className="space-y-3">
          <h2 className="text-sm font-semibold text-zinc-950 dark:text-white">{t('platformHealth.draftQuality')}</h2>
          <div className="grid gap-3 md:grid-cols-3">
            <Metric label={t('platformHealth.draftSendThrough')} value={formatPercent(metrics.draftQuality.sendThroughRate)} detail={t('platformHealth.draftSendThroughDetail')} />
            <Metric label={t('platformHealth.draftEditRate')} value={formatPercent(metrics.draftQuality.editRate)} detail={t('platformHealth.draftEditRateDetail')} />
            <Metric label={t('platformHealth.draftRegeneration')} value={formatPercent(metrics.draftQuality.regenerationRate)} detail={t('platformHealth.draftRegenerationDetail')} />
          </div>
        </section>

        <section className="space-y-3">
          <h2 className="text-sm font-semibold text-zinc-950 dark:text-white">{t('platformHealth.kbHealth')}</h2>
          <div className="grid gap-3 md:grid-cols-4">
            <Metric label={t('platformHealth.activeKbEntriesMetric')} value={metrics.kbHealth.totalActiveEntries.toString()} detail={t('platformHealth.activeKbEntriesMetricDetail')} />
            <Metric label={t('platformHealth.usedInDrafts')} value={metrics.kbHealth.entriesUsedInAtLeastOneDraft.toString()} detail={t('platformHealth.usedInDraftsDetail')} />
            <Metric label={t('platformHealth.neverRetrieved')} value={metrics.kbHealth.entriesNeverRetrieved.toString()} detail={t('platformHealth.neverRetrievedDetail')} />
            <Metric label={t('platformHealth.contributingEntries')} value={metrics.kbHealth.entriesContributingToSentResponses.toString()} detail={t('platformHealth.contributingEntriesDetail')} />
          </div>
        </section>
      </div>
    </main>
  )
}

function roleDetail(counts: { line_manager: number; expert: number; admin: number }) {
  return `${counts.line_manager} LM / ${counts.expert} expert / ${counts.admin} admin`
}

function Metric({ label, value, detail }: { label: string; value: string; detail: string }) {
  return (
    <div className="rounded-md border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
      <div className="text-xs font-medium uppercase tracking-wide text-zinc-500">{label}</div>
      <div className="mt-2 text-2xl font-semibold text-zinc-950 dark:text-white">{value}</div>
      <div className="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{detail}</div>
    </div>
  )
}

function TrendTable({ rows, weekLabel, submissionsLabel }: { rows: Array<{ weekStart: string; tickets: number }>; weekLabel: string; submissionsLabel: string }) {
  return (
    <div className="overflow-x-auto rounded-md border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900">
      <table className="min-w-full divide-y divide-zinc-200 text-sm dark:divide-zinc-800">
        <thead className="bg-zinc-50 text-left text-xs uppercase tracking-wide text-zinc-500 dark:bg-zinc-900/60">
          <tr>
            <th className="px-4 py-3">{weekLabel}</th>
            <th className="px-4 py-3">{submissionsLabel}</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
          {rows.map((row) => (
            <tr key={row.weekStart}>
              <td className="px-4 py-3">{new Date(row.weekStart).toLocaleDateString('en-US')}</td>
              <td className="px-4 py-3">{row.tickets}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}