"use client";

import Link from "next/link";

const AGENTS = [
  { id: "thoth", name: "Thoth", role: "Strategy & Research", icon: "🦉", color: "#6366f1", status: "idle" },
  { id: "ptah", name: "Ptah", role: "Dev & Ops", icon: "🛠️", color: "#f59e0b", status: "idle" },
  { id: "seshat", name: "Seshat", role: "Content & SEO", icon: "📜", color: "#22c55e", status: "idle" },
  { id: "anubis", name: "Anubis", role: "Outreach & Growth", icon: "🐕", color: "#ef4444", status: "idle" },
  { id: "thoth-trading", name: "Thoth Trading", role: "Market Research", icon: "📈", color: "#10b981", status: "idle" },
  { id: "sekhmet", name: "Sekhmet", role: "Trade Execution", icon: "🦁", color: "#fbbf24", status: "idle" },
  { id: "hathor", name: "Hathor", role: "Personal Growth", icon: "💜", color: "#a855f7", status: "idle" },
];

const SQUADS = [
  {
    name: "SiteMente Squad",
    icon: "🌐",
    agents: ["thoth", "ptah", "seshat", "anubis"],
  },
  {
    name: "Trading Squad",
    icon: "📈",
    agents: ["thoth-trading", "sekhmet"],
  },
  {
    name: "Personal",
    icon: "💜",
    agents: ["hathor"],
  },
];

export default function AgentsPage() {
  return (
    <div className="p-6">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-white mb-2">👥 Agent Roster</h1>
        <p className="text-slate-400">Manage your AI agent council</p>
      </div>

      {SQUADS.map(squad => (
        <div key={squad.name} className="mb-8">
          <h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
            <span>{squad.icon}</span> {squad.name}
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
            {squad.agents.map(agentId => {
              const agent = AGENTS.find(a => a.id === agentId);
              if (!agent) return null;
              return (
                <Link
                  key={agent.id}
                  href={`/mission-control/agent/${agent.id}`}
                  className="bg-slate-800 rounded-lg p-4 hover:bg-slate-700 transition-colors group"
                >
                  <div className="flex items-center gap-3 mb-3">
                    <div 
                      className="w-12 h-12 rounded-xl flex items-center justify-center text-2xl"
                      style={{ backgroundColor: `${agent.color}20` }}
                    >
                      {agent.icon}
                    </div>
                    <div>
                      <h3 className="font-semibold text-white group-hover:text-brand-pink transition-colors">
                        {agent.name}
                      </h3>
                      <p className="text-xs text-slate-400">{agent.role}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="w-2 h-2 rounded-full bg-green-500" />
                    <span className="text-xs text-slate-500">{agent.status}</span>
                  </div>
                </Link>
              );
            })}
          </div>
        </div>
      ))}

      <div className="mt-8 p-4 bg-slate-800/50 rounded-lg">
        <p className="text-slate-400 text-sm">
          💡 Click any agent to view their command center with tasks, logs, and brainown outputs.
        </p>
      </div>
    </div>
  );
}