ModuleDrawer.tsx

import { AnimatePresence, motion } from "framer-motion";
import { Activity, Brain, Cpu, Database, Globe2, Layers, Radio, Shield, Sparkles, X } from "lucide-react";
import { useState } from "react";
import { toast } from "@/hooks/use-toast";
import { cn } from "@/lib/utils";

interface ModuleDrawerProps {
  open: boolean;
  onClose: () => void;
}

const CATEGORIES = ["Core", "Intelligence", "Network", "Ops"] as const;

interface Module {
  id: string;
  name: string;
  category: typeof CATEGORIES[number];
  icon: typeof Activity;
  desc: string;
  status: "online" | "idle" | "syncing";
}

const MODULES: Module[] = [
  { id: "cortex", name: "Cortex", category: "Intelligence", icon: Brain, desc: "Reasoning + planning core", status: "online" },
  { id: "synapse", name: "Synapse", category: "Intelligence", icon: Sparkles, desc: "Memory & retrieval graph", status: "online" },
  { id: "compute", name: "Compute", category: "Core", icon: Cpu, desc: "Scheduler & GPU pool", status: "idle" },
  { id: "vault", name: "Vault", category: "Core", icon: Database, desc: "Encrypted state store", status: "online" },
  { id: "mesh", name: "Mesh", category: "Network", icon: Globe2, desc: "Edge orchestration", status: "syncing" },
  { id: "relay", name: "Relay", category: "Network", icon: Radio, desc: "Live signal channel", status: "online" },
  { id: "shield", name: "Shield", category: "Ops", icon: Shield, desc: "Policy & access guard", status: "online" },
  { id: "pulse", name: "Pulse", category: "Ops", icon: Activity, desc: "Realtime telemetry", status: "online" },
  { id: "layers", name: "Layers", category: "Ops", icon: Layers, desc: "Deployment matrix", status: "idle" },
];

export function ModuleDrawer({ open, onClose }: ModuleDrawerProps) {
  const [active, setActive] = useState<typeof CATEGORIES[number] | "All">("All");
  const list = active === "All" ? MODULES : MODULES.filter(m => m.category === active);

  return (
    <AnimatePresence>
      {open && (
        <>
          <motion.div
            initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
            className="fixed inset-0 z-40 bg-background/40 backdrop-blur-sm" onClick={onClose}
          />
          <motion.aside
            initial={{ x: "100%" }} animate={{ x: 0 }} exit={{ x: "100%" }}
            transition={{ type: "spring", stiffness: 220, damping: 28 }}
            className="fixed top-0 right-0 bottom-0 z-50 w-[min(420px,92vw)] glass-strong border-l border-white/5 p-5 flex flex-col"
          >
            <div className="flex items-center justify-between mb-5">
              <div>
                <h2 className="text-lg font-semibold tracking-tight">Modules</h2>
                <p className="text-xs text-muted-foreground">Operating system surface</p>
              </div>
              <button onClick={onClose} className="text-muted-foreground hover:text-foreground"><X className="w-5 h-5" /></button>
            </div>

            <div className="flex gap-1 mb-4 overflow-x-auto">
              {(["All", ...CATEGORIES] as const).map(c => (
                <button
                  key={c}
                  onClick={() => setActive(c)}
                  className={cn(
                    "px-3 py-1.5 rounded-full text-xs whitespace-nowrap transition-all duration-300 ease-cinematic",
                    active === c ? "bg-primary/20 text-primary border border-primary/40" : "text-muted-foreground hover:text-foreground border border-transparent"
                  )}
                >{c}</button>
              ))}
            </div>

            <div className="flex-1 overflow-y-auto -mr-2 pr-2 grid grid-cols-1 sm:grid-cols-2 gap-3 content-start">
              {list.map((m, i) => (
                <motion.button
                  key={m.id}
                  layout
                  initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: i * 0.03 }}
                  onClick={() => {
                    toast({ title: `${m.name} launched`, description: m.desc });
                  }}
                  className="group text-left p-4 rounded-2xl glass hover:border-primary/40 hover:bg-primary/5 transition-all duration-300 ease-cinematic"
                >
                  <div className="flex items-start justify-between mb-3">
                    <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-primary/30 to-accent/30 grid place-items-center group-hover:scale-110 transition-transform">
                      <m.icon className="w-4 h-4 text-primary" />
                    </div>
                    <StatusDot status={m.status} />
                  </div>
                  <div className="text-sm font-medium">{m.name}</div>
                  <div className="text-xs text-muted-foreground mt-0.5 leading-snug">{m.desc}</div>
                </motion.button>
              ))}
            </div>
          </motion.aside>
        </>
      )}
    </AnimatePresence>
  );
}

function StatusDot({ status }: { status: Module["status"] }) {
  const color = status === "online" ? "bg-emerald-400" : status === "syncing" ? "bg-amber-400" : "bg-muted-foreground/40";
  return (
    <span className="flex items-center gap-1 text-[10px] uppercase tracking-wider text-muted-foreground">
      <span className={cn("w-1.5 h-1.5 rounded-full", color, status !== "idle" && "animate-pulse")} />
      {status}
    </span>
  );
}