'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { callFunction } from '@/lib/firebase';
import { useAuth } from '@/components/auth-provider';
import { ArrowLeft, QrCode, Camera, Keyboard, Loader2 } from 'lucide-react';
import { toast } from '@/hooks/use-toast';
import { useLanguage } from '@/hooks/use-language';
import { t } from '@/lib/i18n';

export default function QRPage() {
  const router = useRouter();
  const { user } = useAuth();
  const { lang } = useLanguage();
  const [mode, setMode] = useState<'scan' | 'manual'>('scan');
  const [eventCode, setEventCode] = useState('');
  const [scanning, setScanning] = useState(false);
  const [joining, setJoining] = useState(false);

  useEffect(() => {
    let html5QrCode: any;

    if (mode === 'scan' && scanning) {
      import('html5-qrcode').then(({ Html5Qrcode }) => {
        html5QrCode = new Html5Qrcode('qr-reader');
        html5QrCode
          .start(
            { facingMode: 'environment' },
            { fps: 10, qrbox: { width: 250, height: 250 } },
            (decodedText: string) => {
              handleScanned(decodedText);
              html5QrCode?.stop();
              setScanning(false);
            },
            () => {}
          )
          .catch(() => {
            toast({ title: 'Camera access denied. Please use manual entry.', variant: 'destructive' });
            setScanning(false);
          });
      });
    }

    return () => {
      if (html5QrCode) {
        html5QrCode.stop().catch(() => {});
      }
    };
  }, [mode, scanning]);

  const joinEventFn = async (eventId: string) => {
    if (!user) {
      toast({ title: t(lang, 'enterPhone') || 'Please sign in first', variant: 'destructive' });
      router.push(`/auth?redirect=/qr`);
      return;
    }

    setJoining(true);
    try {
      const joinFn = callFunction('joinEvent');
      await joinFn({ eventId, displayName: user.displayName || user.phoneNumber || 'Guest' });
      toast({ title: t(lang, 'joinSuccess') || 'Joined event successfully!', variant: 'success' });
      router.push(`/event/${eventId}`);
    } catch (error: any) {
      console.error('Join error:', error);
      toast({ title: error.message || t(lang, 'joinFailed') || 'Failed to join event', variant: 'destructive' });
    } finally {
      setJoining(false);
    }
  };

  const handleScanned = (text: string) => {
    const eventId = text.split('/event/').pop() || text;
    toast({ title: t(lang, 'joiningEvent') || 'Event found! Joining...', variant: 'success' });
    joinEventFn(eventId.trim().toUpperCase());
  };

  const handleManualJoin = () => {
    if (!eventCode || eventCode.length < 3) {
      toast({ title: t(lang, 'enterEventCode') || 'Please enter a valid event code', variant: 'destructive' });
      return;
    }
    joinEventFn(eventCode.toUpperCase().trim());
  };

  return (
    <div className="min-h-screen bg-background flex flex-col">
      <header className="sticky top-0 z-50 border-b border-zinc-900 bg-background/80 backdrop-blur-md">
        <div className="max-w-xl mx-auto px-4 h-14 flex items-center">
          <Link href="/" className="inline-flex items-center gap-2 text-zinc-500 hover:text-zinc-300 text-sm">
            <ArrowLeft className="h-4 w-4" />
            {t(lang, 'back')}
          </Link>
        </div>
      </header>

      <main className="flex-1 max-w-xl mx-auto px-4 py-8 w-full">
        <div className="text-center mb-8">
          <h1 className="text-2xl font-bold mb-2">{t(lang, 'joinAnEvent')}</h1>
          <p className="text-zinc-500 text-sm">{t(lang, 'scanOrEnter') || 'Scan a QR code or enter the event code manually.'}</p>
        </div>

        {/* Mode Toggle */}
        <div className="flex items-center gap-2 p-1 rounded-xl bg-zinc-900 border border-zinc-800 mb-8">
          <button
            onClick={() => {
              setMode('scan');
              setScanning(true);
            }}
            className={`flex-1 h-10 rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2 ${
              mode === 'scan' ? 'bg-zinc-800 text-white' : 'text-zinc-500 hover:text-zinc-300'
            }`}
          >
            <Camera className="h-4 w-4" />
            {t(lang, 'scanQR')}
          </button>
          <button
            onClick={() => {
              setMode('manual');
              setScanning(false);
            }}
            className={`flex-1 h-10 rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2 ${
              mode === 'manual' ? 'bg-zinc-800 text-white' : 'text-zinc-500 hover:text-zinc-300'
            }`}
          >
            <Keyboard className="h-4 w-4" />
            {t(lang, 'manualEntry')}
          </button>
        </div>

        {mode === 'scan' ? (
          <div className="space-y-4">
            {joining ? (
              <div className="w-full h-64 rounded-2xl border border-zinc-800 bg-zinc-900/50 flex flex-col items-center justify-center gap-3">
                <Loader2 className="h-8 w-8 animate-spin text-zinc-400" />
                <span className="text-zinc-400 text-sm">{t(lang, 'joining') || 'Joining event...'}</span>
              </div>
            ) : !scanning ? (
              <button
                onClick={() => setScanning(true)}
                className="w-full h-64 rounded-2xl border-2 border-dashed border-zinc-800 bg-zinc-900/30 flex flex-col items-center justify-center gap-3 hover:border-zinc-600 transition-colors"
              >
                <QrCode className="h-12 w-12 text-zinc-600" />
                <span className="text-zinc-500 text-sm">{t(lang, 'tapToScan') || 'Tap to start scanning'}</span>
              </button>
            ) : (
              <div id="qr-reader" className="rounded-2xl overflow-hidden border border-zinc-800" />
            )}
          </div>
        ) : (
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium mb-2">{t(lang, 'enterEventCode')}</label>
              <input
                type="text"
                placeholder="ABC123"
                value={eventCode}
                onChange={(e) => setEventCode(e.target.value.toUpperCase())}
                maxLength={10}
                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 transition-colors text-center text-lg tracking-widest uppercase"
              />
            </div>
            <button
              onClick={handleManualJoin}
              disabled={joining}
              className="w-full h-12 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium hover:from-indigo-600 hover:to-purple-700 transition-all shadow-md shadow-indigo-500/20 disabled:opacity-50 flex items-center justify-center gap-2"
            >
              {joining ? <Loader2 className="h-5 w-5 animate-spin" /> : t(lang, 'join') || 'Join Event'}
            </button>
          </div>
        )}
      </main>
    </div>
  );
}