import React, { useMemo, useState } from "react";
import { Card } from "@/components/ui/card";
import type { DailyUsage } from "@/lib/api";

interface TokenUsageTrendProps {
  days: DailyUsage[];
}

// Simple number formatters
const fmtTokens = (n: number) => {
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(2)}M`;
  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
  return `${n}`;
};
const fmtUSD = (n: number) =>
  new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 4 }).format(n);

/**
 * A lightweight multi-series line/area chart implemented with SVG and basic UI primitives.
 * - Left axis: Tokens (input/output/cache write/cache read)
 * - Right axis: Cost (USD) and Requests count (normalized to its own max)
 * - Tooltip closely matches the screenshot content
 */
export const TokenUsageTrend: React.FC<TokenUsageTrendProps> = ({ days }) => {
  const [hoverIndex, setHoverIndex] = useState<number | null>(null);

  const { labels, series, maxTokens, maxCost, maxReq } = useMemo(() => {
    const sorted = days.slice().reverse(); // chronological left->right
    const labels = sorted.map((d) =>
      new Date(d.date.replace(/-/g, "/")).toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" })
    );
    const series = {
      input: sorted.map((d) => d.input_tokens || 0),
      output: sorted.map((d) => d.output_tokens || 0),
      cacheW: sorted.map((d) => d.cache_creation_tokens || 0),
      cacheR: sorted.map((d) => d.cache_read_tokens || 0),
      cost: sorted.map((d) => d.total_cost || 0),
      reqs: sorted.map((d) => d.request_count || 0),
      sumTokens: sorted.map(
        (d) => (d.input_tokens || 0) + (d.output_tokens || 0) + (d.cache_creation_tokens || 0) + (d.cache_read_tokens || 0)
      ),
    } as const;
    const maxTokens = Math.max(1, ...series.sumTokens, ...series.input, ...series.output, ...series.cacheW, ...series.cacheR);
    const maxCost = Math.max(1, ...series.cost);
    const maxReq = Math.max(1, ...series.reqs);
    return { labels, series, maxTokens, maxCost, maxReq };
  }, [days]);

  const width = 900;
  const height = 260;
  const padL = 56; // room for left ticks
  const padR = 56; // room for right ticks
  const padT = 16;
  const padB = 36;
  const plotW = width - padL - padR;
  const plotH = height - padT - padB;

  const n = labels.length;
  const x = (i: number) => padL + (plotW * i) / Math.max(1, n - 1);
  const yToken = (v: number) => padT + plotH * (1 - v / maxTokens);
  const yCost = (v: number) => padT + plotH * (1 - v / maxCost);
  const yReq = (v: number) => padT + plotH * (1 - v / maxReq);

  const pathFrom = (vals: number[], y: (v: number) => number) =>
    vals.map((v, i) => `${i === 0 ? "M" : "L"} ${x(i)} ${y(v)}`).join(" ");

  const colors = {
    input: "#3b82f6", // blue-500
    output: "#ec4899", // pink-500
    cacheW: "#60a5fa", // blue-400
    cacheR: "#a78bfa", // violet-400
    cost: "#22c55e", // green-500
    req: "#16a34a", // green-600
    grid: "var(--border)",
    text: "var(--muted-foreground)",
  } as const;

  const hovered = hoverIndex != null ? hoverIndex : null;

  const renderTooltip = () => {
    if (hovered == null) return null;
    const dateText = new Date(days.slice().reverse()[hovered].date.replace(/-/g, "/")).toLocaleDateString("zh-CN", {
      month: "2-digit",
      day: "2-digit",
    });
    const d = days.slice().reverse()[hovered];
    return (
      <div className="absolute -translate-x-1/2 bottom-full mb-2 left-1/2 pointer-events-none">
        <div className="bg-background border border-border rounded-lg shadow-lg p-3 text-xs whitespace-nowrap">
          <div className="text-sm font-semibold mb-1">{dateText}</div>
          <div className="flex flex-col gap-1">
            <div className="flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-sm" style={{ background: colors.cost }} />
              费用（USD）：{fmtUSD(d.total_cost)}
            </div>
            <div className="flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-sm" style={{ background: colors.cacheR }} />
              缓存读取Token: {fmtTokens(d.cache_read_tokens || 0)} tokens
            </div>
            <div className="flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-sm" style={{ background: colors.cacheW }} />
              缓存创建Token: {fmtTokens(d.cache_creation_tokens || 0)} tokens
            </div>
            <div className="flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-sm" style={{ background: colors.output }} />
              输出Token: {fmtTokens(d.output_tokens || 0)} tokens
            </div>
            <div className="flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-sm" style={{ background: colors.input }} />
              输入Token: {fmtTokens(d.input_tokens || 0)} tokens
            </div>
            <div className="flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-sm" style={{ background: colors.req }} />
              请求数：{d.request_count || 0} 次
            </div>
          </div>
        </div>
      </div>
    );
  };

  return (
    <Card className="p-6">
      <h3 className="text-sm font-semibold mb-4">Token使用趋势</h3>
      <div className="relative w-full overflow-x-auto">
        <svg width={width} height={height} className="min-w-[900px]">
          {/* axes */}
          <line x1={padL} y1={padT} x2={padL} y2={padT + plotH} stroke={colors.grid} />
          <line x1={padL} y1={padT + plotH} x2={padL + plotW} y2={padT + plotH} stroke={colors.grid} />
          {/* left ticks (tokens) 0, 25%, 50%, 75%, 100% */}
          {[0, 0.25, 0.5, 0.75, 1].map((t) => (
            <g key={t}>
              <text x={8} y={padT + plotH * (1 - t)} className="text-[10px]" fill={colors.text}>
                {fmtTokens(Math.round(maxTokens * t))}
              </text>
              <line
                x1={padL}
                y1={padT + plotH * (1 - t)}
                x2={padL + plotW}
                y2={padT + plotH * (1 - t)}
                stroke={colors.grid}
                strokeDasharray="2,4"
              />
            </g>
          ))}
          {/* right ticks (cost/requests) */}
          {[0, 0.5, 1].map((t) => (
            <g key={`r-${t}`}>
              <text x={padL + plotW + 4} y={padT + plotH * (1 - t)} className="text-[10px]" fill={colors.text}>
                {t === 1 ? fmtUSD(maxCost) : t === 0.5 ? fmtUSD(maxCost / 2) : "$0"}
              </text>
            </g>
          ))}

          {/* token lines */}
          <path d={pathFrom(series.input, yToken)} fill="none" stroke={colors.input} strokeWidth={2} />
          <path d={pathFrom(series.output, yToken)} fill="none" stroke={colors.output} strokeWidth={2} />
          <path d={pathFrom(series.cacheW, yToken)} fill="none" stroke={colors.cacheW} strokeWidth={2} />
          <path d={pathFrom(series.cacheR, yToken)} fill="none" stroke={colors.cacheR} strokeWidth={2} />

          {/* cost line (right axis) */}
          <path d={pathFrom(series.cost, yCost)} fill="none" stroke={colors.cost} strokeWidth={2} />

          {/* requests as small circles on right scale */}
          {series.reqs.map((v, i) => (
            <circle key={`req-${i}`} cx={x(i)} cy={yReq(v)} r={2.5} fill={colors.req} />
          ))}

          {/* x labels and hover hit-areas */}
          {labels.map((lab, i) => (
            <g key={i}
               onMouseEnter={() => setHoverIndex(i)}
               onMouseLeave={() => setHoverIndex(null)}>
              <text
                x={x(i)}
                y={padT + plotH + 16}
                textAnchor="middle"
                className="text-[10px]"
                fill={colors.text}
              >
                {lab}
              </text>
              {/* vertical hover guide */}
              {hoverIndex === i && (
                <line x1={x(i)} y1={padT} x2={x(i)} y2={padT + plotH} stroke={colors.grid} />
              )}
              {/* invisible hit area */}
              <rect x={x(i) - plotW / Math.max(1, n - 1) / 2}
                    y={padT}
                    width={plotW / Math.max(1, n - 1)}
                    height={plotH}
                    fill="transparent" />
            </g>
          ))}
        </svg>
        {/* Tooltip container */}
        {hoverIndex != null && (
          <div
            className="absolute"
            style={{ left: `${((padL + (plotW * hoverIndex) / Math.max(1, n - 1)) / width) * 100}%`, bottom: padB + 8 }}
          >
            {renderTooltip()}
          </div>
        )}
      </div>
      {/* legend */}
      <div className="flex flex-wrap gap-4 mt-3 text-xs text-muted-foreground">
        <div className="flex items-center gap-2"><span className="inline-block w-3 h-1" style={{ background: colors.input }} />输入Token</div>
        <div className="flex items-center gap-2"><span className="inline-block w-3 h-1" style={{ background: colors.output }} />输出Token</div>
        <div className="flex items-center gap-2"><span className="inline-block w-3 h-1" style={{ background: colors.cacheW }} />缓存创建Token</div>
        <div className="flex items-center gap-2"><span className="inline-block w-3 h-1" style={{ background: colors.cacheR }} />缓存读取Token</div>
        <div className="flex items-center gap-2"><span className="inline-block w-3 h-1" style={{ background: colors.cost }} />费用（USD）</div>
        <div className="flex items-center gap-2"><span className="inline-block w-3 h-1" style={{ background: colors.req }} />请求数</div>
      </div>
    </Card>
  );
};