import { useState } from "react";
import { X } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";

interface Props {
  open: boolean;
  onClose: () => void;
  companionName?: string;
}

export default function InquiryModal({ open, onClose, companionName }: Props) {
  const [sent, setSent] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => { setSent(false); onClose(); }, 2500);
  };

  return (
    <AnimatePresence>
      {open && (
        <motion.div
          className="fixed inset-0 z-[200] flex items-center justify-center p-4"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          <div
            className="absolute inset-0 bg-black/80"
            style={{ backdropFilter: "blur(8px)" }}
            onClick={onClose}
          />
          <motion.div
            className="relative z-10 w-full max-w-md bg-card border border-primary/20 p-8"
            initial={{ y: 30, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: 30, opacity: 0 }}
            transition={{ duration: 0.3 }}
          >
            <button onClick={onClose} className="absolute top-4 right-4 text-muted-foreground hover:text-primary transition-colors">
              <X size={18} />
            </button>
            {!sent ? (
              <>
                <p className="text-xs tracking-[0.25em] uppercase text-primary mb-1">Booking Inquiry</p>
                <h2 className="font-serif text-2xl text-foreground mb-6">
                  {companionName ? `Request — ${companionName}` : "Private Inquiry"}
                </h2>
                <form onSubmit={handleSubmit} className="flex flex-col gap-4">
                  <input required placeholder="Your Name" className="bg-muted border border-border text-foreground px-4 py-3 text-base focus:outline-none focus:border-primary/50 transition-colors placeholder:text-muted-foreground/50" />
                  <input required type="email" placeholder="Email Address" className="bg-muted border border-border text-foreground px-4 py-3 text-base focus:outline-none focus:border-primary/50 transition-colors placeholder:text-muted-foreground/50" />
                  <input required type="date" className="bg-muted border border-border text-foreground px-4 py-3 text-base focus:outline-none focus:border-primary/50 transition-colors [color-scheme:dark]" />
                  <textarea required rows={3} placeholder="Please describe the occasion and your requirements..." className="bg-muted border border-border text-foreground px-4 py-3 text-base focus:outline-none focus:border-primary/50 transition-colors resize-none placeholder:text-muted-foreground/50" />
                  <button type="submit" className="mt-2 bg-primary text-background py-3 text-xs tracking-[0.25em] uppercase hover:bg-primary/90 transition-colors font-medium">
                    Submit Inquiry
                  </button>
                </form>
              </>
            ) : (
              <div className="py-8 text-center">
                <p className="text-primary text-xs tracking-[0.25em] uppercase mb-3">Received</p>
                <p className="font-serif text-2xl text-foreground mb-3">Thank You</p>
                <p className="text-sm text-muted-foreground">Our concierge team will contact you within 24 hours.</p>
              </div>
            )}
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}
