'use client';

import { useState } from 'react';
import Link from 'next/link';
import { useTranslation } from '@/hooks/useTranslation';
import { RichMetadataCharts } from './_components/RichMetadataCharts';
import { DailyTrendChart } from './_components/DailyTrendChart';
import { DailyUserHeatmap } from './_components/DailyUserHeatmap';
import { useAdminSummary, useAdminBreakdown } from './_lib/hooks';
import { fmtTokens as formatTokens } from './_lib/format';

const PERIODS = ['today', 'week', 'month', 'year', 'last7d', 'last30d', 'last60d', 'last90d'] as const;
const BY_TABS = ['user', 'project', 'tool', 'model'] as const;

export default function AiUsageOverviewPage() {
  const { t } = useTranslation();
  const tt = t.aiUsage;
  const [period, setPeriod] = useState<(typeof PERIODS)[number]>('month');
  const [by, setBy] = useState<(typeof BY_TABS)[number]>('user');

  const { data: summary } = useAdminSummary(period);
  const { data: breakdownResp, isFetching } = useAdminBreakdown({ period, by, page: 1, pageSize: 20 });
  const breakdown = breakdownResp?.items ?? [];
  // 仅首次拉取时显示 loading；cached 数据切 by 时立即出现，后台静默刷
  const loading = isFetching && breakdown.length === 0;

  return (
    <div className="p-6 max-w-7xl mx-auto">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-semibold">{tt.nav.title}</h1>
        <div className="flex gap-2">
          <Link href="/ai-usage/sessions" className="text-sm text-blue-600 hover:underline">
            Sessions
          </Link>
          <ExportRichCsvButton period={period} />
          <Link href="/ai-usage/devices" className="text-sm text-blue-600 hover:underline">
            {tt.nav.devices}
          </Link>
          <Link href="/ai-usage/tokens" className="text-sm text-blue-600 hover:underline">
            {tt.nav.tokens}
          </Link>
          <Link href="/ai-usage/dlq" className="text-sm text-blue-600 hover:underline">
            {tt.nav.dlq}
          </Link>
          <Link href="/ai-usage/me" className="text-sm text-blue-600 hover:underline">
            {tt.nav.me}
          </Link>
        </div>
      </div>

      <div className="mb-4 flex gap-2 items-center">
        <span className="text-sm text-gray-500">{tt.filter.periodLabel}:</span>
        {PERIODS.map((p) => (
          <button
            key={p}
            onClick={() => setPeriod(p)}
            className={`px-3 py-1 text-sm rounded ${
              period === p ? 'bg-blue-600 text-white' : 'bg-gray-100 hover:bg-gray-200'
            }`}
          >
            {tt.period[p]}
          </button>
        ))}
      </div>

      {loading && <div className="text-gray-500 text-sm">{t.common?.loading ?? 'Loading…'}</div>}

      {!loading && summary && (
        <>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
            <KpiCard label={tt.kpi.totalCost} value={`$${summary.totalCostUsd}`} />
            <KpiCard label={tt.kpi.totalTokens} value={formatTokens(summary.totalTokens)} />
            <KpiCard label={tt.kpi.activeUsers} value={summary.activeUsers.toString()} />
            <KpiCard label={tt.kpi.activeProjects} value={summary.activeProjects.toString()} />
            <KpiCard label={tt.kpi.activeDevices} value={summary.activeDevices.toString()} />
          </div>

          <DailyTrendChart period={period} scope="admin" />

          <DailyUserHeatmap period={period} />

          <RichMetadataCharts period={period} />

          <div className="bg-white rounded shadow p-4">
            <div className="flex gap-2 mb-4 border-b">
              {BY_TABS.map((tab) => (
                <button
                  key={tab}
                  onClick={() => setBy(tab)}
                  className={`px-4 py-2 text-sm border-b-2 ${
                    by === tab ? 'border-blue-600 text-blue-600 font-medium' : 'border-transparent text-gray-600'
                  }`}
                >
                  {tt.breakdown.tab[tab]}
                </button>
              ))}
            </div>
            <table className="w-full text-sm">
              <thead className="text-gray-500 border-b">
                <tr>
                  <th className="py-2 text-left">{tt.breakdown.column.name}</th>
                  <th className="py-2 text-right">{tt.breakdown.column.tokens}</th>
                  <th className="py-2 text-right">{tt.breakdown.column.cost}</th>
                  <th className="py-2 text-right">{tt.breakdown.column.share}</th>
                </tr>
              </thead>
              <tbody>
                {breakdown.length === 0 && (
                  <tr>
                    <td colSpan={4} className="py-8 text-center text-gray-400">
                      {tt.empty.inviteToInstall}
                    </td>
                  </tr>
                )}
                {breakdown.map((row) => {
                  const drillUrl =
                    by === 'user'
                      ? `/ai-usage/sessions?userId=${encodeURIComponent(row.key)}`
                      : by === 'project'
                        ? `/ai-usage/sessions?project=${encodeURIComponent(row.key)}`
                        : null;
                  const KeyCell = drillUrl ? (
                    <Link href={drillUrl} className="text-blue-600 hover:underline font-mono text-xs">
                      {row.key}
                    </Link>
                  ) : (
                    <span className="font-mono text-xs">{row.key}</span>
                  );
                  return (
                    <tr key={row.key} className="border-b hover:bg-gray-50">
                      <td className="py-2">{KeyCell}</td>
                      <td className="py-2 text-right">{formatTokens(row.tokens)}</td>
                      <td className="py-2 text-right">${row.costUsd}</td>
                      <td className="py-2 text-right">{(row.share * 100).toFixed(1)}%</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </>
      )}
    </div>
  );
}

function ExportRichCsvButton({ period }: { period: string }) {
  const base = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001/api/v1';
  const url = `${base}/ai-usage/export?withRich=1&period=${encodeURIComponent(period)}`;
  return (
    <a
      href={url}
      className="text-sm text-blue-600 hover:underline"
      title="导出含富 metadata 的详细 event CSV（admin only）"
    >
      导出 CSV
    </a>
  );
}

function KpiCard({ label, value }: { label: string; value: string }) {
  return (
    <div className="bg-white rounded shadow p-4">
      <div className="text-xs text-gray-500 mb-1">{label}</div>
      <div className="text-2xl font-semibold">{value}</div>
    </div>
  );
}