'use client';

import { useState, useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { db } from '@/lib/firebase';
import { collection, query, where, onSnapshot } from 'firebase/firestore';
import { Printer, X, Grid3X3, LayoutGrid } from 'lucide-react';

export default function PrintStationClient() {
  const router = useRouter();
  const params = useParams();
  const eventId = params.id as string;
  const [photos, setPhotos] = useState<any[]>([]);
  const [layout, setLayout] = useState<'single' | 'grid'>('single');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!eventId) return;
    const q = query(
      collection(db, 'events', eventId, 'photos'),
      where('isApproved', '==', true)
    );
    const unsub = onSnapshot(q, (snap) => {
      setPhotos(snap.docs.map((d) => ({ id: d.id, ...d.data() })));
      setLoading(false);
    });
    return () => unsub();
  }, [eventId]);

  const handlePrint = () => {
    window.print();
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-white flex items-center justify-center">
        <div className="h-8 w-8 border-2 border-black border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-white">
      {/* Toolbar - hidden when printing */}
      <div className="no-print sticky top-0 z-50 bg-white border-b border-zinc-200 px-4 py-3 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <button
            onClick={() => router.push(`/event/${eventId}`)}
            className="h-9 w-9 rounded-lg bg-zinc-100 flex items-center justify-center hover:bg-zinc-200 transition-colors"
            aria-label="Close print station"
          >
            <X className="h-4 w-4" />
          </button>
          <h1 className="font-semibold text-sm">Print Station</h1>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={() => setLayout('single')}
            className={`h-9 w-9 rounded-lg flex items-center justify-center transition-colors ${layout === 'single' ? 'bg-black text-white' : 'bg-zinc-100 hover:bg-zinc-200'}`}
            aria-label="Single photo layout"
          >
            <LayoutGrid className="h-4 w-4" />
          </button>
          <button
            onClick={() => setLayout('grid')}
            className={`h-9 w-9 rounded-lg flex items-center justify-center transition-colors ${layout === 'grid' ? 'bg-black text-white' : 'bg-zinc-100 hover:bg-zinc-200'}`}
            aria-label="Grid layout"
          >
            <Grid3X3 className="h-4 w-4" />
          </button>
          <button
            onClick={handlePrint}
            className="h-9 px-4 rounded-lg bg-black text-white text-sm font-medium hover:bg-zinc-800 transition-colors flex items-center gap-2"
          >
            <Printer className="h-4 w-4" />
            Print
          </button>
        </div>
      </div>

      {/* Photos */}
      <div className={`p-4 ${layout === 'grid' ? 'grid grid-cols-2 md:grid-cols-3 gap-4' : 'space-y-8 max-w-2xl mx-auto'}`}>
        {photos.map((photo) => (
          <div key={photo.id} className={`break-inside-avoid ${layout === 'single' ? 'page-break-after' : ''}`}>
            <img
              src={photo.url}
              alt=""
              className={`w-full object-cover rounded-lg ${layout === 'single' ? 'max-h-[80vh]' : ''}`}
            />
            {layout === 'single' && (
              <div className="mt-2 text-center text-xs text-zinc-500">
                {photo.guestName || 'Guest'} — once.film
              </div>
            )}
          </div>
        ))}
      </div>

      <style jsx global>{`
        @media print {
          .no-print {
            display: none !important;
          }
          .page-break-after {
            page-break-after: always;
          }
        }
      `}</style>
    </div>
  );
}