import { X, Home, AlertTriangle, Stethoscope, Video, Pill, Wrench, Heart, Clock, Zap, Info, Settings, Image, Phone, MessageSquare, Briefcase, BookOpen, GraduationCap, ShieldAlert } from 'lucide-react';
import { Link } from 'react-router-dom';

interface MenuSheetProps {
  isOpen: boolean;
  onClose: () => void;
}

const MenuSheet = ({ isOpen, onClose }: MenuSheetProps) => {
  if (!isOpen) return null;

  const menuGroups = [
    {
      title: "Protocolos y Clínico",
      items: [
        { to: "/soporte-vital", label: "Soporte Vital", icon: <AlertTriangle className="w-4 h-4" /> },
        { to: "/patologias", label: "Patologías", icon: <Stethoscope className="w-4 h-4" /> },
        { to: "/via-aerea", label: "Vía Aérea", icon: <Zap className="w-4 h-4" /> },
        { to: "/parto", label: "Emergencias Obstétricas", icon: <ShieldAlert className="w-4 h-4" /> },
      ]
    },
    {
      title: "Herramientas Operativas",
      items: [
        { to: "/herramientas", label: "Panel de Calculadoras", icon: <Wrench className="w-4 h-4" /> },
        { to: "/material", label: "Material y Checklists", icon: <Briefcase className="w-4 h-4" /> },
        { to: "/escena", label: "Gestión de Escena", icon: <Video className="w-4 h-4" /> },
        { to: "/farmacos", label: "Guía de Fármacos", icon: <Pill className="w-4 h-4" /> },
      ]
    },
    {
      title: "Manuales y Formación",
      items: [
        { to: "/manual", label: "Manual del TES (Wiki)", icon: <BookOpen className="w-4 h-4" /> },
        { to: "/guia-refuerzo", label: "Guías de Refuerzo", icon: <GraduationCap className="w-4 h-4" /> },
        { to: "/galeria", label: "Galería de Técnicas", icon: <Image className="w-4 h-4" /> },
      ]
    },
    {
      title: "Comunicación y Otros",
      items: [
        { to: "/telefono", label: "Proto. Telefónicos", icon: <Phone className="w-4 h-4" /> },
        { to: "/comunicacion", label: "Guiones de Radio", icon: <MessageSquare className="w-4 h-4" /> },
        { to: "/favoritos", label: "Favoritos", icon: <Heart className="w-4 h-4" /> },
        { to: "/historial", label: "Historial Reciente", icon: <Clock className="w-4 h-4" /> },
        { to: "/ajustes", label: "Ajustes", icon: <Settings className="w-4 h-4" /> },
        { to: "/acerca", label: "Acerca de", icon: <Info className="w-4 h-4" /> },
      ]
    }
  ];

  return (
    <>
      <div
        className="fixed inset-0 z-[90] bg-black/80 backdrop-blur-sm transition-opacity animate-in fade-in"
        onClick={onClose}
      />
      <div className="fixed top-0 right-0 bottom-0 z-[95] w-80 max-w-[85vw] bg-background border-l-4 border-primary shadow-[0_0_50px_rgba(0,0,0,0.5)] flex flex-col animate-in slide-in-from-right duration-300">
        <div className="flex items-center justify-between h-20 px-6 border-b-2 border-primary bg-card">
          <div>
            <h2 className="font-black text-2xl uppercase tracking-tighter text-foreground italic">Menú</h2>
            <div className="h-1 w-12 bg-primary mt-1" />
          </div>
          <button
            onClick={onClose}
            className="w-12 h-12 flex items-center justify-center bg-primary text-primary-foreground hover:bg-primary/90 transition-all active:scale-90 border-2 border-black"
            aria-label="Cerrar menú"
          >
            <X className="w-6 h-6 stroke-[3px]" />
          </button>
        </div>

        <div className="flex-1 overflow-y-auto scrollbar-hide py-6 px-4 space-y-8">
          {menuGroups.map((group, idx) => (
            <div key={idx} className="space-y-4">
              <h3 className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-foreground px-2 border-l-2 border-primary/30">
                {group.title}
              </h3>
              <nav className="space-y-1">
                {group.items.map((item) => (
                  <Link
                    key={item.to}
                    to={item.to}
                    onClick={onClose}
                    className="flex items-center gap-4 px-3 py-3 rounded-none border-b border-white/5 hover:bg-primary/10 hover:border-primary/50 text-foreground transition-all group"
                  >
                    <div className="w-8 h-8 flex items-center justify-center bg-white/5 group-hover:bg-primary/20 group-hover:text-primary transition-colors border border-white/10 group-hover:border-primary/50">
                      {item.icon}
                    </div>
                    <span className="font-semibold text-sm tracking-tight">{item.label}</span>
                  </Link>
                ))}
              </nav>
            </div>
          ))}
        </div>

        <div className="p-6 border-t-2 border-primary/20 bg-card/50">
          <div className="flex flex-col gap-1 items-center justify-center">
            <p className="text-[10px] font-black uppercase tracking-widest text-primary">
              codigo0 v1.2.0
            </p>
            <p className="text-[9px] text-muted-foreground font-medium italic">
              0 ERRORES. 0 DUDAS.
            </p>
          </div>
        </div>
      </div>
    </>
  );
};

export default MenuSheet;