"use client";

import { useEffect, useState, useCallback } from "react";
import { authFetch } from "@/lib/auth";
import { useAuth } from "@/lib/auth";
import Link from "next/link";
import {
  TrendingUp,
  TrendingDown,
  Clock,
  Activity,
  AlertCircle,
  CheckCircle,
  PauseCircle,
} from "lucide-react";

interface StrategyCard {
  id: string;
  display_name: string;
  status: "running" | "paused" | "error";
  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;
  last_trade_at: number | null;
}

function formatDuration(ms: number): string {
  const totalSec = Math.floor((Date.now() - ms) / 1000);
  const d = Math.floor(totalSec / 86400);
  const h = Math.floor((totalSec % 86400) / 3600);
  const m = Math.floor((totalSec % 3600) / 60);
  if (d > 0) return `${d}天 ${h}小时`;
  if (h > 0) return `${h}小时 ${m}分`;
  return `${m}分钟`;
}

function formatTime(ms: number | null): string {
  if (!ms) return "—";
  const d = new Date(ms);
  return d.toLocaleString("zh-CN", {
    timeZone: "Asia/Shanghai",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    hour12: false,
  });
}

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

function StrategyCardComponent({ s }: { s: StrategyCard }) {
  const isProfit = s.net_usdt >= 0;
  const is24hProfit = s.pnl_usdt_24h >= 0;
  const balancePct = ((s.current_balance / s.initial_balance) * 100).toFixed(1);

  return (
    <Link href={`/strategy-plaza/${s.id}`}>
      <div className="rounded-xl border border-slate-200 bg-white overflow-hidden hover:border-blue-300 hover:shadow-md transition-all cursor-pointer group">
        {/* Header */}
        <div className="px-4 py-3 border-b border-slate-100 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <h3 className="font-semibold text-slate-800 text-sm group-hover:text-blue-700 transition-colors">
              {s.display_name}
            </h3>
            <StatusBadge status={s.status} />
          </div>
          <span className="text-[10px] text-slate-400 flex items-center gap-1">
            <Clock size={9} />
            {formatDuration(s.started_at)}
          </span>
        </div>

        {/* Main PnL */}
        <div className="px-4 pt-3 pb-2">
          <div className="flex items-end justify-between mb-2">
            <div>
              <div className="text-[10px] text-slate-400 mb-0.5">当前余额</div>
              <div className="text-xl font-bold text-slate-800">
                {s.current_balance.toLocaleString()}
                <span className="text-xs font-normal text-slate-400 ml-1">USDT</span>
              </div>
            </div>
            <div className="text-right">
              <div className="text-[10px] text-slate-400 mb-0.5">累计盈亏</div>
              <div className={`text-lg font-bold ${isProfit ? "text-emerald-600" : "text-red-500"}`}>
                {isProfit ? "+" : ""}{s.net_usdt.toLocaleString()} U
              </div>
            </div>
          </div>

          {/* Balance Bar */}
          <div className="mb-3">
            <div className="flex justify-between text-[10px] text-slate-400 mb-1">
              <span>{balancePct}%</span>
              <span>{s.initial_balance.toLocaleString()} USDT 初始</span>
            </div>
            <div className="w-full bg-slate-100 rounded-full h-1.5">
              <div
                className={`h-1.5 rounded-full ${isProfit ? "bg-emerald-400" : "bg-red-400"}`}
                style={{ width: `${Math.min(100, Math.max(0, (s.current_balance / s.initial_balance) * 100))}%` }}
              />
            </div>
          </div>

          {/* Stats Row */}
          <div className="grid grid-cols-3 gap-2 mb-3">
            <div className="bg-slate-50 rounded-lg p-2 text-center">
              <div className="text-[10px] text-slate-400">胜率</div>
              <div className={`text-sm font-bold ${s.win_rate >= 50 ? "text-emerald-600" : s.win_rate >= 45 ? "text-amber-600" : "text-red-500"}`}>
                {s.win_rate}%
              </div>
            </div>
            <div className="bg-slate-50 rounded-lg p-2 text-center">
              <div className="text-[10px] text-slate-400">净R</div>
              <div className={`text-sm font-bold ${s.net_r >= 0 ? "text-emerald-600" : "text-red-500"}`}>
                {s.net_r >= 0 ? "+" : ""}{s.net_r}R
              </div>
            </div>
            <div className="bg-slate-50 rounded-lg p-2 text-center">
              <div className="text-[10px] text-slate-400">交易数</div>
              <div className="text-sm font-bold text-slate-700">{s.trade_count}</div>
            </div>
          </div>

          {/* Avg win/loss */}
          <div className="flex gap-2 mb-3">
            <div className="flex-1 bg-emerald-50 rounded-lg px-2.5 py-1.5">
              <span className="text-[10px] text-emerald-600">平均赢</span>
              <span className="float-right text-[10px] font-bold text-emerald-600">+{s.avg_win_r}R</span>
            </div>
            <div className="flex-1 bg-red-50 rounded-lg px-2.5 py-1.5">
              <span className="text-[10px] text-red-500">平均亏</span>
              <span className="float-right text-[10px] font-bold text-red-500">{s.avg_loss_r}R</span>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="px-4 py-2.5 border-t border-slate-100 flex items-center justify-between bg-slate-50/60">
          <div className="flex items-center gap-1">
            {is24hProfit ? (
              <TrendingUp size={12} className="text-emerald-500" />
            ) : (
              <TrendingDown size={12} className="text-red-500" />
            )}
            <span className={`text-[10px] font-medium ${is24hProfit ? "text-emerald-600" : "text-red-500"}`}>
              24h {is24hProfit ? "+" : ""}{s.pnl_usdt_24h.toLocaleString()} U
            </span>
          </div>
          <div className="flex items-center gap-1 text-[10px] text-slate-400">
            <Activity size={9} />
            {s.open_positions > 0 ? (
              <span className="text-amber-600 font-medium">{s.open_positions}仓持仓中</span>
            ) : (
              <span>上次: {formatTime(s.last_trade_at)}</span>
            )}
          </div>
        </div>
      </div>
    </Link>
  );
}

export default function StrategyPlazaPage() {
  useAuth();
  const [strategies, setStrategies] = useState<StrategyCard[]>([]);
  const [loading, setLoading] = useState(true);
  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);

  const fetchData = useCallback(async () => {
    try {
      const res = await authFetch("/api/strategy-plaza");
      const data = await res.json();
      setStrategies(data.strategies || []);
      setLastUpdated(new Date());
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  }, []);

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

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-64">
        <div className="text-slate-400 text-sm animate-pulse">加载中...</div>
      </div>
    );
  }

  return (
    <div className="p-4 max-w-5xl mx-auto">
      {/* Header */}
      <div className="flex items-center justify-between mb-5">
        <div>
          <h1 className="text-lg font-bold text-slate-800">策略广场</h1>
          <p className="text-slate-500 text-xs mt-0.5">点击卡片查看信号引擎和模拟盘详情</p>
        </div>
        {lastUpdated && (
          <div className="text-[10px] text-slate-400 flex items-center gap-1">
            <span className="inline-block w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
            {lastUpdated.toLocaleTimeString("zh-CN", { timeZone: "Asia/Shanghai", hour12: false })}
          </div>
        )}
      </div>

      {/* Strategy Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        {strategies.map((s) => (
          <StrategyCardComponent key={s.id} s={s} />
        ))}
      </div>

      {strategies.length === 0 && (
        <div className="text-center text-slate-400 text-sm py-16">暂无策略数据</div>
      )}
    </div>
  );
}
