"use client";

import { useState } from "react";
import { ArrowRight, CheckCircle2, Loader2 } from "lucide-react";

const countries = [
  "Australia", "Canada", "Germany", "Japan", "New Zealand",
  "Saudi Arabia", "Singapore", "South Korea", "Turkey",
  "United Arab Emirates", "United Kingdom", "United States", "Other",
];

const fallbackVisaTypes = [
  { id: "student-visa", name: "Student Visa" },
  { id: "work-visa", name: "Work Visa" },
  { id: "tourist-visa", name: "Tourist Visa" },
  { id: "business-visa", name: "Business Visa" },
  { id: "family-visa", name: "Family / Spouse Visa" },
  { id: "pr-visa", name: "Permanent Residency" },
  { id: "working-holiday", name: "Holiday Working Visa" },
  { id: "transit-visa", name: "Transit Visa" },
];

type FormState = "idle" | "submitting" | "success";

type VisaTypeOption = { id: string; name: string; slug?: string };

export default function VisaEnquiryForm({ visaTypes = fallbackVisaTypes }: { visaTypes?: VisaTypeOption[] }) {
  const [form, setForm] = useState({
    full_name: "",
    email: "",
    phone: "",
    nationality: "",
    destination_country: "",
    visa_type_id: "",
    intended_travel_date: "",
    previous_refusal: "no",
    message: "",
    consent: false,
  });
  const [formState, setFormState] = useState<FormState>("idle");
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [submitError, setSubmitError] = useState("");

  const validate = () => {
    const e: Record<string, string> = {};
    if (!form.full_name.trim()) e.full_name = "Full name is required";
    if (!form.email.trim()) e.email = "Email is required";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Enter a valid email";
    if (!form.phone.trim()) e.phone = "Phone number is required";
    if (!form.destination_country) e.destination_country = "Please select a country";
    if (!form.visa_type_id) e.visa_type_id = "Please select a visa type";
    if (!form.consent) e.consent = "You must agree to the privacy policy";
    return e;
  };

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>
  ) => {
    const { name, value, type } = e.target;
    setForm((prev) => ({
      ...prev,
      [name]: type === "checkbox" ? (e.target as HTMLInputElement).checked : value,
    }));
    if (errors[name]) setErrors((prev) => { const n = { ...prev }; delete n[name]; return n; });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const errs = validate();
    if (Object.keys(errs).length) { setErrors(errs); return; }
    setFormState("submitting");
    setSubmitError("");

    const selectedType = visaTypes.find((v) => v.id === form.visa_type_id);

    const res = await fetch("/api/visa/enquiry", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        fullName: form.full_name,
        email: form.email,
        phone: form.phone,
        nationality: form.nationality,
        destinationCountry: form.destination_country,
        visaTypeId: form.visa_type_id,
        visaType: selectedType?.name || null,
        intendedTravelDate: form.intended_travel_date || null,
        previousRefusal: form.previous_refusal,
        message: form.message,
      }),
    });

    if (!res.ok) {
      const payload = await res.json().catch(() => ({}));
      setSubmitError(payload.error || "Unable to submit enquiry. Please try again.");
      setFormState("idle");
      return;
    }

    setFormState("success");
  };

  if (formState === "success") {
    return (
      <div className="flex flex-col items-center justify-center text-center py-14 px-6">
        <div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mb-5">
          <CheckCircle2 size={32} className="text-emerald-600" />
        </div>
        <h3 className="text-xl font-bold text-navy-900 mb-2">Enquiry Received!</h3>
        <p className="text-neutral-500 text-sm max-w-sm">
          Thank you, <strong>{form.full_name.split(" ")[0]}</strong>. One of our visa consultants
          will contact you within 24 hours. Check your inbox for a confirmation email.
        </p>
        <button
          onClick={() => {
            setFormState("idle");
            setSubmitError("");
            setForm({
              full_name: "",
              email: "",
              phone: "",
              nationality: "",
              destination_country: "",
              visa_type_id: "",
              intended_travel_date: "",
              previous_refusal: "no",
              message: "",
              consent: false,
            });
          }}
          className="mt-6 text-sm text-navy-700 font-medium hover:text-navy-900 underline"
        >
          Submit another enquiry
        </button>
      </div>
    );
  }

  const field = (name: string) => ({
    name,
    onChange: handleChange,
    className: `w-full px-4 py-2.5 text-sm border rounded-xl focus:outline-none focus:ring-2 focus:ring-navy-500/30 focus:border-navy-500 transition-colors ${errors[name] ? "border-red-400 bg-red-50" : "border-neutral-200 bg-white"}`,
  });

  return (
    <form onSubmit={handleSubmit} noValidate className="space-y-5">
      {/* Row 1 */}
      <div className="grid sm:grid-cols-2 gap-4">
        <div>
          <label className="block text-xs font-semibold text-neutral-600 mb-1.5">Full Name *</label>
          <input type="text" placeholder="e.g. Ahmad Ibrahim" value={form.full_name} {...field("full_name")} />
          {errors.full_name && <p className="text-red-500 text-xs mt-1">{errors.full_name}</p>}
        </div>
        <div>
          <label className="block text-xs font-semibold text-neutral-600 mb-1.5">Email Address *</label>
          <input type="email" placeholder="you@email.com" value={form.email} {...field("email")} />
          {errors.email && <p className="text-red-500 text-xs mt-1">{errors.email}</p>}
        </div>
      </div>

      {/* Row 2 */}
      <div className="grid sm:grid-cols-2 gap-4">
        <div>
          <label className="block text-xs font-semibold text-neutral-600 mb-1.5">Phone Number *</label>
          <input type="tel" placeholder="+60 12-345 6789" value={form.phone} {...field("phone")} />
          {errors.phone && <p className="text-red-500 text-xs mt-1">{errors.phone}</p>}
        </div>
        <div>
          <label className="block text-xs font-semibold text-neutral-600 mb-1.5">Nationality / Passport Country</label>
          <input type="text" placeholder="e.g. Malaysian" value={form.nationality} {...field("nationality")} />
        </div>
      </div>

      {/* Row 3 */}
      <div className="grid sm:grid-cols-2 gap-4">
        <div>
          <label className="block text-xs font-semibold text-neutral-600 mb-1.5">Destination Country *</label>
          <select value={form.destination_country} {...field("destination_country")}>
            <option value="">Select country…</option>
            {countries.map((c) => <option key={c} value={c}>{c}</option>)}
          </select>
          {errors.destination_country && <p className="text-red-500 text-xs mt-1">{errors.destination_country}</p>}
        </div>
        <div>
          <label className="block text-xs font-semibold text-neutral-600 mb-1.5">Visa Type *</label>
          <select value={form.visa_type_id} {...field("visa_type_id")}>
            <option value="">Select visa type…</option>
            {visaTypes.map((v) => <option key={v.id} value={v.id}>{v.name}</option>)}
          </select>
          {errors.visa_type_id && <p className="text-red-500 text-xs mt-1">{errors.visa_type_id}</p>}
        </div>
      </div>

      {/* Row 4 */}
      <div className="grid sm:grid-cols-2 gap-4">
        <div>
          <label className="block text-xs font-semibold text-neutral-600 mb-1.5">Intended Travel Date</label>
          <input type="date" value={form.intended_travel_date} {...field("intended_travel_date")} />
        </div>
        <div>
          <label className="block text-xs font-semibold text-neutral-600 mb-1.5">Previous Visa Refusal?</label>
          <select value={form.previous_refusal} {...field("previous_refusal")}>
            <option value="no">No</option>
            <option value="yes">Yes</option>
          </select>
        </div>
      </div>

      {/* Message */}
      <div>
        <label className="block text-xs font-semibold text-neutral-600 mb-1.5">Purpose / Additional Message</label>
        <textarea
          name="message"
          value={form.message}
          onChange={handleChange}
          rows={3}
          placeholder="Tell us more about your situation or any specific requirements…"
          className="w-full px-4 py-2.5 text-sm border border-neutral-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy-500/30 focus:border-navy-500 transition-colors resize-none"
        />
      </div>

      {/* Consent */}
      <div className="flex items-start gap-3">
        <input
          type="checkbox"
          name="consent"
          id="visa-consent"
          checked={form.consent}
          onChange={handleChange}
          className="mt-0.5 w-4 h-4 accent-navy-700 shrink-0"
        />
        <label htmlFor="visa-consent" className="text-xs text-neutral-500 leading-relaxed">
          I agree to the{" "}
          <a href="/privacy" className="text-navy-700 underline hover:text-navy-900">Privacy Policy</a>{" "}
          and consent to KC Systems processing my personal data for visa consultation purposes.
        </label>
      </div>
      {errors.consent && <p className="text-red-500 text-xs -mt-3">{errors.consent}</p>}
      {submitError && <p className="text-red-500 text-xs -mt-3">{submitError}</p>}

      {/* Submit */}
      <button
        type="submit"
        disabled={formState === "submitting"}
        className="w-full flex items-center justify-center gap-2 px-6 py-3.5 bg-navy-700 hover:bg-navy-800 disabled:opacity-60 text-white text-sm font-semibold rounded-xl transition-all shadow-sm"
      >
        {formState === "submitting" ? (
          <><Loader2 size={16} className="animate-spin" /> Submitting…</>
        ) : (
          <>Send Enquiry <ArrowRight size={15} /></>
        )}
      </button>
    </form>
  );
}