'use client';

import { useState, useEffect, useRef } from 'react';
import { Html5Qrcode } from 'html5-qrcode';
import { useRouter } from 'next/navigation';
import { X, Camera } from 'lucide-react';

export default function ScanPage() {
  const router = useRouter();
  const [error, setError] = useState<string | null>(null);
  const scannerRef = useRef<Html5Qrcode | null>(null);
  const scannerContainerId = 'qr-scanner';

  useEffect(() => {
    const scanner = new Html5Qrcode(scannerContainerId);
    scannerRef.current = scanner;

    const config = {
      fps: 10,
      qrbox: { width: 250, height: 250 },
      aspectRatio: 1.0,
    };

    scanner.start(
      { facingMode: 'environment' },
      config,
      (decodedText: string) => {
        // Parse the QR code to extract event ID
        // Expected format: https://once.film/event/{eventId}
        const match = decodedText.match(/\/event\/([a-zA-Z0-9_-]+)/);
        if (match && match[1]) {
          scanner.stop();
          router.push(`/event/${match[1]}`);
        } else {
          setError('Invalid QR code format');
        }
      },
      (errorMessage: string) => {
        // Ignore scan errors, they happen frequently while scanning
      }
    ).catch((err) => {
      console.error('Scanner error:', err);
      setError('Camera access denied or not available');
    });

    return () => {
      if (scannerRef.current && scannerRef.current.isScanning) {
        scannerRef.current.stop().catch(console.error);
      }
    };
  }, [router]);

  return (
    <div className="min-h-screen bg-black flex flex-col items-center justify-center p-4">
      <button
        onClick={() => router.back()}
        className="absolute top-4 right-4 h-10 w-10 rounded-full bg-zinc-800 text-white flex items-center justify-center hover:bg-zinc-700 transition-colors"
      >
        <X className="h-5 w-5" />
      </button>

      <div className="w-full max-w-md">
        <h1 className="text-2xl font-bold text-white text-center mb-2">Scan QR Code</h1>
        <p className="text-zinc-400 text-center mb-6">Point your camera at an event QR code</p>

        <div className="relative bg-zinc-900 rounded-2xl overflow-hidden aspect-square">
          <div id={scannerContainerId} className="w-full h-full" />
          
          {/* Scanner overlay */}
          <div className="absolute inset-0 pointer-events-none">
            <div className="absolute inset-4 border-2 border-white/30 rounded-xl" />
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 border-2 border-emerald-500 rounded-lg" />
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center">
              <Camera className="h-8 w-8 text-white/50" />
            </div>
          </div>
        </div>

        {error && (
          <div className="mt-4 p-4 bg-red-900/20 border border-red-900/30 rounded-xl">
            <p className="text-red-400 text-sm text-center">{error}</p>
          </div>
        )}

        <div className="mt-6 text-center">
          <p className="text-zinc-500 text-sm">
            Make sure you have camera permissions enabled
          </p>
        </div>
      </div>
    </div>
  );
}