import { useState, useEffect, useMemo } from 'react';
import ErrorState from '../components/ErrorState';
import EmptyState from '../components/EmptyState';

const allImages = [
  { id: 1, title: 'Open-Air Veranstaltung', category: 'Open-Air', date: '2017', img: 'img/ref1.jpg' },
  { id: 2, title: 'Bühnenaufbau', category: 'Rigging', date: '2016', img: 'img/ref2.jpg' },
  { id: 3, title: 'Donautal Radelspass', category: 'Event', date: '2019', img: 'img/ref3.jpg' },
  { id: 4, title: 'Traversenaufbau', category: 'Rigging', date: '2019', img: 'img/ref4.jpg' },
  { id: 5, title: 'Veranstaltungstechnik vor Ort', category: 'Event', date: '2019', img: 'img/ref5.jpg' },
  { id: 6, title: 'Indoor Beschallung', category: 'Indoor', date: '2016', img: 'img/ref6.jpg' },
  { id: 7, title: 'Bühnentechnik Setup', category: 'Rigging', date: '2019', img: 'img/ref7.jpg' },
  { id: 8, title: 'Event-Aufbau', category: 'Event', date: '2019', img: 'img/ref8.jpg' },
  { id: 9, title: 'Großbühne Aufbau', category: 'Open-Air', date: '2016', img: 'img/ref9.jpg' }
];

const categories = ['alle', 'Open-Air', 'Indoor', 'Rigging', 'Event'];

export default function Referenzen() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [filter, setFilter] = useState('alle');

  const filteredImages = useMemo(() => {
    if (filter === 'alle') return allImages;
    return allImages.filter(i => i.category === filter);
  }, [filter]);

  useEffect(() => {
    const t = setTimeout(() => setLoading(false), 1000);
    return () => clearTimeout(t);
  }, []);

  function retry() {
    setLoading(true);
    setError(false);
    setTimeout(() => setLoading(false), 800);
  }

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <h1 className="text-3xl sm:text-4xl font-bold mb-2" style={{ color: 'var(--text)' }}>Referenzen</h1>
      <p className="mb-8" style={{ color: 'var(--secondary)' }}>Ausgewählte Projekte aus unserer Veranstaltungstechnik-Praxis.</p>
      <div className="flex flex-wrap gap-2 mb-8" role="tablist" aria-label="Referenz-Filter">
        {categories.map(cat => (
          <button key={cat} onClick={() => setFilter(cat)} className={`hms-chip ${filter === cat ? 'active' : ''}`} role="tab" aria-selected={filter === cat}>{cat === 'alle' ? 'Alle' : cat}</button>
        ))}
      </div>
      {loading && (
        <div className="hms-gallery">
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="hms-card overflow-hidden">
              <div className="hms-skeleton aspect-[4/3]" style={{ borderRadius: 0 }}></div>
              <div className="p-4 space-y-2"><div className="hms-skeleton h-4 w-3/4"></div><div className="hms-skeleton h-3 w-1/3"></div></div>
            </div>
          ))}
        </div>
      )}
      {error && <ErrorState title="Referenzen konnten nicht geladen werden" message="Bitte versuchen Sie es in Kürze erneut." onRetry={retry} />}
      {!loading && !error && (
        <div className="hms-gallery">
          {filteredImages.map(img => (
            <article key={img.id} className="hms-card overflow-hidden group cursor-pointer">
              <div className="aspect-[4/3] relative overflow-hidden">
                <img src={img.img} alt={img.title} loading="lazy" className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                <span className="hms-badge hms-badge-primary absolute top-3 left-3">{img.category}</span>
              </div>
              <div className="p-4"><h3 className="font-semibold text-sm" style={{ color: 'var(--text)' }}>{img.title}</h3><p className="text-xs mt-1" style={{ color: 'var(--secondary)' }}>{img.date}</p></div>
            </article>
          ))}
        </div>
      )}
      {!loading && !error && filteredImages.length === 0 && (
        <EmptyState icon="📭" title="Keine Referenzen" message="Für diese Kategorie liegen aktuell keine Referenzen vor." actionLabel="Alle anzeigen" onAction={() => setFilter('alle')} />
      )}
    </div>
  );
}
