"use client";

import { useState } from "react";
import Link from "next/link";

export default function MissionControlDashboard() {
  const [expandedCategory, setExpandedCategory] = useState<string | null>("council");

  const categories = [
    {
      id: "council",
      name: "Council",
      icon: "👁️",
      items: [
        { id: "temple", name: "Temple of AI", icon: "🏛️", color: "#fbbf24", href: "/mission-control/temple" },
        { id: "office", name: "Claw3D Office", icon: "🏢", color: "#22c55e", href: "/mission-control/office" },
        { id: "memory", name: "Daily Memory", icon: "📝", color: "#a855f7", href: "/mission-control/memory" },
        { id: "claude", name: "Claude Chat", icon: "💬", color: "#ff6154", href: "/mission-control/claude-chat" },
      ]
    },
    {
      id: "personal",
      name: "Personal",
      icon: "👤",
      items: [
        { id: "resume", name: "Resume Builder", icon: "📄", color: "#10b981", href: "/mission-control/resume" },
        { id: "pdf-viewer", name: "PDF Viewer", icon: "📰", color: "#6366f1", href: "/mission-control/pdf-viewer" },
      ]
    },
    {
      id: "sites",
      name: "Sites",
      icon: "🌐",
      items: [
        { id: "sitemente", name: "SiteMente", icon: "🌐", color: "#3b82f6", href: "https://sitemente.com", external: true },
        { id: "hostpioneers", name: "HostPioneers", icon: "🚀", color: "#22c55e", href: "https://hostpioneers.com", external: true },
        { id: "immortalz", name: "Immortalz", icon: "🎮", color: "#a855f7", href: "https://immortalz.org", external: true },
      ]
    },
    {
      id: "tools",
      name: "Tools",
      icon: "🛠️",
      items: [
        { id: "leads", name: "Lead Manager", icon: "📋", color: "#f59e0b", href: "/mission-control/leads" },
        { id: "email", name: "Email Campaign", icon: "📧", color: "#ef4444", href: "/mission-control/email" },
        { id: "trading", name: "Trading Panel", icon: "📈", color: "#10b981", href: "/mission-control/trading" },
      ]
    },
    {
      id: "agents",
      name: "Agents",
      icon: "🤖",
      items: [
        { id: "agents-list", name: "Agent Roster", icon: "👥", color: "#8b5cf6", href: "/mission-control/agents" },
        { id: "sessions", name: "Sessions", icon: "💬", color: "#06b6d4", href: "/mission-control/sessions" },
      ]
    },
  ];

  return (
    <div className="flex h-screen bg-slate-950 text-white overflow-hidden">
      {/* Sidebar */}
      <div className="w-64 bg-slate-900 border-r border-slate-800 flex flex-col flex-shrink-0">
        {/* Logo */}
        <div className="p-4 border-b border-slate-800">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center text-xl">👁️</div>
            <div>
              <h1 className="font-bold text-lg">Mission Control</h1>
              <p className="text-xs text-slate-500">Horus OS v2.0</p>
            </div>
          </div>
        </div>

        {/* Navigation */}
        <div className="flex-1 overflow-y-auto p-3 space-y-1">
          {categories.map((category) => (
            <div key={category.id}>
              {/* Category Header */}
              <button
                onClick={() => setExpandedCategory(expandedCategory === category.id ? null : category.id)}
                className="w-full flex items-center justify-between px-2 py-2 text-xs font-semibold text-slate-400 uppercase tracking-wider hover:text-white transition-colors"
              >
                <div className="flex items-center gap-2">
                  <span>{category.icon}</span>
                  <span>{category.name}</span>
                </div>
                <span className={`transition-transform ${expandedCategory === category.id ? "rotate-90" : ""}`}>▶</span>
              </button>

              {/* Category Items */}
              {expandedCategory === category.id && (
                <div className="ml-2 space-y-0.5 mt-1">
                  {category.items.map((item) => (
                    item.external ? (
                      <a
                        key={item.id}
                        href={item.href}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center gap-3 px-3 py-2 rounded-lg transition-all text-sm text-slate-400 hover:bg-slate-800/50 hover:text-white"
                      >
                        <span className="text-base">{item.icon}</span>
                        <span className="flex-1">{item.name}</span>
                        {item.color && (
                          <span className="w-2 h-2 rounded-full" style={{ backgroundColor: item.color }} />
                        )}
                        <span className="text-xs">↗</span>
                      </a>
                    ) : (
                      <Link
                        key={item.id}
                        href={item.href || "#"}
                        className="flex items-center gap-3 px-3 py-2 rounded-lg transition-all text-sm text-slate-400 hover:bg-slate-800/50 hover:text-white"
                      >
                        <span className="text-base">{item.icon}</span>
                        <span className="flex-1">{item.name}</span>
                        {item.color && (
                          <span className="w-2 h-2 rounded-full" style={{ backgroundColor: item.color }} />
                        )}
                      </Link>
                    )
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>

        {/* Footer */}
        <div className="p-3 border-t border-slate-800">
          <div className="bg-slate-800/50 rounded-lg p-3">
            <div className="flex items-center gap-2 mb-1">
              <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
              <span className="text-xs text-green-400 font-medium">Systems Operational</span>
            </div>
            <p className="text-xs text-slate-500">Horus is watching 👁️</p>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="flex-1 flex flex-col overflow-hidden">
        {/* Top Bar */}
        <div className="h-14 bg-slate-900/50 border-b border-slate-800 flex items-center justify-between px-6">
          <div className="flex items-center gap-4">
            <span className="text-slate-400 text-sm">Mission Control</span>
          </div>
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2 text-xs text-slate-500">
              <span>Horus v2.0</span>
            </div>
          </div>
        </div>

        {/* Content Area */}
        <div className="flex-1 overflow-y-auto p-6">
          <div className="h-full flex items-center justify-center">
            <div className="text-center">
              <div className="text-8xl mb-6 opacity-50">👁️</div>
              <h2 className="text-2xl font-bold mb-2">Mission Control</h2>
              <p className="text-slate-500 max-w-md">
                Your AI command center. Select a tool from the sidebar to begin.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}