import "./agents.css";
import Sidebar from "../components/Sidebar";
import TopBar from "../components/TopBar";
import AgentStats from "./AgentStats";
import AgentCards from "./AgentCards";
import SystemTicker from "./SystemTicker";

export const metadata = {
  title: "ThirdEye | Agent Operations",
  description: "Agent Fleet Management — ThirdEye Sovereign Protocol",
};

export default function AgentsPage() {
  return (
    <div className="flex h-screen overflow-hidden bg-[#09090B] text-white" style={{ fontFamily: "'Poppins', sans-serif" }}>
      <Sidebar />
      <main className="flex-1 ml-[240px] flex flex-col h-screen overflow-hidden">
        <TopBar />

        {/* Scrollable content */}
        <div className="flex-1 overflow-y-auto custom-scrollbar px-10 pb-12 pt-10">
          {/* Header & Stats */}
          <div className="flex flex-col lg:flex-row justify-between items-start lg:items-end mb-10 gap-6">
            <div className="space-y-1">
              <h1
                className="text-3xl font-black tracking-tighter text-white flex items-center gap-3"
                style={{ fontFamily: "'Inter Tight', sans-serif" }}
              >
                Fleet Management
                <span
                  className="px-2 py-0.5 text-[10px] rounded border font-mono-data tracking-widest uppercase"
                  style={{
                    backgroundColor: "rgba(168, 140, 251, 0.1)",
                    color: "#a88cfb",
                    borderColor: "rgba(168, 140, 251, 0.2)",
                  }}
                >
                  Live Status
                </span>
              </h1>
              <p
                className="max-w-xl text-sm leading-relaxed"
                style={{ color: "#acaab1" }}
              >
                Active deployment of neural processing agents across ThirdEye node
                clusters. Monitoring real-time throughput and cognitive load.
              </p>
            </div>
            <button
              className="font-bold text-sm px-6 py-3 rounded-lg flex items-center gap-3 neon-glow-violet active:scale-95 transition-all"
              style={{
                backgroundColor: "#a88cfb",
                color: "#260069",
                fontFamily: "'Inter Tight', sans-serif",
              }}
            >
              <span className="material-symbols-outlined text-lg">add_circle</span>
              Deploy New Agent
            </button>
          </div>

          {/* Stats Grid */}
          <AgentStats />

          {/* Agent Cards Grid */}
          <AgentCards />

          {/* Ticker Section */}
          <SystemTicker />
        </div>
      </main>
    </div>
  );

}