'use client';

import { Brain, Network } from 'lucide-react';
import { AgentDashboard } from '@/components/agent-hierarchy/agent-dashboard';

export default function AgentsPage() {
  return (
    <div className="min-h-screen bg-brand-bg p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center gap-3 mb-2">
            <div className="p-2 bg-brand-secondary/10 rounded-lg">
              <Brain className="w-6 h-6 text-brand-secondary-light" />
            </div>
            <div>
              <h1 className="text-2xl font-bold text-white">Agent Hierarchy</h1>
              <p className="text-sm text-gray-400">Agent CEO (Tes) coordinates domain-specific sub-agents. Each has persistent memory and autonomous reasoning.</p>
            </div>
          </div>
          <div className="mt-3 flex items-center gap-2 text-xs text-gray-500">
            <Network className="w-3.5 h-3.5" />
            <span>Click any agent to chat. Agents gain XP through interactions and level up over time. Cross-domain issues escalate to Agent CEO.</span>
          </div>
        </div>

        <AgentDashboard />
      </div>
    </div>
  );
}
