"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,
  Minus,
  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-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>
  );
}

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="bg-gray-900 border border-gray-700 rounded-xl p-5 hover:border-cyan-600 hover:bg-gray-800 transition-all cursor-pointer group">
        {/* Header */}
        <div className="flex items-start justify-between mb-4">
          <div>
            <h3 className="text-white font-semibold text-lg group-hover:text-cyan-400 transition-colors">
              {s.display_name}
            </h3>
            <div className="flex items-center gap-2 mt-1">
              <StatusBadge status={s.status} />
              <span className="text-xs text-gray-500">
                <Clock size={10} className="inline mr-1" />
                已运行 {formatDuration(s.started_at)}
              </span>
            </div>
          </div>
          <div className="text-right">
            <div className={`text-2xl font-bold ${isProfit ? "text-emerald-400" : "text-red-400"}`}>
              {isProfit ? "+" : ""}{s.net_usdt.toLocaleString()} U
            </div>
            <div className="text-xs text-gray-400">{balancePct}% 余额</div>
          </div>
        </div>

        {/* Balance Bar */}
        <div className="mb-4">
          <div className="flex justify-between text-xs text-gray-400 mb-1">
            <span>当前余额</span>
            <span>{s.current_balance.toLocaleString()} / {s.initial_balance.toLocaleString()} USDT</span>
          </div>
          <div className="w-full bg-gray-700 rounded-full h-1.5">
            <div
              className={`h-1.5 rounded-full ${s.current_balance >= s.initial_balance ? "bg-emerald-500" : "bg-red-500"}`}
              style={{ width: `${Math.min(100, Math.max(0, (s.current_balance / s.initial_balance) * 100))}%` }}
            />
          </div>
        </div>

        {/* Stats Grid */}
        <div className="grid grid-cols-3 gap-3 mb-4">
          <div className="bg-gray-800 rounded-lg p-2.5">
            <div className="text-xs text-gray-400 mb-1">胜率</div>
            <div className={`text-base font-bold ${s.win_rate >= 50 ? "text-emerald-400" : s.win_rate >= 45 ? "text-yellow-400" : "text-red-400"}`}>
              {s.win_rate}%
            </div>
          </div>
          <div className="bg-gray-800 rounded-lg p-2.5">
            <div className="text-xs text-gray-400 mb-1">净R</div>
            <div className={`text-base font-bold ${s.net_r >= 0 ? "text-emerald-400" : "text-red-400"}`}>
              {s.net_r >= 0 ? "+" : ""}{s.net_r}R
            </div>
          </div>
          <div className="bg-gray-800 rounded-lg p-2.5">
            <div className="text-xs text-gray-400 mb-1">交易数</div>
            <div className="text-base font-bold text-white">{s.trade_count}</div>
          </div>
        </div>

        {/* P&L Ratio */}
        <div className="grid grid-cols-2 gap-3 mb-4">
          <div className="bg-gray-800 rounded-lg p-2.5">
            <div className="text-xs text-gray-400 mb-1">平均赢</div>
            <div className="text-sm font-medium text-emerald-400">+{s.avg_win_r}R</div>
          </div>
          <div className="bg-gray-800 rounded-lg p-2.5">
            <div className="text-xs text-gray-400 mb-1">平均亏</div>
            <div className="text-sm font-medium text-red-400">{s.avg_loss_r}R</div>
          </div>
        </div>

        {/* 24h & Last Trade */}
        <div className="flex items-center justify-between border-t border-gray-700 pt-3">
          <div className="flex items-center gap-1">
            {is24hProfit ? (
              <TrendingUp size={14} className="text-emerald-400" />
            ) : (
              <TrendingDown size={14} className="text-red-400" />
            )}
            <span className={`text-xs font-medium ${is24hProfit ? "text-emerald-400" : "text-red-400"}`}>
              24h {is24hProfit ? "+" : ""}{s.pnl_usdt_24h.toLocaleString()} U ({is24hProfit ? "+" : ""}{s.pnl_r_24h}R)
            </span>
          </div>
          <div className="flex items-center gap-1 text-xs text-gray-500">
            <Activity size={10} />
            {s.open_positions > 0 ? (
              <span className="text-yellow-400">{s.open_positions}仓持仓中</span>
            ) : (
              <span>上次: {formatTime(s.last_trade_at)}</span>
            )}
          </div>
        </div>
      </div>
    </Link>
  );
}

export default function StrategyPlazaPage() {
  const { token } = 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-screen">
        <div className="text-gray-400 animate-pulse">加载中...</div>
      </div>
    );
  }

  return (
    <div className="p-6 max-w-6xl mx-auto">
      {/* Header */}
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-2xl font-bold text-white">策略广场</h1>
          <p className="text-gray-400 text-sm mt-1">
            点击策略卡片查看信号引擎和模拟盘详情
          </p>
        </div>
        <div className="text-xs text-gray-500">
          {lastUpdated ? (
            <>
              <span className="inline-block w-2 h-2 rounded-full bg-emerald-400 mr-1.5 animate-pulse" />
              {lastUpdated.toLocaleTimeString("zh-CN", { timeZone: "Asia/Shanghai", hour12: false })} 更新
            </>
          ) : null}
        </div>
      </div>

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

      {strategies.length === 0 && (
        <div className="text-center text-gray-500 py-20">暂无策略数据</div>
      )}
    </div>
  );
}