import React, { useState, useEffect, useRef } from 'react';
import { X, ShieldCheck, UserCheck, AlertCircle, CheckCircle2 } from 'lucide-react';

export default function GuestSignupModal({ shift, onClose, onSubmit }) {
  const [guestName, setGuestName] = useState('');
  const [captchaToken, setCaptchaToken] = useState('');
  const [isCaptchaSolved, setIsCaptchaSolved] = useState(false);
  const [error, setError] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const captchaRef = useRef(null);

  useEffect(() => {
    // Load saved guest name from localStorage
    const savedName = localStorage.getItem('guest_display_name') || '';
    if (savedName) {
      setGuestName(savedName);
    }
  }, []);

  useEffect(() => {
    const el = captchaRef.current;
    if (!el) return;

    const handleVerified = (e) => {
      const isVerified = e?.detail?.verified || (el.isValid && el.isValid());
      if (isVerified) {
        setIsCaptchaSolved(true);
        const token = 'acaptcha-verified-' + Math.random().toString(36).substring(2, 10);
        setCaptchaToken(token);
      }
    };

    const handleReset = () => {
      setIsCaptchaSolved(false);
      setCaptchaToken('');
    };

    el.addEventListener('verified', handleVerified);
    el.addEventListener('statuschange', handleVerified);
    el.addEventListener('reset', handleReset);

    // Initial check if already valid
    if (el.isValid && el.isValid()) {
      handleVerified({ detail: { verified: true } });
    }

    return () => {
      el.removeEventListener('verified', handleVerified);
      el.removeEventListener('statuschange', handleVerified);
      el.removeEventListener('reset', handleReset);
    };
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');

    if (!guestName.trim()) {
      setError('Bitte gib deinen Namen ein.');
      return;
    }

    const el = captchaRef.current;
    const isVerified = isCaptchaSolved || (el && el.isValid && el.isValid());

    if (!isVerified) {
      setError('Bitte löse zuerst das Captcha.');
      return;
    }

    const token = captchaToken || ('acaptcha-verified-' + Math.random().toString(36).substring(2, 10));

    // Save in localStorage for guest convenience
    localStorage.setItem('guest_display_name', guestName.trim());

    setSubmitting(true);
    try {
      await onSubmit({ guest_name: guestName.trim(), captcha_token: token });
      onClose();
    } catch (err) {
      setError(err.message || 'Eintragen fehlgeschlagen.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm">
      <div className="glass-panel w-full max-w-md rounded-2xl border border-slate-800 p-6 shadow-2xl relative animate-in fade-in zoom-in-95 duration-200">
        <button
          onClick={onClose}
          className="absolute top-4 right-4 p-2 text-slate-400 hover:text-white rounded-lg transition"
        >
          <X className="w-5 h-5" />
        </button>

        <div className="flex items-center gap-3 mb-4">
          <div className="w-10 h-10 rounded-xl bg-blue-500/10 text-blue-400 border border-blue-500/20 flex items-center justify-center">
            <UserCheck className="w-5 h-5" />
          </div>
          <div>
            <h3 className="font-bold text-lg text-white">Als Gast eintragen</h3>
            <p className="text-xs text-slate-400">Schicht: {shift?.title} ({shift?.start_time} - {shift?.end_time})</p>
          </div>
        </div>

        {error && (
          <div className="mb-4 p-3 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-xs flex items-center gap-2">
            <AlertCircle className="w-4 h-4 shrink-0" />
            <span>{error}</span>
          </div>
        )}

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-xs font-semibold text-slate-300 mb-1">
              Dein Name / Anzeigename
            </label>
            <input
              type="text"
              required
              value={guestName}
              onChange={(e) => setGuestName(e.target.value)}
              placeholder="z. B. Alex Muster"
              className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-white text-sm focus:outline-none focus:border-blue-500 transition"
            />
            <p className="text-[11px] text-slate-500 mt-1">
              Dein Name wird in deiner Sitzung gespeichert. Falls du später ein Konto mit diesem Namen erstellst, werden deine Gast-Schichten automatisch übertragen!
            </p>
          </div>

          {/* Official aCAPTCHA Web Component */}
          <div className="p-4 rounded-xl bg-slate-900/90 border border-slate-800 space-y-3">
            <div className="flex items-center justify-between">
              <span className="text-xs font-semibold text-slate-300 flex items-center gap-1.5 font-mono">
                <ShieldCheck className="w-4 h-4 text-emerald-400" /> Security Check (aCAPTCHA)
              </span>
              <a
                href="https://acaptcha.vercel.app/"
                target="_blank"
                rel="noreferrer"
                className="text-[10px] text-blue-400 hover:underline font-mono"
              >
                aCAPTCHA v1.1
              </a>
            </div>

            <div className="border border-slate-700 rounded-lg p-3 bg-slate-950/80 flex flex-col items-center justify-center min-h-[100px]">
              <captcha-element
                ref={captchaRef}
                status="null"
                sound-enabled="true"
                dark-mode="dark"
                type="both"
                difficulty="adaptive"
              ></captcha-element>

              {isCaptchaSolved && (
                <div className="mt-2 text-xs font-medium text-emerald-400 flex items-center gap-1 font-mono">
                  <CheckCircle2 className="w-4 h-4" /> Captcha verifiziert!
                </div>
              )}
            </div>
          </div>

          <div className="pt-2 flex justify-end gap-2">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 rounded-xl text-xs font-semibold text-slate-400 hover:bg-slate-800 transition"
            >
              Abbrechen
            </button>
            <button
              type="submit"
              disabled={submitting}
              className="px-5 py-2 rounded-xl text-xs font-bold bg-blue-600 hover:bg-blue-500 text-white transition shadow-lg shadow-blue-600/30 disabled:opacity-50"
            >
              {submitting ? 'Eintragen...' : 'Jetzt eintragen'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}
