import { readAgents } from '@/lib/read-agents';
import { Badge } from '@/components/badge';

const MODEL_COLORS: Record<string, string> = {
    opus: 'bg-violet-600',
    sonnet: 'bg-blue-600',
    haiku: 'bg-teal-600',
};

const AGENT_COLORS: Record<string, string> = {
    cyan: 'bg-cyan-500',
    red: 'bg-red-500',
    green: 'bg-green-500',
    blue: 'bg-blue-500',
    yellow: 'bg-yellow-500',
    purple: 'bg-purple-500',
    orange: 'bg-orange-500',
};

export default function AgentsPage() {
    const agents = readAgents();

    return (
        <div>
            <div className="mb-8">
                <h1 className="text-2xl font-semibold text-zinc-100">Agents</h1>
                <p className="mt-1 text-sm text-zinc-500">
                    {agents.length} custom agent{agents.length !== 1 ? 's' : ''} installed.
                </p>
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
                {agents.map(agent => (
                    <div
                        key={agent.name}
                        className="rounded-lg border border-zinc-800 bg-zinc-900 p-5"
                    >
                        <div className="mb-3 flex items-start justify-between gap-3">
                            <div className="flex items-center gap-2">
                                {agent.color && (
                                    <span
                                        className={`h-3 w-3 rounded-full ${AGENT_COLORS[agent.color] ?? 'bg-zinc-500'}`}
                                    />
                                )}
                                <h2 className="font-mono text-sm font-semibold text-zinc-100">
                                    {agent.name}
                                </h2>
                            </div>
                            <div className="flex shrink-0 gap-2">
                                <Badge
                                    label={agent.model}
                                    color={MODEL_COLORS[agent.model] ?? 'bg-zinc-600'}
                                />
                                {agent.isSymlink && (
                                    <Badge label="symlink" color="bg-zinc-700" />
                                )}
                            </div>
                        </div>

                        <p className="mb-4 text-sm text-zinc-400">{agent.description}</p>

                        {agent.isSymlink && agent.symlinkTarget && (
                            <p className="mb-3 truncate font-mono text-xs text-zinc-600">
                                → {agent.symlinkTarget}
                            </p>
                        )}

                        <div>
                            <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-600">
                                Tools
                            </p>
                            <div className="flex flex-wrap gap-1.5">
                                {agent.tools.map(tool => (
                                    <span
                                        key={tool}
                                        className="rounded bg-zinc-800 px-2 py-0.5 font-mono text-xs text-zinc-400"
                                    >
                                        {tool}
                                    </span>
                                ))}
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}