import { useEffect, useState } from "react";
import { useNavigate } from "@tanstack/react-router";
import { X, Phone, User, Mail, Sparkles } from "lucide-react";
import { useLead } from "./LeadProvider";
import { SITE } from "@/lib/site";
import logo from "@/assets/logo.png";

export function LeadPopup() {
  const { open, closeLead, source } = useLead();
  const navigate = useNavigate();
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [email, setEmail] = useState("");
  const [honeypot, setHoneypot] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [errors, setErrors] = useState<{ name?: string; phone?: string; email?: string }>({});

  useEffect(() => {
    if (!open) {
      setName(""); setPhone(""); setEmail(""); setErrors({}); setSubmitting(false);
    }
  }, [open]);

  useEffect(() => {
    if (open) document.body.style.overflow = "hidden";
    else document.body.style.overflow = "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  if (!open) return null;

  const validate = () => {
    const e: typeof errors = {};
    if (!name.trim() || name.trim().length < 2) e.name = "Please enter your name";
    if (!/^[6-9]\d{9}$/.test(phone.replace(/\D/g, ""))) e.phone = "Enter a valid 10-digit Indian mobile";
    if (email.trim() && !/^\S+@\S+\.\S+$/.test(email.trim())) e.email = "Enter a valid email";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const onSubmit = async (ev: React.FormEvent) => {
    ev.preventDefault();
    if (honeypot) return; // bot
    if (!validate()) return;
    setSubmitting(true);
    try {
      await fetch("/api/public/lead", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name, phone, email, source, honeypot }),
      }).catch(() => {});
    } finally {
      closeLead();
      navigate({ to: "/thank-you" });
    }
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 animate-fade-up">
      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={closeLead} />
      <div className="relative w-full max-w-md rounded-2xl bg-card border border-gold/30 shadow-luxury p-8">
        <button onClick={closeLead} className="absolute top-4 right-4 text-muted-foreground hover:text-foreground" aria-label="Close">
          <X size={22} />
        </button>
        <div className="flex flex-col items-center text-center mb-6">
          <span className="inline-flex items-center justify-center rounded-xl mb-3 dark:bg-white dark:p-2">
            <img src={logo} alt={SITE.name} className="h-20 w-auto object-contain" />
          </span>
          <div className="inline-flex items-center gap-2 text-xs uppercase tracking-widest text-gold">
            <Sparkles size={14} /> Exclusive Offer
          </div>
          <h3 className="text-2xl font-bold mt-2">Get Best Property Deals in Pune</h3>
          <p className="text-sm text-muted-foreground mt-1">Speak to our Baner experts in 30 seconds.</p>
          {source && <p className="text-[10px] uppercase tracking-widest text-gold/80 mt-2">Source: {source}</p>}
        </div>
        <form onSubmit={onSubmit} className="space-y-4">
          <input type="text" value={honeypot} onChange={(e) => setHoneypot(e.target.value)} className="hidden" tabIndex={-1} autoComplete="off" aria-hidden />
          <div>
            <label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Name</label>
            <div className="mt-1 relative">
              <User className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={18} />
              <input value={name} onChange={(e) => setName(e.target.value)} maxLength={80} className="w-full rounded-lg border border-input bg-background pl-10 pr-3 py-3 focus:outline-none focus:border-gold transition" placeholder="Your full name" />
            </div>
            {errors.name && <p className="text-xs text-destructive mt-1">{errors.name}</p>}
          </div>
          <div>
            <label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Mobile</label>
            <div className="mt-1 relative">
              <Phone className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={18} />
              <input value={phone} onChange={(e) => setPhone(e.target.value)} maxLength={10} inputMode="numeric" className="w-full rounded-lg border border-input bg-background pl-10 pr-3 py-3 focus:outline-none focus:border-gold transition" placeholder="10-digit mobile" />
            </div>
            {errors.phone && <p className="text-xs text-destructive mt-1">{errors.phone}</p>}
          </div>
          <div>
            <label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Email <span className="text-muted-foreground/60 normal-case">(optional)</span></label>
            <div className="mt-1 relative">
              <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={18} />
              <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} maxLength={120} className="w-full rounded-lg border border-input bg-background pl-10 pr-3 py-3 focus:outline-none focus:border-gold transition" placeholder="you@example.com" />
            </div>
            {errors.email && <p className="text-xs text-destructive mt-1">{errors.email}</p>}
          </div>
          <button type="submit" disabled={submitting} className="w-full gradient-gold text-black font-semibold py-3 rounded-lg hover:shadow-luxury transition disabled:opacity-60">
            {submitting ? "Sending..." : "Get Free Consultation"}
          </button>
          <p className="text-[11px] text-center text-muted-foreground">By submitting you agree to be contacted by Pune Property Club.</p>
        </form>
      </div>
    </div>
  );
}

/** Auto-trigger after delay (mounted once globally). */
export function LeadAutoTrigger() {
  const { openLead } = useLead();
  useEffect(() => {
    if (typeof window === "undefined") return;
    if (sessionStorage.getItem("ppc-lead-shown")) return;
    const t = setTimeout(() => {
      openLead("auto-popup");
      sessionStorage.setItem("ppc-lead-shown", "1");
    }, 4000);
    return () => clearTimeout(t);
  }, [openLead]);
  return null;
}