"use client";

import { useState, useMemo } from "react";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  DollarSign,
  TrendingUp,
  AlertTriangle,
  CheckCircle,
  Loader2,
  RefreshCw,
} from "lucide-react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  Legend,
} from "recharts";
import { useApi } from "@/lib/hooks/use-api";

type TimeRange = "7d" | "30d" | "month";

const TIME_RANGE_LABELS: Record<TimeRange, string> = {
  "7d": "最近7天",
  "30d": "最近30天",
  month: "本月",
};

const PIE_COLORS = [
  "#3b82f6",
  "#8b5cf6",
  "#ec4899",
  "#f59e0b",
  "#10b981",
  "#6366f1",
  "#ef4444",
  "#14b8a6",
  "#f97316",
];

interface QuotaData {
  used: number;
  limit: number;
  percentage: number;
  status: "normal" | "warning" | "exceeded";
}

interface TrendItem {
  date: string;
  cost: number;
}

interface EngineUsageItem {
  engine: string;
  label: string;
  queries: number;
  inputTokens: number;
  outputTokens: number;
  cost: number;
}

interface UsageData {
  quota: QuotaData;
  trends: TrendItem[];
  engineDistribution: { engine: string; label: string; cost: number }[];
  engineUsage: EngineUsageItem[];
}

const MOCK_USAGE_DATA: UsageData = {
  quota: { used: 45.6, limit: 100, percentage: 45.6, status: "normal" },
  trends: [
    { date: "05-19", cost: 5.2 },
    { date: "05-20", cost: 6.8 },
    { date: "05-21", cost: 4.5 },
    { date: "05-22", cost: 7.3 },
    { date: "05-23", cost: 8.1 },
    { date: "05-24", cost: 6.9 },
    { date: "05-25", cost: 7.0 },
  ],
  engineDistribution: [
    { engine: "deepseek", label: "DeepSeek", cost: 15.2 },
    { engine: "chatgpt", label: "ChatGPT", cost: 12.8 },
    { engine: "qwen", label: "通义千问", cost: 8.5 },
    { engine: "gemini", label: "Google Gemini", cost: 5.3 },
    { engine: "kimi", label: "Kimi", cost: 3.8 },
  ],
  engineUsage: [
    { engine: "deepseek", label: "DeepSeek", queries: 1250, inputTokens: 3200000, outputTokens: 1800000, cost: 15.2 },
    { engine: "chatgpt", label: "ChatGPT", queries: 890, inputTokens: 2100000, outputTokens: 1500000, cost: 12.8 },
    { engine: "qwen", label: "通义千问", queries: 720, inputTokens: 1800000, outputTokens: 900000, cost: 8.5 },
    { engine: "gemini", label: "Google Gemini", queries: 450, inputTokens: 1100000, outputTokens: 600000, cost: 5.3 },
    { engine: "kimi", label: "Kimi", queries: 320, inputTokens: 800000, outputTokens: 400000, cost: 3.8 },
    { engine: "wenxin", label: "文心一言", queries: 280, inputTokens: 700000, outputTokens: 350000, cost: 0.02 },
    { engine: "doubao", label: "豆包", queries: 210, inputTokens: 520000, outputTokens: 280000, cost: 0.5 },
    { engine: "yuanbao", label: "腾讯元宝", queries: 150, inputTokens: 380000, outputTokens: 200000, cost: 0.7 },
    { engine: "perplexity", label: "Perplexity", queries: 30, inputTokens: 75000, outputTokens: 40000, cost: 2.6 },
  ],
};

function formatTokenCount(count: number): string {
  if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`;
  if (count >= 1000) return `${(count / 1000).toFixed(0)}K`;
  return String(count);
}

function formatCurrency(value: number): string {
  return `¥${value.toFixed(2)}`;
}

function CircularProgress({ percentage, size = 120, strokeWidth = 10 }: { percentage: number; size?: number; strokeWidth?: number }) {
  const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference - (percentage / 100) * circumference;

  const color =
    percentage >= 90 ? "#ef4444" : percentage >= 70 ? "#f59e0b" : "#10b981";

  return (
    <div className="relative inline-flex items-center justify-center">
      <svg width={size} height={size} className="-rotate-90">
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke="currentColor"
          strokeWidth={strokeWidth}
          className="text-muted/30"
        />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke={color}
          strokeWidth={strokeWidth}
          strokeDasharray={circumference}
          strokeDashoffset={offset}
          strokeLinecap="round"
          className="transition-all duration-500"
        />
      </svg>
      <div className="absolute flex flex-col items-center">
        <span className="text-2xl font-bold" style={{ color }}>
          {percentage.toFixed(1)}%
        </span>
        <span className="text-xs text-muted-foreground">已使用</span>
      </div>
    </div>
  );
}

function QuotaStatusBadge({ status }: { status: "normal" | "warning" | "exceeded" }) {
  const config = {
    normal: { label: "正常", className: "bg-emerald-100 text-emerald-700 hover:bg-emerald-100", icon: CheckCircle },
    warning: { label: "预警", className: "bg-amber-100 text-amber-700 hover:bg-amber-100", icon: AlertTriangle },
    exceeded: { label: "超限", className: "bg-red-100 text-red-700 hover:bg-red-100", icon: AlertTriangle },
  };
  const c = config[status];
  const Icon = c.icon;
  return (
    <Badge className={c.className}>
      <Icon className="mr-1 h-3 w-3" />
      {c.label}
    </Badge>
  );
}

export default function UsagePage() {
  const [timeRange, setTimeRange] = useState<TimeRange>("7d");

  const { data: usageData, isLoading, refresh } = useApi<UsageData>(
    `/api/v1/usage/summary?period=${timeRange === "7d" ? "week" : timeRange === "30d" ? "month" : "month"}`
  );

  const data = usageData || MOCK_USAGE_DATA;

  const totalCost = useMemo(() => {
    return data.engineUsage.reduce((sum, item) => sum + item.cost, 0);
  }, [data.engineUsage]);

  const totalQueries = useMemo(() => {
    return data.engineUsage.reduce((sum, item) => sum + item.queries, 0);
  }, [data.engineUsage]);

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">用量统计</h1>
          <p className="text-muted-foreground">监控AI引擎调用成本和配额使用情况</p>
        </div>
        <div className="flex items-center gap-2">
          {(["7d", "30d", "month"] as TimeRange[]).map((range) => (
            <Button
              key={range}
              variant={timeRange === range ? "default" : "outline"}
              size="sm"
              onClick={() => setTimeRange(range)}
            >
              {TIME_RANGE_LABELS[range]}
            </Button>
          ))}
          <Button variant="outline" size="sm" onClick={refresh} disabled={isLoading}>
            <RefreshCw className={`mr-1 h-3 w-3 ${isLoading ? "animate-spin" : ""}`} />
            刷新
          </Button>
        </div>
      </div>

      {isLoading ? (
        <div className="flex flex-col items-center justify-center py-12">
          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
          <p className="mt-4 text-sm text-muted-foreground">正在加载用量数据...</p>
        </div>
      ) : (
        <>
          <div className="grid gap-4 md:grid-cols-3">
            <Card>
              <CardContent className="pt-6">
                <div className="flex items-center gap-3">
                  <div className="rounded-lg bg-blue-100 p-2">
                    <DollarSign className="h-5 w-5 text-blue-600" />
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">本月已用金额</p>
                    <p className="text-2xl font-bold">{formatCurrency(data.quota.used)}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="pt-6">
                <div className="flex items-center gap-3">
                  <div className="rounded-lg bg-purple-100 p-2">
                    <TrendingUp className="h-5 w-5 text-purple-600" />
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">配额上限</p>
                    <p className="text-2xl font-bold">{formatCurrency(data.quota.limit)}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="pt-6">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="rounded-lg bg-emerald-100 p-2">
                      <CheckCircle className="h-5 w-5 text-emerald-600" />
                    </div>
                    <div>
                      <p className="text-sm text-muted-foreground">配额状态</p>
                      <QuotaStatusBadge status={data.quota.status} />
                    </div>
                  </div>
                  <CircularProgress percentage={data.quota.percentage} size={80} strokeWidth={8} />
                </div>
              </CardContent>
            </Card>
          </div>

          <div className="grid gap-6 lg:grid-cols-3">
            <Card className="lg:col-span-2">
              <CardHeader>
                <CardTitle className="text-base">用量趋势</CardTitle>
                <CardDescription>每日成本变化趋势</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[300px]">
                  <ResponsiveContainer width="100%" height="100%">
                    <LineChart data={data.trends}>
                      <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                      <XAxis
                        dataKey="date"
                        tick={{ fontSize: 12 }}
                        className="text-muted-foreground"
                      />
                      <YAxis
                        tick={{ fontSize: 12 }}
                        className="text-muted-foreground"
                        tickFormatter={(v) => `¥${v}`}
                      />
                      <Tooltip
                        formatter={(value: number) => [formatCurrency(value), "成本"]}
                        labelFormatter={(label) => `日期: ${label}`}
                      />
                      <Line
                        type="monotone"
                        dataKey="cost"
                        stroke="#3b82f6"
                        strokeWidth={2}
                        dot={{ r: 4, fill: "#3b82f6" }}
                        activeDot={{ r: 6 }}
                      />
                    </LineChart>
                  </ResponsiveContainer>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-base">引擎用量分布</CardTitle>
                <CardDescription>各引擎成本占比</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[300px]">
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                      <Pie
                        data={data.engineDistribution}
                        cx="50%"
                        cy="45%"
                        innerRadius={50}
                        outerRadius={80}
                        paddingAngle={2}
                        dataKey="cost"
                        nameKey="label"
                      >
                        {data.engineDistribution.map((_, index) => (
                          <Cell key={`cell-${index}`} fill={PIE_COLORS[index % PIE_COLORS.length]} />
                        ))}
                      </Pie>
                      <Tooltip
                        formatter={(value: number) => [formatCurrency(value), "成本"]}
                      />
                      <Legend
                        verticalAlign="bottom"
                        iconType="circle"
                        iconSize={8}
                        formatter={(value: string) => (
                          <span className="text-xs">{value}</span>
                        )}
                      />
                    </PieChart>
                  </ResponsiveContainer>
                </div>
              </CardContent>
            </Card>
          </div>

          <Card>
            <CardHeader>
              <CardTitle className="text-base">引擎用量明细</CardTitle>
              <CardDescription>
                共 {totalQueries} 次查询，总成本 {formatCurrency(totalCost)}
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>引擎名称</TableHead>
                    <TableHead className="text-right">查询次数</TableHead>
                    <TableHead className="text-right">输入Token</TableHead>
                    <TableHead className="text-right">输出Token</TableHead>
                    <TableHead className="text-right">成本</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {data.engineUsage.map((item) => (
                    <TableRow key={item.engine}>
                      <TableCell className="font-medium">{item.label}</TableCell>
                      <TableCell className="text-right">{item.queries.toLocaleString()}</TableCell>
                      <TableCell className="text-right">{formatTokenCount(item.inputTokens)}</TableCell>
                      <TableCell className="text-right">{formatTokenCount(item.outputTokens)}</TableCell>
                      <TableCell className="text-right font-medium">{formatCurrency(item.cost)}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </>
      )}
    </div>
  );
}