import { useState } from 'react';
import { 
  Image, 
  Grid, 
  List, 
  Search, 
  Download, 
  ZoomIn,
  X,
  ChevronLeft,
  ChevronRight
} from 'lucide-react';

interface GalleryItem {
  id: string;
  title: string;
  category: string;
  src: string;
  thumbnail?: string;
  description?: string;
}

const Galeria = () => {
  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [selectedImage, setSelectedImage] = useState<GalleryItem | null>(null);

  const categories = [
    { id: 'all', label: 'Todos' },
    { id: 'protocolos', label: 'Protocolos' },
    { id: 'anatomia', label: 'Anatomía' },
    { id: 'equipos', label: 'Equipos' },
    { id: 'farmacos', label: 'Fármacos' },
    { id: 'material', label: 'Material' },
  ];

  const items: GalleryItem[] = [
    { id: '1', title: 'RCP Adultos', category: 'protocolos', src: '/images/rcp-adultos.jpg', description: 'Algoritmo de RCP en adultos' },
    { id: '2', title: 'RCP Pediátrico', category: 'protocolos', src: '/images/rcp-pediatrico.jpg', description: 'Algoritmo de RCP en pediátricos' },
    { id: '3', title: 'Vía Aérea', category: 'protocolos', src: '/images/via-aerea.jpg', description: 'Protocolo de manejo de vía aérea' },
    { id: '4', title: 'Corazón', category: 'anatomia', src: '/images/corazon.jpg', description: 'Anatomía del corazón' },
    { id: '5', title: 'Pulmones', category: 'anatomia', src: '/images/pulmones.jpg', description: 'Anatomía del sistema respiratorio' },
    { id: '6', title: 'Desfibrilador', category: 'equipos', src: '/images/desfibrilador.jpg', description: 'Uso del DEA' },
    { id: '7', title: 'Botiquín', category: 'material', src: '/images/botiquin.jpg', description: 'Contenido del botiquín de emergencias' },
  ];

  const filteredItems = items.filter(item => {
    const matchesSearch = item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         item.description?.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesCategory = selectedCategory === 'all' || item.category === selectedCategory;
    return matchesSearch && matchesCategory;
  });

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-foreground mb-1">Galería</h1>
        <p className="text-muted-foreground text-sm">
          Imágenes y recursos visuales
        </p>
      </div>

      {/* Buscador y filtros */}
      <div className="space-y-3">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
          <input
            type="text"
            placeholder="Buscar imágenes..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full pl-10 pr-4 py-2 bg-card border border-border rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary"
          />
        </div>

        <div className="flex items-center justify-between">
          <div className="flex gap-2 overflow-x-auto pb-2">
            {categories.map((cat) => (
              <button
                key={cat.id}
                onClick={() => setSelectedCategory(cat.id)}
                className={`px-3 py-1.5 rounded-full text-sm whitespace-nowrap transition-colors ${
                  selectedCategory === cat.id
                    ? 'bg-primary text-primary-foreground'
                    : 'bg-muted text-muted-foreground hover:bg-muted/80'
                }`}
              >
                {cat.label}
              </button>
            ))}
          </div>

          <div className="flex gap-1">
            <button
              onClick={() => setViewMode('grid')}
              className={`p-2 rounded transition-colors ${
                viewMode === 'grid' 
                  ? 'bg-primary text-primary-foreground' 
                  : 'bg-muted text-muted-foreground hover:bg-muted/80'
              }`}
            >
              <Grid className="w-4 h-4" />
            </button>
            <button
              onClick={() => setViewMode('list')}
              className={`p-2 rounded transition-colors ${
                viewMode === 'list' 
                  ? 'bg-primary text-primary-foreground' 
                  : 'bg-muted text-muted-foreground hover:bg-muted/80'
              }`}
            >
              <List className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>

      {/* Grid de imágenes */}
      {filteredItems.length === 0 ? (
        <div className="text-center py-12">
          <Image className="w-12 h-12 mx-auto text-muted-foreground mb-3" />
          <p className="text-muted-foreground">No se encontraron imágenes</p>
        </div>
      ) : viewMode === 'grid' ? (
        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
          {filteredItems.map((item) => (
            <button
              key={item.id}
              onClick={() => setSelectedImage(item)}
              className="relative aspect-square bg-muted rounded-lg overflow-hidden group hover:ring-2 hover:ring-primary transition-all"
            >
              <div className="absolute inset-0 flex items-center justify-center">
                <Image className="w-8 h-8 text-muted-foreground" />
              </div>
              <div className="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/60 to-transparent">
                <p className="text-xs text-white font-medium truncate">{item.title}</p>
              </div>
              <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/30">
                <ZoomIn className="w-6 h-6 text-white" />
              </div>
            </button>
          ))}
        </div>
      ) : (
        <div className="space-y-2">
          {filteredItems.map((item) => (
            <button
              key={item.id}
              onClick={() => setSelectedImage(item)}
              className="w-full flex items-center gap-3 p-3 bg-card border border-border rounded-lg hover:border-primary/50 transition-colors text-left"
            >
              <div className="w-16 h-16 bg-muted rounded flex items-center justify-center flex-shrink-0">
                <Image className="w-6 h-6 text-muted-foreground" />
              </div>
              <div className="flex-1 min-w-0">
                <p className="font-medium text-foreground truncate">{item.title}</p>
                <p className="text-sm text-muted-foreground truncate">{item.description}</p>
              </div>
              <ZoomIn className="w-4 h-4 text-muted-foreground" />
            </button>
          ))}
        </div>
      )}

      <p className="text-xs text-muted-foreground text-center">
        {filteredItems.length} imágenes
      </p>

      {/* Modal de imagen */}
      {selectedImage && (
        <div className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center">
          <button
            onClick={() => setSelectedImage(null)}
            className="absolute top-4 right-4 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors"
          >
            <X className="w-6 h-6 text-white" />
          </button>
          
          <button
            className="absolute left-4 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors"
          >
            <ChevronLeft className="w-6 h-6 text-white" />
          </button>
          
          <div className="max-w-4xl max-h-[80vh] p-4">
            <div className="bg-muted rounded-lg aspect-video flex items-center justify-center">
              <Image className="w-16 h-16 text-muted-foreground" />
            </div>
            <div className="mt-4 text-center">
              <h3 className="text-lg font-medium text-white">{selectedImage.title}</h3>
              <p className="text-sm text-white/70">{selectedImage.description}</p>
            </div>
          </div>

          <button
            className="absolute right-4 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors"
          >
            <ChevronRight className="w-6 h-6 text-white" />
          </button>

          <button className="absolute bottom-4 right-4 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors">
            <Download className="w-6 h-6 text-white" />
          </button>
        </div>
      )}
    </div>
  );
};

export default Galeria;