import React, { useState } from 'react';
import { Sparkles, MapPin, Calendar, ZoomIn, Award, Filter } from 'lucide-react';
import { useData } from '../context/DataContext';
import { PortfolioItem } from '../types';

interface PortfolioViewProps {
  onSelectItemForLightbox: (item: PortfolioItem) => void;
  onOpenConsult: () => void;
}

type FilterCategory = 'all' | 'wedding' | 'garden' | 'landscape' | 'event';

export const PortfolioView: React.FC<PortfolioViewProps> = ({ onSelectItemForLightbox, onOpenConsult }) => {
  const { portfolios, settings } = useData();
  const [activeCategory, setActiveCategory] = useState<FilterCategory>('all');

  const categories: { id: FilterCategory; label: string }[] = [
    { id: 'all', label: 'Semua Karya' },
    { id: 'wedding', label: 'Wedding' },
    { id: 'garden', label: 'Garden' },
    { id: 'landscape', label: 'Landscape' },
    { id: 'event', label: 'Corporate Event' }
  ];

  const filteredItems = portfolios.filter((item) => {
    if (activeCategory === 'all') return true;
    return item.category === activeCategory;
  });

  const highlights = portfolios.filter((item) => item.isHighlight).slice(0, 4);

  return (
    <div className="space-y-24 sm:space-y-32 pb-20 animate-fadeIn">
      
      {/* 1. Hero Gallery */}
      <section className="relative py-20 sm:py-28 px-4 sm:px-6 lg:px-8 text-center overflow-hidden border-b border-[#6B8E5A]/20">
        {/* Background Image with Overlay */}
        <div className="absolute inset-0 z-0">
          <img
            src={settings.portfolioBgUrl || "https://images.unsplash.com/photo-1523438885200-e635ba2c371e?auto=format&fit=crop&w=1600&q=80"}
            alt="Background Portofolio"
            className="w-full h-full object-cover object-center transform scale-105"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-white/85 via-white/60 to-white/80 backdrop-blur-[0.5px]"></div>
        </div>
        <div className="max-w-4xl mx-auto relative z-10">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white text-[#6B8E5A] text-xs font-bold uppercase tracking-wider mb-4 shadow-sm">
            <Sparkles className="w-3.5 h-3.5" /> Our Masterpieces
          </div>
          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-gray-900 tracking-tight mb-6">
            Portofolio <span className="text-[#6B8E5A]">Tukang Dekorasi</span>
          </h1>
          <p className="text-base sm:text-lg text-gray-700 max-w-2xl mx-auto leading-relaxed">
            Kumpulan dokumentasi proyek nyata dekorasi pernikahan megah dan penataan lanskap taman rumah dari berbagai kota.
          </p>

          {/* Filter Bar */}
          <div className="flex flex-wrap items-center justify-center gap-2 sm:gap-3 mt-10">
            {categories.map((cat) => {
              const isActive = activeCategory === cat.id;
              return (
                <button
                  key={cat.id}
                  onClick={() => setActiveCategory(cat.id)}
                  className={`px-5 py-2.5 rounded-2xl text-xs sm:text-sm font-semibold transition-all cursor-pointer ${
                    isActive
                      ? 'bg-[#6B8E5A] text-white shadow-lg shadow-[#6B8E5A]/25 scale-105'
                      : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-200'
                  }`}
                >
                  {cat.label}
                </button>
              );
            })}
          </div>
        </div>
      </section>

      {/* 2. Gallery Masonry Grid */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
          {filteredItems.map((item) => (
            <div
              key={item.id}
              onClick={() => onSelectItemForLightbox(item)}
              className="group relative bg-gray-900 rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl cursor-pointer transition-all duration-500 transform hover:-translate-y-1"
            >
              <div className="h-72 sm:h-80 w-full overflow-hidden">
                <img
                  src={item.imageUrl}
                  alt={item.title}
                  className="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700 opacity-90 group-hover:opacity-100"
                />
              </div>

              {/* Overlay Glass */}
              <div className="absolute inset-0 bg-gradient-to-t from-gray-950/90 via-gray-950/30 to-transparent flex flex-col justify-end p-6 sm:p-8 transition-all">
                <div className="flex items-center gap-2 mb-2">
                  <span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-[#6B8E5A] text-white">
                    {item.category}
                  </span>
                  <span className="text-xs text-gray-300 font-mono">
                    • {item.year}
                  </span>
                </div>

                <h3 className="text-xl font-bold text-white mb-2 group-hover:text-[#8FA882] transition-colors leading-snug">
                  {item.title}
                </h3>

                <p className="flex items-center gap-1.5 text-xs text-gray-300 mb-3">
                  <MapPin className="w-3.5 h-3.5 text-[#6B8E5A] shrink-0" />
                  <span className="truncate">{item.location}</span>
                </p>

                <div className="flex items-center justify-between pt-3 border-t border-white/10 text-xs font-semibold text-amber-200 opacity-0 group-hover:opacity-100 transition-opacity">
                  <span>Klik Untuk Zoom Foto</span>
                  <ZoomIn className="w-4 h-4" />
                </div>
              </div>
            </div>
          ))}
        </div>

        {filteredItems.length === 0 && (
          <div className="text-center py-20 bg-gray-50 rounded-3xl border border-gray-100">
            <Filter className="w-10 h-10 text-gray-400 mx-auto mb-3" />
            <p className="text-gray-600 font-medium">Belum ada proyek di kategori ini.</p>
          </div>
        )}
      </section>

      {/* 3. Project Highlights Section */}
      <section className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="bg-gray-900 text-white rounded-3xl p-8 sm:p-14 shadow-2xl relative overflow-hidden border border-gray-800">
          <div className="absolute top-0 right-0 w-80 h-80 bg-[#6B8E5A]/15 rounded-full blur-3xl pointer-events-none"></div>

          <div className="flex flex-col sm:flex-row sm:items-center justify-between mb-10 pb-6 border-b border-gray-800 gap-4">
            <div>
              <div className="flex items-center gap-2 text-[#8FA882] text-xs uppercase font-bold tracking-widest mb-1">
                <Award className="w-4 h-4" /> Selected Works
              </div>
              <h3 className="text-2xl sm:text-3xl font-bold tracking-tight">Project Highlights</h3>
            </div>
            <button
              onClick={onOpenConsult}
              className="px-5 py-2.5 rounded-xl bg-[#6B8E5A] hover:bg-[#5A7B4A] text-white text-xs font-semibold transition-all self-start sm:self-auto cursor-pointer"
            >
              Minta Konsep Serupa Ini
            </button>
          </div>

          <div className="divide-y divide-gray-800">
            {highlights.map((hl) => (
              <div key={hl.id} className="py-6 flex flex-col md:flex-row md:items-center justify-between gap-4 group hover:bg-white/5 p-4 rounded-2xl transition-colors">
                <div className="space-y-1 md:w-1/3">
                  <h4 className="text-lg font-bold text-white group-hover:text-[#8FA882] transition-colors">{hl.title}</h4>
                  <span className="inline-block px-2 py-0.5 rounded text-[10px] uppercase font-semibold bg-gray-800 text-gray-300">
                    {hl.category}
                  </span>
                </div>

                <div className="flex items-center gap-6 text-xs text-gray-400 md:w-1/3 font-medium">
                  <span className="flex items-center gap-1.5 truncate">
                    <MapPin className="w-3.5 h-3.5 text-[#6B8E5A]" /> {hl.location}
                  </span>
                  <span className="flex items-center gap-1.5 shrink-0">
                    <Calendar className="w-3.5 h-3.5 text-[#6B8E5A]" /> {hl.year}
                  </span>
                </div>

                <div className="md:w-1/3 text-xs text-gray-400 leading-relaxed">
                  {hl.shortDesc}
                </div>
              </div>
            ))}
          </div>

        </div>
      </section>

    </div>
  );
};
