"use client";

import { useState, type FormEvent } from "react";
import Image from "next/image";
import { useRouter, useSearchParams } from "next/navigation";
import Select from "react-select";
import {
  AlertCircle,
  BadgeCheck,
  Ban,
  Clock,
  Eye,
  EyeOff,
  FileImage,
  KeyRound,
  Languages,
  Mail,
  Monitor,
  Moon,
  Phone,
  ShieldAlert,
  ShieldCheck,
  ShieldX,
  Smartphone,
  Sparkles,
  Sun,
  Trash2,
  UploadCloud,
  UserCog,
  X,
} from "lucide-react";
import { Container } from "@/components/common/Container";
import { Card, CardContent } from "@/components/common/Card";
import { Button } from "@/components/common/Button";
import { Modal } from "@/components/app/Modal";
import { FormField } from "@/components/app/FormField";
import { TwoFaTab } from "@/components/app/settings/TwoFaTab";
import { useAuth } from "@/hooks/useAuth";
import { useTheme } from "@/hooks/useTheme";
import { useTranslation } from "@/hooks/useTranslation";
import { useProfileInfo, useUpdatePassword, useDeleteAccount, useKycFields, useSubmitKyc } from "@/hooks/queries/useProfile";
import { isApiError } from "@/lib/apiError";
import { cn } from "@/lib/utils";
import type { ThemeMode } from "@/types";

type Tab = "account" | "preferences" | "kyc" | "twofa" | "danger";

const TABS: { id: Tab; key: string; icon: React.ComponentType<{ className?: string }> }[] = [
  { id: "account",     key: "app.settings.tabs.account",     icon: UserCog },
  { id: "preferences", key: "app.settings.tabs.preferences", icon: Sparkles },
  { id: "kyc",         key: "app.settings.tabs.kyc",         icon: ShieldCheck },
  { id: "twofa",       key: "app.settings.tabs.twofa",       icon: Smartphone },
  { id: "danger",      key: "app.settings.tabs.danger",      icon: Trash2 },
];

export default function SettingsPage() {
  const { t, locale, setLocale, languages } = useTranslation();
  const { user } = useAuth();
  const { theme, setTheme } = useTheme();
  const router = useRouter();
  const searchParams = useSearchParams();

  const requestedTab = searchParams.get("tab");
  const initialTab = TABS.some((tb) => tb.id === requestedTab) ? (requestedTab as Tab) : "account";
  const [tab, setTab] = useState<Tab>(initialTab);
  const [deleteOpen, setDeleteOpen]     = useState(false);
  const [deleteError, setDeleteError]   = useState("");

  const { mutateAsync: deleteAccount, isPending: isDeleting } = useDeleteAccount();

  async function handleDeleteAccount() {
    setDeleteError("");
    try {
      await deleteAccount();
      router.replace("/");
    } catch (err) {
      setDeleteError(isApiError(err) ? err.message : t("app.auth.errors.generic") || "Something went wrong.");
    }
  }

  if (!user) return null;

  return (
    <Container className="max-w-full space-y-6">
      <header>
        <h1 className="text-2xl font-bold text-slate-900 dark:text-white sm:text-3xl">
          {t("app.settings.title")}
        </h1>
        <p className="mt-1 text-sm text-slate-600 dark:text-slate-300">
          {t("app.settings.subtitle")}
        </p>
      </header>

      <div className="scrollbar-hide overflow-x-auto">
        <nav
          role="tablist"
          className="flex w-max min-w-full gap-1 rounded-2xl border border-slate-200 bg-slate-50/80 p-1 dark:border-slate-800 dark:bg-slate-900/60"
        >
          {TABS.map((tb) => {
            const Icon = tb.icon;
            const active = tab === tb.id;
            return (
              <button
                key={tb.id}
                type="button"
                role="tab"
                aria-selected={active}
                onClick={() => setTab(tb.id)}
                className={cn(
                  "inline-flex flex-1 items-center justify-center gap-2 whitespace-nowrap rounded-xl px-4 py-2.5 text-sm font-semibold transition-all duration-200",
                  active
                    ? "bg-white text-brand-700 shadow-soft dark:bg-slate-800 dark:text-brand-300"
                    : "text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200",
                )}
              >
                <Icon className="h-4 w-4 shrink-0" />
                {t(tb.key)}
              </button>
            );
          })}
        </nav>
      </div>

      <div>
          {tab === "account" && <AccountTab user={user} t={t} />}

          {tab === "preferences" && (
            <Card>
              <CardContent className="space-y-6">
                <div>
                  <h2 className="text-[length:var(--text-lg-fixed)] font-bold text-slate-900 dark:text-white">
                    {t("app.settings.prefLanguage")}
                  </h2>
                  <div className="mt-3 grid gap-2 sm:grid-cols-3">
                    {languages.map((l) => {
                      const active = locale === l.code;
                      return (
                        <button
                          key={l.code}
                          type="button"
                          onClick={() => setLocale(l.code)}
                          aria-pressed={active}
                          className={cn(
                            "inline-flex items-center justify-center gap-2 rounded-2xl border px-4 py-3 text-sm font-semibold transition",
                            active
                              ? "border-brand-500 bg-brand-50 text-brand-700 dark:border-brand-400/50 dark:bg-brand-500/15 dark:text-brand-300"
                              : "border-slate-200 hover:border-slate-300 dark:border-slate-700",
                          )}
                        >
                          <Languages className="h-4 w-4 text-slate-400" />
                          {l.flag && <span aria-hidden>{l.flag}</span>}
                          {l.name}
                        </button>
                      );
                    })}
                  </div>
                </div>

                <div>
                  <h2 className="text-[length:var(--text-lg-fixed)] font-bold text-slate-900 dark:text-white">
                    {t("app.settings.prefTheme")}
                  </h2>
                  <div className="mt-3 grid gap-2 sm:grid-cols-3">
                    {(
                      [
                        { value: "light", icon: Sun, label: t("theme.light") },
                        { value: "dark", icon: Moon, label: t("theme.dark") },
                        { value: "system", icon: Monitor, label: t("theme.system") },
                      ] as { value: ThemeMode; icon: React.ComponentType<{ className?: string }>; label: string }[]
                    ).map((tm) => {
                      const Icon = tm.icon;
                      const active = theme === tm.value;
                      return (
                        <button
                          key={tm.value}
                          type="button"
                          onClick={() => setTheme(tm.value)}
                          aria-pressed={active}
                          className={cn(
                            "inline-flex items-center justify-center gap-2 rounded-2xl border px-4 py-3 text-sm font-semibold transition",
                            active
                              ? "border-brand-500 bg-brand-50 text-brand-700 dark:border-brand-400/50 dark:bg-brand-500/15 dark:text-brand-300"
                              : "border-slate-200 hover:border-slate-300 dark:border-slate-700",
                          )}
                        >
                          <Icon className="h-4 w-4 text-slate-400" />
                          {tm.label}
                        </button>
                      );
                    })}
                  </div>
                </div>

              </CardContent>
            </Card>
          )}


          {tab === "kyc" && <KycTab />}

          {tab === "twofa" && <TwoFaTab />}

          {tab === "danger" && (
            <Card className="border-rose-200/70 dark:border-rose-500/30">
              <CardContent>
                <h2 className="text-[length:var(--text-lg-fixed)] font-bold text-rose-700 dark:text-rose-300">
                  {t("app.settings.dangerTitle")}
                </h2>
                <p className="mt-2 text-sm text-slate-600 dark:text-slate-300">
                  {t("app.settings.deleteAccountBody")}
                </p>
                <Button
                  type="button"
                  className="mt-4 bg-rose-600 hover:bg-rose-700"
                  onClick={() => setDeleteOpen(true)}
                >
                  <Trash2 className="h-4 w-4" />
                  {t("app.settings.deleteAccount")}
                </Button>
              </CardContent>
            </Card>
          )}
      </div>

      <Modal
        open={deleteOpen}
        onClose={() => { if (!isDeleting) { setDeleteOpen(false); setDeleteError(""); } }}
        title={t("app.settings.deleteConfirmTitle")}
        footer={
          <>
            <Button
              type="button"
              variant="outline"
              disabled={isDeleting}
              onClick={() => { setDeleteOpen(false); setDeleteError(""); }}
            >
              {t("app.settings.deleteCancel")}
            </Button>
            <Button
              type="button"
              loading={isDeleting}
              disabled={isDeleting}
              className="bg-rose-600 hover:bg-rose-700 disabled:opacity-60"
              onClick={handleDeleteAccount}
            >
              <Ban className="h-4 w-4" />
              {isDeleting ? "Deleting..." : t("app.settings.deleteConfirm")}
            </Button>
          </>
        }
      >
        <p>{t("app.settings.deleteConfirmBody")}</p>
        {deleteError && (
          <div
            role="alert"
            className="mt-3 flex items-start gap-2 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 dark:border-rose-500/20 dark:bg-rose-500/10 dark:text-rose-300"
          >
            <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
            {deleteError}
          </div>
        )}
      </Modal>
    </Container>
  );
}

// ─── Account Tab ──────────────────────────────────────────────────────────────

function AccountTab({ user, t }: { user: ReturnType<typeof useAuth>["user"]; t: (k: string) => string }) {
  const { data: profileData, isLoading: profileLoading } = useProfileInfo();
  const { mutateAsync: updatePassword, isPending } = useUpdatePassword();

  const info = profileData?.user_info;
  const paths = profileData?.image_paths;

  const avatarUrl = paths
    ? info?.image
      ? `${paths.base_url}${paths.path_location}/${info.image}`
      : `${paths.base_url}${paths.default_image}`
    : null;

  const displayName = info
    ? `${info.firstname ?? ""} ${info.lastname ?? ""}`.trim()
    : user?.firstName ?? "";
  const email   = info?.email   ?? user?.email   ?? "";
  const phone   = info?.full_mobile ?? user?.phone ?? "";
  const initials = displayName
    ? displayName.split(" ").map((w) => w[0]).join("").toUpperCase().slice(0, 2)
    : email.charAt(0).toUpperCase();

  // Password form state
  const [currentPw, setCurrentPw] = useState("");
  const [newPw,     setNewPw]     = useState("");
  const [confirmPw, setConfirmPw] = useState("");
  const [showCurrent, setShowCurrent] = useState(false);
  const [showNew,     setShowNew]     = useState(false);
  const [showConfirm, setShowConfirm] = useState(false);
  const [formError,   setFormError]   = useState("");
  const [success,     setSuccess]     = useState(false);

  async function handlePasswordSubmit(e: FormEvent) {
    e.preventDefault();
    setFormError("");
    setSuccess(false);
    if (newPw !== confirmPw) {
      setFormError(t("app.settings.passwordMismatch") || "New passwords do not match.");
      return;
    }
    if (newPw.length < 6) {
      setFormError(t("app.settings.passwordTooShort") || "Password must be at least 6 characters.");
      return;
    }
    try {
      await updatePassword({
        current_password: currentPw,
        password: newPw,
        password_confirmation: confirmPw,
      });
      setCurrentPw("");
      setNewPw("");
      setConfirmPw("");
      setSuccess(true);
      setTimeout(() => setSuccess(false), 4000);
    } catch (err) {
      setFormError(isApiError(err) ? err.message : t("app.auth.errors.generic") || "Something went wrong.");
    }
  }

  return (
    <div className="space-y-6">
      <Card>
        <CardContent className="space-y-6">
          {/* ── Profile summary ── */}
          <div className="flex flex-col items-center gap-3 text-center">
            {/* Avatar */}
            {avatarUrl ? (
              <Image
                src={avatarUrl}
                alt={displayName}
                width={64}
                height={64}
                unoptimized
                className="h-16 w-16 shrink-0 rounded-full object-cover shadow-soft"
              />
            ) : (
              <span className="grid h-16 w-16 shrink-0 place-items-center rounded-full bg-gradient-to-br from-brand-500 to-accent-500 text-xl font-bold text-white shadow-soft">
                {initials}
              </span>
            )}
            {profileLoading ? (
              <span className="block h-5 w-40 animate-pulse rounded-lg bg-slate-200 dark:bg-slate-700" />
            ) : (
              <p className="truncate text-base font-bold text-slate-900 dark:text-white">
                {displayName || email}
              </p>
            )}
          </div>

          {/* Info rows */}
          <div className="grid gap-6 rounded-2xl bg-slate-50/70 p-5 sm:grid-cols-2 sm:divide-x sm:divide-slate-200/70 dark:bg-slate-800/30 dark:sm:divide-slate-700/60">
            <InfoRow
              icon={Mail}
              accent="brand"
              label={t("app.settings.emailLabel")}
              value={email}
              loading={profileLoading}
            />
            <InfoRow
              icon={Phone}
              accent="accent"
              label={t("app.settings.phoneLabel")}
              value={phone}
              placeholder={t("app.settings.notSet") || "Not set"}
              loading={profileLoading}
              className="sm:ps-6"
            />
          </div>
        </CardContent>
      </Card>

      {/* ── Change password ── */}
      <Card>
        <CardContent>
          <div className="mb-5 flex items-center gap-3">
            <div>
              <h2 className="text-[length:var(--text-lg-fixed)] font-bold text-slate-900 dark:text-white">
                {t("app.settings.changePasswordTitle") || "Change Password"}
              </h2>
              <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
                {t("app.settings.changePasswordSubtitle") || "Update your password to keep your account secure."}
              </p>
            </div>
          </div>

          {/* Error / Success banners */}
          {formError && (
            <div
              role="alert"
              className="mb-5 flex items-start gap-2.5 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 dark:border-rose-500/20 dark:bg-rose-500/10 dark:text-rose-300"
            >
              <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
              {formError}
            </div>
          )}
          {success && (
            <div
              role="status"
              className="mb-5 flex items-start gap-2.5 rounded-2xl border border-accent-200 bg-accent-50 px-4 py-3 text-sm text-accent-700 dark:border-accent-500/20 dark:bg-accent-500/10 dark:text-accent-300"
            >
              <BadgeCheck className="mt-0.5 h-4 w-4 shrink-0" />
              {t("app.settings.passwordChanged") || "Password updated successfully!"}
            </div>
          )}

          <form onSubmit={handlePasswordSubmit} className="space-y-4">
            {/* Current password */}
            <PasswordField
              id="current-password"
              label={t("app.settings.currentPassword") || "Current Password"}
              placeholder="Enter current password"
              value={currentPw}
              onChange={setCurrentPw}
              show={showCurrent}
              onToggle={() => setShowCurrent((v) => !v)}
            />

            {/* New password */}
            <PasswordField
              id="new-password"
              label={t("app.settings.newPassword") || "New Password"}
              placeholder="Enter new password"
              value={newPw}
              onChange={setNewPw}
              show={showNew}
              onToggle={() => setShowNew((v) => !v)}
            />

            {/* Confirm password */}
            <PasswordField
              id="confirm-password"
              label={t("app.settings.confirmNewPassword") || "Confirm New Password"}
              placeholder="Re-enter new password"
              value={confirmPw}
              onChange={setConfirmPw}
              show={showConfirm}
              onToggle={() => setShowConfirm((v) => !v)}
              matchValue={newPw}
            />

            <Button
              type="submit"
              loading={isPending}
              disabled={isPending || !currentPw || !newPw || !confirmPw}
              className="w-full"
            >
              <KeyRound className="h-4 w-4" />
              {isPending
                ? t("app.settings.savingPassword") || "Updating..."
                : t("app.settings.savePassword") || "Update Password"}
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}

// ─── Info Row ─────────────────────────────────────────────────────────────────

const INFO_ROW_ACCENTS = {
  brand: "bg-brand-50 text-brand-600 dark:bg-brand-500/15 dark:text-brand-300",
  accent: "bg-accent-50 text-accent-600 dark:bg-accent-500/15 dark:text-accent-300",
} as const;

function InfoRow({
  icon: Icon,
  label,
  value,
  placeholder,
  loading,
  accent = "brand",
  className,
}: {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  value?: string;
  placeholder?: string;
  loading?: boolean;
  accent?: keyof typeof INFO_ROW_ACCENTS;
  className?: string;
}) {
  return (
    <div className={cn("flex items-center gap-3.5", className)}>
      <span className={cn("grid h-10 w-10 shrink-0 place-items-center rounded-xl", INFO_ROW_ACCENTS[accent])}>
        <Icon className="h-4 w-4" />
      </span>
      <div className="min-w-0 flex-1">
        <p className="text-[length:var(--text-sm-fixed)] font-medium capitalize tracking-wider text-slate-400 dark:text-slate-500">
          {label}
        </p>
        {loading ? (
          <span className="mt-1 block h-4 w-32 animate-pulse rounded-md bg-slate-200 dark:bg-slate-700" />
        ) : value ? (
          <p className="mt-0.5 truncate text-sm font-bold text-slate-900 dark:text-white">{value}</p>
        ) : (
          <p className="mt-0.5 text-sm font-medium text-slate-400 dark:text-slate-500">{placeholder}</p>
        )}
      </div>
    </div>
  );
}

// ─── Password Field ───────────────────────────────────────────────────────────

function PasswordField({
  id,
  label,
  placeholder,
  value,
  onChange,
  show,
  onToggle,
  matchValue,
  required = true,
}: {
  id: string;
  label: string;
  placeholder?: string;
  value: string;
  onChange: (v: string) => void;
  show: boolean;
  onToggle: () => void;
  matchValue?: string;
  required?: boolean;
}) {
  const mismatch = matchValue !== undefined && value.length > 0 && value !== matchValue;
  return (
    <div>
      <label
        htmlFor={id}
        className="mb-1.5 block text-[length:var(--text-sm-fixed)] font-medium text-slate-700 dark:text-slate-300"
      >
        {label}
        {required && <span className="ms-1 font-bold text-rose-500 dark:text-rose-400">*</span>}
      </label>
      <div
        className={cn(
          "relative flex items-center rounded-2xl border bg-slate-50/60 transition-all duration-150 dark:bg-slate-900/50",
          mismatch
            ? "border-rose-400 shadow-[0_0_0_3px_rgba(248,113,113,0.35)] dark:border-rose-500"
            : "border-slate-200 focus-within:border-brand-400 focus-within:shadow-[0_0_0_3px_rgba(96,165,250,0.35)] dark:border-slate-700 dark:focus-within:border-brand-400",
        )}
      >
        <input
          id={id}
          type={show ? "text" : "password"}
          value={value}
          placeholder={placeholder}
          required={required}
          autoComplete={id === "current-password" ? "current-password" : "new-password"}
          onChange={(e) => onChange(e.target.value)}
          className="h-11 w-full bg-transparent px-4 pe-11 text-sm text-slate-900 outline-none placeholder:text-slate-400 dark:text-white"
        />
        <button
          type="button"
          onClick={onToggle}
          tabIndex={-1}
          aria-label={show ? "Hide password" : "Show password"}
          className="absolute end-3 top-1/2 -translate-y-1/2 text-slate-400 transition hover:text-slate-600 dark:hover:text-slate-200"
        >
          {show ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
        </button>
      </div>
      {mismatch && (
        <p className="mt-1.5 flex items-center gap-1 text-xs text-rose-500">
          <AlertCircle className="h-3 w-3" />
          Passwords do not match
        </p>
      )}
    </div>
  );
}

// ─── KYC Tab ─────────────────────────────────────────────────────────────────

const KYC_STATUS = {
  0: {
    icon: ShieldAlert,
    labelKey: "app.settings.kycTab.statusUnverifiedLabel",
    messageKey: "app.settings.kycTab.statusUnverifiedMessage",
    cls: "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300",
    iconCls: "text-amber-600 dark:text-amber-400",
    iconBg: "bg-amber-100 dark:bg-amber-500/20",
  },
  1: {
    icon: ShieldCheck,
    labelKey: "app.settings.kycTab.statusVerifiedLabel",
    messageKey: "app.settings.kycTab.statusVerifiedMessage",
    cls: "border-accent-200 bg-accent-50 text-accent-700 dark:border-accent-500/20 dark:bg-accent-500/10 dark:text-accent-300",
    iconCls: "text-accent-600 dark:text-accent-400",
    iconBg: "bg-accent-100 dark:bg-accent-500/20",
  },
  2: {
    icon: Clock,
    labelKey: "app.settings.kycTab.statusPendingLabel",
    messageKey: "app.settings.kycTab.statusPendingMessage",
    cls: "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-500/20 dark:bg-blue-500/10 dark:text-blue-300",
    iconCls: "text-blue-600 dark:text-blue-400",
    iconBg: "bg-blue-100 dark:bg-blue-500/20",
  },
  3: {
    icon: ShieldX,
    labelKey: "app.settings.kycTab.statusRejectedLabel",
    messageKey: "app.settings.kycTab.statusRejectedMessage",
    cls: "border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-500/20 dark:bg-rose-500/10 dark:text-rose-300",
    iconCls: "text-rose-600 dark:text-rose-400",
    iconBg: "bg-rose-100 dark:bg-rose-500/20",
  },
} as const;

function KycTab() {
  const { t } = useTranslation();
  const { data, isLoading, error } = useKycFields();
  const { mutateAsync: submitKyc, isPending } = useSubmitKyc();

  // Dynamic form values: field name → string (select) or File (file)
  const [values, setValues] = useState<Record<string, string | File>>({});
  const [previews, setPreviews] = useState<Record<string, string>>({});
  const [formError, setFormError] = useState("");
  const [success, setSuccess] = useState(false);

  const status = (data?.kyc_status ?? 0) as 0 | 1 | 2 | 3;
  const statusInfo = KYC_STATUS[status];
  const StatusIcon = statusInfo.icon;

  function handleSelect(name: string, value: string) {
    setValues((prev) => ({ ...prev, [name]: value }));
  }

  function handleText(name: string, value: string) {
    setValues((prev) => ({ ...prev, [name]: value }));
  }

  function handleFile(name: string, file: File) {
    // Revoke old preview
    if (previews[name]) URL.revokeObjectURL(previews[name]);
    const url = URL.createObjectURL(file);
    setValues((prev) => ({ ...prev, [name]: file }));
    setPreviews((prev) => ({ ...prev, [name]: url }));
  }

  function clearFile(name: string) {
    if (previews[name]) URL.revokeObjectURL(previews[name]);
    setValues((prev) => { const n = { ...prev }; delete n[name]; return n; });
    setPreviews((prev) => { const n = { ...prev }; delete n[name]; return n; });
  }

  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    setFormError("");
    setSuccess(false);

    // Client-side required check
    const missing = (data?.input_fields ?? [])
      .filter((f) => f.required && !values[f.name])
      .map((f) => f.label);
    if (missing.length) {
      setFormError(`${t("app.settings.kycTab.missingFieldsPrefix")} ${missing.join(", ")}`);
      return;
    }

    try {
      await submitKyc(values);
      setSuccess(true);
      setValues({});
      setPreviews({});
    } catch (err) {
      setFormError(isApiError(err) ? err.message : t("app.settings.kycTab.genericError"));
    }
  }

  // ── Loading skeleton ──
  if (isLoading) {
    return (
      <Card>
        <CardContent className="space-y-4">
          <div className="h-12 animate-pulse rounded-2xl bg-slate-200 dark:bg-slate-700" />
          <div className="h-10 animate-pulse rounded-2xl bg-slate-200 dark:bg-slate-700" />
          <div className="h-32 animate-pulse rounded-2xl bg-slate-200 dark:bg-slate-700" />
          <div className="h-32 animate-pulse rounded-2xl bg-slate-200 dark:bg-slate-700" />
        </CardContent>
      </Card>
    );
  }

  // ── Error fetching fields ──
  if (error) {
    return (
      <Card>
        <CardContent>
          <div className="flex items-center gap-2 text-sm text-rose-600 dark:text-rose-400">
            <AlertCircle className="h-4 w-4" />
            {t("app.settings.kycTab.failedToLoad")}
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <div className="space-y-4">
      {/* ── Status Banner (only shown if not verified; verified has dedicated card below) ── */}
      {status !== 1 && (
        <div className={cn("rounded-2xl border px-5 py-4", statusInfo.cls)}>
          <div className="flex items-center gap-4">
            <span className={cn("grid h-12 w-12 shrink-0 place-items-center rounded-xl", statusInfo.iconBg)}>
              <StatusIcon className={cn("h-6 w-6", statusInfo.iconCls)} />
            </span>
            <div>
              <p className="text-sm font-bold">{t("app.settings.kycTab.statusPrefix")} {t(statusInfo.labelKey)}</p>
              <p className="mt-0.5 text-xs opacity-75">{t(statusInfo.messageKey)}</p>
            </div>
          </div>
        </div>
      )}

      {/* ── Already verified — no form ── */}
      {status === 1 ? (
        <Card>
          <CardContent>
            <div className="flex flex-col items-center gap-3 py-8 text-center">
              <span className="grid h-16 w-16 place-items-center rounded-2xl bg-accent-50 dark:bg-accent-500/15">
                <BadgeCheck className="h-8 w-8 text-accent-500" />
              </span>
              <p className="text-base font-bold text-slate-900 dark:text-white">
                {t("app.settings.kycTab.verifiedTitle")}
              </p>
              <p className="max-w-xs text-sm text-slate-500 dark:text-slate-400">
                {t("app.settings.kycTab.verifiedBody")}
              </p>
            </div>
          </CardContent>
        </Card>
      ) : status === 2 ? null : (
        /* ── KYC Form ── */
        <Card>
          <CardContent>
            <div className="mb-6 flex items-center gap-3">
              <span className="grid h-9 w-9 place-items-center rounded-xl bg-brand-50 text-brand-600 dark:bg-brand-500/15 dark:text-brand-300">
                <ShieldCheck className="h-4 w-4" />
              </span>
              <div>
                <h2 className="text-[length:var(--text-lg-fixed)] font-bold text-slate-900 dark:text-white">
                  {t("app.settings.kycTab.formTitle")}
                </h2>
                <p className="text-xs text-slate-500 dark:text-slate-400">
                  {t("app.settings.kycTab.formSubtitle")}
                </p>
              </div>
            </div>

            {/* Error / Success */}
            {formError && (
              <div
                role="alert"
                className="mb-5 flex items-start gap-2.5 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 dark:border-rose-500/20 dark:bg-rose-500/10 dark:text-rose-300"
              >
                <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
                {formError}
              </div>
            )}
            {success && (
              <div
                role="status"
                className="mb-5 flex items-start gap-2.5 rounded-2xl border border-accent-200 bg-accent-50 px-4 py-3 text-sm text-accent-700 dark:border-accent-500/20 dark:bg-accent-500/10 dark:text-accent-300"
              >
                <BadgeCheck className="mt-0.5 h-4 w-4 shrink-0" />
                {t("app.settings.kycTab.submittedSuccess")}
              </div>
            )}

            <form onSubmit={handleSubmit} className="space-y-5">
              {(data?.input_fields ?? []).map((field) => {
                if (field.type === "select") {
                  const selected = (values[field.name] as string) ?? "";
                  const options = field.validation.options.map((opt) => ({
                    value: opt.trim(),
                    label: opt.trim(),
                  }));
                  return (
                    <div key={field.name}>
                      <label
                        htmlFor={field.name}
                        className="mb-1.5 block text-[length:var(--text-sm-fixed)] font-medium text-slate-700 dark:text-slate-300"
                      >
                        {field.label}
                        {field.required && (
                          <span className="ml-1 text-rose-500">*</span>
                        )}
                      </label>
                      <Select
                        inputId={field.name}
                        options={options}
                        value={options.find((o) => o.value === selected) ?? null}
                        onChange={(opt) => handleSelect(field.name, (opt as { value: string } | null)?.value ?? "")}
                        placeholder={t("app.settings.kycTab.selectPlaceholder").replace("{field}", field.label)}
                        isSearchable={false}
                        unstyled
                        classNames={{
                          control: ({ menuIsOpen }) =>
                            cn(
                              "flex h-11 cursor-pointer items-center border bg-slate-50/60 px-4 transition-[border-radius] duration-150 dark:bg-slate-900/50",
                              menuIsOpen ? "rounded-t-2xl rounded-b-none border-brand-400" : "rounded-2xl border-slate-200 dark:border-slate-700",
                            ),
                          menu: () =>
                            "z-10 overflow-hidden rounded-b-2xl border border-t-0 border-slate-200 bg-white shadow-elevated dark:border-slate-700 dark:bg-slate-900",
                          menuList: () => "py-1",
                          option: ({ isSelected, isFocused }) =>
                            cn(
                              "cursor-pointer px-4 py-2.5 text-sm transition-colors",
                              isSelected
                                ? "bg-brand-600 text-white"
                                : isFocused
                                  ? "bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-white"
                                  : "text-slate-700 dark:text-slate-200",
                            ),
                          placeholder: () => "text-sm text-slate-400 dark:text-slate-500",
                          singleValue: () => "text-sm text-slate-900 dark:text-white",
                          dropdownIndicator: () => "p-0.5 text-slate-400",
                          indicatorSeparator: () => "mx-2 self-stretch bg-slate-200 dark:bg-slate-700",
                          noOptionsMessage: () => "px-3 py-2 text-sm text-slate-400",
                        }}
                      />
                    </div>
                  );
                }

                if (field.type === "text") {
                  const maxLength = field.validation.max ? Number(field.validation.max) : undefined;
                  return (
                    <FormField
                      key={field.name}
                      label={field.label}
                      placeholder={`Enter ${field.label.toLowerCase()}`}
                      value={(values[field.name] as string) ?? ""}
                      onChange={(e) => handleText(field.name, e.target.value)}
                      required={field.required}
                      maxLength={maxLength}
                      labelClassName="mb-1.5 block text-[length:var(--text-sm-fixed)] font-medium text-slate-700 dark:text-slate-300"
                    />
                  );
                }

                if (field.type === "file") {
                  const preview = previews[field.name];
                  const file = values[field.name] as File | undefined;
                  const mimes = field.validation.mimes.join(", ");
                  const maxMb = field.validation.max;
                  return (
                    <div key={field.name}>
                      <p className="mb-1.5 text-[length:var(--text-sm-fixed)] font-medium text-slate-700 dark:text-slate-300">
                        {field.label}
                        {field.required && (
                          <span className="ml-1 text-rose-500">*</span>
                        )}
                      </p>
                      {preview ? (
                        /* Preview state */
                        <div className="relative overflow-hidden rounded-2xl border border-slate-200 dark:border-slate-700">
                          <img
                            src={preview}
                            alt={field.label}
                            className="h-40 w-full object-cover"
                          />
                          <div className="absolute inset-0 flex items-end bg-gradient-to-t from-black/50 to-transparent p-3">
                            <span className="flex-1 truncate text-xs font-medium text-white">
                              {file?.name}
                            </span>
                            <button
                              type="button"
                              onClick={() => clearFile(field.name)}
                              className="ml-2 grid h-7 w-7 shrink-0 place-items-center rounded-full bg-white/20 text-white transition hover:bg-white/40"
                              aria-label={t("app.settings.kycTab.removeFile")}
                            >
                              <X className="h-3.5 w-3.5" />
                            </button>
                          </div>
                        </div>
                      ) : (
                        /* Drop zone */
                        <label
                          htmlFor={`file-${field.name}`}
                          className="flex cursor-pointer flex-col items-center gap-3 rounded-2xl border-2 border-dashed border-slate-200 bg-slate-50/50 px-6 py-8 transition hover:border-brand-400 hover:bg-brand-50/30 dark:border-slate-700 dark:bg-slate-900/30 dark:hover:border-brand-500 dark:hover:bg-brand-500/5"
                        >
                          <span className="grid h-12 w-12 place-items-center rounded-2xl bg-slate-100 text-slate-400 dark:bg-slate-800">
                            <UploadCloud className="h-6 w-6" />
                          </span>
                          <span className="text-center">
                            <span className="block text-sm font-semibold text-slate-700 dark:text-slate-200">
                              {t("app.settings.kycTab.clickToUpload")}{" "}
                              <span className="text-brand-600 dark:text-brand-300">
                                {field.label}
                              </span>
                            </span>
                            <span className="mt-0.5 block text-xs text-slate-400 dark:text-slate-500">
                              {mimes.toUpperCase()} · {t("app.settings.kycTab.maxSizeLabel")} {maxMb}MB
                            </span>
                          </span>
                          <input
                            id={`file-${field.name}`}
                            type="file"
                            accept={field.validation.mimes.map((m) => `.${m}`).join(",")}
                            className="sr-only"
                            onChange={(e) => {
                              const f = e.target.files?.[0];
                              if (f) handleFile(field.name, f);
                              e.target.value = "";
                            }}
                          />
                        </label>
                      )}
                      {/* Thumbnail icon for non-image previews */}
                      {file && !preview && (
                        <div className="mt-2 flex items-center gap-2 text-xs text-slate-500">
                          <FileImage className="h-3.5 w-3.5" />
                          {file.name}
                        </div>
                      )}
                    </div>
                  );
                }

                return null;
              })}

              <Button
                type="submit"
                loading={isPending}
                disabled={isPending}
                className="w-full"
              >
                <ShieldCheck className="h-4 w-4" />
                {isPending ? t("app.settings.kycTab.submitting") : t("app.settings.kycTab.submit")}
              </Button>
            </form>
          </CardContent>
        </Card>
      )}
    </div>
  );
}