import { AnimatePresence, motion } from 'framer-motion';
import { Calendar, CheckCircle2, MapPin, X } from 'lucide-react';
import { type FormEvent, useState } from 'react';
import { Button } from './Button';

interface EventRsvpModalProps {
  event: {
    title: string;
    date: string;
    time?: string;
    location: string;
  } | null;
  onClose: () => void;
}

export function EventRsvpModal({ event, onClose }: EventRsvpModalProps) {
  const [submitted, setSubmitted] = useState(false);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [attendees, setAttendees] = useState('1');

  if (!event) return null;

  function handleSubmit(e: FormEvent) {
    e.preventDefault();
    setSubmitted(true);
  }

  function handleReset() {
    setSubmitted(false);
    setName('');
    setEmail('');
    onClose();
  }

  return (
    <AnimatePresence>
      <div
        className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      >
        <motion.div
          initial={{ opacity: 0, scale: 0.9, y: 15 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          exit={{ opacity: 0, scale: 0.9, y: 15 }}
          className="relative w-full max-w-md overflow-hidden rounded-3xl border border-theme bg-[var(--color-surface)] p-6 shadow-2xl"
          onClick={(e) => e.stopPropagation()}
        >
          <button
            type="button"
            onClick={onClose}
            className="absolute right-4 top-4 rounded-lg p-1 text-muted hover:bg-[color-mix(in_srgb,var(--color-primary)_10%,transparent)] hover:text-[var(--color-text)]"
            aria-label="Close"
          >
            <X className="h-5 w-5" />
          </button>

          {submitted ? (
            <div className="py-6 text-center space-y-4">
              <CheckCircle2 className="mx-auto h-12 w-12 text-primary" />
              <h3 className="text-xl font-bold text-[var(--color-text)]">RSVP Confirmed!</h3>
              <p className="text-sm text-muted">
                Thank you <strong className="text-[var(--color-text)]">{name}</strong>. You have reserved {attendees} seat(s) for <strong className="text-primary">{event.title}</strong>. A confirmation email with calendar link has been sent to <strong className="text-[var(--color-text)]">{email}</strong>.
              </p>
              <Button onClick={handleReset} className="w-full">
                Close
              </Button>
            </div>
          ) : (
            <div>
              <div className="flex items-center gap-3 border-b border-theme pb-4">
                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-white">
                  <Calendar className="h-5 w-5" />
                </div>
                <div>
                  <h3 className="font-bold text-lg text-[var(--color-text)]">Event Registration</h3>
                  <p className="text-xs text-muted font-medium line-clamp-1">{event.title}</p>
                </div>
              </div>

              <div className="mt-4 rounded-xl bg-[var(--color-bg)] p-3 text-xs text-muted space-y-1">
                <p className="flex items-center gap-1.5 font-semibold text-[var(--color-text)]">
                  <Calendar className="h-3.5 w-3.5 text-primary shrink-0" /> {event.date} {event.time ? `· ${event.time}` : ''}
                </p>
                <p className="flex items-center gap-1.5">
                  <MapPin className="h-3.5 w-3.5 text-primary shrink-0" /> {event.location}
                </p>
              </div>

              <form onSubmit={handleSubmit} className="mt-4 space-y-3">
                <div>
                  <label className="block text-xs font-semibold text-[var(--color-text)] mb-1">Full Name *</label>
                  <input
                    type="text"
                    required
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    placeholder="e.g. Jane Doe"
                    className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                  />
                </div>

                <div>
                  <label className="block text-xs font-semibold text-[var(--color-text)] mb-1">Email Address *</label>
                  <input
                    type="email"
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="e.g. jane@example.com"
                    className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                  />
                </div>

                <div>
                  <label className="block text-xs font-semibold text-[var(--color-text)] mb-1">Number of Attendees</label>
                  <select
                    value={attendees}
                    onChange={(e) => setAttendees(e.target.value)}
                    className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3 py-2 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                  >
                    <option value="1">1 Person (Just me)</option>
                    <option value="2">2 Persons (Participant + Carer)</option>
                    <option value="3">3 Persons</option>
                    <option value="4+">4+ Group</option>
                  </select>
                </div>

                <Button type="submit" className="w-full justify-center mt-2">
                  Confirm Free Reservation
                </Button>
              </form>
            </div>
          )}
        </motion.div>
      </div>
    </AnimatePresence>
  );
}