'use client';

import { useState, useRef, useEffect } from 'react';
import { db, storage } from '@/lib/firebase';
import { doc, getDoc, addDoc, collection, serverTimestamp, increment, updateDoc } from 'firebase/firestore';
import { ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage';
import { Camera, Upload, CheckCircle, X, Loader2, AlertCircle, Lock, Image as ImageIcon, Video } from 'lucide-react';
import { useLanguage } from '@/hooks/use-language';
import { t } from '@/lib/i18n';

interface EventInfo {
  name: string;
  eventType: string;
  hostId: string;
  uploadEnabled: boolean;
  requireHostApproval: boolean;
  requirePIN?: boolean;
  accessPIN?: string;
  sections?: string[];
  businessName?: string;
  logoUrl?: string;
}

const ALLOWED_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/heic', 'image/heif', 'video/mp4', 'video/quicktime'];
const MAX_FILE_SIZE = 100 * 1024 * 1024; // 100MB

function sanitizeFileName(name: string): string {
  return `${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
}

export default function UploadClient({ eventId }: { eventId: string }) {
  const { lang } = useLanguage();
  const [event, setEvent] = useState<EventInfo | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [guestName, setGuestName] = useState('');
  const [message, setMessage] = useState('');
  const [agreed, setAgreed] = useState(false);
  const [pin, setPin] = useState('');
  const [pinVerified, setPinVerified] = useState(false);
  const [pinError, setPinError] = useState('');
  const [section, setSection] = useState<'general' | 'men' | 'women'>('general');
  const [files, setFiles] = useState<File[]>([]);
  const [previews, setPreviews] = useState<string[]>([]);
  const [uploading, setUploading] = useState(false);
  const [progress, setProgress] = useState<number[]>([]);
  const [done, setDone] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (!eventId || eventId === 'placeholder') return;
    (async () => {
      try {
        const snap = await getDoc(doc(db, 'events', eventId));
        if (!snap.exists()) { setError('notFound'); setLoading(false); return; }
        const data = snap.data() as any;
        setEvent({
          name: data.name || 'Event',
          eventType: data.eventType || 'other',
          hostId: data.hostId,
          uploadEnabled: data.uploadEnabled !== false,
          requireHostApproval: data.requireHostApproval !== false,
          requirePIN: !!data.accessPIN,
          accessPIN: data.accessPIN,
          sections: data.sections || [],
          businessName: data.businessName,
          logoUrl: data.logoUrl,
        });
        // No PIN required by default
        if (!data.accessPIN) setPinVerified(true);
      } catch {
        setError('loadFailed');
      } finally {
        setLoading(false);
      }
    })();
  }, [eventId]);

  const verifyPIN = () => {
    if (pin === event?.accessPIN) {
      setPinVerified(true);
      setPinError('');
    } else {
      setPinError(lang === 'ar' ? 'رمز PIN غير صحيح' : 'Incorrect PIN');
    }
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selected = Array.from(e.target.files || []);
    const valid: File[] = [];
    const validPreviews: string[] = [];

    for (const file of selected) {
      if (!ALLOWED_TYPES.includes(file.type)) {
        alert(lang === 'ar' ? `نوع الملف غير مدعوم: ${file.name}` : `Unsupported file type: ${file.name}`);
        continue;
      }
      if (file.size > MAX_FILE_SIZE) {
        alert(lang === 'ar' ? `الملف كبير جدًا: ${file.name}` : `File too large: ${file.name}`);
        continue;
      }
      valid.push(file);
      validPreviews.push(file.type.startsWith('video/') ? '' : URL.createObjectURL(file));
    }
    setFiles((prev) => [...prev, ...valid]);
    setPreviews((prev) => [...prev, ...validPreviews]);
    setProgress((prev) => [...prev, ...valid.map(() => 0)]);
  };

  const removeFile = (i: number) => {
    if (previews[i]) URL.revokeObjectURL(previews[i]);
    setFiles((f) => f.filter((_, idx) => idx !== i));
    setPreviews((p) => p.filter((_, idx) => idx !== i));
    setProgress((p) => p.filter((_, idx) => idx !== i));
  };

  const handleUpload = async () => {
    if (!agreed) { alert(lang === 'ar' ? 'يرجى الموافقة على الشروط' : 'Please agree to the terms'); return; }
    if (files.length === 0) { alert(lang === 'ar' ? 'يرجى اختيار ملفات للرفع' : 'Please select files to upload'); return; }

    setUploading(true);
    const guestRef = `guest_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`;
    const uploadedUrls: string[] = [];

    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const ext = file.name.split('.').pop() || 'jpg';
      const safeFileName = `${sanitizeFileName(file.name)}.${ext}`;
      const storageRef = ref(storage, `events/${eventId}/uploads/${safeFileName}`);

      await new Promise<void>((resolve, reject) => {
        const task = uploadBytesResumable(storageRef, file, {
          contentType: file.type,
          customMetadata: { guestRef, originalName: 'hidden', eventId },
        });
        task.on(
          'state_changed',
          (snap) => {
            const pct = Math.round((snap.bytesTransferred / snap.totalBytes) * 100);
            setProgress((prev) => { const n = [...prev]; n[i] = pct; return n; });
          },
          reject,
          async () => {
            const url = await getDownloadURL(task.snapshot.ref);
            uploadedUrls.push(url);
            resolve();
          }
        );
      });

      // Save to Firestore
      await addDoc(collection(db, 'events', eventId, 'photos'), {
        url: uploadedUrls[uploadedUrls.length - 1],
        guestName: guestName || (lang === 'ar' ? 'ضيف' : 'Guest'),
        message: message || '',
        guestRef,
        section,
        isApproved: !event?.requireHostApproval,
        approvalStatus: event?.requireHostApproval ? 'pending' : 'approved',
        uploadedAt: serverTimestamp(),
        fileType: file.type.startsWith('video/') ? 'video' : 'image',
        likes: 0,
        comments: 0,
      });
    }

    // Update event counters
    try {
      await updateDoc(doc(db, 'events', eventId), {
        photoCount: increment(files.length),
      });
    } catch { /* non-critical */ }

    setUploading(false);
    setDone(true);
  };

  // ── Loading ──
  if (loading) {
    return (
      <div className="min-h-screen bg-black flex items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-zinc-400" />
      </div>
    );
  }

  // ── Error states ──
  if (error === 'notFound' || !event) {
    return (
      <div className="min-h-screen bg-black flex flex-col items-center justify-center gap-4 p-6 text-center">
        <AlertCircle className="h-12 w-12 text-red-400" />
        <h1 className="text-xl font-bold text-white">{lang === 'ar' ? 'المناسبة غير موجودة' : 'Event not found'}</h1>
      </div>
    );
  }

  if (!event.uploadEnabled) {
    return (
      <div className="min-h-screen bg-black flex flex-col items-center justify-center gap-4 p-6 text-center">
        <Lock className="h-12 w-12 text-zinc-400" />
        <h1 className="text-xl font-bold text-white">{lang === 'ar' ? 'انتهت فترة استقبال الصور' : 'Photo uploads are closed'}</h1>
        <p className="text-zinc-500 text-sm">{lang === 'ar' ? 'شكرًا لحضوركم' : 'Thank you for joining'}</p>
      </div>
    );
  }

  // ── PIN gate ──
  if (event.requirePIN && !pinVerified) {
    return (
      <div className="min-h-screen bg-black flex flex-col items-center justify-center gap-6 p-6">
        <Lock className="h-10 w-10 text-amber-300" />
        <div className="text-center">
          <h1 className="text-xl font-bold text-white mb-1">{event.name}</h1>
          <p className="text-zinc-400 text-sm">{lang === 'ar' ? 'أدخل رمز PIN للوصول' : 'Enter PIN to access'}</p>
        </div>
        <input
          type="number"
          inputMode="numeric"
          placeholder="0000"
          value={pin}
          onChange={(e) => setPin(e.target.value)}
          className="w-40 h-14 text-center text-2xl tracking-widest rounded-xl bg-zinc-900 border border-zinc-700 text-white focus:outline-none focus:border-amber-300"
        />
        {pinError && <p className="text-red-400 text-sm">{pinError}</p>}
        <button onClick={verifyPIN} className="h-12 px-8 rounded-xl bg-amber-300 text-zinc-950 font-semibold">
          {lang === 'ar' ? 'دخول' : 'Enter'}
        </button>
      </div>
    );
  }

  // ── Done screen ──
  if (done) {
    return (
      <div className="min-h-screen bg-black flex flex-col items-center justify-center gap-6 p-6 text-center">
        <CheckCircle className="h-16 w-16 text-emerald-400" />
        <div>
          <h1 className="text-2xl font-bold text-white mb-2">
            {lang === 'ar' ? 'تم استلام صورك، شكرًا لمشاركتك فرحتنا 🌷' : 'Photos received! Thank you for sharing.'}
          </h1>
          {event.requireHostApproval && (
            <p className="text-zinc-400 text-sm mt-2">
              {lang === 'ar' ? 'الصور بانتظار موافقة صاحب المناسبة' : 'Your photos are pending host approval'}
            </p>
          )}
        </div>
        <button
          onClick={() => { setDone(false); setFiles([]); setPreviews([]); setProgress([]); setMessage(''); }}
          className="h-10 px-6 rounded-full border border-zinc-700 text-zinc-300 text-sm hover:border-zinc-500"
        >
          {lang === 'ar' ? 'رفع المزيد' : 'Upload more'}
        </button>
      </div>
    );
  }

  const isRTL = lang === 'ar';

  // ── Upload form ──
  return (
    <div className={`min-h-screen bg-black text-white ${isRTL ? 'font-[system-ui]' : ''}`} dir={isRTL ? 'rtl' : 'ltr'}>
      {/* Header */}
      <div className="sticky top-0 z-10 bg-black/80 backdrop-blur-md border-b border-zinc-900 px-4 py-3">
        <div className="max-w-lg mx-auto flex items-center gap-3">
          {event.logoUrl && (
            <img src={event.logoUrl} alt="" className="h-8 w-8 rounded-full object-cover" />
          )}
          <div>
            <h1 className="text-sm font-semibold leading-tight">{event.name}</h1>
            {event.businessName && <p className="text-xs text-zinc-500">{event.businessName}</p>}
          </div>
        </div>
      </div>

      <main className="max-w-lg mx-auto px-4 py-8 space-y-6">
        {/* Privacy notice */}
        <div className="rounded-xl border border-zinc-800 bg-zinc-900/40 p-4 text-xs text-zinc-400 leading-relaxed">
          {isRTL
            ? 'هذه المناسبة خاصة. الصور والفيديوهات التي ترفعها ستُشارك فقط مع صاحب المناسبة، ولن تظهر للضيوف إلا إذا سمح صاحب المناسبة بذلك.'
            : 'This is a private event. Your uploads are shared only with the event host and will not be visible to other guests unless the host approves.'}
        </div>

        {/* Section selector */}
        {event.sections && event.sections.length > 0 && (
          <div>
            <label className="block text-sm font-medium mb-2">{isRTL ? 'القسم' : 'Section'}</label>
            <div className="flex gap-2">
              {(['general', 'men', 'women'] as const).filter(s => s === 'general' || event.sections!.includes(s)).map((s) => (
                <button
                  key={s}
                  onClick={() => setSection(s)}
                  className={`flex-1 h-10 rounded-xl text-sm font-medium transition-colors ${section === s ? 'bg-amber-300 text-zinc-950' : 'bg-zinc-900 border border-zinc-800 text-zinc-400 hover:border-zinc-600'}`}
                >
                  {s === 'general' ? (isRTL ? 'عام' : 'General') : s === 'men' ? (isRTL ? 'رجال' : 'Men') : (isRTL ? 'نساء' : 'Women')}
                </button>
              ))}
            </div>
          </div>
        )}

        {/* Guest name */}
        <div>
          <label className="block text-sm font-medium mb-2">{isRTL ? 'اسمك (اختياري)' : 'Your name (optional)'}</label>
          <input
            type="text"
            placeholder={isRTL ? 'مثال: أحمد / نورة' : 'e.g. Ahmed'}
            value={guestName}
            onChange={(e) => setGuestName(e.target.value)}
            className="w-full h-12 px-4 rounded-xl bg-zinc-900 border border-zinc-800 text-white placeholder-zinc-500 focus:outline-none focus:border-zinc-600"
          />
        </div>

        {/* Greeting message */}
        <div>
          <label className="block text-sm font-medium mb-2">{isRTL ? 'رسالة تهنئة (اختياري)' : 'Greeting message (optional)'}</label>
          <textarea
            placeholder={isRTL ? 'اكتب تهنئتك هنا...' : 'Write a message...'}
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            rows={2}
            className="w-full px-4 py-3 rounded-xl bg-zinc-900 border border-zinc-800 text-white placeholder-zinc-500 focus:outline-none focus:border-zinc-600 resize-none text-sm"
          />
        </div>

        {/* File picker */}
        <div>
          <label className="block text-sm font-medium mb-2">{isRTL ? 'الصور والفيديوهات' : 'Photos & Videos'}</label>
          <button
            onClick={() => fileInputRef.current?.click()}
            className="w-full h-32 rounded-2xl border-2 border-dashed border-zinc-700 bg-zinc-900/30 hover:border-amber-300/50 hover:bg-amber-300/5 transition-all flex flex-col items-center justify-center gap-2"
          >
            <div className="flex gap-3">
              <ImageIcon className="h-6 w-6 text-zinc-500" />
              <Video className="h-6 w-6 text-zinc-500" />
            </div>
            <span className="text-sm text-zinc-400">{isRTL ? 'اضغط لاختيار الصور والفيديوهات' : 'Tap to select photos & videos'}</span>
            <span className="text-xs text-zinc-600">{isRTL ? 'JPG، PNG، HEIC، MP4، MOV — حتى 100 ميغا لكل ملف' : 'JPG, PNG, HEIC, MP4, MOV — up to 100MB each'}</span>
          </button>
          <input
            ref={fileInputRef}
            type="file"
            accept="image/jpeg,image/jpg,image/png,image/heic,image/heif,video/mp4,video/quicktime"
            multiple
            className="hidden"
            onChange={handleFileChange}
          />
        </div>

        {/* Preview grid */}
        {files.length > 0 && (
          <div className="grid grid-cols-3 gap-2">
            {files.map((file, i) => (
              <div key={i} className="relative aspect-square rounded-xl overflow-hidden bg-zinc-900 border border-zinc-800">
                {previews[i] ? (
                  <img src={previews[i]} alt="" className="w-full h-full object-cover" />
                ) : (
                  <div className="w-full h-full flex items-center justify-center">
                    <Video className="h-8 w-8 text-zinc-500" />
                  </div>
                )}
                {/* Progress overlay while uploading */}
                {uploading && progress[i] < 100 && (
                  <div className="absolute inset-0 bg-black/60 flex items-center justify-center">
                    <span className="text-xs font-bold text-white">{progress[i]}%</span>
                  </div>
                )}
                {uploading && progress[i] === 100 && (
                  <div className="absolute inset-0 bg-emerald-900/60 flex items-center justify-center">
                    <CheckCircle className="h-6 w-6 text-emerald-300" />
                  </div>
                )}
                {!uploading && (
                  <button
                    onClick={() => removeFile(i)}
                    className="absolute top-1 right-1 h-6 w-6 rounded-full bg-black/70 flex items-center justify-center"
                  >
                    <X className="h-3 w-3 text-white" />
                  </button>
                )}
              </div>
            ))}
          </div>
        )}

        {/* Overall progress bar */}
        {uploading && (
          <div className="space-y-2">
            <div className="h-2 rounded-full bg-zinc-800 overflow-hidden">
              <div
                className="h-full bg-amber-300 transition-all"
                style={{ width: `${Math.round(progress.reduce((a, b) => a + b, 0) / Math.max(progress.length, 1))}%` }}
              />
            </div>
            <p className="text-xs text-zinc-500 text-center">
              {isRTL ? 'جاري الرفع...' : 'Uploading...'}
            </p>
          </div>
        )}

        {/* Consent */}
        <label className="flex items-start gap-3 cursor-pointer">
          <input
            type="checkbox"
            checked={agreed}
            onChange={(e) => setAgreed(e.target.checked)}
            className="mt-0.5 h-4 w-4 rounded accent-amber-300"
          />
          <span className="text-xs text-zinc-400 leading-relaxed">
            {isRTL
              ? 'أوافق على مشاركة هذه الملفات مع صاحب المناسبة.'
              : 'I agree to share these files with the event host.'}
          </span>
        </label>

        {/* Submit */}
        <button
          onClick={handleUpload}
          disabled={uploading || files.length === 0 || !agreed}
          className="w-full h-14 rounded-2xl bg-amber-300 text-zinc-950 font-bold text-base flex items-center justify-center gap-2 hover:bg-amber-200 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
        >
          {uploading ? (
            <><Loader2 className="h-5 w-5 animate-spin" /> {isRTL ? 'جاري الرفع...' : 'Uploading...'}</>
          ) : (
            <><Upload className="h-5 w-5" /> {isRTL ? 'ارفع الصور والفيديوهات' : 'Upload Photos & Videos'}</>
          )}
        </button>

        {/* Footer note */}
        <p className="text-xs text-zinc-600 text-center pb-4">
          {isRTL
            ? 'لا نستخدم صورك للتسويق أو التدريب أو العرض العام بدون موافقة صريحة.'
            : "We don't use your photos for marketing, AI training, or public display without explicit consent."}
        </p>
      </main>
    </div>
  );
}