src/components/layout/QuantumWeaverLayout.tsx

"use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  PanelLeft, Home, Cpu, Zap, Atom, BarChart3, PlayCircle, Lightbulb, 
  Replace, Cog, Scaling, Box, Share2, Wrench, BrainCircuit, Globe, 
  ScatterChart, IterationCw, MessageSquare, Signal, SlidersHorizontal, Monitor, TrendingUp, Wand2, Rocket, ArrowRight, Settings2, ListChecks, Database
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";
import {
  SidebarProvider,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarTrigger,
  SidebarInset,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarGroup,
  SidebarGroupLabel,
  useSidebar, 
} from "@/components/ui/sidebar";

const mainNavItems = [
  { href: "/deep-learning/introduction", label: "Introduction", icon: ArrowRight },
  { href: "/deep-learning/dashboard", label: "Dashboard", icon: Home },
  { href: "/deep-learning/ai-architect", label: "AI Architect", icon: BrainCircuit },
  { href: "/deep-learning/dataset-architect", label: "Dataset Architect", icon: Database },
  { href: "/deep-learning/data-portal", label: "Data Portal", icon: Globe },
  { href: "/deep-learning/train", label: "Train Model", icon: PlayCircle },
  { href: "/deep-learning/my-zpe-ai-models", label: "My ZPE-AI Models", icon: ListChecks },
  { href: "/deep-learning/performance", label: "Performance Analysis", icon: TrendingUp },
  { href: "/deep-learning/gpu-monitor", label: "GPU Monitor", icon: Monitor },
];

const advancedToolsNavItems = [
  { href: "/deep-learning/zpe-flow-analysis", label: "ZPE Flow Analysis", icon: SlidersHorizontal },
  { href: "/deep-learning/zpe-flow", label: "HS-QNN Advisor", icon: BrainCircuit },
  { href: "/deep-learning/quantum-noise", label: "Quantum Noise", icon: Atom },
  { href: "/deep-learning/rf-generator", label: "RF Generator", icon: Signal },
  { href: "/deep-learning/ai-analysis", label: "AI Assistant", icon: MessageSquare },
  { href: "/deep-learning/cloud-gpu", label: "Cloud GPU Connect", icon: Settings2 },
];

const visNavItems = [
  { href: "/deep-learning/vis/bloch-sphere", label: "Bloch Sphere", icon: Globe },
  { href: "/deep-learning/vis/dynamic-formation", label: "Dynamic Formation", icon: IterationCw },
  { href: "/deep-learning/vis/zpe-particle-simulation", label: "ZPE Particle Sim", icon: ScatterChart },
];

const aiFlowsNavItems = [
  { href: "/deep-learning/ai", label: "AI Flows Hub", icon: Rocket },
  { href: "/deep-learning/ai/implement-zpe", label: "Simulate ZPE", icon: Lightbulb },
  { href: "/deep-learning/ai/approximate-zpe", label: "Approximate Flow", icon: Replace },
  { href: "/deep-learning/ai/adapt-zpe", label: "Adapt ZPE", icon: Cog },
  { href: "/deep-learning/ai/show-scaled-output", label: "Scaled Output", icon: Scaling },
  { href: "/deep-learning/ai/quantize-model", label: "Quantize Model", icon: Box },
  { href: "/deep-learning/ai/extract-components", label: "Extract Components", icon: Share2 },
  { href: "/deep-learning/ai/configure-model", label: "Configure Model", icon: Wrench },
  { href: "/deep-learning/ai/invoke-llm", label: "Generic LLM", icon: Wand2 },
];

interface NavItem {
  href: string;
  label: string;
  icon: React.ElementType;
}

const NavLinkWrapper = ({
  item,
  pathname,
  onClick,
}: {
  item: NavItem;
  pathname: string;
  onClick: () => void;
}) => {
  const Icon = item.icon;
  const isActive =
    (pathname === item.href ||
      (pathname.startsWith(item.href + "/") &&
        item.href !== "/deep-learning/dashboard" &&
        item.href !== "/deep-learning" &&
        item.href !== "/deep-learning/ai")) ||
    (pathname === "/deep-learning" && item.href === "/deep-learning/introduction") ||
    (pathname === "/deep-learning/ai" && item.href === "/deep-learning/ai");

  return (
    <SidebarMenuItem>
      <SidebarMenuButton
        asChild
        isActive={isActive}
        tooltip={{ children: item.label, side: "right", align: "center" }}
        className="justify-start items-center h-10"
        onClick={onClick}
      >
        <Link href={item.href} className="flex items-center gap-3 w-full">
          <div className="flex items-center justify-center w-5 h-5 flex-shrink-0">
            <Icon className="h-5 w-5" />
          </div>
          <span className="group-data-[state=collapsed]:hidden flex-1">{item.label}</span>
        </Link>
      </SidebarMenuButton>
    </SidebarMenuItem>
  );
};

const QuantumWeaverSidebarContent = () => {
  const pathname = usePathname();
  const { isMobile, setOpenMobile } = useSidebar();

  const handleLinkClick = () => {
    if (isMobile) {
      setOpenMobile(false);
    }
  };
  
  const renderNavSection = (title: string, items: NavItem[]) => (
    <SidebarGroup>
      <SidebarGroupLabel>{title}</SidebarGroupLabel>
      <SidebarMenu>
        {items.map((item) => (
          <NavLinkWrapper
            key={item.href}
            item={item}
            pathname={pathname}
            onClick={handleLinkClick}
          />
        ))}
      </SidebarMenu>
    </SidebarGroup>
  );

  return (
    <>
      <SidebarHeader>
        <Link href="/deep-learning/dashboard" className="flex items-center gap-3 text-xl font-bold text-primary h-12 px-2" onClick={handleLinkClick}>
          <div className="flex items-center justify-center w-7 h-7 flex-shrink-0">
            <Zap className="h-7 w-7" />
          </div>
          <span className="group-data-[state=collapsed]:hidden">Quantum Weaver</span>
        </Link>
        {/* Back to Aether AI button */}
        <div className="pt-2 border-t border-border/40">
          <Link href="/" className="flex items-center gap-3 text-sm text-muted-foreground hover:text-primary transition-colors h-10 px-2" onClick={handleLinkClick}>
            <div className="flex items-center justify-center w-5 h-5 flex-shrink-0">
              <ArrowRight className="h-4 w-4 rotate-180" />
            </div>
            <span className="group-data-[state=collapsed]:hidden">Back to Aether AI</span>
          </Link>
        </div>
      </SidebarHeader>
      <SidebarContent className="flex-1 overflow-y-auto p-0">
        <ScrollArea className="h-full px-2 py-0">
          {renderNavSection("Main", mainNavItems)}
          {renderNavSection("Advanced Tools", advancedToolsNavItems)}
          {renderNavSection("Visualizations", visNavItems)}
          {renderNavSection("AI Flows", aiFlowsNavItems)}
        </ScrollArea>
      </SidebarContent>
      <SidebarFooter>
        {/* DEEP LEARNING PLATFORM - NO LIGHT MODE SUPPORT */}
        {/* Theme toggle completely removed - dark mode only */}
        <div className="px-2 py-2">
          <div className="text-xs text-muted-foreground text-center">
            Dark Mode Only
          </div>
        </div>
      </SidebarFooter>
    </>
  );
};

export default function QuantumWeaverLayout({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    // DOUBLE PROTECTION: Force dark mode for deep learning platform
    const enforceDarkMode = () => {
      document.documentElement.classList.add("dark");
      document.documentElement.classList.remove("light");
      document.documentElement.setAttribute("data-theme", "dark");
      localStorage.setItem("theme", "dark");
      document.body.classList.add("dark");
      document.body.style.colorScheme = "dark";
    };

    enforceDarkMode();

    // Continuous enforcement
    const interval = setInterval(enforceDarkMode, 100);

    return () => clearInterval(interval);
  }, []);

  return (
    <SidebarProvider>
      <div className="flex min-h-screen w-full">
        <Sidebar className="z-40">
          <QuantumWeaverSidebarContent />
        </Sidebar>
        <main className="flex-1 min-h-screen bg-black/95 relative">
          {children}
        </main>
      </div>
    </SidebarProvider>
  );
}