"use client";

import { useEffect, useRef, useState, type FormEvent, type KeyboardEvent, type ClipboardEvent } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Check, Eye, EyeOff, Upload, X } from "lucide-react";
import ReactSelect from "react-select";
import { Button } from "@/components/common/Button";
import { FormField } from "@/components/app/FormField";
import { CountrySelect } from "@/components/app/CountrySelect";
import { cn } from "@/lib/utils";
import { agentAuthApi } from "@/api/agentAuth.api";
import { useAgentAuth } from "@/hooks/useAgentAuth";
import { useAgentBasicData } from "@/hooks/queries/useAgentDashboard";
import { isApiError } from "@/lib/apiError";
import { useTranslation } from "@/hooks/useTranslation";

const DOCUMENT_TYPES = [
  { value: "NID",             label: "National ID (NID)"   },
  { value: "Passport",        label: "Passport"            },
  { value: "Driving License", label: "Driving License"     },
];

type PreStep = "email" | "otp" | "form";

interface FileState { file: File | null; preview: string | null }

// ─── File upload field ────────────────────────────────────────────────────────

function FileUploadField({
  label, value, onChange, error,
}: { label: string; value: FileState; onChange: (s: FileState) => void; error?: string }) {
  const ref = useRef<HTMLInputElement>(null);

  function handleFile(file: File | undefined) {
    if (!file) return;
    onChange({ file, preview: file.type.startsWith("image/") ? URL.createObjectURL(file) : null });
  }

  function clear() {
    if (value.preview) URL.revokeObjectURL(value.preview);
    onChange({ file: null, preview: null });
    if (ref.current) ref.current.value = "";
  }

  return (
    <div className="space-y-1.5">
      <p className="block text-xs font-semibold capitalize tracking-wide text-slate-500 dark:text-slate-400">{label}</p>

      {value.file ? (
        <div className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-700 dark:bg-slate-800/60">
          {value.preview && (
            <img src={value.preview} alt="preview" className="h-10 w-10 rounded-lg object-cover" />
          )}
          <div className="min-w-0 flex-1">
            <p className="truncate text-sm font-medium text-slate-900 dark:text-white">{value.file.name}</p>
            <p className="text-xs text-slate-400">{(value.file.size / 1024).toFixed(1)} KB</p>
          </div>
          <button type="button" onClick={clear} aria-label="Remove file"
            className="grid h-7 w-7 place-items-center rounded-full border border-slate-200 text-slate-400 transition hover:border-rose-300 hover:text-rose-500 dark:border-slate-700">
            <X className="icon-sm" />
          </button>
        </div>
      ) : (
        <button type="button" onClick={() => ref.current?.click()}
          className={cn(
            "flex h-24 w-full flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed transition",
            error
              ? "border-rose-300 bg-rose-50/40 dark:border-rose-400/40 dark:bg-rose-500/5"
              : "border-slate-200 bg-slate-50/60 hover:border-brand-400 hover:bg-brand-50/30 dark:border-slate-700 dark:bg-slate-800/30 dark:hover:border-brand-500",
          )}>
          <Upload className="h-5 w-5 text-slate-400" />
          <span className="text-xs font-medium text-slate-500 dark:text-slate-400">Click to upload · PNG, JPG, PDF</span>
        </button>
      )}

      <input ref={ref} type="file" accept="image/*,.pdf" className="sr-only"
        onChange={(e) => handleFile(e.target.files?.[0])} />

      {error && <p className="text-xs font-medium text-rose-600 dark:text-rose-400">{error}</p>}
    </div>
  );
}

// ─── Step indicator ───────────────────────────────────────────────────────────

const STEPS: { key: PreStep; label: string }[] = [
  { key: "email", label: "Email"   },
  { key: "otp",   label: "Verify"  },
  { key: "form",  label: "Details" },
];

function StepIndicator({ current, steps = STEPS }: { current: PreStep; steps?: { key: PreStep; label: string }[] }) {
  const currentIdx = steps.findIndex((s) => s.key === current);
  return (
    <div className="mb-8 flex items-center justify-center">
      {steps.map(({ key, label }, i) => {
        const done   = i < currentIdx;
        const active = i === currentIdx;
        return (
          <div key={key} className="flex items-center">
            {/* node */}
            <div className="flex flex-col items-center gap-1.5">
              <div className={cn(
                "relative grid h-9 w-9 place-items-center rounded-full text-xs font-bold ring-2 transition-all duration-300",
                active
                  ? "bg-brand-600 text-white ring-brand-300 shadow-[0_0_14px_3px_rgba(99,102,241,0.35)] dark:ring-brand-500"
                  : done
                  ? "bg-brand-600 text-white ring-brand-200 dark:ring-brand-700"
                  : "bg-slate-100 text-slate-400 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700",
              )}>
                {done ? <Check className="h-4 w-4 stroke-[3]" /> : i + 1}
              </div>
              <span className={cn(
                "text-xs font-semibold tracking-wide transition-colors",
                active ? "text-brand-600 dark:text-brand-300" : done ? "text-slate-500 dark:text-slate-400" : "text-slate-400 dark:text-slate-600",
              )}>
                {label}
              </span>
            </div>
            {/* connector */}
            {i < steps.length - 1 && (
              <div className="mx-2 mb-5 h-0.5 w-10 shrink-0 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700 sm:w-16">
                <div className={cn("h-full rounded-full bg-brand-600 transition-all duration-500", done ? "w-full" : "w-0")} />
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

// ─── 6-digit OTP input ────────────────────────────────────────────────────────

function OtpInput({ value, onChange, error, onComplete }: {
  value: string;
  onChange: (v: string) => void;
  error?: string;
  onComplete?: (value: string) => void;
}) {
  const refs = useRef<(HTMLInputElement | null)[]>([]);
  const digits = Array.from({ length: 6 }, (_, i) => value[i] ?? "");

  function update(idx: number, char: string) {
    const next = digits.slice();
    next[idx] = char.replace(/\D/g, "").slice(-1);
    const joined = next.join("");
    onChange(joined);
    if (char && idx < 5) refs.current[idx + 1]?.focus();
    if (joined.replace(/[^0-9]/g, "").length === 6) onComplete?.(joined);
  }

  function onKey(e: KeyboardEvent<HTMLInputElement>, idx: number) {
    if (e.key === "Backspace") {
      const next = digits.slice();
      if (!digits[idx] && idx > 0) {
        next[idx - 1] = "";
        onChange(next.join(""));
        refs.current[idx - 1]?.focus();
      } else {
        next[idx] = "";
        onChange(next.join(""));
      }
    }
  }

  function onPaste(e: ClipboardEvent<HTMLInputElement>) {
    e.preventDefault();
    const text = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, 6);
    onChange(text);
    refs.current[Math.min(text.length, 5)]?.focus();
    if (text.length === 6) onComplete?.(text);
  }

  return (
    <div className="space-y-2">
      <div className="flex justify-center gap-3">
        {digits.map((d, i) => (
          <input
            key={i}
            ref={(el) => { refs.current[i] = el; }}
            type="text"
            inputMode="numeric"
            maxLength={1}
            value={d}
            placeholder="0"
            autoComplete="one-time-code"
            onChange={(e) => update(i, e.target.value)}
            onKeyDown={(e) => onKey(e, i)}
            onPaste={onPaste}
            onFocus={(e) => e.target.select()}
            className={cn(
              "h-14 w-12 rounded-2xl border-2 text-center text-xl font-bold transition-all duration-150 outline-none",
              "bg-slate-50 dark:bg-slate-800/60",
              d
                ? "border-brand-500 text-brand-600 shadow-[0_0_0_3px_rgba(99,102,241,0.15)] dark:text-brand-300"
                : error
                ? "border-rose-300 dark:border-rose-400/50"
                : "border-slate-200 text-slate-900 focus:border-brand-400 focus:shadow-[0_0_0_3px_rgba(99,102,241,0.12)] dark:border-slate-700 dark:text-white",
            )}
          />
        ))}
      </div>
      {error && <p className="text-center text-xs font-medium text-rose-600 dark:text-rose-400">{error}</p>}
    </div>
  );
}

// ─── Main page ────────────────────────────────────────────────────────────────

export default function AgentRegisterPage() {
  const router = useRouter();
  const { t } = useTranslation();
  const { completeVerification, beginSession } = useAgentAuth();
  const { data: basicData, isLoading: basicDataLoading } = useAgentBasicData();
  const agreePolicyEnabled = basicData?.agree_policy !== 0;
  const emailVerificationEnabled = basicData?.email_verification !== 0;

  // pre-steps state
  const [preStep, setPreStep] = useState<PreStep>("email");
  const [preEmail, setPreEmail] = useState("");
  const [otpCode, setOtpCode] = useState("");
  const [resending, setResending] = useState(false);
  const [resendCooldown, setResendCooldown] = useState(0);

  useEffect(() => {
    if (resendCooldown <= 0) return;
    const id = setInterval(() => setResendCooldown((s) => Math.max(0, s - 1)), 1000);
    return () => clearInterval(id);
  }, [resendCooldown]);

  // form state
  const [showPw, setShowPw] = useState(false);
  const [showConfirm, setShowConfirm] = useState(false);
  const [loading, setLoading] = useState(false);
  const [formError, setFormError] = useState("");

  const [fields, setFields] = useState({
    firstname: "", lastname: "", store_name: "", email: "",
    phone: "", country: "", city: "", zip_code: "",
    password: "", password_confirmation: "", document_type: "",
  });
  const [idFront, setIdFront] = useState<FileState>({ file: null, preview: null });
  const [idBack, setIdBack]   = useState<FileState>({ file: null, preview: null });
  const [formAgree, setFormAgree] = useState(false);

  const [errors, setErrors] = useState<Record<string, string>>({});

  function clearFieldError(key: string) {
    setErrors((prev) => {
      if (!prev[key]) return prev;
      const next = { ...prev };
      delete next[key];
      return next;
    });
  }

  function set(key: keyof typeof fields) {
    return (e: React.ChangeEvent<HTMLInputElement>) => {
      setFields((f) => ({ ...f, [key]: e.target.value }));
      clearFieldError(key);
    };
  }

  // ─── Step 0: email + agree ────────────────────────────────────────────────

  async function onEmailSubmit(e: FormEvent) {
    e.preventDefault();
    const fe: Record<string, string> = {};
    if (!preEmail) fe.preEmail = t("agent.register.emailRequired");
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(preEmail)) fe.preEmail = t("agent.register.emailInvalid");
    if (Object.keys(fe).length) { setErrors(fe); return; }

    setLoading(true);
    setFormError("");
    setErrors({});
    try {
      await agentAuthApi.checkExists(preEmail);
      setFields((f) => ({ ...f, email: preEmail }));
      if (!emailVerificationEnabled) {
        setPreStep("form");
      } else {
        await agentAuthApi.sendRegisterOtp({ email: preEmail, agree: true });
        setPreStep("otp");
        setResendCooldown(60);
      }
    } catch (err) {
      if (isApiError(err) && err.kind === "validation" && err.fieldErrors) {
        const fe2: Record<string, string> = {};
        for (const [k, v] of Object.entries(err.fieldErrors as Record<string, string[]>))
          fe2[k] = Array.isArray(v) ? v[0] : String(v);
        setErrors(fe2);
      } else {
        setFormError(isApiError(err) ? err.message : t("agent.register.registrationFailed"));
      }
    } finally {
      setLoading(false);
    }
  }

  // ─── Step 1: verify OTP ───────────────────────────────────────────────────

  async function submitOtp(code: string) {
    if (!code.trim()) { setErrors({ otpCode: t("agent.register.otpRequired") }); return; }
    setLoading(true);
    setFormError("");
    setErrors({});
    try {
      await agentAuthApi.verifyRegisterOtp(preEmail, code);
      setPreStep("form");
    } catch (err) {
      if (isApiError(err) && err.kind === "validation" && err.fieldErrors) {
        const fe2: Record<string, string> = {};
        for (const [k, v] of Object.entries(err.fieldErrors as Record<string, string[]>))
          fe2[k] = Array.isArray(v) ? v[0] : String(v);
        setErrors(fe2);
      } else {
        setFormError(isApiError(err) ? err.message : "Invalid or expired code.");
      }
    } finally {
      setLoading(false);
    }
  }

  function onOtpSubmit(e: FormEvent) {
    e.preventDefault();
    submitOtp(otpCode);
  }

  async function onResendOtp() {
    if (resending || resendCooldown > 0) return;
    setResending(true);
    try {
      await agentAuthApi.resendRegisterOtp(preEmail);
      setResendCooldown(60);
    } catch { /* silent */ }
    finally { setResending(false); }
  }

  // ─── Step 2: registration form ────────────────────────────────────────────

  async function onFormSubmit(e: FormEvent) {
    e.preventDefault();
    const fe: Record<string, string> = {};
    if (!fields.firstname)   fe.firstname   = "Required";
    if (!fields.lastname)    fe.lastname    = "Required";
    if (!fields.store_name)  fe.store_name  = "Required";
    if (!fields.phone)       fe.phone       = "Required";
    if (!fields.country)     fe.country     = "Required";
    if (!fields.city)        fe.city        = "Required";
    if (!fields.zip_code)    fe.zip_code    = "Required";
    if (!fields.password)    fe.password    = "Required";
    if (fields.password_confirmation !== fields.password) fe.password_confirmation = t("agent.register.passwordMismatch");
    if (!fields.document_type) fe.document_type = "Required";
    if (!idFront.file)       fe.id_front_part = "Required";
    if (!idBack.file)        fe.id_back_part  = "Required";
    if (agreePolicyEnabled && !formAgree) fe.agree = t("agent.register.agreeRequired");
    setErrors(fe);
    if (Object.keys(fe).length) return;

    setLoading(true);
    setFormError("");
    try {
      const res = await agentAuthApi.register({
        firstname:             fields.firstname,
        lastname:              fields.lastname,
        store_name:            fields.store_name,
        email:                 fields.email,
        phone:                 fields.phone,
        country:               fields.country,
        city:                  fields.city,
        zip_code:              fields.zip_code,
        password:              fields.password,
        password_confirmation: fields.password_confirmation,
        agree:                 true,
        document_type:         fields.document_type,
        id_front_part:         idFront.file!,
        id_back_part:          idBack.file!,
      });

      if (res.token) beginSession(res.token);

      // Registration doesn't go through useAgentAuth.signIn, so the session isn't
      // promoted yet either. While a challenge (2FA/email) is pending, the verify
      // pages read the email from this query param since `user` isn't set. Once no
      // challenge remains, promote the session here before routing onward.
      const { agent } = res;
      const emailParam = `email=${encodeURIComponent(fields.email)}`;
      if (agent.two_factor_status && !agent.two_factor_verified) { router.replace(`/agent/verify-2fa?${emailParam}`); return; }
      if (!agent.email_verified) { router.replace(`/agent/verify-email?${emailParam}`); return; }
      await completeVerification(fields.email);
      router.replace(agent.kyc_verified ? "/agent/dashboard" : "/agent/kyc");
    } catch (err) {
      if (isApiError(err) && err.kind === "validation" && err.fieldErrors) {
        const fe2: Record<string, string> = {};
        for (const [k, v] of Object.entries(err.fieldErrors as Record<string, string[]>))
          fe2[k] = Array.isArray(v) ? v[0] : String(v);
        setErrors(fe2);
      } else {
        setFormError(isApiError(err) ? err.message : t("agent.register.registrationFailed"));
      }
      setLoading(false);
    }
  }

  const pwToggle = (show: boolean, setShow: (v: boolean) => void) => (
    <button type="button" onClick={() => setShow(!show)} aria-label={show ? "Hide" : "Show"}
      className="inline-flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800">
      {show ? <EyeOff className="icon-md" /> : <Eye className="icon-md" />}
    </button>
  );

  return (
    <div>
      <div className={cn(basicDataLoading && "invisible")}>
        <StepIndicator current={preStep} steps={emailVerificationEnabled ? STEPS : STEPS.filter((s) => s.key !== "otp")} />
      </div>

      <h1 className="text-center text-2xl font-bold text-slate-900 dark:text-white sm:text-3xl">
        {preStep === "email" ? t("agent.register.stepCreateAccount") : preStep === "otp" ? t("agent.register.stepVerifyEmail") : t("agent.register.stepCompleteRegistration")}
      </h1>
      <p className="mt-2 text-center text-sm text-slate-600 dark:text-slate-300">
        {preStep === "email"
          ? t("agent.register.stepEmailHint")
          : preStep === "otp"
          ? t("agent.register.stepOtpHint")
          : t("agent.register.stepFormHint")}
      </p>

      {formError && (
        <p role="alert" className="mt-6 rounded-xl bg-rose-50 px-4 py-3 text-sm font-medium text-rose-700 dark:bg-rose-500/10 dark:text-rose-300">
          {formError}
        </p>
      )}

      {/* ── Step 0: Email ── */}
      {preStep === "email" && (
        <form noValidate onSubmit={onEmailSubmit} className="mt-8 space-y-4">
          <FormField label={t("agent.register.emailLabel")} type="email" autoComplete="email"
            placeholder="you@example.com"
            value={preEmail} onChange={(e) => setPreEmail(e.target.value)}
            error={errors.preEmail} required />

          <Button type="submit" size="md" loading={loading} className="w-full font-bold">
            {loading ? t("agent.register.sendingOtp") : t("agent.register.continue")}
          </Button>
        </form>
      )}

      {/* ── Step 1: OTP ── */}
      {preStep === "otp" && (
        <form noValidate onSubmit={onOtpSubmit} className="mt-8 space-y-6">
          {/* email pill */}
          <div className="flex items-center justify-center gap-2.5 rounded-2xl border border-brand-100 bg-brand-50/60 px-5 py-3 dark:border-brand-800/40 dark:bg-brand-900/20">
            <span className="inline-block h-2 w-2 rounded-full bg-emerald-400" />
            <span className="text-sm font-semibold text-slate-700 dark:text-slate-200">{preEmail}</span>
          </div>

          <OtpInput
            value={otpCode}
            onChange={setOtpCode}
            error={errors.otpCode}
            onComplete={(value) => submitOtp(value)}
          />

          <Button type="submit" size="md" loading={loading} className="w-full font-bold">
            {loading ? t("agent.register.verifying") : t("agent.register.verifyCode")}
          </Button>

          <button type="button" disabled={resending || resendCooldown > 0} onClick={onResendOtp}
            className="w-full text-center text-sm font-semibold text-brand-600 hover:text-brand-700 disabled:opacity-50 dark:text-brand-300">
            {resending
              ? t("agent.register.resending")
              : resendCooldown > 0
              ? t("agent.register.resendCodeIn").replace("{n}", String(resendCooldown))
              : t("agent.register.resendCode")}
          </button>
        </form>
      )}

      {/* ── Step 2: Registration form ── */}
      {preStep === "form" && (
        <form noValidate onSubmit={onFormSubmit} className="mt-8 space-y-4">
          {/* Email — locked to verified email */}
          <FormField label={t("agent.register.emailLabel")} type="email" value={fields.email}
            placeholder="you@example.com"
            onChange={() => {}} readOnly
            trailing={emailVerificationEnabled ? (
              <span className="pr-1 text-xs font-semibold text-emerald-600 dark:text-emerald-400">{t("agent.register.emailVerified")}</span>
            ) : undefined} />

          <div className="grid gap-4 sm:grid-cols-2">
            <FormField label={t("agent.register.firstNameLabel")} type="text" autoComplete="given-name"
              placeholder="Enter first name"
              value={fields.firstname} onChange={set("firstname")} error={errors.firstname} required />
            <FormField label={t("agent.register.lastNameLabel")} type="text" autoComplete="family-name"
              placeholder="Enter last name"
              value={fields.lastname} onChange={set("lastname")} error={errors.lastname} required />
          </div>

          <FormField label={t("agent.register.storeNameLabel")} type="text"
            placeholder="Enter store name"
            value={fields.store_name} onChange={set("store_name")} error={errors.store_name} required />

          <FormField label={t("agent.register.phoneLabel")} type="tel" autoComplete="tel"
            value={fields.phone} onChange={set("phone")} error={errors.phone} placeholder="01111111222" required />

          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-1.5">
              <p className="block text-xs font-semibold capitalize tracking-wide text-slate-500 dark:text-slate-400">
                {t("agent.register.countryLabel")}
              </p>
              <CountrySelect
                countries={basicData?.countries ?? []}
                value={fields.country}
                onChange={(val) => {
                  setFields((f) => ({ ...f, country: val }));
                  clearFieldError("country");
                }}
                placeholder={t("agent.register.countryPlaceholder")}
                disabled={basicDataLoading}
              />
              {errors.country && <p className="text-xs font-medium text-rose-600 dark:text-rose-400">{errors.country}</p>}
            </div>
            <FormField label={t("agent.register.cityLabel")} type="text" placeholder="Enter city" value={fields.city} onChange={set("city")} error={errors.city} required />
          </div>
          <FormField label={t("agent.register.zipLabel")} type="text" placeholder="Enter zip code" value={fields.zip_code} onChange={set("zip_code")} error={errors.zip_code} required />

          <FormField label={t("agent.register.passwordLabel")} type={showPw ? "text" : "password"} autoComplete="new-password"
            placeholder="Create a password"
            value={fields.password} onChange={set("password")} error={errors.password} required
            trailing={pwToggle(showPw, setShowPw)} />
          <FormField label={t("agent.register.confirmPasswordLabel")} type={showConfirm ? "text" : "password"} autoComplete="new-password"
            placeholder="Re-enter password"
            value={fields.password_confirmation} onChange={set("password_confirmation")}
            error={errors.password_confirmation} required trailing={pwToggle(showConfirm, setShowConfirm)} />

          {/* Document type */}
          <div className="space-y-1.5">
            <p className="block text-xs font-semibold capitalize tracking-wide text-slate-500 dark:text-slate-400">{t("agent.register.documentTypeLabel")}</p>
            <ReactSelect unstyled isSearchable={false} options={DOCUMENT_TYPES} placeholder={t("agent.register.documentTypePlaceholder")}
              value={DOCUMENT_TYPES.find((o) => o.value === fields.document_type) ?? null}
              onChange={(opt) => {
                setFields((f) => ({ ...f, document_type: opt?.value ?? "" }));
                clearFieldError("document_type");
              }}
              classNames={{
                control: ({ isFocused }) => cn(
                  "h-11 cursor-pointer rounded-2xl border px-4 text-sm transition bg-white dark:bg-slate-900",
                  errors.document_type ? "border-rose-300 dark:border-rose-400/40"
                    : isFocused ? "border-brand-500 shadow-glow-sm" : "border-slate-200 dark:border-slate-700",
                ),
                placeholder: () => "text-slate-400",
                singleValue: () => "text-slate-900 dark:text-white",
                menu: () => "z-50 mt-1 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900",
                option: ({ isFocused, isSelected }) => cn(
                  "cursor-pointer px-4 py-2.5 text-sm",
                  isSelected ? "bg-brand-600 text-white" : isFocused ? "bg-slate-100 dark:bg-slate-800 dark:text-white" : "text-slate-700 dark:text-slate-200",
                ),
                indicatorsContainer: () => "text-slate-400",
              }} />
            {errors.document_type && <p className="text-xs font-medium text-rose-600 dark:text-rose-400">{errors.document_type}</p>}
          </div>

          <div className="grid gap-4 sm:grid-cols-2">
            <FileUploadField label={t("agent.register.idFrontLabel")} value={idFront}
              onChange={(v) => { setIdFront(v); clearFieldError("id_front_part"); }} error={errors.id_front_part} />
            <FileUploadField label={t("agent.register.idBackLabel")}  value={idBack}
              onChange={(v) => { setIdBack(v); clearFieldError("id_back_part"); }}  error={errors.id_back_part}  />
          </div>

          {agreePolicyEnabled && (
          <div className="space-y-1">
            <div className="flex items-start gap-3 pt-1">
              <input id="form-agree" type="checkbox" checked={formAgree}
                onChange={(e) => { setFormAgree(e.target.checked); clearFieldError("agree"); }}
                className="mt-0.5 h-4 w-4 rounded border-slate-300 accent-brand-600" />
              <label htmlFor="form-agree" className="text-xs leading-relaxed text-slate-600 dark:text-slate-300">
                {t("agent.register.agreeTerms")}{" "}
                <Link href="/terms" className="font-semibold text-brand-600 hover:underline dark:text-brand-300">{t("agent.register.termsOfService")}</Link>
                {" "}{t("agent.register.and")}{" "}
                <Link href="/privacy" className="font-semibold text-brand-600 hover:underline dark:text-brand-300">{t("agent.register.privacyPolicy")}</Link>
              </label>
            </div>
            {errors.agree && <p className="text-xs font-medium text-rose-600 dark:text-rose-400">{errors.agree}</p>}
          </div>
          )}

          <Button type="submit" size="md" loading={loading} className="w-full font-bold">
            {loading ? t("agent.register.submitting") : t("agent.register.submit")}
          </Button>
        </form>
      )}

      <p className="mt-8 text-center text-sm text-slate-600 dark:text-slate-300">
        {t("agent.register.alreadyHaveAccount")}{" "}
        <Link href="/agent/login" className="font-semibold text-brand-600 hover:text-brand-700 dark:text-brand-300">{t("agent.register.signIn")}</Link>
      </p>
    </div>
  );
}