'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { ArrowLeft, Heart, MessageCircle } from 'lucide-react';
import { db } from '@/lib/firebase';
import { collection, query, where, onSnapshot, doc, getDoc } from 'firebase/firestore';

interface Photo {
  id: string;
  url: string;
  caption?: string;
  likes?: number;
  comments?: number;
  guestName?: string;
  uploadedBy?: string;
  isApproved?: boolean;
}

export default function GuestProfileClient({ eventId, guestId }: { eventId: string; guestId: string }) {
  const [photos, setPhotos] = useState<Photo[]>([]);
  const [guestName, setGuestName] = useState<string>('Guest');
  const [eventName, setEventName] = useState<string>('Event');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!eventId || !guestId) return;

    // Load event + guest doc for display name
    (async () => {
      try {
        const ev = await getDoc(doc(db, 'events', eventId));
        if (ev.exists()) setEventName(ev.data().name || 'Event');
        const g = await getDoc(doc(db, 'events', eventId, 'guests', guestId));
        if (g.exists()) setGuestName(g.data().displayName || g.data().name || 'Guest');
      } catch { /* ignore */ }
    })();

    const q = query(
      collection(db, 'events', eventId, 'photos'),
      where('uploadedBy', '==', guestId)
    );
    const unsub = onSnapshot(q, (snap) => {
      const list: Photo[] = snap.docs.map((d) => ({ id: d.id, ...(d.data() as any) }));
      list.sort((a, b) => (b.likes || 0) - (a.likes || 0));
      setPhotos(list);
      setLoading(false);
    }, () => setLoading(false));
    return () => unsub();
  }, [eventId, guestId]);

  const approved = photos.filter((p) => p.isApproved);
  const totalLikes = photos.reduce((s, p) => s + (p.likes || 0), 0);

  return (
    <div className="min-h-screen bg-background text-white">
      <div className="max-w-4xl mx-auto px-4 py-6">
        <div className="flex items-center justify-between mb-6">
          <Link
            href={`/event/${eventId}`}
            className="flex items-center gap-2 text-sm text-zinc-400 hover:text-white"
          >
            <ArrowLeft className="h-4 w-4" /> Back to event
          </Link>
        </div>

        <header className="mb-8">
          <div className="flex items-center gap-4">
            <div className="h-20 w-20 rounded-full bg-gradient-to-br from-amber-300 to-amber-600 flex items-center justify-center text-3xl font-bold text-zinc-950">
              {guestName.charAt(0).toUpperCase()}
            </div>
            <div>
              <h1 className="text-2xl font-bold">{guestName}</h1>
              <p className="text-sm text-zinc-500">at {eventName}</p>
              <div className="mt-2 flex gap-4 text-xs text-zinc-400">
                <span>{approved.length} photos</span>
                <span className="flex items-center gap-1"><Heart className="h-3 w-3" /> {totalLikes}</span>
              </div>
            </div>
          </div>
        </header>

        {loading ? (
          <div className="text-center text-zinc-500 py-12">Loading…</div>
        ) : approved.length === 0 ? (
          <div className="text-center text-zinc-500 py-12">{guestName} hasn't shared any photos yet.</div>
        ) : (
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
            {approved.map((p) => (
              <div key={p.id} className="relative aspect-square rounded-xl overflow-hidden bg-zinc-900">
                <img src={p.url} alt={p.caption || ''} className="w-full h-full object-cover" />
                {(p.likes || p.comments) ? (
                  <div className="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/80 to-transparent text-xs flex items-center gap-3">
                    {p.likes ? <span className="flex items-center gap-1"><Heart className="h-3 w-3" /> {p.likes}</span> : null}
                    {p.comments ? <span className="flex items-center gap-1"><MessageCircle className="h-3 w-3" /> {p.comments}</span> : null}
                  </div>
                ) : null}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}