import { Link, useLocation } from '@tanstack/react-router';
import { Home, Gamepad2, FileText, Settings, Database, Tag, Download, Upload } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Badge } from '@/components/ui/badge';

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

const navigation = [
  { name: 'Dashboard', href: '/', icon: Home, count: null },
  { name: 'Juegos', href: '/games', icon: Gamepad2, count: null },
  {
    name: 'Plataformas',
    href: '/platforms',
    icon: Database,
    count: null,
  },
  {
    name: 'Etiquetas',
    href: '/tags',
    icon: Tag,
    count: null,
  },
  { name: 'Importar ROMs', href: '/import', icon: Download, count: null },
  { name: 'Exportar', href: '/export', icon: Upload, count: null },
  { name: 'Configuración', href: '/settings', icon: Settings, count: null },
];

export function Sidebar({ isOpen, onClose }: SidebarProps) {
  const location = useLocation();

  return (
    <>
      {/* Overlay para móviles */}
      {isOpen && <div className="fixed inset-0 z-40 bg-black/50 md:hidden" onClick={onClose} />}

      {/* Sidebar */}
      <div
        className={cn(
          'fixed left-0 top-0 z-50 h-full w-64 transform border-r bg-background transition-transform duration-300 ease-in-out md:relative md:translate-x-0',
          isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
        )}
      >
        <div className="flex h-full flex-col">
          {/* Header del sidebar */}
          <div className="flex h-14 items-center border-b px-4">
            <div className="flex items-center space-x-2">
              <Gamepad2 className="h-6 w-6" />
              <span className="font-bold">Quasar</span>
            </div>
            <Button variant="ghost" size="sm" className="ml-auto md:hidden" onClick={onClose}>
              ✕
            </Button>
          </div>

          {/* Contenido del sidebar */}
          <ScrollArea className="flex-1">
            <nav className="p-4 space-y-1">
              {navigation.map((item) => {
                const Icon = item.icon;
                const isActive = location.pathname === item.href;

                return (
                  <Link
                    key={item.name}
                    to={item.href}
                    onClick={onClose}
                    className={cn(
                      'flex items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
                      isActive ? 'bg-accent text-accent-foreground' : 'text-muted-foreground'
                    )}
                  >
                    <div className="flex items-center space-x-3">
                      <Icon className="h-4 w-4" />
                      <span>{item.name}</span>
                    </div>
                    {item.count !== null && (
                      <Badge variant="secondary" className="text-xs">
                        {item.count}
                      </Badge>
                    )}
                  </Link>
                );
              })}
            </nav>

            {/* Sección adicional con información */}
            <div className="mt-8 p-4 border-t">
              <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
                Información
              </h3>
              <div className="space-y-2 text-xs text-muted-foreground">
                <div className="flex justify-between">
                  <span>Versión</span>
                  <span>1.0.0</span>
                </div>
                <div className="flex justify-between">
                  <span>Última actualización</span>
                  <span>2024-01-15</span>
                </div>
              </div>
            </div>
          </ScrollArea>

          {/* Footer del sidebar */}
          <div className="flex h-14 items-center border-t px-4">
            <div className="flex items-center space-x-2 text-xs text-muted-foreground">
              <span>© 2024 Quasar</span>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}