"use client";

import { Play, Pause, Square, Bot } from "lucide-react";
import { cn } from "@/design-system/utils/cn";
import type { AgentStatus } from "@/types/models";

interface AgentTableProps {
  agents: AgentStatus[];
}

const statusConfig: Record<
  string,
  { color: string; icon: typeof Play; label: string; textColor: string }
> = {
  running: {
    color: "bg-[#00ffcc]",
    icon: Play,
    label: "RUNNING",
    textColor: "text-[#00ffcc]",
  },
  active: {
    color: "bg-[#00ffcc]",
    icon: Play,
    label: "ACTIVE",
    textColor: "text-[#00ffcc]",
  },
  paused: {
    color: "bg-[#ffb74d]",
    icon: Pause,
    label: "PAUSED",
    textColor: "text-[#ffb74d]",
  },
  resting: {
    color: "bg-[#ffb74d]",
    icon: Pause,
    label: "RESTING",
    textColor: "text-[#ffb74d]",
  },
  stopped: {
    color: "bg-[#666666]",
    icon: Square,
    label: "STOPPED",
    textColor: "text-[#666666]",
  },
  error: {
    color: "bg-[#ff5252]",
    icon: Square,
    label: "ERROR",
    textColor: "text-[#ff5252]",
  },
  danger: {
    color: "bg-[#ff5252]",
    icon: Square,
    label: "DANGER",
    textColor: "text-[#ff5252]",
  },
  bankrupt: {
    color: "bg-[#ff5252]",
    icon: Square,
    label: "BANKRUPT",
    textColor: "text-[#ff5252]",
  },
};

export function AgentTable({ agents }: AgentTableProps) {
  return (
    <div className="bg-[#1e1e1e] border border-[#2c2c2c] rounded-xl overflow-hidden">
      <div className="px-4 py-3 border-b border-[#2c2c2c] flex items-center justify-between">
        <h3 className="text-sm font-semibold text-[#e1e1e1] flex items-center gap-2">
          <Bot className="w-4 h-4 text-[#00ffcc]" />
          代理矩阵
        </h3>
        <span className="text-[10px] font-bold text-[#666666]">
          {agents.length} 活跃节点
        </span>
      </div>
      <div className="p-4">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="bg-[#121212]/50">
                <th className="px-6 py-3 text-left text-[10px] font-black text-[#666666] uppercase tracking-widest">
                  Unit
                </th>
                <th className="px-6 py-3 text-left text-[10px] font-black text-[#666666] uppercase tracking-widest">
                  Status
                </th>
                <th className="px-6 py-3 text-left text-[10px] font-black text-[#666666] uppercase tracking-widest">
                  Logic
                </th>
                <th className="px-6 py-3 text-left text-[10px] font-black text-[#666666] uppercase tracking-widest">
                  Asset
                </th>
                <th className="px-6 py-3 text-right text-[10px] font-black text-[#666666] uppercase tracking-widest">
                  P&L
                </th>
                <th className="px-6 py-3 text-right text-[10px] font-black text-[#666666] uppercase tracking-widest">
                  OPS
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-[#2c2c2c]">
              {agents.map((agent) => {
                const status = statusConfig[agent.status] || {
                  color: "bg-[#666666]",
                  icon: Square,
                  label: agent.status.toUpperCase(),
                  textColor: "text-[#666666]",
                };
                const StatusIcon = status.icon;

                return (
                  <tr
                    key={agent.id}
                    className="hover:bg-[#121212] group transition-colors cursor-default"
                  >
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div>
                        <p className="text-sm font-black text-[#e1e1e1] group-hover:text-[#00ffcc] transition-colors">
                          {agent.name}
                        </p>
                        <p className="text-[10px] text-[#666666] font-mono uppercase">
                          {agent.id ? agent.id.slice(0, 12) : "Unknown ID"}
                        </p>
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <div className="flex items-center gap-2">
                        <span
                          className={cn(
                            "w-2 h-2 rounded-full shadow-[0_0_5px_currentColor]",
                            status.color,
                          )}
                        />
                        <span
                          className={cn(
                            "text-[10px] font-black uppercase tracking-widest",
                            status.textColor,
                          )}
                        >
                          {status.label}
                        </span>
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className="text-xs font-bold text-[#a0a0a0] uppercase">
                        {agent.strategy}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      <span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-black bg-[#00ffcc]/10 text-[#00ffcc] uppercase tracking-tighter">
                        {agent.symbol}
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-right">
                      <div>
                        <p
                          className={cn(
                            "text-sm font-black italic tracking-tighter",
                            agent.profitLoss >= 0
                              ? "text-[#00ffcc]"
                              : "text-[#ff5252]",
                          )}
                        >
                          {agent.profitLoss >= 0 ? "+" : ""}
                          {agent.profitLoss?.toFixed(2) ?? "0.00"}
                        </p>
                      </div>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-right">
                      <span className="text-xs font-bold text-[#e1e1e1]">
                        {agent.tradesCount}
                      </span>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

export default AgentTable;
