"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { customerApi } from "@/lib/api/customer";
import { ApiException } from "@/lib/api/client";
import { useToken } from "@/lib/auth/useToken";
import { useAuth } from "@/lib/auth/AuthContext";
import Loader from "@/components/ui/Loader";

type Errors = Record<string, string[]>;

type FormState = {
  name: string;
  phone: string;
  company_name: string;
  gst_number: string;
  address: string;
  alternate_phone: string;
  aadhar_number: string;
};

function Field({
  label,
  name,
  value,
  onChange,
  required,
  errors,
  placeholder,
  hint,
}: {
  label: string;
  name: keyof FormState;
  value: string;
  onChange: (v: string) => void;
  required?: boolean;
  errors: Errors;
  placeholder?: string;
  hint?: string;
}) {
  const err = errors?.[name]?.[0];
  return (
    <div>
      <label className="mb-1 block text-xs font-medium text-gray-700">
        {label}
        {required && <span className="text-red-500"> *</span>}
      </label>
      <input
        type="text"
        value={value}
        placeholder={placeholder ?? `Enter ${label.toLowerCase()}`}
        onChange={(e) => onChange(e.target.value)}
        className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none focus:ring-1 focus:ring-[#CC1414]"
      />
      {hint && !err && <p className="mt-1 text-xs text-gray-500">{hint}</p>}
      {err && <p className="mt-1 text-xs text-red-600">{err}</p>}
    </div>
  );
}

export default function BecomeTransporterPage() {
  const router = useRouter();
  const { token, ready } = useToken();
  const { user, refresh } = useAuth();
  const [loadingProfile, setLoadingProfile] = useState(true);
  const [form, setForm] = useState<FormState>({
    name: "",
    phone: "",
    company_name: "",
    gst_number: "",
    address: "",
    alternate_phone: "",
    aadhar_number: "",
  });
  const [errors, setErrors] = useState<Errors>({});
  const [saving, setSaving] = useState(false);
  const [msg, setMsg] = useState<string | null>(null);

  useEffect(() => {
    if (!ready || !token) return;
    if (user?.type === "transporter") {
      router.replace("/profile");
      return;
    }
    customerApi
      .profile(token)
      .then((p) => {
        const d = p.user_detail;
        setForm((prev) => ({
          ...prev,
          name: p.name ?? "",
          phone: p.phone ?? "",
          company_name: d?.company_name ?? "",
          gst_number: d?.gst_number ?? "",
          address: d?.company_address ?? "",
        }));
      })
      .finally(() => setLoadingProfile(false));
  }, [ready, token, user?.type, router]);

  const set = (k: keyof FormState) => (v: string) => setForm({ ...form, [k]: v });

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!token) return;
    setSaving(true);
    setErrors({});
    setMsg(null);
    try {
      const r = await customerApi.becomeTransporter(token, {
        name: form.name,
        phone: form.phone,
        company_name: form.company_name,
        gst_number: form.gst_number || undefined,
        address: form.address || undefined,
        alternate_phone: form.alternate_phone || undefined,
        aadhar_number: form.aadhar_number || undefined,
      });
      setMsg(r.message);
      await refresh();
      setTimeout(() => router.replace("/profile"), 1200);
    } catch (err) {
      if (err instanceof ApiException) {
        setErrors(err.errors ?? {});
        setMsg(err.message);
      } else {
        setMsg("Submission failed");
      }
    } finally {
      setSaving(false);
    }
  };

  if (loadingProfile) {
    return (
      <div className="rounded-xl bg-white p-10 shadow-sm ring-1 ring-gray-100">
        <Loader label="Loading…" />
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div>
        <h1 className="text-xl font-semibold text-gray-900">
          Become a <span className="text-[#CC1414]">Transporter</span>
        </h1>
        <p className="mt-1 text-sm text-gray-600">
          Join Biznie&apos;s logistics network and grow your fleet.
        </p>
      </div>

      <form onSubmit={submit} className="space-y-4">
        <div className="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
          <h3 className="mb-4 text-sm font-semibold text-gray-900">Personal</h3>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <Field label="Name" name="name" value={form.name} onChange={set("name")} required errors={errors} />
            <Field
              label="Phone"
              name="phone"
              value={form.phone}
              onChange={set("phone")}
              required
              errors={errors}
              hint="10-digit mobile number"
            />
            <Field
              label="Alternate phone"
              name="alternate_phone"
              value={form.alternate_phone}
              onChange={set("alternate_phone")}
              errors={errors}
            />
            <Field
              label="Aadhar number"
              name="aadhar_number"
              value={form.aadhar_number}
              onChange={set("aadhar_number")}
              errors={errors}
            />
          </div>
        </div>

        <div className="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
          <h3 className="mb-4 text-sm font-semibold text-gray-900">Company</h3>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <Field label="Company name" name="company_name" value={form.company_name} onChange={set("company_name")} required errors={errors} />
            <Field label="GST number" name="gst_number" value={form.gst_number} onChange={set("gst_number")} errors={errors} />
            <div className="md:col-span-2">
              <Field label="Address" name="address" value={form.address} onChange={set("address")} errors={errors} />
            </div>
          </div>
        </div>

        <div className="flex items-center justify-between rounded-xl bg-white p-4 shadow-sm ring-1 ring-gray-100">
          <span
            className={`text-sm ${msg && (msg.toLowerCase().includes("fail") || Object.keys(errors).length) ? "text-red-600" : "text-emerald-700"}`}
          >
            {msg}
          </span>
          <button
            type="submit"
            disabled={saving}
            className="rounded-lg bg-[#CC1414] px-5 py-2 text-sm font-medium text-white hover:bg-[#b21010] disabled:opacity-60"
          >
            {saving ? "Submitting…" : "Become a Transporter"}
          </button>
        </div>
      </form>
    </div>
  );
}