import React, { useState } from 'react';
import { Publication, PublicationType } from '../types';
import { Download, BookOpen, Star, Filter } from 'lucide-react';
import { Reveal } from './Reveal';

interface PublicationsProps {
  t: any;
}

const SAMPLE_PUBLICATIONS: Publication[] = [
  {
    id: '1',
    title: 'KAMPÜS CADILARI FANZİN #12',
    type: 'FANZIN',
    date: 'OCAK 2025',
    coverUrl: 'https://images.unsplash.com/photo-1544947950-fa07a98d237f?auto=format&fit=crop&q=80&w=400',
    description: 'Yeni dönem, yeni mücadeleler. Kampüslerdeki cadı avına karşı sesimizi yükseltiyoruz.',
  },
  {
    id: '2',
    title: 'GÜVENLİ KAMPÜS REHBERİ',
    type: 'BROSUR',
    date: 'ARALIK 2024',
    coverUrl: 'https://images.unsplash.com/photo-1535905557558-afc4877a26fc?auto=format&fit=crop&q=80&w=400',
    description: 'Cinsel taciz ve saldırıya karşı haklarımız, başvuru mekanizmaları ve dayanışma ağları.',
  },
  {
    id: '3',
    title: 'AKADEMİDE CİNSİYETÇİLİK RAPORU',
    type: 'RAPOR',
    date: 'KASIM 2024',
    coverUrl: 'https://images.unsplash.com/photo-1555449377-a8b411132a58?auto=format&fit=crop&q=80&w=400',
    description: 'Türkiye genelinde 50 üniversitede yapılan araştırmanın çarpıcı sonuçları.',
  },
  {
    id: '4',
    title: '8 MART ÖZEL SAYI',
    type: 'FANZIN',
    date: 'MART 2024',
    coverUrl: 'https://images.unsplash.com/photo-1532012197267-da84d127e765?auto=format&fit=crop&q=80&w=400',
    description: 'Geceyi de, sokakları da, meydanları da istiyoruz! Feminist isyan her yerde.',
  },
  {
    id: '5',
    title: 'CADI SÖZLÜĞÜ',
    type: 'KITAP',
    date: 'EYLÜL 2023',
    coverUrl: 'https://images.unsplash.com/photo-1512820790803-83ca734da794?auto=format&fit=crop&q=80&w=400',
    description: 'Feminizmin temel kavramları, bizden kelimeler ve cadıların dili.',
  },
];

export const Publications: React.FC<PublicationsProps> = ({ t }) => {
  const [filter, setFilter] = useState<PublicationType | 'ALL'>('ALL');

  const filteredPublications = filter === 'ALL' 
    ? SAMPLE_PUBLICATIONS 
    : SAMPLE_PUBLICATIONS.filter(p => p.type === filter);

  return (
    <div className="bg-brand-lilac min-h-screen pt-32 pb-32">
       {/* Background Decoration */}
       <div className="fixed inset-0 pointer-events-none opacity-20 bg-[url('https://www.transparenttextures.com/patterns/dust.png')]"></div>

       {/* --- HEADER SECTION --- */}
       <div className="max-w-7xl mx-auto px-6 lg:px-12 mb-20 relative z-10">
          <Reveal>
            <div className="flex flex-col items-start gap-6">
                <div className="bg-brand-deep text-white px-8 py-4 transform -skew-x-12 inline-block shadow-[12px_12px_0px_#6B2C91] border-4 border-white">
                   <h1 className="text-6xl md:text-9xl font-display font-bold uppercase tracking-tighter transform skew-x-12">
                     {t.publications.header}
                   </h1>
                </div>
                <p className="text-xl md:text-2xl font-medium text-brand-deep max-w-2xl mt-4 bg-white/50 p-4 rounded-xl border border-brand-deep/10 backdrop-blur-sm">
                  Kampüs Cadıları'nın ürettiği tüm fanzin, broşür, rapor ve kitaplara buradan ulaşabilir, dijital kopyalarını indirebilirsiniz.
                </p>
            </div>
          </Reveal>
       </div>

       {/* --- FEATURED SECTION --- */}
       <div className="max-w-7xl mx-auto px-6 lg:px-12 mb-24 relative z-10">
          <div className="bg-white border-4 border-brand-deep rounded-[2rem] p-6 md:p-12 shadow-[20px_20px_0px_#ED1C24] overflow-hidden relative">
             <div className="absolute top-0 right-0 w-64 h-64 bg-brand-lilac rounded-full blur-3xl opacity-50 -translate-y-1/2 translate-x-1/2"></div>
             
             <div className="flex flex-col md:flex-row gap-12 items-center relative z-10">
                <div className="w-full md:w-1/2">
                   <div className="relative group">
                      <div className="absolute inset-0 bg-brand-deep rounded-xl transform rotate-3 transition-transform group-hover:rotate-6"></div>
                      <img 
                        src="https://images.unsplash.com/photo-1621351183012-e2f9972dd9bf?auto=format&fit=crop&q=80&w=800" 
                        alt="Featured Zine" 
                        className="relative rounded-xl border-4 border-brand-deep shadow-lg transform -rotate-2 transition-transform group-hover:rotate-0 w-full h-96 object-cover"
                      />
                      <div className="absolute top-4 left-4">
                         <span className="bg-brand-red text-white px-4 py-1 font-bold font-marker tracking-widest text-lg border-2 border-brand-deep shadow-[4px_4px_0px_#2D0F41] rounded-full rotate-[-5deg] inline-block">
                           {t.publications.featured}
                         </span>
                      </div>
                   </div>
                </div>
                <div className="w-full md:w-1/2 space-y-8">
                   <h2 className="text-5xl md:text-7xl font-display font-bold text-brand-deep uppercase leading-[0.9]">
                     KAMPÜS CADILARI<br/>
                     <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-purple to-brand-red">FANZİN #13</span>
                   </h2>
                   <p className="text-xl text-gray-600 font-medium leading-relaxed">
                     Yeni sayımızda "Kampüslerde Barınma Krizi" dosyasını açıyoruz. Yurtlardaki niteliksiz koşullar, fahiş kiralar ve barınma hakkımız üzerine sözümüz var.
                   </p>
                   <div className="flex flex-wrap gap-4">
                      <button className="bg-brand-deep text-white px-8 py-4 font-bold text-xl uppercase tracking-wider flex items-center gap-3 hover:bg-brand-purple transition-all shadow-[8px_8px_0px_rgba(0,0,0,0.2)] hover:translate-y-1 hover:shadow-none rounded-lg">
                        <Download size={24} />
                        {t.publications.download}
                      </button>
                      <button className="bg-transparent border-4 border-brand-deep text-brand-deep px-8 py-4 font-bold text-xl uppercase tracking-wider flex items-center gap-3 hover:bg-brand-lilac transition-all rounded-lg">
                        <BookOpen size={24} />
                        İNCELE
                      </button>
                   </div>
                </div>
             </div>
          </div>
       </div>

       {/* --- FILTERS --- */}
       <div className="max-w-7xl mx-auto px-6 lg:px-12 mb-12 sticky top-24 z-30">
          <div className="flex flex-wrap justify-center gap-4 bg-white/80 backdrop-blur-md p-4 rounded-2xl border-2 border-brand-deep/20 shadow-lg inline-flex mx-auto">
             <button 
               onClick={() => setFilter('ALL')}
               className={`px-6 py-2 rounded-full font-bold uppercase tracking-wider border-2 transition-all ${filter === 'ALL' ? 'bg-brand-deep text-white border-brand-deep' : 'bg-transparent text-brand-deep border-transparent hover:bg-brand-lilac'}`}
             >
               {t.publications.filters.all}
             </button>
             <button 
               onClick={() => setFilter('FANZIN')}
               className={`px-6 py-2 rounded-full font-bold uppercase tracking-wider border-2 transition-all ${filter === 'FANZIN' ? 'bg-brand-purple text-white border-brand-purple' : 'bg-transparent text-brand-deep border-transparent hover:bg-brand-lilac'}`}
             >
               {t.publications.filters.fanzine}
             </button>
             <button 
               onClick={() => setFilter('RAPOR')}
               className={`px-6 py-2 rounded-full font-bold uppercase tracking-wider border-2 transition-all ${filter === 'RAPOR' ? 'bg-brand-red text-white border-brand-red' : 'bg-transparent text-brand-deep border-transparent hover:bg-brand-lilac'}`}
             >
               {t.publications.filters.report}
             </button>
             <button 
               onClick={() => setFilter('BROSUR')}
               className={`px-6 py-2 rounded-full font-bold uppercase tracking-wider border-2 transition-all ${filter === 'BROSUR' ? 'bg-[#FFC107] text-brand-deep border-[#FFC107]' : 'bg-transparent text-brand-deep border-transparent hover:bg-brand-lilac'}`}
             >
               {t.publications.filters.brochure}
             </button>
          </div>
       </div>

       {/* --- GRID --- */}
       <div className="max-w-7xl mx-auto px-6 lg:px-12 relative z-10">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
             {filteredPublications.map((pub) => (
                <div key={pub.id} className="group relative">
                   {/* Card Background Layer */}
                   <div className="absolute inset-0 bg-brand-deep rounded-2xl transform translate-x-3 translate-y-3 transition-transform group-hover:translate-x-4 group-hover:translate-y-4"></div>
                   
                   {/* Main Card */}
                   <div className="relative bg-white border-4 border-brand-deep rounded-2xl overflow-hidden flex flex-col h-full transition-transform group-hover:-translate-y-1">
                      
                      {/* Image Area */}
                      <div className="h-64 overflow-hidden relative border-b-4 border-brand-deep bg-gray-100">
                         <img src={pub.coverUrl} alt={pub.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
                         
                         <div className="absolute top-4 right-4">
                           <div className="bg-white text-brand-deep px-3 py-1 font-bold text-xs border-2 border-brand-deep rounded shadow-[2px_2px_0px_#2D0F41]">
                             {pub.date}
                           </div>
                         </div>

                         {/* Type Badge */}
                         <div className="absolute bottom-4 left-4">
                            <span className={`px-4 py-1 font-bold uppercase tracking-widest text-xs border-2 border-brand-deep rounded-full shadow-md ${
                              pub.type === 'FANZIN' ? 'bg-brand-purple text-white' : 
                              pub.type === 'RAPOR' ? 'bg-brand-red text-white' : 
                              pub.type === 'BROSUR' ? 'bg-[#FFC107] text-brand-deep' : 'bg-gray-800 text-white'
                            }`}>
                              {pub.type}
                            </span>
                         </div>
                      </div>

                      {/* Content Area */}
                      <div className="p-6 flex flex-col flex-grow">
                         <h3 className="text-2xl font-display font-bold text-brand-deep leading-tight mb-3 uppercase group-hover:text-brand-purple transition-colors">
                           {pub.title}
                         </h3>
                         <p className="text-gray-600 font-medium text-sm mb-6 flex-grow line-clamp-3">
                           {pub.description}
                         </p>
                         
                         <button className="w-full bg-brand-lilac border-2 border-brand-deep text-brand-deep font-bold py-3 px-4 rounded-lg uppercase tracking-wider flex items-center justify-center gap-2 hover:bg-brand-deep hover:text-white transition-colors">
                            <Download size={18} />
                            İNDİR
                         </button>
                      </div>
                   </div>
                </div>
             ))}
          </div>
       </div>

    </div>
  );
};