import React, { useState } from 'react';
import { Heart, Search, Filter } from 'lucide-react';
import { Construction } from 'lucide-react';

const MOCK_GALLERIES = [
  {
    id: 1,
    title: 'Formatura Medicina UNICAMP 2024',
    category: 'Medicina',
    images: [
      'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=800',
      'https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=800',
      'https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=800',
    ],
    likes: 234,
  },
  {
    id: 2,
    title: 'Engenharia Civil - USP 2024',
    category: 'Engenharia',
    images: [
      'https://images.unsplash.com/photo-1513542789411-b6a5d4f31634?w=800',
      'https://images.unsplash.com/photo-1511632765486-a01980e01a18?w=800',
      'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=800',
    ],
    likes: 189,
  },
  {
    id: 3,
    title: 'Direito PUC 2023',
    category: 'Direito',
    images: [
      'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=800',
      'https://images.unsplash.com/photo-1521737711867-e3b97375f902?w=800',
      'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=800',
    ],
    likes: 312,
  },
  {
    id: 4,
    title: 'Arquitetura UNESP 2024',
    category: 'Arquitetura',
    images: [
      'https://images.unsplash.com/photo-1528605248644-14dd04022da1?w=800',
      'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=800',
      'https://images.unsplash.com/photo-1519337265831-281ec6cc8514?w=800',
    ],
    likes: 278,
  },
];

const CATEGORIES = ['Todas', 'Medicina', 'Engenharia', 'Direito', 'Arquitetura', 'Administração'];

export const InspirationPage: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('Todas');

  const filteredGalleries = MOCK_GALLERIES.filter((gallery) => {
    const matchesSearch = gallery.title.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesCategory = selectedCategory === 'Todas' || gallery.category === selectedCategory;
    return matchesSearch && matchesCategory;
  });

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 pt-24 pb-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="text-center mb-12 fade-in">
          <h1 className="text-4xl sm:text-5xl font-serif font-bold text-brand-black mb-4">
            Galeria de Inspiração
          </h1>
          <p className="text-gray-600 text-lg max-w-2xl mx-auto">
            Explore álbuns de formaturas anteriores e inspire-se para criar o seu evento perfeito
          </p>
        </div>

        {/* Search and Filter */}
        <div className="mb-8 space-y-4">
          {/* Search Bar */}
          <div className="relative max-w-2xl mx-auto">
            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
            <input
              type="text"
              placeholder="Buscar por curso, universidade..."
              className="w-full pl-12 pr-4 py-3 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-gold focus:border-transparent text-sm shadow-sm"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>

          {/* Category Filter */}
          <div className="flex flex-wrap justify-center gap-2">
            {CATEGORIES.map((category) => (
              <button
                key={category}
                onClick={() => setSelectedCategory(category)}
                className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
                  selectedCategory === category
                    ? 'bg-brand-gold text-white shadow-lg scale-105'
                    : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-200'
                }`}
              >
                {category}
              </button>
            ))}
          </div>
        </div>

        {/* Gallery Grid */}
        {filteredGalleries.length > 0 ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredGalleries.map((gallery) => (
              <div
                key={gallery.id}
                className="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 group"
              >
                {/* Main Image */}
                <div className="relative h-64 overflow-hidden">
                  <img
                    src={gallery.images[0]}
                    alt={gallery.title}
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                  
                  {/* Category Badge */}
                  <div className="absolute top-3 left-3 bg-white/95 backdrop-blur-sm px-3 py-1 rounded-full">
                    <span className="text-xs font-semibold text-brand-gold">{gallery.category}</span>
                  </div>
                </div>

                {/* Content */}
                <div className="p-5">
                  <h3 className="text-lg font-bold text-brand-black mb-2 line-clamp-1">
                    {gallery.title}
                  </h3>
                  
                  {/* Thumbnail Preview */}
                  <div className="flex gap-2 mb-3">
                    {gallery.images.slice(1, 3).map((img, idx) => (
                      <div key={idx} className="w-16 h-16 rounded-lg overflow-hidden border border-gray-200">
                        <img src={img} alt="" className="w-full h-full object-cover" />
                      </div>
                    ))}
                    <div className="w-16 h-16 rounded-lg bg-gray-100 flex items-center justify-center text-xs text-gray-500 font-medium border border-gray-200">
                      +12
                    </div>
                  </div>

                  {/* Footer */}
                  <div className="flex items-center justify-between pt-3 border-t border-gray-100">
                    <div className="flex items-center gap-2 text-gray-500">
                      <Heart size={16} className="text-red-400" />
                      <span className="text-sm font-medium">{gallery.likes} curtidas</span>
                    </div>
                    <button className="text-sm text-brand-gold font-semibold hover:underline">
                      Ver álbum →
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-center py-16">
            <p className="text-gray-500 text-lg">Nenhuma galeria encontrada</p>
          </div>
        )}

        {/* Coming Soon Banner */}
        <div className="mt-16 bg-gradient-to-r from-brand-purple to-brand-gold/20 rounded-2xl p-8 text-center">
          <Construction className="mx-auto text-white mb-4" size={48} />
          <h2 className="text-2xl font-bold text-white mb-2">Em Breve: Mais Funcionalidades</h2>
          <p className="text-white/90 max-w-2xl mx-auto">
            Estamos trabalhando para trazer mais galerias, filtros avançados e a possibilidade de salvar seus favoritos!
          </p>
        </div>
      </div>
    </div>
  );
};