"use client";

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

interface StrategyCard {
  strategy_id: string;
  display_name: string;
  symbol: 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>
  );
}

// ── AddBalanceModal ────────────────────────────────────────────────────────────
function AddBalanceModal({
  strategy,
  onClose,
  onSuccess,
}: {
  strategy: StrategyCard;
  onClose: () => void;
  onSuccess: () => void;
}) {
  const [amount, setAmount] = useState(1000);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");

  const handleSubmit = async () => {
    if (amount <= 0) { setError("金额必须大于0"); return; }
    setSubmitting(true);
    setError("");
    try {
      const res = await authFetch(`/api/strategies/${strategy.strategy_id}/add-balance`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ amount }),
      });
      if (!res.ok) throw new Error("追加失败");
      onSuccess();
      onClose();
    } catch (e) {
      setError(e instanceof Error ? e.message : "未知错误");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
      <div className="bg-white rounded-xl shadow-xl p-5 w-80">
        <h3 className="font-semibold text-slate-800 text-sm mb-1">追加余额</h3>
        <p className="text-[11px] text-slate-500 mb-3">策略：{strategy.display_name}</p>
        <div className="mb-3">
          <label className="text-xs text-slate-600 mb-1 block">追加金额 (USDT)</label>
          <input
            type="number"
            value={amount}
            min={100}
            step={100}
            onChange={(e) => setAmount(parseFloat(e.target.value) || 0)}
            className="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm"
          />
          <p className="text-[10px] text-slate-400 mt-1">
            追加后初始资金：{(strategy.initial_balance + amount).toLocaleString()} USDT /
            余额：{(strategy.current_balance + amount).toLocaleString()} USDT
          </p>
        </div>
        {error && <p className="text-xs text-red-500 mb-2">{error}</p>}
        <div className="flex gap-2">
          <button onClick={onClose} className="flex-1 py-2 rounded-lg border border-slate-200 text-sm text-slate-600 hover:bg-slate-50">取消</button>
          <button
            onClick={handleSubmit}
            disabled={submitting}
            className="flex-1 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
          >
            {submitting ? "追加中..." : "确认追加"}
          </button>
        </div>
      </div>
    </div>
  );
}

// ── StrategyCardComponent ──────────────────────────────────────────────────────
function StrategyCardComponent({
  s,
  onDeprecate,
  onAddBalance,
}: {
  s: StrategyCard;
  onDeprecate: (s: StrategyCard) => void;
  onAddBalance: (s: StrategyCard) => void;
}) {
  const isProfit = s.net_usdt >= 0;
  const is24hProfit = s.pnl_usdt_24h >= 0;
  const balancePct = ((s.current_balance / s.initial_balance) * 100).toFixed(1);
  const symbolShort = s.symbol?.replace("USDT", "") || "";

  return (
    <div className="rounded-xl border border-slate-200 bg-white overflow-hidden hover:border-blue-300 hover:shadow-md transition-all 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">
          <Link href={`/strategy-plaza/${s.strategy_id}`}>
            <h3 className="font-semibold text-slate-800 text-sm group-hover:text-blue-700 transition-colors cursor-pointer hover:underline">
              {s.display_name}
            </h3>
          </Link>
          <StatusBadge status={s.status} />
          {symbolShort && (
            <span className="text-[10px] text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded-full">{symbolShort}</span>
          )}
        </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>

      {/* Action Buttons */}
      <div className="px-4 py-2.5 border-t border-slate-100 flex gap-2">
        <Link
          href={`/strategy-plaza/${s.strategy_id}/edit`}
          className="flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-lg border border-slate-200 text-[11px] text-slate-600 hover:bg-slate-50 transition-colors"
        >
          <Settings size={11} />
          调整参数
        </Link>
        <button
          onClick={() => onAddBalance(s)}
          className="flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-lg border border-blue-200 text-[11px] text-blue-600 hover:bg-blue-50 transition-colors"
        >
          <PlusCircle size={11} />
          追加余额
        </button>
        <button
          onClick={() => onDeprecate(s)}
          className="flex items-center justify-center gap-1 px-2.5 py-1.5 rounded-lg border border-red-200 text-[11px] text-red-500 hover:bg-red-50 transition-colors"
        >
          <Trash2 size={11} />
        </button>
      </div>
    </div>
  );
}

// ── Main Page ─────────────────────────────────────────────────────────────────
export default function StrategyPlazaPage() {
  useAuth();
  const router = useRouter();
  const [strategies, setStrategies] = useState<StrategyCard[]>([]);
  const [loading, setLoading] = useState(true);
  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
  const [addBalanceTarget, setAddBalanceTarget] = useState<StrategyCard | null>(null);

  type SymbolFilter = "ALL" | "BTCUSDT" | "ETHUSDT" | "XRPUSDT" | "SOLUSDT";
  type StatusFilter = "all" | "running" | "paused" | "error";
  type PnlFilter = "all" | "positive" | "negative";
  type SortKey = "recent" | "net_usdt_desc" | "net_usdt_asc" | "pnl24h_desc" | "pnl24h_asc";

  const [symbolFilter, setSymbolFilter] = useState<SymbolFilter>("ALL");
  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
  const [pnlFilter, setPnlFilter] = useState<PnlFilter>("all");
  const [sortKey, setSortKey] = useState<SortKey>("net_usdt_desc");

  const fetchData = useCallback(async () => {
    try {
      const res = await authFetch("/api/strategies");
      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]);

  const handleDeprecate = async (s: StrategyCard) => {
    if (!confirm(`确认废弃策略「${s.display_name}」？\n\n废弃后策略停止运行，数据永久保留，可在废弃列表中重新启用。`)) return;
    try {
      await authFetch(`/api/strategies/${s.strategy_id}/deprecate`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ confirm: true }),
      });
      await fetchData();
    } catch (e) {
      console.error(e);
    }
  };

  const filteredStrategies = strategies
    .filter((s) => {
      if (symbolFilter !== "ALL" && s.symbol !== symbolFilter) return false;
      if (statusFilter !== "all" && s.status !== statusFilter) return false;
      if (pnlFilter === "positive" && s.net_usdt <= 0) return false;
      if (pnlFilter === "negative" && s.net_usdt >= 0) return false;
      return true;
    })
    .sort((a, b) => {
      switch (sortKey) {
        case "net_usdt_desc":
          return b.net_usdt - a.net_usdt;
        case "net_usdt_asc":
          return a.net_usdt - b.net_usdt;
        case "pnl24h_desc":
          return b.pnl_usdt_24h - a.pnl_usdt_24h;
        case "pnl24h_asc":
          return a.pnl_usdt_24h - b.pnl_usdt_24h;
        case "recent":
        default: {
          const aTs = a.last_trade_at ?? a.started_at ?? 0;
          const bTs = b.last_trade_at ?? b.started_at ?? 0;
          return bTs - aTs;
        }
      }
    });

  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>
        <div className="flex items-center gap-3">
          {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>
          )}
          <button
            onClick={() => router.push("/strategy-plaza/create")}
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-blue-600 text-white text-xs font-medium hover:bg-blue-700 transition-colors"
          >
            <Plus size={13} />
            新增策略
          </button>
        </div>
      </div>

      {/* Filters & Sorting */}
      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
        {/* 左侧：币种 + 盈亏过滤 */}
        <div className="flex flex-wrap items-center gap-2">
          <div className="flex items-center gap-1 text-[11px] text-slate-400">
            <span>币种:</span>
            {(["ALL", "BTCUSDT", "ETHUSDT", "XRPUSDT", "SOLUSDT"] as SymbolFilter[]).map((sym) => {
              const label = sym === "ALL" ? "全部" : sym.replace("USDT", "");
              const active = symbolFilter === sym;
              return (
                <button
                  key={sym}
                  onClick={() => setSymbolFilter(sym)}
                  className={`px-2 py-0.5 rounded-full border text-[11px] ${
                    active
                      ? "border-blue-500 bg-blue-50 text-blue-600"
                      : "border-slate-200 text-slate-500 hover:bg-slate-50"
                  }`}
                >
                  {label}
                </button>
              );
            })}
          </div>
          <div className="flex items-center gap-1 text-[11px] text-slate-400">
            <span>盈亏:</span>
            {[
              { key: "all" as PnlFilter, label: "全部" },
              { key: "positive" as PnlFilter, label: "仅盈利" },
              { key: "negative" as PnlFilter, label: "仅亏损" },
            ].map((opt) => {
              const active = pnlFilter === opt.key;
              return (
                <button
                  key={opt.key}
                  onClick={() => setPnlFilter(opt.key)}
                  className={`px-2 py-0.5 rounded-full border text-[11px] ${
                    active
                      ? "border-emerald-500 bg-emerald-50 text-emerald-600"
                      : "border-slate-200 text-slate-500 hover:bg-slate-50"
                  }`}
                >
                  {opt.label}
                </button>
              );
            })}
          </div>
        </div>

        {/* 右侧：状态 + 排序 */}
        <div className="flex flex-wrap items-center gap-2">
          <div className="flex items-center gap-1 text-[11px] text-slate-400">
            <span>状态:</span>
            {[
              { key: "all" as StatusFilter, label: "全部" },
              { key: "running" as StatusFilter, label: "运行中" },
              { key: "paused" as StatusFilter, label: "已暂停" },
              { key: "error" as StatusFilter, label: "异常" },
            ].map((opt) => {
              const active = statusFilter === opt.key;
              return (
                <button
                  key={opt.key}
                  onClick={() => setStatusFilter(opt.key)}
                  className={`px-2 py-0.5 rounded-full border text-[11px] ${
                    active
                      ? "border-slate-700 bg-slate-800 text-white"
                      : "border-slate-200 text-slate-500 hover:bg-slate-50"
                  }`}
                >
                  {opt.label}
                </button>
              );
            })}
          </div>
          <div className="flex items-center gap-1 text-[11px] text-slate-400">
            <span>排序:</span>
            <select
              value={sortKey}
              onChange={(e) => setSortKey(e.target.value as SortKey)}
              className="border border-slate-200 rounded-lg px-2 py-1 text-[11px] text-slate-700 bg-white"
            >
              <option value="net_usdt_desc">总盈亏从高到低</option>
              <option value="net_usdt_asc">总盈亏从低到高</option>
              <option value="pnl24h_desc">24h 盈亏从高到低</option>
              <option value="pnl24h_asc">24h 盈亏从低到高</option>
              <option value="recent">最近有交易优先</option>
            </select>
          </div>
        </div>
      </div>

      {/* Strategy Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        {filteredStrategies.map((s) => (
          <StrategyCardComponent
            key={s.strategy_id}
            s={s}
            onDeprecate={handleDeprecate}
            onAddBalance={setAddBalanceTarget}
          />
        ))}
      </div>

      {filteredStrategies.length === 0 && (
        <div className="text-center text-slate-400 text-sm py-16">
          <p className="mb-3">暂无运行中的策略</p>
          <button
            onClick={() => router.push("/strategy-plaza/create")}
            className="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl bg-blue-600 text-white text-sm hover:bg-blue-700"
          >
            <Plus size={14} />
            创建第一个策略
          </button>
        </div>
      )}

      {/* Add Balance Modal */}
      {addBalanceTarget && (
        <AddBalanceModal
          strategy={addBalanceTarget}
          onClose={() => setAddBalanceTarget(null)}
          onSuccess={fetchData}
        />
      )}
    </div>
  );
}