"use client";

import { useState, useEffect } from "react";
import { authFetch } from "@/lib/auth";
import { XAxis, YAxis, Tooltip, ResponsiveContainer, ReferenceLine, Area, AreaChart } from "recharts";

function bjt(ms: number) {
  const d = new Date(ms + 8 * 3600 * 1000);
  return `${String(d.getUTCMonth() + 1).padStart(2, "0")}-${String(d.getUTCDate()).padStart(2, "0")} ${String(d.getUTCHours()).padStart(2, "0")}:${String(d.getUTCMinutes()).padStart(2, "0")}`;
}

function fmtPrice(p: number) {
  return p < 100 ? p.toFixed(4) : p.toLocaleString("en-US", { minimumFractionDigits: 1, maximumFractionDigits: 1 });
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function parseFactors(raw: any) {
  if (!raw) return null;
  if (typeof raw === "string") { try { return JSON.parse(raw); } catch { return null; } }
  return raw;
}

interface Props {
  strategyId: string;
  symbol: string;
}

type FilterResult = "all" | "win" | "loss";
type FilterSymbol = "all" | string;

// ─── 控制面板（策略启停）─────────────────────────────────────────

function ControlPanel({ strategyId }: { strategyId: string }) {
  const [status, setStatus] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    (async () => {
      try {
        const r = await authFetch(`/api/strategies/${strategyId}`);
        if (r.ok) { const j = await r.json(); setStatus(j.status); }
      } catch {}
    })();
  }, [strategyId]);

  const toggle = async () => {
    setSaving(true);
    const newStatus = status === "running" ? "paused" : "running";
    try {
      const r = await authFetch(`/api/strategies/${strategyId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ status: newStatus }),
      });
      if (r.ok) setStatus(newStatus);
    } catch {} finally { setSaving(false); }
  };

  if (!status) return null;
  return (
    <div className={`rounded-xl border-2 ${status === "running" ? "border-emerald-400 bg-emerald-50" : "border-slate-200 bg-white"} px-3 py-2 flex items-center justify-between`}>
      <div className="flex items-center gap-3">
        <button onClick={toggle} disabled={saving}
          className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all ${status === "running" ? "bg-red-500 text-white hover:bg-red-600" : "bg-emerald-500 text-white hover:bg-emerald-600"}`}>
          {saving ? "..." : status === "running" ? "⏹ 暂停" : "▶️ 启动"}
        </button>
        <span className={`text-xs font-medium ${status === "running" ? "text-emerald-700" : "text-slate-500"}`}>
          {status === "running" ? "🟢 运行中" : "⚪ 已暂停"}
        </span>
      </div>
    </div>
  );
}

// ─── 总览卡片 ────────────────────────────────────────────────────

function SummaryCards({ strategyId }: { strategyId: string }) {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const [data, setData] = useState<any>(null);
  useEffect(() => {
    const f = async () => {
      try {
        const r = await authFetch(`/api/paper/summary?strategy_id=${strategyId}`);
        if (r.ok) setData(await r.json());
      } catch {}
    };
    f(); const iv = setInterval(f, 10000); return () => clearInterval(iv);
  }, [strategyId]);
  if (!data) return <div className="text-center text-slate-400 text-sm py-4">加载中...</div>;
  return (
    <div className="grid grid-cols-3 lg:grid-cols-6 gap-1.5">
      {[
        { label: "总盈亏(R)", value: `${data.total_pnl >= 0 ? "+" : ""}${data.total_pnl}R`, sub: `${data.total_pnl_usdt >= 0 ? "+" : ""}$${data.total_pnl_usdt}`, color: data.total_pnl >= 0 ? "text-emerald-600" : "text-red-500" },
        { label: "胜率", value: `${data.win_rate}%`, sub: `共${data.total_trades}笔`, color: "text-slate-800" },
        { label: "持仓中", value: data.active_positions, sub: "活跃仓位", color: "text-blue-600" },
        { label: "盈亏比", value: data.profit_factor, sub: "PF", color: "text-slate-800" },
        { label: "当前资金", value: `$${data.balance?.toLocaleString()}`, sub: "虚拟余额", color: data.balance >= 10000 ? "text-emerald-600" : "text-red-500" },
        { label: "状态", value: data.start_time ? "运行中 ✅" : "等待首笔", sub: "accumulating", color: "text-slate-600" },
      ].map(({ label, value, sub, color }) => (
        <div key={label} className="bg-white rounded-lg border border-slate-200 px-2.5 py-2">
          <p className="text-[10px] text-slate-400">{label}</p>
          <p className={`font-mono font-bold text-base ${color}`}>{value}</p>
          <p className="text-[10px] text-slate-400">{sub}</p>
        </div>
      ))}
    </div>
  );
}

// ─── 当前持仓 ────────────────────────────────────────────────────

function ActivePositions({ strategyId }: { strategyId: string }) {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const [positions, setPositions] = useState<any[]>([]);
  const [wsPrices, setWsPrices] = useState<Record<string, number>>({});
  const RISK_USD = 200; // 1R = 200 USDT

  useEffect(() => {
    const f = async () => {
      try {
        const r = await authFetch(`/api/paper/positions?strategy_id=${strategyId}`);
        if (r.ok) setPositions((await r.json()).data || []);
      } catch {}
    };
    f(); const iv = setInterval(f, 10000); return () => clearInterval(iv);
  }, [strategyId]);

  useEffect(() => {
    const streams = ["btcusdt", "ethusdt", "xrpusdt", "solusdt"].map(s => `${s}@aggTrade`).join("/");
    const ws = new WebSocket(`wss://fstream.binance.com/stream?streams=${streams}`);
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    ws.onmessage = (e) => { try { const msg = JSON.parse(e.data); if (msg.data) { const sym = msg.data.s; const price = parseFloat(msg.data.p); if (sym && price > 0) setWsPrices(prev => ({ ...prev, [sym]: price })); } } catch {} };
    return () => ws.close();
  }, []);

  if (positions.length === 0) return <div className="rounded-xl border border-slate-200 bg-white px-3 py-4 text-center text-slate-400 text-sm">暂无活跃持仓</div>;
  return (
    <div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
      <div className="px-3 py-2 border-b border-slate-100"><h3 className="font-semibold text-slate-800 text-xs">当前持仓 <span className="text-[10px] text-emerald-500 font-normal">● 实时</span></h3></div>
      <div className="divide-y divide-slate-100">
        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
        {positions.map((p: any) => {
          const sym = p.symbol?.replace("USDT", "") || "";
          const holdMin = Math.round((Date.now() - p.entry_ts) / 60000);
          const currentPrice = wsPrices[p.symbol] || p.current_price || 0;
          const entry = p.entry_price || 0;
          const riskDist = p.risk_distance || Math.abs(entry - (p.sl_price || entry)) || 1;
          const tp1R = riskDist > 0 ? (p.direction === "LONG" ? ((p.tp1_price || 0) - entry) / riskDist : (entry - (p.tp1_price || 0)) / riskDist) : 0;
          const fullR = riskDist > 0 ? (p.direction === "LONG" ? (currentPrice - entry) / riskDist : (entry - currentPrice) / riskDist) : 0;
          const unrealR = p.tp1_hit ? 0.5 * tp1R + 0.5 * fullR : fullR;
          const unrealUsdt = unrealR * RISK_USD;
          return (
            <div key={p.id} className="px-3 py-2 bg-emerald-50/60">
              <div className="flex items-center justify-between gap-2">
                <div className="flex items-center gap-2 flex-wrap">
                  <span className={`text-xs font-bold ${p.direction === "LONG" ? "text-emerald-600" : "text-red-500"}`}>{p.direction === "LONG" ? "🟢" : "🔴"} {sym} {p.direction}</span>
                  <span className="text-[10px] text-slate-500">评分{p.score}</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className={`font-mono text-sm font-bold ${unrealR >= 0 ? "text-emerald-600" : "text-red-500"}`}>{unrealR >= 0 ? "+" : ""}{unrealR.toFixed(2)}R</span>
                  <span className={`text-[10px] ${unrealUsdt >= 0 ? "text-emerald-500" : "text-red-400"}`}>${unrealUsdt.toFixed(0)}</span>
                  <span className="text-[10px] text-slate-400">{holdMin}m</span>
                </div>
              </div>
              <div className="flex gap-3 mt-1 text-[10px] font-mono text-slate-600 flex-wrap">
                <span>入: ${fmtPrice(p.entry_price)}</span>
                <span className="text-blue-600">现: ${currentPrice ? fmtPrice(currentPrice) : "-"}</span>
                <span className="text-emerald-600">TP1: ${fmtPrice(p.tp1_price)}{p.tp1_hit ? " ✅" : ""}</span>
                <span className="text-emerald-600">TP2: ${fmtPrice(p.tp2_price)}</span>
                <span className="text-red-500">SL: ${fmtPrice(p.sl_price)}</span>
              </div>
              <div className="mt-1 text-[9px] text-slate-400">
                入场: {p.entry_ts ? bjt(p.entry_ts) : "-"}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── 权益曲线 ────────────────────────────────────────────────────

function EquityCurve({ strategyId }: { strategyId: string }) {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const [data, setData] = useState<any[]>([]);
  useEffect(() => {
    const f = async () => {
      try {
        const r = await authFetch(`/api/paper/equity-curve?strategy_id=${strategyId}`);
        if (r.ok) setData((await r.json()).data || []);
      } catch {}
    };
    f(); const iv = setInterval(f, 30000); return () => clearInterval(iv);
  }, [strategyId]);
  return (
    <div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
      <div className="px-3 py-2 border-b border-slate-100"><h3 className="font-semibold text-slate-800 text-xs">权益曲线</h3></div>
      {data.length < 2 ? <div className="px-3 py-6 text-center text-xs text-slate-400">数据积累中...</div> : (
        <div className="p-2" style={{ height: 200 }}>
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart data={data}>
              <XAxis dataKey="ts" tickFormatter={(v) => bjt(Number(v))} tick={{ fontSize: 10 }} />
              <YAxis tick={{ fontSize: 10 }} tickFormatter={(v) => `${v}R`} />
              <Tooltip labelFormatter={(v) => bjt(Number(v))} formatter={(v: unknown) => [`${v}R`, "累计PnL"]} />
              <ReferenceLine y={0} stroke="#94a3b8" strokeDasharray="3 3" />
              <Area type="monotone" dataKey="pnl" stroke="#10b981" fill="#d1fae5" strokeWidth={2} />
            </AreaChart>
          </ResponsiveContainer>
        </div>
      )}
    </div>
  );
}

// ─── 历史交易 ────────────────────────────────────────────────────

function TradeHistory({ strategyId }: { strategyId: string }) {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const [trades, setTrades] = useState<any[]>([]);
  const [filterResult, setFilterResult] = useState<FilterResult>("all");
  const [filterSym, setFilterSym] = useState<FilterSymbol>("all");

  useEffect(() => {
    const f = async () => {
      try {
        const r = await authFetch(`/api/paper/trades?strategy_id=${strategyId}&result=${filterResult}&symbol=${filterSym}&limit=50`);
        if (r.ok) setTrades((await r.json()).data || []);
      } catch {}
    };
    f(); const iv = setInterval(f, 10000); return () => clearInterval(iv);
  }, [strategyId, filterResult, filterSym]);

  const fmtTime = (ms: number) => ms ? bjt(ms) : "-";
  const STATUS_LABEL: Record<string, string> = { tp: "止盈", sl: "止损", sl_be: "保本", timeout: "超时", signal_flip: "翻转" };
  const STATUS_COLOR: Record<string, string> = { tp: "bg-emerald-100 text-emerald-700", sl: "bg-red-100 text-red-700", sl_be: "bg-amber-100 text-amber-700", signal_flip: "bg-purple-100 text-purple-700", timeout: "bg-slate-100 text-slate-600" };

  return (
    <div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
      <div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between flex-wrap gap-1">
        <h3 className="font-semibold text-slate-800 text-xs">历史交易</h3>
        <div className="flex items-center gap-1 flex-wrap">
          {(["all", "BTC", "ETH", "XRP", "SOL"] as FilterSymbol[]).map(s => (
            <button key={s} onClick={() => setFilterSym(s)} className={`px-2 py-0.5 rounded text-[10px] ${filterSym === s ? "bg-slate-800 text-white" : "text-slate-500 hover:bg-slate-100"}`}>{s === "all" ? "全部" : s}</button>
          ))}
          <span className="text-slate-300">|</span>
          {(["all", "win", "loss"] as FilterResult[]).map(r => (
            <button key={r} onClick={() => setFilterResult(r)} className={`px-2 py-0.5 rounded text-[10px] ${filterResult === r ? "bg-slate-800 text-white" : "text-slate-500 hover:bg-slate-100"}`}>{r === "all" ? "全部" : r === "win" ? "盈利" : "亏损"}</button>
          ))}
        </div>
      </div>
      <div className="max-h-64 overflow-y-auto">
        {trades.length === 0 ? <div className="text-center text-slate-400 text-sm py-6">暂无交易记录</div> : (
          <table className="w-full text-[11px]">
            <thead className="bg-slate-50 sticky top-0">
              <tr className="text-slate-500">
                <th className="px-2 py-1.5 text-left font-medium">币种</th>
                <th className="px-2 py-1.5 text-left font-medium">方向</th>
                <th className="px-2 py-1.5 text-right font-medium">入场价</th>
                <th className="px-2 py-1.5 text-right font-medium">出场价</th>
                <th className="px-2 py-1.5 text-right font-medium">PnL(R)</th>
                <th className="px-2 py-1.5 text-center font-medium">状态</th>
                <th className="px-2 py-1.5 text-right font-medium">分数</th>
                <th className="px-2 py-1.5 text-right font-medium">入场时间</th>
                <th className="px-2 py-1.5 text-right font-medium">出场时间</th>
                <th className="px-2 py-1.5 text-right font-medium">持仓</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-50">
              {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
              {trades.map((t: any) => {
                const holdMin = t.exit_ts && t.entry_ts ? Math.round((t.exit_ts - t.entry_ts) / 60000) : 0;
                return (
                  <tr key={t.id} className="hover:bg-slate-50">
                    <td className="px-2 py-1.5 font-mono">{t.symbol?.replace("USDT", "")}</td>
                    <td className={`px-2 py-1.5 font-bold ${t.direction === "LONG" ? "text-emerald-600" : "text-red-500"}`}>{t.direction === "LONG" ? "🟢" : "🔴"} {t.direction}</td>
                    <td className="px-2 py-1.5 text-right font-mono">{fmtPrice(t.entry_price)}</td>
                    <td className="px-2 py-1.5 text-right font-mono">{t.exit_price ? fmtPrice(t.exit_price) : "-"}</td>
                    <td className={`px-2 py-1.5 text-right font-mono font-bold ${t.pnl_r > 0 ? "text-emerald-600" : t.pnl_r < 0 ? "text-red-500" : "text-slate-500"}`}>{t.pnl_r > 0 ? "+" : ""}{t.pnl_r?.toFixed(2)}</td>
                    <td className="px-2 py-1.5 text-center"><span className={`px-1 py-0.5 rounded text-[9px] ${STATUS_COLOR[t.status] || "bg-slate-100 text-slate-600"}`}>{STATUS_LABEL[t.status] || t.status}</span></td>
                    <td className="px-2 py-1.5 text-right font-mono">{t.score}</td>
                    <td className="px-2 py-1.5 text-right text-slate-400 whitespace-nowrap">{fmtTime(t.entry_ts)}</td>
                    <td className="px-2 py-1.5 text-right text-slate-400 whitespace-nowrap">{fmtTime(t.exit_ts)}</td>
                    <td className="px-2 py-1.5 text-right text-slate-400">{holdMin}m</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}

// ─── 详细统计 ────────────────────────────────────────────────────

function StatsPanel({ strategyId }: { strategyId: string }) {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const [data, setData] = useState<any>(null);
  const [tab, setTab] = useState("ALL");
  useEffect(() => {
    const f = async () => {
      try {
        const r = await authFetch(`/api/paper/stats?strategy_id=${strategyId}`);
        if (r.ok) setData(await r.json());
      } catch {}
    };
    f(); const iv = setInterval(f, 30000); return () => clearInterval(iv);
  }, [strategyId]);
  if (!data || data.error) return (
    <div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
      <div className="px-3 py-2 border-b border-slate-100"><h3 className="font-semibold text-slate-800 text-xs">详细统计</h3></div>
      <div className="p-3 text-xs text-slate-400">等待交易记录积累...</div>
    </div>
  );
  const coinTabs = ["ALL", "BTC", "ETH", "XRP", "SOL"];
  const st = tab === "ALL" ? data : (data.by_symbol?.[tab] || null);
  return (
    <div className="rounded-xl border border-slate-200 bg-white overflow-hidden">
      <div className="px-3 py-2 border-b border-slate-100 flex items-center justify-between flex-wrap gap-1">
        <h3 className="font-semibold text-slate-800 text-xs">详细统计</h3>
        <div className="flex items-center gap-1">
          {coinTabs.map(t => (
            <button key={t} onClick={() => setTab(t)} className={`px-2 py-0.5 rounded text-[10px] font-medium transition-colors ${tab === t ? "bg-slate-800 text-white" : "bg-slate-100 text-slate-500 hover:bg-slate-200"}`}>{t === "ALL" ? "总计" : t}</button>
          ))}
        </div>
      </div>
      {st ? (
        <div className="p-3">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-2 text-xs">
            <div><span className="text-slate-400">胜率</span><p className="font-mono font-bold">{st.win_rate}%</p></div>
            <div><span className="text-slate-400">盈亏比</span><p className="font-mono font-bold">{st.win_loss_ratio}</p></div>
            <div><span className="text-slate-400">平均盈利</span><p className="font-mono font-bold text-emerald-600">+{st.avg_win}R</p></div>
            <div><span className="text-slate-400">平均亏损</span><p className="font-mono font-bold text-red-500">-{st.avg_loss}R</p></div>
            <div><span className="text-slate-400">最大回撤</span><p className="font-mono font-bold">{st.mdd}R</p></div>
            <div><span className="text-slate-400">夏普比率</span><p className="font-mono font-bold">{st.sharpe}</p></div>
            <div><span className="text-slate-400">总盈亏</span><p className={`font-mono font-bold ${(st.total_pnl ?? 0) >= 0 ? "text-emerald-600" : "text-red-500"}`}>{(st.total_pnl ?? 0) >= 0 ? "+" : ""}{st.total_pnl ?? "-"}R</p></div>
            <div><span className="text-slate-400">总笔数</span><p className="font-mono font-bold">{st.total ?? data.total}</p></div>
            <div><span className="text-slate-400">做多胜率</span><p className="font-mono">{st.long_win_rate}% ({st.long_count}笔)</p></div>
            <div><span className="text-slate-400">做空胜率</span><p className="font-mono">{st.short_win_rate}% ({st.short_count}笔)</p></div>
          </div>
        </div>
      ) : <div className="p-3 text-xs text-slate-400">该币种暂无数据</div>}
    </div>
  );
}

// ─── 主组件 ──────────────────────────────────────────────────────

export default function PaperGeneric({ strategyId, symbol }: Props) {
  return (
    <div className="space-y-3 p-1">
      <div>
        <h2 className="text-sm font-bold text-slate-900">📈 模拟盘</h2>
        <p className="text-[10px] text-slate-500">{symbol.replace("USDT", "")} · strategy_id: {strategyId.slice(0, 8)}...</p>
      </div>
      <ControlPanel strategyId={strategyId} />
      <SummaryCards strategyId={strategyId} />
      <ActivePositions strategyId={strategyId} />
      <EquityCurve strategyId={strategyId} />
      <TradeHistory strategyId={strategyId} />
      <StatsPanel strategyId={strategyId} />
    </div>
  );
}