"use client";

import React, { useState } from "react";
import { useForm } from "react-hook-form";

type PassedAway =
  | "Yes, they have passed away"
  | "Not yet, but they are close to passing"
  | "No, I am planning for the future";

type EstateValue =
  | "Less than $50,000"
  | "$50,000 - $250,000"
  | "$250,000 - $500,000"
  | "$500,000 - $1 Million"
  | "$1 Million - $5 Million"
  | "Over $5 Million";

type FamilyConflict =
  | "Family members dispute the validity of the will or trust (e.g., forged or multiple versions exist)"
  | "Family members disagree over who should be in charge"
  | "There is disagreement about how the assets should be divided"
  | "Someone suspects that assets are hidden, misused, or missing"
  | "The executor or trustee is not acting fairly or efficiently"
  | "None of the above";

type FormValues = {
  passedAway: PassedAway;
  estateValue: EstateValue;
  familyConflict: FamilyConflict;

  lovedOneName?: string;
  relationship: string;
  lovedOneState: string;
  yourState: string;

  helpMessage: string;

  firstName: string;
  lastName: string;
  phone: string;
  email: string;
};

const passedAwayOptions: PassedAway[] = [
  "Yes, they have passed away",
  "Not yet, but they are close to passing",
  "No, I am planning for the future",
];

const estateValueOptions: EstateValue[] = [
  "Less than $50,000",
  "$50,000 - $250,000",
  "$250,000 - $500,000",
  "$500,000 - $1 Million",
  "$1 Million - $5 Million",
  "Over $5 Million",
];

const familyConflictOptions: FamilyConflict[] = [
  "Family members dispute the validity of the will or trust (e.g., forged or multiple versions exist)",
  "Family members disagree over who should be in charge",
  "There is disagreement about how the assets should be divided",
  "Someone suspects that assets are hidden, misused, or missing",
  "The executor or trustee is not acting fairly or efficiently",
  "None of the above",
];

export default function ContactClient() {
  const [step, setStep] = useState<1 | 2 | 3 | 4 | 5 | 6>(1);
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
  const [errorMsg, setErrorMsg] = useState("");

  const {
    register,
    handleSubmit,
    trigger,
    setValue,
    watch,
    reset,
    formState: { errors },
  } = useForm<FormValues>({
    mode: "onTouched",
    defaultValues: {
      lovedOneName: "",
      relationship: "",
      lovedOneState: "",
      yourState: "",
      helpMessage: "",
      firstName: "",
      lastName: "",
      phone: "",
      email: "",
    } as any,
  });

  const passedAway = watch("passedAway");
  const estateValue = watch("estateValue");
  const familyConflict = watch("familyConflict");

  const next = async () => {
    const fieldsByStep: Record<number, (keyof FormValues)[]> = {
      1: ["passedAway"],
      2: ["estateValue"],
      3: ["familyConflict"],
      4: ["relationship", "lovedOneState", "yourState"],
      5: ["helpMessage"],
      6: ["firstName", "lastName", "phone", "email"],
    };

    const ok = await trigger(fieldsByStep[step] as any);
    if (!ok) return;

    setStep((s) => (s === 6 ? 6 : ((s + 1) as any)));
  };

  const back = () => setStep((s) => (s === 1 ? 1 : ((s - 1) as any)));

  const submit = async (data: FormValues) => {
    setStatus("loading");
    setErrorMsg("");

    try {
      const res = await fetch("/api/lead", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      });

      if (!res.ok) {
        const j = await res.json().catch(() => ({}));
        throw new Error(j?.error || "Submission failed.");
      }

      setStatus("success");
      setStep(1);
      reset();
    } catch (e: any) {
      setStatus("error");
      setErrorMsg(e?.message || "Something went wrong.");
    }
  };

  return (
    <form onSubmit={handleSubmit(submit)} className="space-y-6">
      {/* Progress */}
      <div className="flex items-center gap-2">
        {Array.from({ length: 6 }).map((_, i) => {
          const n = i + 1;
          return (
            <span
              key={n}
              className={[
                "h-2 w-full rounded-full",
                step >= n ? "bg-accent dark:bg-white" : "bg-white dark:bg-slate-800",
              ].join(" ")}
            />
          );
        })}
      </div>

      {status === "success" && (
        <div className="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
          Thanks — we received your request. We’ll contact you soon.
        </div>
      )}
      {status === "error" && (
        <div className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">
          {errorMsg}
        </div>
      )}

      {/* Step content */}
      {step === 1 && (
        <StepRadioCards
          title="Has the person passed away?"
          required
          value={passedAway}
          options={passedAwayOptions}
          onPick={(v) => setValue("passedAway", v as any, { shouldValidate: true })}
          error={errors.passedAway?.message}
          registerHidden={register("passedAway", { required: "Please select one option." })}
        />
      )}

      {step === 2 && (
        <StepRadioCards
          title="What is the total estimated value of the estate?"
          required
          value={estateValue}
          options={estateValueOptions}
          onPick={(v) => setValue("estateValue", v as any, { shouldValidate: true })}
          error={errors.estateValue?.message}
          registerHidden={register("estateValue", { required: "Please select one option." })}
        />
      )}

      {step === 3 && (
        <StepRadioCards
          title="Are you experiencing any family conflicts in settling the estate?"
          required
          value={familyConflict}
          options={familyConflictOptions}
          onPick={(v) => setValue("familyConflict", v as any, { shouldValidate: true })}
          error={errors.familyConflict?.message}
          registerHidden={register("familyConflict", { required: "Please select one option." })}
        />
      )}

      {step === 4 && (
        <div className="space-y-4">
          <StepTitle title="About your situation" />

          <Field label="What is your loved one's name?" optional>
            <input
              className={inputClass(false)}
              placeholder="Optional"
              {...register("lovedOneName")}
            />
          </Field>

          <Field label="What is your relationship to the loved one?" required error={errors.relationship?.message}>
            <input
              className={inputClass(!!errors.relationship)}
              placeholder="e.g., spouse, child, sibling"
              {...register("relationship", { required: "Relationship is required." })}
            />
          </Field>

          <div className="grid gap-4 sm:grid-cols-2">
            <Field label="What state did your loved one live in?" required error={errors.lovedOneState?.message}>
              <input
                className={inputClass(!!errors.lovedOneState)}
                placeholder="e.g., Texas"
                {...register("lovedOneState", { required: "This is required." })}
              />
            </Field>

            <Field label="What state do you live in?" required error={errors.yourState?.message}>
              <input
                className={inputClass(!!errors.yourState)}
                placeholder="e.g., California"
                {...register("yourState", { required: "This is required." })}
              />
            </Field>
          </div>
        </div>
      )}

      {step === 5 && (
        <div className="space-y-4">
          <StepTitle title="How can we help you?" required />
          <Field label="Describe your situation" required error={errors.helpMessage?.message}>
            <textarea
              rows={5}
              className={textareaClass(!!errors.helpMessage)}
              placeholder="Briefly explain what you need help with…"
              {...register("helpMessage", { required: "Please tell us how we can help." })}
            />
          </Field>
        </div>
      )}

      {step === 6 && (
        <div className="space-y-4">
          <StepTitle title="Your contact details" />
          <div className="grid gap-4 sm:grid-cols-2">
            <Field label="First Name" required error={errors.firstName?.message}>
              <input
                className={inputClass(!!errors.firstName)}
                {...register("firstName", { required: "First name is required." })}
              />
            </Field>
            <Field label="Last Name" required error={errors.lastName?.message}>
              <input
                className={inputClass(!!errors.lastName)}
                {...register("lastName", { required: "Last name is required." })}
              />
            </Field>
          </div>

          <Field label="Phone Number" required error={errors.phone?.message}>
            <input
              type="tel"
              className={inputClass(!!errors.phone)}
              placeholder="+1 (555) 123-4567"
              {...register("phone", {
                required: "Phone number is required.",
                minLength: { value: 7, message: "Enter a valid phone number." },
              })}
            />
          </Field>

          <Field label="Email" required error={errors.email?.message}>
            <input
              type="email"
              className={inputClass(!!errors.email)}
              placeholder="you@example.com"
              {...register("email", {
                required: "Email is required.",
                pattern: {
                  value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                  message: "Enter a valid email.",
                },
              })}
            />
          </Field>

          <p className="text-xs text-slate-500">
            This form does not provide legal advice. For legal guidance, consult an attorney.
          </p>
        </div>
      )}

      {/* Buttons */}
      <div className="flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-between">
        <button
          type="button"
          onClick={back}
          disabled={step === 1 || status === "loading"}
          className="w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-900 hover:bg-slate-50 disabled:opacity-50 sm:w-auto"
        >
          Back
        </button>

        {step < 6 ? (
          <button
            type="button"
            onClick={next}
            disabled={status === "loading"}
            className="w-full rounded-xl bg-accent px-4 py-2.5 text-sm font-semibold text-white hover:opacity-50 disabled:opacity-60 sm:w-auto"
          >
            Next
          </button>
        ) : (
          <button
            type="submit"
            disabled={status === "loading"}
            className="w-full rounded-xl bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-slate-800 disabled:opacity-60 sm:w-auto"
          >
            {status === "loading" ? "Submitting…" : "Submit"}
          </button>
        )}
      </div>
    </form>
  );
}

function StepTitle({ title, required }: { title: string; required?: boolean }) {
  return (
    <h3 className="text-base font-semibold text-slate-900 dark:text-white">
      {title} {required ? <span className="text-rose-600">*</span> : null}
    </h3>
  );
}

function StepRadioCards({
  title,
  required,
  value,
  options,
  onPick,
  error,
  registerHidden,
}: {
  title: string;
  required?: boolean;
  value: string | undefined;
  options: string[];
  onPick: (v: string) => void;
  error?: string;
  registerHidden: any;
}) {
  return (
    <div className="space-y-3">
      <StepTitle title={title} required={required} />
      <input type="hidden" {...registerHidden} />

      <div className="space-y-2">
        {options.map((opt) => {
          const selected = value === opt;
          return (
            <button
              key={opt}
              type="button"
              onClick={() => onPick(opt)}
              className={[
                "w-full rounded-2xl border p-4 text-left text-sm transition",
                selected
                  ? "bg-accent text-white"
                  : "border-slate-200 bg-white text-slate-900 hover:bg-slate-50 dark:bg-slate-950 dark:text-white dark:border-slate-800 dark:hover:bg-slate-900",
                error && !value ? "ring-2 ring-rose-200" : "",
              ].join(" ")}
            >
              {opt}
            </button>
          );
        })}
      </div>

      {error ? <p className="text-xs text-rose-700">{error}</p> : null}
    </div>
  );
}

function Field({
  label,
  required,
  optional,
  error,
  children,
}: {
  label: string;
  required?: boolean;
  optional?: boolean;
  error?: string;
  children: React.ReactNode;
}) {
  return (
    <div>
      <label className="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300">
        {label}{" "}
        {required ? <span className="text-rose-600">*</span> : null}
        {optional ? <span className="text-slate-400"> (optional)</span> : null}
      </label>
      {children}
      {error ? <p className="mt-1 text-xs text-rose-700">{error}</p> : null}
    </div>
  );
}

function inputClass(hasError: boolean) {
  return [
    "w-full rounded-xl border bg-white px-3 py-2 text-slate-900 outline-none placeholder:text-slate-400 focus:ring-2 dark:bg-slate-950 dark:text-white",
    hasError
      ? "border-rose-300 focus:ring-rose-200"
      : "border-slate-300 focus:border-slate-400 focus:ring-slate-200 dark:border-slate-800 dark:focus:ring-slate-700",
  ].join(" ");
}

function textareaClass(hasError: boolean) {
  return [
    "w-full rounded-xl border bg-white px-3 py-2 text-slate-900 outline-none placeholder:text-slate-400 focus:ring-2 dark:bg-slate-950 dark:text-white",
    hasError
      ? "border-rose-300 focus:ring-rose-200"
      : "border-slate-300 focus:border-slate-400 focus:ring-slate-200 dark:border-slate-800 dark:focus:ring-slate-700",
  ].join(" ");
}