ftdt-quant-lab/dashboard-next/src/components/strategy-card.tsx

"use client";

import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import type { Strategy } from "@/lib/types";
import { TrendingUp, TrendingDown } from "lucide-react";

interface StrategyCardProps {
  name: string;
  strategy?: Strategy;
  tab: "live" | "paper" | "backtest" | "historical";
  onClick: () => void;
  badge?: string;
  coin?: string;
  stats?: { label: string; value: string; negative?: boolean }[];
  pnlPct?: number;
  status?: string;
}

export function StrategyCard({ name, strategy, tab, onClick, badge, stats, pnlPct, status, coin }: StrategyCardProps) {
  if (strategy) {
    const equity = strategy.allocation + (strategy.pnl ?? 0);
    const isUp = equity >= strategy.allocation;
    const pnl = strategy.pnl ?? 0;
    const pnlPctVal = strategy.pnl_pct ?? 0;
    // Type colors
    const typeColors: Record<string, string> = {
      reversal: "bg-blue-100 text-blue-700",
      momentum: "bg-amber-100 text-amber-700",
      stat_arb: "bg-purple-100 text-purple-700",
      carry: "bg-cyan-100 text-cyan-700",
      market_making: "bg-emerald-100 text-emerald-700",
    };
    const typeColor = typeColors[strategy.type] || "bg-gray-100 text-gray-600";
    const assetShort = strategy.instrument?.split("-")[0] || "";

    return (
      <Card
        className="p-4 cursor-pointer hover:border-[#0ea5e9]/30 hover:shadow-sm transition-all duration-200 border-[#e0e4ec] bg-white"
        onClick={onClick}
      >
        <div className="flex items-start justify-between mb-2">
          <div>
            <p className="text-xs font-medium leading-tight text-[#1a1c23]">{name}</p>
            <div className="flex gap-1 mt-0.5">
              <span className={`text-[8px] px-1.5 py-px rounded font-medium font-mono ${typeColor}`}>{strategy.type}</span>
              <span className="text-[9px] text-[#6e7381]">{assetShort}</span>
            </div>
          </div>
          <div className="flex gap-1">
            <Badge variant={strategy.status === "running" ? "default" : "secondary"} className="text-[8px] h-4 px-1.5">
              {strategy.status?.toUpperCase()}
            </Badge>
            <Badge variant="outline" className="text-[8px] h-4 px-1.5 border-[#e0e4ec]">
              {strategy.fee_model?.toUpperCase()}
            </Badge>
          </div>
        </div>

        <div className={`text-xl font-mono font-bold mb-2 flex items-center gap-1 ${isUp ? "text-[#10b981]" : "text-[#ef4444]"}`}>
          {isUp ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
          ${equity.toFixed(2)}
        </div>

        <div className="flex gap-3 text-[9px] text-[#6e7381] flex-wrap">
          <span>PnL: <b className={pnlPctVal >= 0 ? "text-[#10b981]" : "text-[#ef4444]"}>{pnl >= 0 ? "+" : ""}{pnl.toFixed(2)} ({pnlPctVal >= 0 ? "+" : ""}{pnlPctVal.toFixed(2)}%)</b></span>
          <span>Trades: <b>{strategy.trades_today ?? 0}</b></span>
          <span>Win: <b>{Math.round((strategy.win_rate ?? 0) * 100)}%</b></span>
          <span>Pos: <b>{(strategy.position ?? 0).toFixed(4)}</b></span>
        </div>

        <div className="mt-2 pt-2 border-t border-[#e0e4ec]/50 text-[9px] text-[#6e7381] leading-relaxed">
          <b>Alloc:</b> ${strategy.allocation} · <b>Max pos:</b> {strategy.max_position ?? "—"} · <b>Stop:</b> {strategy.stop_loss ?? "—"}
        </div>
      </Card>
    );
  }

  // Backtest / Historical card
  return (
    <Card
      className="p-4 cursor-pointer hover:border-primary/50 hover:shadow-md transition-all duration-200 hover:-translate-y-0.5 border-border"
      onClick={onClick}
    >
      <div className="flex items-start justify-between mb-2">
        <div>
          <p className="text-xs font-semibold leading-tight">{name}</p>
          <p className="text-[9px] text-muted-foreground mt-0.5">{badge ?? "Backtest"}</p>
        </div>
        <Badge variant="secondary" className="text-[8px] h-4 px-1.5">{status ?? "BACKTEST"}</Badge>
        {coin && <Badge variant="outline" className="text-[8px] h-4 px-1.5 bg-blue-500/10 text-blue-400 border-0">{coin}</Badge>}
      </div>
      <div className={`text-xl font-mono font-bold mb-2 flex items-center gap-1 ${(pnlPct ?? 0) >= 0 ? "text-green-500" : "text-red-500"}`}>
        {(pnlPct ?? 0) >= 0 ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
        {(pnlPct ?? 0) >= 0 ? "+" : ""}{(pnlPct ?? 0).toFixed(2)}%
      </div>
      {stats && (
        <div className="flex gap-3 text-[9px] text-muted-foreground flex-wrap">
          {stats.map((s) => (
            <span key={s.label}>
              {s.label}: <b className={s.negative ? "text-red-500" : ""}>{s.value}</b>
            </span>
          ))}
        </div>
      )}
    </Card>
  );
}