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>
  );
};