new-api-analytics/app/detail/[...slug]/page.tsx

"use client";

import { useEffect, useState, useCallback, startTransition } from "react";
import { useParams } from "next/navigation";
import { motion } from "motion/react";
import { ArrowLeft, Hash, Zap, MessageSquare, DatabaseZap, BookOpen } from "lucide-react";
import Link from "next/link";
import { StatsCard } from "@/components/StatsCard";
import { TimeRangeSelector } from "@/components/TimeRangeSelector";
import { TrendChart } from "@/components/charts/TrendChart";
import { buildQuery, formatNumber, formatTokens } from "@/lib/utils";
import { useTimeRange } from "@/lib/time-range-context";
import { useI18n } from "@/lib/i18n";

interface DetailData {
  calls: number; prompt_tokens: number; completion_tokens: number;
  cache_creation_tokens: number; cache_read_tokens: number;
  total_tokens: number; quota: number; display_name?: string;
  models?: { name: string; calls: number; total_tokens: number; quota: number }[];
  users?: { name: string; calls: number; total_tokens: number; quota: number }[];
  channel_name?: string;
}

export default function DetailPage() {
  const { t } = useI18n();
  const params = useParams();
  const segments = Array.isArray(params.slug) ? params.slug : [];
  const type = segments[0] || "";
  const id = segments[1] || "";
  const decodedId = decodeURIComponent(id);

  const { getEffectiveRange } = useTimeRange();
  const [data, setData] = useState<DetailData | null>(null);
  const [trends, setTrends] = useState<{ date: string; calls: number; total_tokens: number; prompt_tokens: number; completion_tokens: number }[]>([]);
  const [loading, setLoading] = useState(true);

  const fetchData = useCallback(async () => {
    startTransition(() => setLoading(true));
    const { start, end } = getEffectiveRange();
    const tp = { start, end };
    const [detail, tr] = await Promise.all([
      fetch(buildQuery(`/api/detail/${type}/${encodeURIComponent(decodedId)}`, tp)).then(r => r.json()),
      fetch(buildQuery("/api/trends", { ...tp, granularity: "day",
        ...(type === "user" ? { username: decodedId } : {}),
        ...(type === "model" ? { model: decodedId } : {}),
        ...(type === "channel" ? { channel_id: decodedId } : {}),
      })).then(r => r.json()),
    ]);
    startTransition(() => { setData(detail); setTrends(tr); setLoading(false); });
  }, [type, decodedId, getEffectiveRange]);

  useEffect(() => { fetchData(); }, [fetchData]);

  const title = type === "channel" ? (data?.channel_name || decodedId) : (data?.display_name || decodedId);
  const typeLabel = { user: t("detail.user"), model: t("detail.model"), channel: t("detail.channel") }[type] || type;
  const breakdownItems = data?.models || data?.users || [];
  const breakdownLabel = data?.models ? t("detail.modelDist") : t("detail.userDist");

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }}>
          <Link href="/rankings" className="inline-flex items-center gap-1 text-xs transition-colors mb-2" style={{ color: "var(--text-muted)" }}>
            <ArrowLeft className="h-3 w-3" /> {t("common.backToRankings")}
          </Link>
          <div className="flex items-center gap-2">
            <span className="text-xs uppercase tracking-wider px-2 py-0.5 rounded" style={{ color: "var(--text-muted)", background: "var(--btn-active-bg)", border: "1px solid var(--surface-border)" }}>{typeLabel}</span>
            <h1 className="text-2xl font-bold" style={{ color: "var(--text-primary)" }}>{title}</h1>
          </div>
        </motion.div>
        <TimeRangeSelector />
      </div>

      {loading ? (
        <div className="flex h-64 items-center justify-center"><div className="h-6 w-6 animate-spin rounded-full spinner" /></div>
      ) : data ? (
        <>
          <div className="grid grid-cols-2 gap-4 md:grid-cols-5">
            <StatsCard title={t("dash.totalCalls")} value={data.calls} icon={Hash} delay={0} />
            <StatsCard title={t("th.totalToken")} value={data.total_tokens} format="tokens" icon={Zap} delay={0.05} />
            <StatsCard title={t("th.input")} value={data.prompt_tokens} format="tokens" icon={MessageSquare} delay={0.1} />
            <StatsCard title={t("th.cacheCreation")} value={data.cache_creation_tokens} format="tokens" icon={DatabaseZap} delay={0.15} />
            <StatsCard title={t("th.cacheRead")} value={data.cache_read_tokens} format="tokens" icon={BookOpen} delay={0.2} />
          </div>

          <motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.15 }} className="glass p-5">
            <h2 className="mb-4 text-sm font-semibold" style={{ color: "var(--text-primary)" }}>{t("detail.trend")}</h2>
            <TrendChart data={trends} />
          </motion.div>

          {breakdownItems.length > 0 && (
            <motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }} className="glass overflow-hidden">
              <h2 className="px-5 pt-5 text-xs font-medium uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{breakdownLabel}</h2>
              <table className="w-full text-sm mt-3">
                <thead>
                  <tr style={{ borderBottom: "1px solid var(--surface-border)" }}>
                    <th className="px-5 py-3 text-left text-xs font-medium uppercase tracking-wider" style={{ color: "var(--text-muted)" }}>{t("th.name")}</th>
                    <th className="px-5 py-3 text-right text-xs font-medium uppercase tracking-wider" style={{ color: "var(--text-muted)" }}>{t("th.calls")}</th>
                    <th className="px-5 py-3 text-right text-xs font-medium uppercase tracking-wider" style={{ color: "var(--text-muted)" }}>{t("th.totalToken")}</th>
                  </tr>
                </thead>
                <tbody>
                  {breakdownItems.map((item) => (
                    <tr key={item.name} className="row-glow transition-colors" style={{ borderBottom: "1px solid var(--surface-border)" }}>
                      <td className="px-5 py-3" style={{ color: "var(--text-accent)", opacity: 0.8 }}>{item.name}</td>
                      <td className="px-5 py-3 text-right tabular-nums font-[family-name:var(--font-geist-mono)] text-xs" style={{ color: "var(--text-secondary)" }}>{formatNumber(item.calls)}</td>
                      <td className="px-5 py-3 text-right tabular-nums font-[family-name:var(--font-geist-mono)]" style={{ color: "var(--text-primary)" }}>{formatTokens(item.total_tokens)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </motion.div>
          )}
        </>
      ) : null}
    </div>
  );
}