"use client";

import { useEffect, useState, useCallback } from "react";
import { useParams, useSearchParams, useRouter } from "next/navigation";
import { authFetch } from "@/lib/auth";
import Link from "next/link";
import {
  ArrowLeft,
  CheckCircle,
  PauseCircle,
  AlertCircle,
  Clock,
  TrendingUp,
  TrendingDown,
} from "lucide-react";

// ─── Types ────────────────────────────────────────────────────────

interface StrategySummary {
  id: string;
  display_name: string;
  status: string;
  started_at: number;
  initial_balance: number;
  current_balance: number;
  net_usdt: number;
  net_r: number;
  trade_count: number;
  win_rate: number;
  avg_win_r: number;
  avg_loss_r: number;
  open_positions: number;
  pnl_usdt_24h: number;
  pnl_r_24h: number;
  std_r: number;
  cvd_windows?: string;
  description?: string;
}

interface Signal {
  ts: number;
  symbol: string;
  score: number;
  signal: string | null;
  price: number;
  factors: any;
}

interface Trade {
  id: number;
  symbol: string;
  direction: string;
  score: number;
  entry_price: number;
  exit_price: number | null;
  tp1_price: number;
  tp2_price: number;
  sl_price: number;
  tp1_hit: boolean;
  pnl_r: number;
  risk_distance: number;
  entry_ts: number;
  exit_ts: number | null;
  status: string;
}

// ─── Helpers ──────────────────────────────────────────────────────

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 fmtDur(ms: number) {
  const s = Math.floor((Date.now() - ms) / 1000);
  const d = Math.floor(s / 86400);
  const h = Math.floor((s % 86400) / 3600);
  if (d > 0) return `${d}天${h}h`;
  const m = Math.floor((s % 3600) / 60);
  if (h > 0) return `${h}h${m}m`;
  return `${m}m`;
}

function StatusBadge({ status }: { status: string }) {
  if (status === "running") return <span className="flex items-center gap-1 text-xs text-emerald-400"><CheckCircle size={12} />运行中</span>;
  if (status === "paused") return <span className="flex items-center gap-1 text-xs text-yellow-400"><PauseCircle size={12} />已暂停</span>;
  return <span className="flex items-center gap-1 text-xs text-red-400"><AlertCircle size={12} />异常</span>;
}

// ─── Sub-views ────────────────────────────────────────────────────

function SignalsView({ strategyId }: { strategyId: string }) {
  const [signals, setSignals] = useState<Signal[]>([]);
  const [loading, setLoading] = useState(true);

  const fetch_ = useCallback(async () => {
    try {
      const r = await authFetch(`/api/strategy-plaza/${strategyId}/signals?limit=40`);
      const d = await r.json();
      setSignals(d.signals || []);
    } catch {}
    setLoading(false);
  }, [strategyId]);

  useEffect(() => { fetch_(); const iv = setInterval(fetch_, 15000); return () => clearInterval(iv); }, [fetch_]);

  if (loading) return <div className="text-gray-400 animate-pulse py-10 text-center">加载信号中...</div>;

  return (
    <div className="overflow-x-auto">
      <table className="w-full text-sm">
        <thead>
          <tr className="text-gray-400 border-b border-gray-700 text-xs">
            <th className="py-2 px-3 text-left">时间(北京)</th>
            <th className="py-2 px-3 text-left">币种</th>
            <th className="py-2 px-3 text-right">价格</th>
            <th className="py-2 px-3 text-right">分数</th>
            <th className="py-2 px-3 text-center">信号</th>
            <th className="py-2 px-3 text-right">CVD 30m</th>
            <th className="py-2 px-3 text-right">CVD 4h</th>
          </tr>
        </thead>
        <tbody>
          {signals.map((s, i) => {
            const fc = s.factors && (typeof s.factors === "string" ? JSON.parse(s.factors) : s.factors);
            return (
              <tr key={i} className="border-b border-gray-800 hover:bg-gray-800/50">
                <td className="py-1.5 px-3 text-gray-400 text-xs">{bjt(s.ts)}</td>
                <td className="py-1.5 px-3 font-mono font-bold text-white">{s.symbol.replace("USDT", "")}</td>
                <td className="py-1.5 px-3 text-right text-gray-300">{s.price?.toLocaleString()}</td>
                <td className="py-1.5 px-3 text-right">
                  <span className={`font-bold ${s.score >= 75 ? "text-emerald-400" : s.score >= 50 ? "text-yellow-400" : "text-gray-500"}`}>
                    {s.score}
                  </span>
                </td>
                <td className="py-1.5 px-3 text-center">
                  {s.signal ? (
                    <span className={`text-xs font-bold px-2 py-0.5 rounded ${s.signal === "LONG" ? "bg-emerald-900 text-emerald-400" : "bg-red-900 text-red-400"}`}>
                      {s.signal}
                    </span>
                  ) : <span className="text-gray-600 text-xs">—</span>}
                </td>
                <td className="py-1.5 px-3 text-right text-xs font-mono text-gray-400">{fc?.cvd_30m?.toFixed(0) ?? "—"}</td>
                <td className="py-1.5 px-3 text-right text-xs font-mono text-gray-400">{fc?.cvd_4h?.toFixed(0) ?? "—"}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
      {signals.length === 0 && <div className="text-center text-gray-500 py-10">暂无信号数据</div>}
    </div>
  );
}

function TradesView({ strategyId }: { strategyId: string }) {
  const [trades, setTrades] = useState<Trade[]>([]);
  const [loading, setLoading] = useState(true);

  const fetch_ = useCallback(async () => {
    try {
      const r = await authFetch(`/api/strategy-plaza/${strategyId}/trades?limit=50`);
      const d = await r.json();
      setTrades(d.trades || []);
    } catch {}
    setLoading(false);
  }, [strategyId]);

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

  if (loading) return <div className="text-gray-400 animate-pulse py-10 text-center">加载交易记录中...</div>;

  return (
    <div className="overflow-x-auto">
      <table className="w-full text-sm">
        <thead>
          <tr className="text-gray-400 border-b border-gray-700 text-xs">
            <th className="py-2 px-3 text-left">入场时间</th>
            <th className="py-2 px-3 text-left">出场时间</th>
            <th className="py-2 px-3 text-left">币种</th>
            <th className="py-2 px-3 text-center">方向</th>
            <th className="py-2 px-3 text-right">入场价</th>
            <th className="py-2 px-3 text-right">出场价</th>
            <th className="py-2 px-3 text-right">盈亏R</th>
            <th className="py-2 px-3 text-right">盈亏U</th>
            <th className="py-2 px-3 text-center">状态</th>
          </tr>
        </thead>
        <tbody>
          {trades.map((t) => {
            const isWin = t.pnl_r > 0;
            const isActive = !t.exit_ts;
            return (
              <tr key={t.id} className="border-b border-gray-800 hover:bg-gray-800/50">
                <td className="py-1.5 px-3 text-gray-400 text-xs">{bjt(t.entry_ts)}</td>
                <td className="py-1.5 px-3 text-gray-400 text-xs">{t.exit_ts ? bjt(t.exit_ts) : <span className="text-yellow-400">持仓中</span>}</td>
                <td className="py-1.5 px-3 font-mono font-bold text-white">{t.symbol.replace("USDT", "")}</td>
                <td className="py-1.5 px-3 text-center">
                  <span className={`text-xs font-bold ${t.direction === "LONG" ? "text-emerald-400" : "text-red-400"}`}>
                    {t.direction === "LONG" ? "多" : "空"}
                  </span>
                </td>
                <td className="py-1.5 px-3 text-right text-gray-300">{t.entry_price?.toLocaleString()}</td>
                <td className="py-1.5 px-3 text-right text-gray-300">{t.exit_price?.toLocaleString() ?? "—"}</td>
                <td className={`py-1.5 px-3 text-right font-bold ${isActive ? "text-yellow-400" : isWin ? "text-emerald-400" : "text-red-400"}`}>
                  {isActive ? "活跃" : `${isWin ? "+" : ""}${t.pnl_r?.toFixed(3)}R`}
                </td>
                <td className={`py-1.5 px-3 text-right font-bold ${isActive ? "text-yellow-400" : isWin ? "text-emerald-400" : "text-red-400"}`}>
                  {isActive ? "—" : `${isWin ? "+" : ""}${Math.round(t.pnl_r * 200)}U`}
                </td>
                <td className="py-1.5 px-3 text-center">
                  <span className={`text-xs px-1.5 py-0.5 rounded ${isActive ? "bg-yellow-900 text-yellow-400" : isWin ? "bg-emerald-900 text-emerald-400" : "bg-red-900 text-red-400"}`}>
                    {isActive ? "活跃" : isWin ? "盈利" : "亏损"}
                  </span>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
      {trades.length === 0 && <div className="text-center text-gray-500 py-10">暂无交易记录</div>}
    </div>
  );
}

// ─── Main Page ────────────────────────────────────────────────────

export default function StrategyDetailPage() {
  const params = useParams();
  const searchParams = useSearchParams();
  const router = useRouter();
  const strategyId = params?.id as string;
  const tab = searchParams?.get("tab") || "signals";

  const [summary, setSummary] = useState<StrategySummary | null>(null);
  const [loading, setLoading] = useState(true);

  const fetchSummary = useCallback(async () => {
    try {
      const r = await authFetch(`/api/strategy-plaza/${strategyId}/summary`);
      if (r.ok) { const d = await r.json(); setSummary(d); }
    } catch {}
    setLoading(false);
  }, [strategyId]);

  useEffect(() => { fetchSummary(); const iv = setInterval(fetchSummary, 30000); return () => clearInterval(iv); }, [fetchSummary]);

  if (loading) return <div className="flex items-center justify-center min-h-screen"><div className="text-gray-400 animate-pulse">加载中...</div></div>;
  if (!summary) return <div className="flex items-center justify-center min-h-screen"><div className="text-red-400">策略不存在</div></div>;

  const isProfit = summary.net_usdt >= 0;

  return (
    <div className="p-6 max-w-6xl mx-auto">
      {/* Back */}
      <Link href="/strategy-plaza" className="flex items-center gap-2 text-gray-400 hover:text-white text-sm mb-6 transition-colors">
        <ArrowLeft size={16} />
        返回策略广场
      </Link>

      {/* Header */}
      <div className="bg-gray-900 border border-gray-700 rounded-xl p-6 mb-6">
        <div className="flex items-start justify-between mb-4">
          <div>
            <h1 className="text-2xl font-bold text-white">{summary.display_name}</h1>
            {summary.description && <p className="text-gray-400 text-sm mt-1">{summary.description}</p>}
            <div className="flex items-center gap-3 mt-2">
              <StatusBadge status={summary.status} />
              <span className="text-xs text-gray-500">
                <Clock size={10} className="inline mr-1" />
                运行 {fmtDur(summary.started_at)}
              </span>
              {summary.cvd_windows && (
                <span className="text-xs text-cyan-400 bg-cyan-900/30 px-2 py-0.5 rounded">CVD {summary.cvd_windows}</span>
              )}
            </div>
          </div>
          <div className="text-right">
            <div className={`text-3xl font-bold ${isProfit ? "text-emerald-400" : "text-red-400"}`}>
              {isProfit ? "+" : ""}{summary.net_usdt.toLocaleString()} U
            </div>
            <div className="text-gray-400 text-sm">{summary.current_balance.toLocaleString()} / {summary.initial_balance.toLocaleString()} USDT</div>
          </div>
        </div>

        {/* Stats */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {[
            { label: "胜率", value: `${summary.win_rate}%`, color: summary.win_rate >= 50 ? "text-emerald-400" : summary.win_rate >= 45 ? "text-yellow-400" : "text-red-400" },
            { label: "净R", value: `${summary.net_r >= 0 ? "+" : ""}${summary.net_r}R`, color: summary.net_r >= 0 ? "text-emerald-400" : "text-red-400" },
            { label: "24h盈亏", value: `${summary.pnl_usdt_24h >= 0 ? "+" : ""}${summary.pnl_usdt_24h}U`, color: summary.pnl_usdt_24h >= 0 ? "text-emerald-400" : "text-red-400" },
            { label: "总交易数", value: summary.trade_count, color: "text-white" },
          ].map(({ label, value, color }) => (
            <div key={label} className="bg-gray-800 rounded-lg p-3">
              <div className="text-xs text-gray-400 mb-1">{label}</div>
              <div className={`text-xl font-bold ${color}`}>{value}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Tabs */}
      <div className="flex gap-2 mb-6">
        {["signals", "paper"].map((t) => (
          <button
            key={t}
            onClick={() => router.push(`/strategy-plaza/${strategyId}?tab=${t}`)}
            className={`px-5 py-2 rounded-lg text-sm font-medium transition-colors ${
              tab === t
                ? "bg-cyan-600 text-white"
                : "bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700"
            }`}
          >
            {t === "signals" ? "📊 信号引擎" : "📈 模拟盘"}
          </button>
        ))}
      </div>

      {/* Tab Content */}
      <div className="bg-gray-900 border border-gray-700 rounded-xl overflow-hidden">
        {tab === "signals" ? (
          <SignalsView strategyId={strategyId} />
        ) : (
          <TradesView strategyId={strategyId} />
        )}
      </div>
    </div>
  );
}