import { useState, type FormEvent } from "react";
import { Check, Loader2 } from "lucide-react";

type Props = {
  variant?: "light" | "dark";
  compact?: boolean;
  defaultInterest?: string;
};

export function LeadForm({ variant = "light", compact = false, defaultInterest = "" }: Props) {
  const [state, setState] = useState<"idle" | "loading" | "done">("idle");
  const [form, setForm] = useState({
    name: "",
    email: "",
    phone: "",
    interest: defaultInterest,
    budget: "AED 1M – 3M",
    message: "",
  });

  const onSubmit = (e: FormEvent) => {
    e.preventDefault();
    setState("loading");
    // Simulated submit — hook to CRM/webhook later
    setTimeout(() => setState("done"), 900);
  };

  const isDark = variant === "dark";
  const label = isDark ? "text-cream/70" : "text-muted-foreground";
  const field =
    isDark
      ? "bg-white/5 border-white/15 text-cream placeholder:text-cream/40 focus:border-gold"
      : "bg-background border-border text-foreground placeholder:text-muted-foreground focus:border-foreground";

  if (state === "done") {
    return (
      <div className={`rounded-2xl p-8 text-center ${isDark ? "bg-white/5" : "bg-secondary"}`}>
        <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-gold text-ink">
          <Check className="h-6 w-6" />
        </div>
        <h3 className={`mt-4 font-display text-xl font-semibold ${isDark ? "text-cream" : ""}`}>
          Thank you — we'll be in touch shortly.
        </h3>
        <p className={`mt-2 text-sm ${label}`}>
          A senior advisor will call you within one business hour.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} className={`grid gap-4 ${compact ? "" : "sm:grid-cols-2"}`}>
      <Field label="Full name" dark={isDark}>
        <input
          required
          value={form.name}
          onChange={(e) => setForm({ ...form, name: e.target.value })}
          placeholder="Your name"
          className={`w-full rounded-lg border px-4 py-3 text-sm outline-none transition ${field}`}
        />
      </Field>
      <Field label="Email" dark={isDark}>
        <input
          required
          type="email"
          value={form.email}
          onChange={(e) => setForm({ ...form, email: e.target.value })}
          placeholder="you@email.com"
          className={`w-full rounded-lg border px-4 py-3 text-sm outline-none transition ${field}`}
        />
      </Field>
      <Field label="Phone / WhatsApp" dark={isDark}>
        <input
          required
          value={form.phone}
          onChange={(e) => setForm({ ...form, phone: e.target.value })}
          placeholder="+971 5X XXX XXXX"
          className={`w-full rounded-lg border px-4 py-3 text-sm outline-none transition ${field}`}
        />
      </Field>
      <Field label="Budget" dark={isDark}>
        <select
          value={form.budget}
          onChange={(e) => setForm({ ...form, budget: e.target.value })}
          className={`w-full rounded-lg border px-4 py-3 text-sm outline-none transition ${field}`}
        >
          <option>Under AED 1M</option>
          <option>AED 1M – 3M</option>
          <option>AED 3M – 7M</option>
          <option>AED 7M – 15M</option>
          <option>AED 15M+</option>
        </select>
      </Field>
      <div className="sm:col-span-2">
        <Field label="I'm interested in" dark={isDark}>
          <input
            value={form.interest}
            onChange={(e) => setForm({ ...form, interest: e.target.value })}
            placeholder="e.g. Palm Jumeirah villa, off-plan investment"
            className={`w-full rounded-lg border px-4 py-3 text-sm outline-none transition ${field}`}
          />
        </Field>
      </div>
      <div className="sm:col-span-2">
        <Field label="Message (optional)" dark={isDark}>
          <textarea
            rows={3}
            value={form.message}
            onChange={(e) => setForm({ ...form, message: e.target.value })}
            placeholder="Tell us about your goals — investment yield, family home, second residence..."
            className={`w-full rounded-lg border px-4 py-3 text-sm outline-none transition ${field}`}
          />
        </Field>
      </div>
      <div className="sm:col-span-2 flex flex-col items-start gap-3 pt-2 sm:flex-row sm:items-center sm:justify-between">
        <p className={`text-xs ${label}`}>
          By submitting you agree to be contacted about matching properties. No spam.
        </p>
        <button
          type="submit"
          disabled={state === "loading"}
          className="inline-flex items-center justify-center gap-2 rounded-full bg-gold px-7 py-3 text-sm font-semibold text-ink transition hover:opacity-90 disabled:opacity-70"
        >
          {state === "loading" && <Loader2 className="h-4 w-4 animate-spin" />}
          Request a private consultation
        </button>
      </div>
    </form>
  );
}

function Field({
  label,
  children,
  dark,
}: {
  label: string;
  children: React.ReactNode;
  dark: boolean;
}) {
  return (
    <label className="block">
      <span
        className={`mb-2 block text-[0.7rem] font-medium uppercase tracking-[0.18em] ${
          dark ? "text-cream/60" : "text-muted-foreground"
        }`}
      >
        {label}
      </span>
      {children}
    </label>
  );
}