"use client";

import { useEffect, useState, useCallback } from "react";
import {
  LineChart, Line, XAxis, YAxis, Tooltip, Legend,
  ResponsiveContainer, ReferenceLine, CartesianGrid
} from "recharts";

interface Snapshot {
  ts: number;
  btc_rate: number;
  eth_rate: number;
  btc_price: number;
  eth_price: number;
}

interface ChartPoint {
  time: string;
  btcRate: number;
  ethRate: number;
  btcPrice: number;
  ethPrice: number;
}

export default function LivePage() {
  const [data, setData] = useState<ChartPoint[]>([]);
  const [count, setCount] = useState(0);
  const [loading, setLoading] = useState(true);
  const [hours, setHours] = useState(2);

  const fetchSnapshots = useCallback(async () => {
    try {
      const r = await fetch(`/api/snapshots?hours=${hours}&limit=3600`);
      const json = await r.json();
      const rows: Snapshot[] = json.data || [];
      setCount(json.count || 0);
      // 降采样：每30条取1条，避免图表过密
      const step = Math.max(1, Math.floor(rows.length / 300));
      const sampled = rows.filter((_, i) => i % step === 0);
      setData(sampled.map(row => ({
        time: new Date(row.ts * 1000).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" }),
        btcRate: parseFloat((row.btc_rate * 100).toFixed(5)),
        ethRate: parseFloat((row.eth_rate * 100).toFixed(5)),
        btcPrice: row.btc_price,
        ethPrice: row.eth_price,
      })));
    } catch { /* ignore */ } finally {
      setLoading(false);
    }
  }, [hours]);

  useEffect(() => {
    fetchSnapshots();
    const iv = setInterval(fetchSnapshots, 10_000);
    return () => clearInterval(iv);
  }, [fetchSnapshots]);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div>
          <h1 className="text-2xl font-bold text-slate-900">实时费率变动</h1>
          <p className="text-slate-500 text-sm mt-1">
            8小时结算周期内的实时费率曲线 · 已记录 <span className="text-blue-600 font-medium">{count.toLocaleString()}</span> 条快照
          </p>
        </div>
        <div className="flex gap-2 text-sm">
          {[1, 2, 6, 12, 24].map(h => (
            <button
              key={h}
              onClick={() => setHours(h)}
              className={`px-3 py-1.5 rounded-lg border transition-colors ${hours === h ? "bg-blue-600 text-white border-blue-600" : "border-slate-200 text-slate-600 hover:border-blue-400"}`}
            >
              {h}h
            </button>
          ))}
        </div>
      </div>

      {loading ? (
        <div className="text-slate-400 py-12 text-center">加载中...</div>
      ) : data.length === 0 ? (
        <div className="rounded-xl border border-slate-200 bg-slate-50 p-12 text-center text-slate-400">
          暂无数据（后端刚启动，2秒后开始积累）
        </div>
      ) : (
        <>
          {/* 费率图 */}
          <div className="rounded-xl border border-slate-200 bg-white shadow-sm p-6">
            <h2 className="text-slate-700 font-semibold mb-1">资金费率实时变动</h2>
            <p className="text-slate-400 text-xs mb-4">正值=多头付空头，负值=空头付多头。费率上升=多头情绪加热</p>
            <ResponsiveContainer width="100%" height={220}>
              <LineChart data={data} margin={{ top: 4, right: 8, bottom: 4, left: 8 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
                <XAxis dataKey="time" tick={{ fill: "#94a3b8", fontSize: 10 }} tickLine={false} interval="preserveStartEnd" />
                <YAxis tick={{ fill: "#94a3b8", fontSize: 10 }} tickLine={false} axisLine={false}
                  tickFormatter={v => `${v.toFixed(3)}%`} width={60} />
                <Tooltip formatter={(v) => [`${Number(v).toFixed(5)}%`]}
                  contentStyle={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: 8, fontSize: 12 }} />
                <Legend wrapperStyle={{ fontSize: 12 }} />
                <ReferenceLine y={0} stroke="#94a3b8" strokeDasharray="4 2" />
                <Line type="monotone" dataKey="btcRate" name="BTC费率" stroke="#2563eb" strokeWidth={1.5} dot={false} connectNulls />
                <Line type="monotone" dataKey="ethRate" name="ETH费率" stroke="#7c3aed" strokeWidth={1.5} dot={false} connectNulls />
              </LineChart>
            </ResponsiveContainer>
          </div>

          {/* 价格图 */}
          <div className="rounded-xl border border-slate-200 bg-white shadow-sm p-6">
            <h2 className="text-slate-700 font-semibold mb-1">标记价格走势</h2>
            <p className="text-slate-400 text-xs mb-4">与费率对比观察：价格快速拉升时，资金费率通常同步上涨（多头加杠杆）</p>
            <ResponsiveContainer width="100%" height={220}>
              <LineChart data={data} margin={{ top: 4, right: 8, bottom: 4, left: 8 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
                <XAxis dataKey="time" tick={{ fill: "#94a3b8", fontSize: 10 }} tickLine={false} interval="preserveStartEnd" />
                <YAxis yAxisId="btc" orientation="left" tick={{ fill: "#2563eb", fontSize: 10 }} tickLine={false} axisLine={false}
                  tickFormatter={v => `$${(v/1000).toFixed(0)}k`} width={55} />
                <YAxis yAxisId="eth" orientation="right" tick={{ fill: "#7c3aed", fontSize: 10 }} tickLine={false} axisLine={false}
                  tickFormatter={v => `$${v.toFixed(0)}`} width={55} />
                <Tooltip formatter={(v, name) => [name?.toString().includes("BTC") ? `$${Number(v).toLocaleString()}` : `$${Number(v).toFixed(2)}`, name]}
                  contentStyle={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: 8, fontSize: 12 }} />
                <Legend wrapperStyle={{ fontSize: 12 }} />
                <Line yAxisId="btc" type="monotone" dataKey="btcPrice" name="BTC价格" stroke="#2563eb" strokeWidth={1.5} dot={false} connectNulls />
                <Line yAxisId="eth" type="monotone" dataKey="ethPrice" name="ETH价格" stroke="#7c3aed" strokeWidth={1.5} dot={false} connectNulls />
              </LineChart>
            </ResponsiveContainer>
          </div>

          {/* 说明 */}
          <div className="rounded-lg border border-blue-100 bg-blue-50 px-5 py-3 text-sm text-slate-600">
            <span className="text-blue-600 font-medium">数据说明：</span>
            每2秒从Binance拉取实时溢价指数，本地永久存储。这是8小时结算周期内费率变动的原始数据，不在任何公开数据源中提供。
          </div>
        </>
      )}
    </div>
  );
}