"use client";

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

export default function MissionControlDashboard({ onLogout }: { onLogout?: () => void }) {
  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set(["command", "personal", "automation"]));

  const toggleCategory = (id: string) => {
    setExpandedCategories((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  };

  const expandAll = () => {
    setExpandedCategories(new Set(categories.map((c) => c.id)));
  };

  const collapseAll = () => {
    setExpandedCategories(new Set());
  };

  const categories = [
    {
      id: "command",
      name: "Command",
      icon: "👁️",
      items: [
        { id: "dashboard", name: "Dashboard", icon: "🏠", color: "#3b82f6", href: "/mission-control" },
        { id: "horus-chat", name: "Horus Chat", icon: "💬", color: "#8b5cf6", href: "/mission-control/claude-chat" },
        { id: "voice-chat", name: "Voice Chat", icon: "🎤", color: "#06b6d4", href: "/mission-control/voice" },
      ]
    },
    {
      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: "automation",
      name: "Automation",
      icon: "⚡",
      items: [
        { id: "horus-ai", name: "Horus AI", icon: "🤖", color: "#f59e0b", href: "/mission-control/horus-ai" },
        { id: "autorun", name: "Auto-Run", icon: "🔄", color: "#22c55e", href: "/mission-control/autorun" },
        { id: "exec-logs", name: "Execution Logs", icon: "📊", color: "#ef4444", href: "/mission-control/execution-logs" },
        { id: "change-log", name: "Change Log", icon: "📝", color: "#a855f7", href: "/mission-control/change-log" },
        { id: "brainown", name: "Brainown", icon: "🧠", color: "#fbbf24", href: "/mission-control/brainown" },
      ]
    },
    {
      id: "council",
      name: "Council",
      icon: "🏛️",
      items: [
        { id: "agents", name: "Agents", icon: "👥", color: "#8b5cf6", href: "/mission-control/agents" },
        { id: "sessions", name: "Sessions", icon: "💬", color: "#06b6d4", href: "/mission-control/sessions" },
        { id: "council-chat", name: "Council Chat", icon: "🏛️", color: "#a855f7", href: "/mission-control/council" },
        { id: "clawhub", name: "ClawHub Store", icon: "🛒", color: "#ec4899", href: "/mission-control/clawhub" },
      ]
    },
    {
      id: "projects",
      name: "Projects & Tasks",
      icon: "📋",
      items: [
        { id: "task-board", name: "Task Board", icon: "✅", color: "#3b82f6", href: "/mission-control/tasks" },
        { id: "task-history", name: "Task History", icon: "📜", color: "#6366f1", href: "/mission-control/task-history" },
        { id: "monday", name: "Monday Board", icon: "📅", color: "#f59e0b", href: "/mission-control/monday" },
      ]
    },
    {
      id: "trading",
      name: "Trading",
      icon: "📊",
      items: [
        { id: "trading-panel", name: "Trading Panel", icon: "📈", color: "#10b981", href: "/mission-control/trading" },
        { id: "trading-chart", name: "Trading Chart", icon: "📉", color: "#ef4444", href: "/mission-control/trading-chart" },
        { id: "trading-reports", name: "Trading Reports", icon: "📔", color: "#f59e0b", href: "/mission-control/trading-reports" },
        { id: "trading-tools", name: "Trading Tools", icon: "🛠️", color: "#8b5cf6", href: "/mission-control/trading-tools" },
      ]
    },
    {
      id: "leads",
      name: "Leads & CRM",
      icon: "💼",
      items: [
        { id: "leads", name: "Lead Manager", icon: "📋", color: "#f59e0b", href: "/mission-control/leads" },
        { id: "hp-leads", name: "HP Leads", icon: "🚀", color: "#22c55e", href: "/mission-control/hp-leads" },
        { id: "hp-submissions", name: "HP Submissions", icon: "📨", color: "#ef4444", href: "/mission-control/hp-submissions" },
      ]
    },
    {
      id: "memory",
      name: "Memory & Research",
      icon: "📝",
      items: [
        { id: "daily-memory", name: "Daily Memory", icon: "📅", color: "#a855f7", href: "/mission-control/memory" },
        { id: "briefs", name: "Briefs", icon: "☀️", color: "#fbbf24", href: "/mission-control/briefs" },
        { id: "research", name: "Deep Research", icon: "🔬", color: "#3b82f6", href: "/mission-control/research" },
        { id: "transcripts", name: "Transcripts", icon: "📹", color: "#6366f1", href: "/mission-control/transcripts" },
        { id: "docs", name: "Docs", icon: "📚", color: "#10b981", href: "/mission-control/docs" },
      ]
    },
    {
      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: "system",
      name: "System",
      icon: "⚙️",
      items: [
        { id: "system-status", name: "System Status", icon: "📡", color: "#10b981", href: "/mission-control/system-status" },
        { id: "skills-panel", name: "Skills Panel", icon: "🎯", color: "#f59e0b", href: "/mission-control/skills" },
        { id: "command-center", name: "Command Center", icon: "⌨️", color: "#ef4444", href: "/mission-control/command" },
        { id: "projects-panel", name: "Projects Panel", icon: "📁", color: "#6366f1", href: "/mission-control/projects-panel" },
      ]
    },
  ];

  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 v3.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={() => toggleCategory(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 ${expandedCategories.has(category.id) ? "rotate-90" : ""}`}>▶</span>
              </button>

              {/* Category Items */}
              {expandedCategories.has(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>

        {/* Expand/Collapse All Buttons */}
        <div className="p-3 border-t border-slate-800 space-y-2">
          <button
            onClick={expandAll}
            className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 transition-colors text-sm text-slate-300"
          >
            <span>⬇️</span>
            <span>Expand All</span>
          </button>
          <button
            onClick={collapseAll}
            className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 transition-colors text-sm text-slate-300"
          >
            <span>⬆️</span>
            <span>Collapse All</span>
          </button>
        </div>

        {/* Footer */}
        <div className="p-3 border-t border-slate-800 space-y-2">
          <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>
          {onLogout && (
            <button
              onClick={onLogout}
              className="w-full py-2 rounded-lg bg-red-500/20 hover:bg-red-500/30 text-red-400 text-sm font-medium transition-colors"
            >
              Logout
            </button>
          )}
        </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 v3.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>
  );
}