import { currentCalendarMonthRange, getAiUsageForTenant } from '@/lib/ai-usage'
import { getI18nForUserId } from '@/lib/i18n/server'
import { requireAdminUser } from '@/lib/role-guard'

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

function formatTokens(value: number) {
  return new Intl.NumberFormat('en-US').format(value)
}

export default async function AdminAiUsagePage({
  searchParams,
}: {
  searchParams?: Promise<{ from?: string; to?: string }>
}) {
  const admin = await requireAdminUser()
  const i18n = await getI18nForUserId(admin.id)
  const t = i18n.t
  const params = await searchParams
  const defaults = currentCalendarMonthRange()
  const from = params?.from ? new Date(params.from) : defaults.from
  const to = params?.to ? new Date(params.to) : defaults.to
  const range = Number.isNaN(from.getTime()) || Number.isNaN(to.getTime()) ? defaults : { from, to }
  const usage = await getAiUsageForTenant(admin.tenantId, range)

  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-5xl space-y-6">
        <div className="flex flex-wrap items-end justify-between gap-3">
          <div>
            <h1 className="text-2xl font-semibold text-zinc-950 dark:text-white">{t('aiUsage.title')}</h1>
            <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
              {t('aiUsage.intro')}
            </p>
          </div>
          <form className="flex flex-wrap items-end gap-2">
            <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">
              {t('aiUsage.from')}
              <input
                name="from"
                type="date"
                defaultValue={range.from.toISOString().slice(0, 10)}
                className="mt-1 block rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-950 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
              />
            </label>
            <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">
              {t('aiUsage.to')}
              <input
                name="to"
                type="date"
                defaultValue={range.to.toISOString().slice(0, 10)}
                className="mt-1 block rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-950 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
              />
            </label>
            <button className="rounded-md bg-zinc-950 px-3 py-2 text-sm font-medium text-white dark:bg-white dark:text-zinc-950">
              {t('aiUsage.refresh')}
            </button>
          </form>
        </div>

        <section className="grid gap-3 sm:grid-cols-4">
          <Metric label={t('aiUsage.totalCalls')} value={usage.summary.totalCalls.toString()} />
          <Metric label={t('aiUsage.successRate')} value={formatPercent(usage.summary.successRate)} />
          <Metric label={t('aiUsage.totalTokens')} value={formatTokens(usage.summary.totalTokens)} />
          <Metric label={t('aiUsage.estimatedCost')} value={`$${usage.summary.estimatedCostUsd}`} />
        </section>

        <section>
          <h2 className="mb-3 text-sm font-semibold text-zinc-950 dark:text-white">{t('aiUsage.perAgentBreakdown')}</h2>
          <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">{t('aiUsage.agent')}</th>
                  <th className="px-4 py-3">{t('aiUsage.calls')}</th>
                  <th className="px-4 py-3">{t('aiUsage.success')}</th>
                  <th className="px-4 py-3">{t('aiUsage.p50Latency')}</th>
                  <th className="px-4 py-3">{t('aiUsage.p95Latency')}</th>
                  <th className="px-4 py-3">{t('aiUsage.cost')}</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
                {usage.byAgent.map((row) => (
                  <tr key={row.agentName}>
                    <td className="px-4 py-3 font-medium">{row.agentName}</td>
                    <td className="px-4 py-3">{row.calls}</td>
                    <td className="px-4 py-3">{formatPercent(row.successRate)}</td>
                    <td className="px-4 py-3">{row.p50LatencyMs}ms</td>
                    <td className="px-4 py-3">{row.p95LatencyMs}ms</td>
                    <td className="px-4 py-3">${row.estimatedCostUsd}</td>
                  </tr>
                ))}
                {usage.byAgent.length === 0 && (
                  <tr>
                    <td className="px-4 py-6 text-zinc-500" colSpan={6}>
                      {t('aiUsage.noCallsFound')}
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </section>

        <section>
          <h2 className="mb-3 text-sm font-semibold text-zinc-950 dark:text-white">{t('aiUsage.recentErrors')}</h2>
          <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">{t('aiUsage.time')}</th>
                  <th className="px-4 py-3">{t('aiUsage.agent')}</th>
                  <th className="px-4 py-3">{t('aiUsage.code')}</th>
                  <th className="px-4 py-3">{t('aiUsage.message')}</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
                {usage.errorLog.map((row) => (
                  <tr key={`${row.createdAt}-${row.agentName}`}>
                    <td className="px-4 py-3">{new Date(row.createdAt).toLocaleString('en-US')}</td>
                    <td className="px-4 py-3">{row.agentName}</td>
                    <td className="px-4 py-3">{row.errorCode ?? 'unknown'}</td>
                    <td className="px-4 py-3">{row.errorMessage ?? 'No error message'}</td>
                  </tr>
                ))}
                {usage.errorLog.length === 0 && (
                  <tr>
                    <td className="px-4 py-6 text-zinc-500" colSpan={4}>
                      {t('aiUsage.noErrorsFound')}
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </main>
  )
}

function Metric({ label, value }: { label: string; value: 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>
  )
}