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

interface QuickCallbackModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export function QuickCallbackModal({ isOpen, onClose }: QuickCallbackModalProps) {
  const [submitted, setSubmitted] = useState(false);
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [preferredTime, setPreferredTime] = useState('Morning (8am - 12pm)');

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

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

  if (!isOpen) return null;

  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: 10 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          exit={{ opacity: 0, scale: 0.9, y: 10 }}
          className="relative w-full max-w-md overflow-hidden rounded-2xl 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">
              <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-[color-mix(in_srgb,var(--color-primary)_15%,transparent)] text-primary">
                <CheckCircle2 className="h-8 w-8 text-primary" />
              </div>
              <h3 className="mt-4 text-xl font-bold text-[var(--color-text)]">Callback Requested!</h3>
              <p className="mt-2 text-sm text-muted">
                Thank you, <strong className="text-[var(--color-text)]">{name}</strong>. Our care team will call you back on <strong className="text-primary">{phone}</strong> during {preferredTime}.
              </p>
              <Button onClick={handleReset} className="mt-6 w-full">
                Close
              </Button>
            </div>
          ) : (
            <div>
              <div className="flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-white">
                  <Phone className="h-5 w-5" />
                </div>
                <div>
                  <h3 className="font-bold text-lg text-[var(--color-text)]">Request a Quick Callback</h3>
                  <p className="text-xs text-muted">We will call you back at your convenience.</p>
                </div>
              </div>

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

                <div>
                  <label className="block text-xs font-semibold uppercase tracking-wider text-[var(--color-text)] mb-1">
                    Phone Number *
                  </label>
                  <input
                    type="tel"
                    required
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                    placeholder="e.g. 0400 123 456"
                    className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-sm text-[var(--color-text)] outline-none focus:border-primary"
                  />
                </div>

                <div>
                  <label className="block text-xs font-semibold uppercase tracking-wider text-[var(--color-text)] mb-1">
                    Preferred Callback Time
                  </label>
                  <select
                    value={preferredTime}
                    onChange={(e) => setPreferredTime(e.target.value)}
                    className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3 py-2 text-sm text-[var(--color-text)] outline-none focus:border-primary"
                  >
                    <option value="Morning (8am - 12pm)">Morning (8:00 am – 12:00 pm)</option>
                    <option value="Afternoon (12pm - 5pm)">Afternoon (12:00 pm – 5:00 pm)</option>
                    <option value="Evening (5pm - 7pm)">Evening (5:00 pm – 7:00 pm)</option>
                    <option value="As soon as possible">As soon as possible (Urgent)</option>
                  </select>
                </div>

                <Button type="submit" className="w-full mt-2">
                  Request Callback Now
                </Button>
              </form>
            </div>
          )}
        </motion.div>
      </div>
    </AnimatePresence>
  );
}