"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import type { FormEvent } from "react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { AnimatePresence, motion } from "framer-motion";
import { ArrowRightLeft, ArrowUpRight, Ban, Landmark, Pencil, Plus, Scale, Trash2, TriangleAlert, Wallet } from "lucide-react";
import { Button } from "@/components/ui/button";
import { usePermissoes } from "@/lib/permissoes-do-usuario";
import { CustomSelect } from "@/components/ui/custom-select";
import { CampoDecimal } from "@/components/ui/campo-decimal";
import { formatMoney } from "@/lib/utils";
import {
  BANK_LOGO_CATALOG,
  resolveBankDisplayName,
  resolveLogoSrc,
} from "@/lib/bank-logos";
import { isCashAccountType, splitLiquidationAccounts } from "@/lib/liquidation-accounts";

function slugifyBankLabel(name: string): string {
  return name
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-+|-+$/g, '')
    .replace(/--+/g, '-');
}

type BankAccount = {
  bank_account_id: string;
  name: string;
  bank_code: string | null;
  bank_name: string | null;
  agency_number: string | null;
  agency_digit: string | null;
  account_number: string | null;
  account_digit: string | null;
  pix_key: string | null;
  logo_key?: string | null;
  type: string | null;
  initial_balance: number;
  flow_balance: number;
  current_balance: number;
  active?: boolean | null;
};

type CriticalPermissions = {
  can_manage_critical: boolean;
  role: string;
};

type BankStyle = {
  id: string;
  match: string[];
  background: string;
  border: string;
  accentBg: string;
  accentText: string;
  text: string;
};

const passthroughLoader = ({ src }: { src: string }) => src;

type BankAccountFormState = {
  name: string;
  bank_name: string;
  bank_code: string;
  agency_number: string;
  agency_digit: string;
  account_number: string;
  account_digit: string;
  pix_key: string;
  type: "corrente" | "poupanca" | "caixa";
  initial_balance: string;
  active: boolean;
};

type CreateIntent = "bank" | "cash";

const DEFAULT_FORM_STATE: BankAccountFormState = {
  name: "",
  bank_name: "",
  bank_code: "",
  agency_number: "",
  agency_digit: "",
  account_number: "",
  account_digit: "",
  pix_key: "",
  type: "corrente",
  initial_balance: "0",
  active: true,
};

const BASE_BANK_OPTIONS = [
  { code: "001", name: "Banco do Brasil" },
  { code: "104", name: "Caixa" },
  { code: "341", name: "Itaú" },
  { code: "237", name: "Bradesco" },
  { code: "033", name: "Santander" },
  { code: "077", name: "Inter" },
  { code: "260", name: "Nubank" },
  { code: "290", name: "PagBank" },
  { code: "336", name: "C6" },
  { code: "323", name: "Mercado Pago" },
  { code: "380", name: "PicPay" },
  { code: "756", name: "Sicoob" },
  { code: "748", name: "Sicredi" },
  { code: "208", name: "BTG" },
];

const BANK_OPTIONS = (() => {
  const base = BASE_BANK_OPTIONS;
  const baseNames = new Set(base.map((bank) => resolveBankDisplayName(bank.name)));
  const catalog = BANK_LOGO_CATALOG.filter((name) => !baseNames.has(resolveBankDisplayName(name))).map(
    (name) => ({
      code: `CAT-${slugifyBankLabel(name)}`,
      name,
    })
  );
  return [...base, ...catalog];
})();

type BankOptionItem = {
  value: string;
  label: string;
  image_url?: string | null;
  name: string;
  code: string;
};

const BANK_OPTION_ITEMS: BankOptionItem[] = (() => {
  const base = BANK_OPTIONS.map((bank) => {
    const displayName = resolveBankDisplayName(bank.name);
    return {
      value: bank.code,
      code: bank.code,
      name: bank.name,
      displayName,
      image_url: resolveLogoSrc(null, bank.code, bank.name),
    };
  });

  const nameCounts = new Map<string, number>();
  base.forEach((bank) => {
    nameCounts.set(bank.displayName, (nameCounts.get(bank.displayName) ?? 0) + 1);
  });

  return base.map((bank) => {
    const duplicate = (nameCounts.get(bank.displayName) ?? 0) > 1;
    let label = bank.displayName;
    if (duplicate) {
      label = bank.code.startsWith("CAT-")
        ? `${bank.displayName} · Catálogo`
        : `${bank.displayName} · ${bank.code}`;
    }
    return {
      value: bank.value,
      label,
      image_url: bank.image_url,
      name: bank.name,
      code: bank.code,
    };
  });
})();

const BANK_OPTION_LOOKUP = new Map(BANK_OPTION_ITEMS.map((option) => [option.value, option]));

const BANK_SELECT_OPTIONS = [
  { value: "", label: "Selecione um banco" },
  ...BANK_OPTION_ITEMS.map((bank) => ({
    value: bank.value,
    label: bank.label,
    image_url: bank.image_url,
  })),
];

const BANK_STYLES: BankStyle[] = [
  {
    id: "banco-do-brasil",
    match: ["banco do brasil", "bb", "001"],
    background: "bg-yellow-50/80",
    border: "border-yellow-200/70",
    accentBg: "bg-yellow-100",
    accentText: "text-yellow-700",
    text: "text-yellow-950",
  },
  {
    id: "caixa",
    match: ["caixa", "104"],
    background: "bg-blue-50/80",
    border: "border-blue-200/70",
    accentBg: "bg-blue-100",
    accentText: "text-blue-700",
    text: "text-blue-950",
  },
  {
    id: "itau",
    match: ["itau", "itaú", "341"],
    background: "bg-orange-50/80",
    border: "border-orange-200/70",
    accentBg: "bg-orange-100",
    accentText: "text-orange-700",
    text: "text-orange-950",
  },
  {
    id: "bradesco",
    match: ["bradesco", "237"],
    background: "bg-red-50/80",
    border: "border-red-200/70",
    accentBg: "bg-red-100",
    accentText: "text-red-700",
    text: "text-red-950",
  },
  {
    id: "santander",
    match: ["santander", "033"],
    background: "bg-rose-50/80",
    border: "border-rose-200/70",
    accentBg: "bg-rose-100",
    accentText: "text-rose-700",
    text: "text-rose-950",
  },
  {
    id: "nubank",
    match: ["nubank", "nu"],
    background: "bg-purple-50/80",
    border: "border-purple-200/70",
    accentBg: "bg-purple-100",
    accentText: "text-purple-700",
    text: "text-purple-950",
  },
  {
    id: "inter",
    match: ["inter", "banco inter", "077"],
    background: "bg-emerald-50/80",
    border: "border-emerald-200/70",
    accentBg: "bg-emerald-100",
    accentText: "text-emerald-700",
    text: "text-emerald-950",
  },
  {
    id: "c6",
    match: ["c6", "c6 bank", "336"],
    background: "bg-amber-50/80",
    border: "border-amber-200/70",
    accentBg: "bg-amber-100",
    accentText: "text-amber-700",
    text: "text-amber-950",
  },
  {
    id: "mercado-pago",
    match: ["mercado pago", "mp", "mercadopago"],
    background: "bg-sky-50/80",
    border: "border-sky-200/70",
    accentBg: "bg-sky-100",
    accentText: "text-sky-700",
    text: "text-sky-950",
  },
  {
    id: "picpay",
    match: ["picpay"],
    background: "bg-teal-50/80",
    border: "border-teal-200/70",
    accentBg: "bg-teal-100",
    accentText: "text-teal-700",
    text: "text-teal-950",
  },
  {
    id: "pagbank",
    match: ["pagbank", "pagseguro", "290"],
    background: "bg-lime-50/80",
    border: "border-lime-200/70",
    accentBg: "bg-lime-100",
    accentText: "text-lime-700",
    text: "text-lime-950",
  },
  {
    id: "sicoob",
    match: ["sicoob", "756"],
    background: "bg-green-50/80",
    border: "border-green-200/70",
    accentBg: "bg-green-100",
    accentText: "text-green-700",
    text: "text-green-950",
  },
  {
    id: "sicredi",
    match: ["sicredi", "sicred", "748"],
    background: "bg-emerald-50/80",
    border: "border-emerald-200/70",
    accentBg: "bg-emerald-100",
    accentText: "text-emerald-700",
    text: "text-emerald-950",
  },
  {
    id: "btg",
    match: ["btg", "btg pactual", "208"],
    background: "bg-indigo-50/80",
    border: "border-indigo-200/70",
    accentBg: "bg-indigo-100",
    accentText: "text-indigo-700",
    text: "text-indigo-950",
  },
];

const FALLBACK_STYLE: BankStyle = {
  id: "default",
  match: [],
  background: "bg-slate-50/80",
  border: "border-slate-200/70",
  accentBg: "bg-slate-100",
  accentText: "text-slate-700",
  text: "text-slate-950",
};

const TYPE_LABELS: Record<string, string> = {
  CONTA_CORRENTE: "Conta Corrente",
  CONTA_POUPANCA: "Conta Poupança",
  CONTA_PAGAMENTO: "Conta Pagamento",
  CAIXA: "Caixa Físico",
  INVESTIMENTO: "Investimento",
  OUTROS: "Outros",
  corrente: "Conta Corrente",
  poupanca: "Conta Poupança",
  caixa: "Caixa Físico",
};

function resolveBankStyle(account: BankAccount) {
  const haystack = `${account.bank_name ?? ""} ${account.bank_code ?? ""}`.toLowerCase();
  return BANK_STYLES.find((style) => style.match.some((key) => haystack.includes(key))) ?? FALLBACK_STYLE;
}

function useCountUp(value: number, duration = 900) {
  const [displayValue, setDisplayValue] = useState(0);

  useEffect(() => {
    let rafId: number;
    const start = performance.now();
    const from = 0;
    const to = value;

    const tick = (now: number) => {
      const progress = Math.min((now - start) / duration, 1);
      setDisplayValue(from + (to - from) * progress);
      if (progress < 1) {
        rafId = requestAnimationFrame(tick);
      }
    };

    rafId = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(rafId);
  }, [value, duration]);

  return displayValue;
}

const cardVariants = {
  hidden: { opacity: 0, y: 16 },
  show: { opacity: 1, y: 0 },
};

function BankAccountCard({
  account,
  onEdit,
  onAdjust,
  onTransfer,
  onDelete,
  onDeactivate,
  isDeactivating,
  isDeleting,
  canManageCritical,
}: {
  account: BankAccount;
  onEdit: (account: BankAccount) => void;
  onAdjust: (account: BankAccount) => void;
  onTransfer: (account: BankAccount) => void;
  onDelete: (account: BankAccount) => void;
  onDeactivate: (account: BankAccount) => void;
  isDeactivating: boolean;
  isDeleting: boolean;
  canManageCritical: boolean;
}) {
  const router = useRouter();
  const style = resolveBankStyle(account);
  const animatedBalance = useCountUp(account.current_balance);
  const isPositive = account.current_balance >= 0;
  const isActive = account.active !== false;
  const isCashAccount = isCashAccountType(account.type);
  const logoSrc = resolveLogoSrc(
    account.logo_key == null ? null : account.logo_key,
    account.bank_code == null ? null : account.bank_code,
    account.bank_name == null ? null : account.bank_name
  );
  const logoIdentity = `${account.bank_account_id}:${logoSrc}`;
  const [logoFailedFor, setLogoFailedFor] = useState<string | null>(null);
  const logoFailed = logoFailedFor === logoIdentity;

  const accountTypeLabel = TYPE_LABELS[account.type ?? ""] ?? account.type?.replace(/_/g, " ") ?? "Conta";
  const footerActionClass =
    "group/action flex min-w-[56px] flex-1 flex-col items-center gap-1.5 rounded-xl px-1 py-2 text-center transition-colors disabled:cursor-not-allowed disabled:opacity-40";
  const iconShellClass =
    "flex h-9 w-9 items-center justify-center rounded-full border border-white/70 bg-[rgba(255,255,255,0.92)] text-current shadow-[0_4px_12px_rgba(15,23,42,0.06)] transition-all group-hover/action:-translate-y-0.5 group-hover/action:border-slate-200";
  const statusToneClass = isActive
    ? "bg-emerald-50 text-emerald-700 border border-emerald-200"
    : "bg-slate-100 text-slate-600 border border-slate-200";
  const balanceToneClass = isPositive
    ? "bg-emerald-50 text-emerald-700 border-emerald-200"
    : "bg-rose-50 text-rose-700 border-rose-200";
  const actionItems = [
    {
      key: "flow",
      label: "Detalhes",
      icon: <ArrowUpRight className="h-4 w-4" />,
      onClick: () => router.push(`/dashboard/financial/cash-flow?bank_account_id=${account.bank_account_id}`),
      disabled: false,
      destructive: false,
      dividerBefore: false,
    },
    {
      key: "add",
      label: "Adicionar",
      icon: <Plus className="h-4 w-4" />,
      onClick: () => router.push("/dashboard/financial/payables"),
      disabled: false,
      destructive: false,
      dividerBefore: false,
    },
    ...(canManageCritical
      ? [
          {
            key: "adjust",
            label: "Ajustar",
            icon: <Scale className="h-4 w-4" />,
            onClick: () => onAdjust(account),
            disabled: false,
            destructive: false,
            dividerBefore: false,
          },
          {
            key: "transfer",
            label: "Transferir",
            icon: <ArrowRightLeft className="h-4 w-4" />,
            onClick: () => onTransfer(account),
            disabled: !isActive,
            destructive: false,
            dividerBefore: false,
          },
          {
            key: "edit",
            label: "Editar",
            icon: <Pencil className="h-4 w-4" />,
            onClick: () => onEdit(account),
            disabled: false,
            destructive: false,
            dividerBefore: false,
          },
          {
            key: "deactivate",
            label: isDeactivating ? "Bloqueando" : "Bloquear",
            icon: <Ban className="h-4 w-4" />,
            onClick: () => onDeactivate(account),
            disabled: !isActive || isDeactivating,
            destructive: false,
            dividerBefore: false,
          },
          {
            key: "delete",
            label: isDeleting ? "Excluindo" : "Excluir",
            icon: <Trash2 className="h-4 w-4" />,
            onClick: () => onDelete(account),
            disabled: isDeleting,
            destructive: true,
            dividerBefore: true,
          },
        ]
      : []),
  ];

  return (
    <motion.div
      variants={cardVariants}
      className={`ks-surface rounded-[24px] border ${style.border} ${style.background} p-5 shadow-[0_12px_32px_rgba(15,23,42,0.04)] transition-transform duration-300 hover:-translate-y-1 flex flex-col h-full gap-4 ${
        isActive ? "" : "opacity-70"
      }`}
    >
      <div className="flex flex-col gap-3">
        {/* Row 1: Logo/Name and Balance */}
        <div className="flex items-start justify-between gap-4 min-w-0">
          <div className="flex items-center gap-3 min-w-0 flex-1">
            <div
              className={`h-12 w-12 rounded-[14px] ${style.accentBg} flex items-center justify-center overflow-hidden flex-shrink-0 ring-1 ring-white/70`}
            >
              {isCashAccount ? (
                <Wallet className={`h-5 w-5 ${style.accentText}`} />
              ) : logoFailed ? (
                <Landmark className={`h-5 w-5 ${style.accentText}`} />
              ) : (
                <Image
                  loader={passthroughLoader}
                  src={logoSrc}
                  alt={account.bank_name ?? "Logo do banco"}
                  width={32}
                  height={32}
                  className="h-7 w-7 object-contain"
                  onError={() => setLogoFailedFor(logoIdentity)}
                />
              )}
            </div>
            <div className="min-w-0 pt-0.5">
              <p className={`m-0 text-base leading-tight font-semibold ${style.text} truncate`}>{account.name}</p>
              <p className="m-0 mt-0.5 text-xs text-[var(--ks-color-text-muted)] truncate">
                {isCashAccount ? "Caixa físico" : account.bank_name ?? "Banco"}
              </p>
            </div>
          </div>
          
          <div className="text-right shrink-0">
            <p className="m-0 text-[9px] font-semibold uppercase tracking-[0.15em] text-[var(--ks-color-text-muted)]">Saldo atual</p>
            <p className={`m-0 mt-1 text-2xl leading-none font-bold ${style.text}`}>
              {formatMoney(animatedBalance)}
            </p>
          </div>
        </div>

        {/* Row 2: Badges and Status */}
        <div className="flex items-center justify-between gap-3">
          <div className="flex flex-wrap items-center gap-1.5">
            <span
              className={`inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-semibold ${style.accentBg} ${style.accentText} whitespace-nowrap`}
            >
              {accountTypeLabel}
            </span>
            <span
              className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-semibold whitespace-nowrap ${statusToneClass}`}
            >
              <span className={`h-1.5 w-1.5 rounded-full ${isActive ? "bg-emerald-500" : "bg-slate-400"}`} />
              {isActive ? "Ativa" : "Inativa"}
            </span>
          </div>

          <span
            className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-semibold ${balanceToneClass}`}
          >
            {isPositive ? <ArrowUpRight className="h-3 w-3" /> : null}
            {isPositive ? "Saldo positivo" : "Saldo negativo"}
            {!isPositive ? <TriangleAlert className="h-3 w-3" /> : null}
          </span>
        </div>
      </div>

      <div className="mt-auto pt-2">
        <div className="rounded-2xl border border-slate-200/80 bg-[rgba(255,255,255,0.78)] p-2 shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]">
          <div className="flex items-stretch justify-between gap-0 overflow-hidden">
            {actionItems.map((action) => (
              <div
                key={action.key}
                className={`flex flex-1 ${action.dividerBefore ? "border-l border-slate-200/90 pl-1 ml-0.5" : ""}`}
              >
                <button
                  type="button"
                  onClick={action.onClick}
                  disabled={action.disabled}
                  aria-label={action.label}
                  className={`${footerActionClass} ${
                    action.destructive
                      ? "text-rose-500 hover:text-rose-600"
                      : `${style.accentText} hover:text-[var(--ks-color-text-primary)]`
                  }`}
                >
                  <span
                    className={`${iconShellClass} ${
                      action.destructive
                        ? "border-rose-100 bg-rose-50 text-rose-500 group-hover/action:border-rose-200 group-hover/action:bg-rose-100"
                        : `${style.accentBg}`
                    }`}
                  >
                    {action.icon}
                  </span>
                  <span className="text-[10px] font-medium leading-tight tracking-tight px-0.5">{action.label}</span>
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </motion.div>
  );
}

export default function BankAccountsPageClient() {
  const { pode } = usePermissoes();
  const podeLancar = pode("financial.bank.write");

  const [accounts, setAccounts] = useState<BankAccount[]>([]);
  const [permissions, setPermissions] = useState<CriticalPermissions>({
    can_manage_critical: false,
    role: "viewer",
  });
  const [createIntent, setCreateIntent] = useState<CreateIntent>("bank");
  const [loading, setLoading] = useState(true);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [formError, setFormError] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingAccount, setEditingAccount] = useState<BankAccount | null>(null);
  const [adjustingAccount, setAdjustingAccount] = useState<BankAccount | null>(null);
  const [transferringAccount, setTransferringAccount] = useState<BankAccount | null>(null);
  const [deletingAccount, setDeletingAccount] = useState<BankAccount | null>(null);
  const [deleteDependencies, setDeleteDependencies] = useState<{ total: number; blockers: string[] } | null>(null);
  const [hardDeleteMode, setHardDeleteMode] = useState<"migrate" | "exterminate" | null>(null);
  const [hardDeleteTargetId, setHardDeleteTargetId] = useState<string>("");
  const [hardDeleteConfirmName, setHardDeleteConfirmName] = useState<string>("");
  const [adjustForm, setAdjustForm] = useState({
    target_balance: "",
    reason: "",
    date: new Date().toISOString().slice(0, 10),
  });
  const [transferForm, setTransferForm] = useState({
    destination_bank_account_id: "",
    amount: "",
    reason: "",
    date: new Date().toISOString().slice(0, 10),
  });
  const [form, setForm] = useState<BankAccountFormState>(DEFAULT_FORM_STATE);
  const [actionState, setActionState] = useState<{ id: string; type: "deactivate" | "delete" | "adjust" | "transfer" | null }>({
    id: "",
    type: null,
  });

  const loadAccounts = useCallback(async () => {
    setLoading(true);
    setErrorMessage(null);
    try {
      const response = await fetch("/api/bank-accounts");
      const payload = await response.json();
      if (!response.ok) {
        throw new Error(payload?.error ?? "Falha ao carregar contas bancárias.");
      }
      setAccounts(payload?.accounts ?? []);
      setPermissions(
        payload?.permissions ?? {
          can_manage_critical: false,
          role: "viewer",
        }
      );
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Falha ao carregar contas bancárias.");
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    loadAccounts();
  }, [loadAccounts]);

  const openCreate = useCallback((intent: CreateIntent) => {
    setEditingAccount(null);
    setCreateIntent(intent);
    setForm({
      ...DEFAULT_FORM_STATE,
      type: intent === "cash" ? "caixa" : "corrente",
      name: intent === "cash" ? "Caixa físico" : "",
    });
    setFormError(null);
    setIsModalOpen(true);
  }, []);

  const openEdit = useCallback((account: BankAccount) => {
    setEditingAccount(account);
    setCreateIntent(isCashAccountType(account.type) ? "cash" : "bank");
    setForm({
      name: account.name ?? "",
      bank_name: account.bank_name ?? "",
      bank_code: account.bank_code ?? "",
      agency_number: account.agency_number ?? "",
      agency_digit: account.agency_digit ?? "",
      account_number: account.account_number ?? "",
      account_digit: account.account_digit ?? "",
      pix_key: account.pix_key ?? "",
      type: (isCashAccountType(account.type)
        ? "caixa"
        : account.type === "CONTA_POUPANCA" || account.type === "poupanca"
        ? "poupanca"
        : "corrente") as BankAccountFormState["type"],
      initial_balance: String(account.current_balance ?? 0),
      active: account.active !== false,
    });
    setFormError(null);
    setIsModalOpen(true);
  }, []);

  const closeModal = useCallback(() => {
    if (saving) return;
    setIsModalOpen(false);
  }, [saving]);

  const openAdjust = useCallback((account: BankAccount) => {
    setAdjustingAccount(account);
    setAdjustForm({
      target_balance: String(account.current_balance ?? 0),
      reason: "",
      date: new Date().toISOString().slice(0, 10),
    });
    setFormError(null);
  }, []);

  const closeAdjust = useCallback(() => {
    if (saving) return;
    setAdjustingAccount(null);
  }, [saving]);

  const openTransfer = useCallback((account: BankAccount) => {
    setTransferringAccount(account);
    setTransferForm({
      destination_bank_account_id: "",
      amount: "",
      reason: "",
      date: new Date().toISOString().slice(0, 10),
    });
    setFormError(null);
    setErrorMessage(null);
  }, []);

  const closeTransfer = useCallback(() => {
    if (saving) return;
    setTransferringAccount(null);
  }, [saving]);

  const openDelete = useCallback((account: BankAccount) => {
    setDeletingAccount(account);
    setFormError(null);
    setErrorMessage(null);
  }, []);

  const closeDelete = useCallback(() => {
    if (saving) return;
    setDeletingAccount(null);
    setDeleteDependencies(null);
    setHardDeleteMode(null);
    setHardDeleteTargetId("");
    setHardDeleteConfirmName("");
    setFormError(null);
  }, [saving]);

  const handleSave = useCallback(
    async (event: FormEvent<HTMLFormElement>) => {
      event.preventDefault();
      setFormError(null);

      const name = form.name.trim();
      const bankName = form.bank_name.trim();
      const bankCode = form.bank_code.trim();
      const agencyNumber = form.agency_number.trim();
      const accountNumber = form.account_number.trim();
      const initialBalance = Number(form.initial_balance);
      const requiresBankFields = !isCashAccountType(form.type);

      if (!name) {
        setFormError("Nome da conta é obrigatório.");
        return;
      }

      if (requiresBankFields && (!bankCode || !bankName)) {
        setFormError("Banco é obrigatório.");
        return;
      }

      if (requiresBankFields && !agencyNumber) {
        setFormError("Agência é obrigatória.");
        return;
      }

      if (requiresBankFields && !accountNumber) {
        setFormError("Conta é obrigatória.");
        return;
      }

      if (!Number.isFinite(initialBalance)) {
        setFormError("Saldo inicial inválido.");
        return;
      }

      setSaving(true);
      try {
        const payload = {
          name,
          type: form.type,
          active: form.active,
          ...(requiresBankFields
            ? {
                bank_name: bankName,
                bank_code: bankCode,
                agency_number: agencyNumber,
                agency_digit: form.agency_digit.trim() || null,
                account_number: accountNumber,
                account_digit: form.account_digit.trim() || null,
                pix_key: form.pix_key.trim() || null,
              }
            : {}),
          ...(editingAccount ? {} : { initial_balance: initialBalance }),
        };

        const response = await fetch("/api/bank-accounts", {
          method: editingAccount ? "PATCH" : "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(
            editingAccount
              ? { id: editingAccount.bank_account_id, patch: payload }
              : payload
          ),
        });

        const result = await response.json();
        if (!response.ok) {
          throw new Error(result?.error ?? "Falha ao salvar conta bancária.");
        }

        setIsModalOpen(false);
        await loadAccounts();
      } catch (error) {
        setFormError(error instanceof Error ? error.message : "Falha ao salvar conta bancária.");
      } finally {
        setSaving(false);
      }
    },
    [editingAccount, form, loadAccounts]
  );

  const handleAdjustBalance = useCallback(
    async (event: FormEvent<HTMLFormElement>) => {
      event.preventDefault();
      if (!adjustingAccount) return;
      setFormError(null);

      const targetBalance = Number(adjustForm.target_balance);
      if (!Number.isFinite(targetBalance)) {
        setFormError("Saldo alvo inválido.");
        return;
      }
      if (!adjustForm.reason.trim()) {
        setFormError("Informe o motivo do ajuste.");
        return;
      }

      setSaving(true);
      setActionState({ id: adjustingAccount.bank_account_id, type: "adjust" });
      try {
        const response = await fetch(`/api/bank-accounts/${adjustingAccount.bank_account_id}/adjust-balance`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            target_balance: targetBalance,
            reason: adjustForm.reason.trim(),
            date: adjustForm.date,
          }),
        });
        const payload = await response.json();
        if (!response.ok) {
          throw new Error(payload?.error ?? "Falha ao ajustar saldo.");
        }
        setAdjustingAccount(null);
        await loadAccounts();
      } catch (error) {
        setFormError(error instanceof Error ? error.message : "Falha ao ajustar saldo.");
      } finally {
        setSaving(false);
        setActionState({ id: "", type: null });
      }
    },
    [adjustForm, adjustingAccount, loadAccounts]
  );

  const handleDeactivate = useCallback(
    async (account: BankAccount) => {
      if (account.active === false) return;
      setActionState({ id: account.bank_account_id, type: "deactivate" });
      try {
        const response = await fetch("/api/bank-accounts", {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ id: account.bank_account_id, patch: { active: false } }),
        });
        const payload = await response.json();
        if (!response.ok) {
          throw new Error(payload?.error ?? "Falha ao desativar conta bancária.");
        }
        await loadAccounts();
      } catch (error) {
        setErrorMessage(error instanceof Error ? error.message : "Falha ao desativar conta bancária.");
      } finally {
        setActionState({ id: "", type: null });
      }
    },
    [loadAccounts]
  );

  const handleDelete = useCallback(async () => {
    if (!deletingAccount) return;
    setActionState({ id: deletingAccount.bank_account_id, type: "delete" });
    setFormError(null);
    setErrorMessage(null);
    try {
      const response = await fetch(`/api/bank-accounts?id=${encodeURIComponent(deletingAccount.bank_account_id)}`, {
        method: "DELETE",
      });
      const payload = await response.json().catch(() => null);
      if (!response.ok) {
        if (response.status === 409 && payload?.dependencies?.total > 0) {
          setDeleteDependencies(payload.dependencies);
          setActionState({ id: "", type: null });
          return;
        }
        const dependencyText = Array.isArray(payload?.dependencies?.blockers)
          ? ` ${payload.dependencies.blockers.join(" · ")}`
          : "";
        throw new Error(`${payload?.error ?? "Falha ao excluir conta bancária."}${dependencyText}`);
      }
      closeDelete();
      await loadAccounts();
    } catch (error) {
      setFormError(error instanceof Error ? error.message : "Falha ao excluir conta bancária.");
    } finally {
      setActionState({ id: "", type: null });
    }
  }, [deletingAccount, loadAccounts, closeDelete]);

  const handleHardDelete = useCallback(async () => {
    if (!deletingAccount || !hardDeleteMode) return;
    if (hardDeleteMode === "exterminate" && hardDeleteConfirmName !== deletingAccount.name) {
      setFormError("Nome da conta incorreto para confirmação.");
      return;
    }
    if (hardDeleteMode === "migrate" && !hardDeleteTargetId) {
      setFormError("Selecione uma conta de destino para migrar os vínculos.");
      return;
    }

    setActionState({ id: deletingAccount.bank_account_id, type: "delete" });
    setFormError(null);
    setSaving(true);
    try {
      const params = new URLSearchParams({
        id: deletingAccount.bank_account_id,
        force_mode: hardDeleteMode,
      });
      if (hardDeleteMode === "migrate") {
        params.set("target_id", hardDeleteTargetId);
      }
      
      const response = await fetch(`/api/bank-accounts?${params.toString()}`, {
        method: "DELETE",
      });
      const payload = await response.json().catch(() => null);
      
      if (!response.ok) {
        throw new Error(payload?.error ?? "Falha ao executar exclusão forçada.");
      }
      closeDelete();
      await loadAccounts();
    } catch (error) {
      setFormError(error instanceof Error ? error.message : "Falha ao excluir conta bancária.");
    } finally {
      setSaving(false);
      setActionState({ id: "", type: null });
    }
  }, [deletingAccount, hardDeleteMode, hardDeleteTargetId, hardDeleteConfirmName, loadAccounts, closeDelete]);

  const handleTransfer = useCallback(
    async (event: FormEvent<HTMLFormElement>) => {
      event.preventDefault();
      if (!transferringAccount) return;
      setFormError(null);

      const amount = Number(transferForm.amount);
      if (!transferForm.destination_bank_account_id) {
        setFormError("Selecione a conta de destino.");
        return;
      }
      if (!Number.isFinite(amount) || amount <= 0) {
        setFormError("Valor da transferência inválido.");
        return;
      }
      if (!transferForm.reason.trim()) {
        setFormError("Informe o motivo da transferência.");
        return;
      }

      setSaving(true);
      setActionState({ id: transferringAccount.bank_account_id, type: "transfer" });
      try {
        const response = await fetch("/api/bank-accounts/transfer", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            source_bank_account_id: transferringAccount.bank_account_id,
            destination_bank_account_id: transferForm.destination_bank_account_id,
            amount,
            reason: transferForm.reason.trim(),
            date: transferForm.date,
          }),
        });
        const payload = await response.json();
        if (!response.ok) {
          throw new Error(payload?.error ?? "Falha ao registrar transferência.");
        }
        setTransferringAccount(null);
        await loadAccounts();
      } catch (error) {
        setFormError(error instanceof Error ? error.message : "Falha ao registrar transferência.");
      } finally {
        setSaving(false);
        setActionState({ id: "", type: null });
      }
    },
    [loadAccounts, transferForm, transferringAccount]
  );

  /* Destino: qualquer outra conta ativa (banco ou caixa físico), bancos primeiro. */
  const transferDestinationOptions = useMemo(() => {
    const { cashAccounts: caixas, bankAccounts: bancos } = splitLiquidationAccounts(accounts.filter((account) => account.active !== false));
    return [
      { value: "", label: "Selecione a conta de destino" },
      ...[...bancos, ...caixas]
        .filter((account) => account.bank_account_id !== transferringAccount?.bank_account_id)
        .map((account) => ({
          value: account.bank_account_id,
          label: isCashAccountType(account.type)
            ? `${account.name || "Caixa físico"} (caixa físico)`
            : account.name || account.bank_name || "Conta bancária",
        })),
    ];
  }, [accounts, transferringAccount]);
  const cashAccounts = useMemo(
    () => accounts.filter((account) => isCashAccountType(account.type)),
    [accounts]
  );
  const bankAccounts = useMemo(
    () => accounts.filter((account) => !isCashAccountType(account.type)),
    [accounts]
  );
  const isCashForm = isCashAccountType(form.type);
  const modalTitle = editingAccount
    ? isCashForm
      ? "Editar Caixa Físico"
      : "Editar Conta Bancária"
    : createIntent === "cash"
      ? "Cadastrar Caixa Físico"
      : "Cadastrar Conta Bancária";
  const saveLabel = editingAccount
    ? isCashForm
      ? "Salvar caixa"
      : "Salvar conta bancária"
    : createIntent === "cash"
      ? "Criar caixa físico"
      : "Criar conta bancária";

  const containerVariants = {
    hidden: {},
    show: {
      transition: { staggerChildren: 0.08 },
    },
  };

  return (
    <div className="space-y-8">
      <div className="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
        <div className="min-w-0 flex-1">
          <h1 className="text-[28px] font-semibold leading-none tracking-[-0.04em] text-[var(--ks-color-text-primary)]">
            Contas Bancárias
          </h1>
          <div className="mt-2 flex flex-wrap items-center gap-x-3 text-sm text-[var(--ks-color-text-secondary)]">
            <span>{cashAccounts.length} caixas físicos</span>
            <span className="text-[var(--ks-color-text-muted)]">•</span>
            <span>{bankAccounts.length} contas bancárias</span>
          </div>
        </div>
        <div className="flex flex-wrap items-center gap-3">
          {permissions.can_manage_critical ? (
            <>
              <Button
                size="sm"
                icon={<Plus className="w-4 h-4" />}
                type="button"
                onClick={() => openCreate("cash")}
                variant="secondary"
              >
                Novo Caixa Físico
              </Button>
              <Button
                size="sm"
                icon={<Plus className="w-4 h-4" />}
                type="button"
                onClick={() => openCreate("bank")}
              >
                Nova Conta Bancária
              </Button>
            </>
          ) : null}
        </div>
      </div>

      {!permissions.can_manage_critical ? (
        <div className="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
          Somente administradores podem cadastrar, editar, ajustar saldo, desativar ou excluir contas de liquidação.
        </div>
      ) : null}

      {loading ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {Array.from({ length: 8 }).map((_, index) => (
            <div key={index} className="ks-surface p-6 rounded-3xl animate-pulse">
              <div className="h-6 bg-gray-200 rounded mb-4" />
              <div className="h-10 bg-gray-200 rounded mb-6" />
              <div className="h-4 bg-gray-200 rounded" />
            </div>
          ))}
        </div>
      ) : errorMessage ? (
        <div className="ks-surface p-8 rounded-2xl text-center">
          <p className="text-[var(--ks-color-text-primary)] font-semibold">Não foi possível carregar as contas.</p>
          <p className="text-sm text-[var(--ks-color-text-muted)] mt-2">{errorMessage}</p>
        </div>
      ) : accounts.length === 0 ? (
        <div className="ks-surface p-8 rounded-2xl text-center">
          <p className="text-[var(--ks-color-text-primary)] font-semibold">Nenhuma conta de liquidação encontrada.</p>
          <p className="text-sm text-[var(--ks-color-text-muted)] mt-2">
            Cadastre um caixa físico ou uma conta bancária para acompanhar os saldos em tempo real.
          </p>
        </div>
      ) : (
        <div className="space-y-10">
          {cashAccounts.length > 0 ? (
            <section className="space-y-4">
              <div className="flex items-center justify-between pb-3 border-b border-[var(--ks-color-border-subtle)]">
                <h2 className="text-lg font-medium text-[var(--ks-color-text-primary)]">Caixas Físicos</h2>
                <span className="text-sm text-[var(--ks-color-text-muted)]">
                  {cashAccounts.length}
                </span>
              </div>
              <motion.div
                variants={containerVariants}
                initial="hidden"
                animate="show"
                className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 gap-6 items-start"
              >
                {cashAccounts.map((account) => (
                  <BankAccountCard
                    key={`${account.bank_account_id}-${account.bank_code ?? ""}`}
                    account={account}
                    onEdit={openEdit}
                    onAdjust={openAdjust}
                    onTransfer={openTransfer}
                    onDelete={openDelete}
                    onDeactivate={handleDeactivate}
                    isDeactivating={actionState.type === "deactivate" && actionState.id === account.bank_account_id}
                    isDeleting={actionState.type === "delete" && actionState.id === account.bank_account_id}
                    canManageCritical={permissions.can_manage_critical}
                  />
                ))}
              </motion.div>
            </section>
          ) : null}
          {bankAccounts.length > 0 ? (
            <section className="space-y-4">
              <div className="flex items-center justify-between pb-3 border-b border-[var(--ks-color-border-subtle)]">
                <h2 className="text-lg font-medium text-[var(--ks-color-text-primary)]">Contas Bancárias</h2>
                <span className="text-sm text-[var(--ks-color-text-muted)]">
                  {bankAccounts.length}
                </span>
              </div>
              <motion.div
                variants={containerVariants}
                initial="hidden"
                animate="show"
                className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 gap-6 items-start"
              >
                {bankAccounts.map((account) => (
                  <BankAccountCard
                    key={`${account.bank_account_id}-${account.bank_code ?? ""}`}
                    account={account}
                    onEdit={openEdit}
                    onAdjust={openAdjust}
                    onTransfer={openTransfer}
                    onDelete={openDelete}
                    onDeactivate={handleDeactivate}
                    isDeactivating={actionState.type === "deactivate" && actionState.id === account.bank_account_id}
                    isDeleting={actionState.type === "delete" && actionState.id === account.bank_account_id}
                    canManageCritical={permissions.can_manage_critical}
                  />
                ))}
              </motion.div>
            </section>
          ) : null}
        </div>
      )}

      <AnimatePresence>
        {adjustingAccount ? (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-[130] flex items-start justify-center bg-black/40 backdrop-blur-sm px-4 py-10 overflow-y-auto"
            onClick={closeAdjust}
          >
            <motion.div
              initial={{ opacity: 0, y: 10, scale: 0.98 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: 10, scale: 0.98 }}
              transition={{ duration: 0.12 }}
              className="w-full max-w-lg bg-[var(--ks-color-bg-elevated)] rounded-[var(--ks-radius-lg)] shadow-[var(--ks-shadow-soft)] overflow-hidden border border-[var(--ks-color-border-subtle)]"
              onClick={(event) => event.stopPropagation()}
            >
              <div className="flex items-center justify-between p-6 border-b border-[rgba(225,228,240,0.9)] bg-[rgba(244,247,254,0.5)]">
                <h2 className="text-lg font-semibold text-[var(--ks-color-text-primary)]">Ajustar saldo com auditoria</h2>
                <button
                  type="button"
                  onClick={closeAdjust}
                  className="rounded-full p-2 text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-primary)] hover:bg-[rgba(244, 247, 254,0.9)] transition-colors"
                  disabled={saving}
                >
                  ✕
                </button>
              </div>
              <form onSubmit={handleAdjustBalance} className="p-6 space-y-5">
                {formError ? (
                  <div className="px-3 py-2.5 rounded-xl text-sm bg-red-50 text-red-700 border border-red-100">
                    {formError}
                  </div>
                ) : null}
                <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">
                  <div className="flex items-center justify-between gap-3">
                    <span>Saldo atual</span>
                    <strong className="text-slate-950">{formatMoney(adjustingAccount.current_balance)}</strong>
                  </div>
                </div>
                <div className="space-y-2">
                  <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                    Novo saldo real
                  </label>
                  <input
                    type="number"
                    step="0.01"
                    value={adjustForm.target_balance}
                    onChange={(event) => setAdjustForm((prev) => ({ ...prev, target_balance: event.target.value }))}
                    className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                  />
                </div>
                <div className="space-y-2">
                  <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                    Data do ajuste
                  </label>
                  <input
                    type="date"
                    value={adjustForm.date}
                    onChange={(event) => setAdjustForm((prev) => ({ ...prev, date: event.target.value }))}
                    className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                  />
                </div>
                <div className="space-y-2">
                  <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                    Motivo obrigatório
                  </label>
                  <textarea
                    value={adjustForm.reason}
                    onChange={(event) => setAdjustForm((prev) => ({ ...prev, reason: event.target.value }))}
                    className="min-h-[96px] w-full resize-none px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                    placeholder="Explique por que o saldo foi corrigido."
                  />
                </div>
                <div className="flex items-center justify-end gap-3">
                  <button
                    type="button"
                    onClick={closeAdjust}
                    className="px-5 py-3 text-sm font-medium text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-primary)] rounded-xl hover:bg-[rgba(244, 247, 254,0.9)] transition-colors"
                    disabled={saving}
                  >
                    Cancelar
                  </button>
                  <button
                    type="submit"
                    disabled={saving}
                    className="px-5 py-3 text-sm font-medium text-white bg-[var(--ks-color-primary)] hover:bg-[var(--ks-color-primary-strong)] rounded-xl transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
                  >
                    {saving ? "Registrando..." : "Registrar ajuste"}
                  </button>
                </div>
              </form>
            </motion.div>
          </motion.div>
        ) : null}

        {transferringAccount ? (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-[130] flex items-start justify-center bg-black/40 backdrop-blur-sm px-4 py-10 overflow-y-auto"
            onClick={closeTransfer}
          >
            <motion.div
              initial={{ opacity: 0, y: 10, scale: 0.98 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: 10, scale: 0.98 }}
              transition={{ duration: 0.12 }}
              className="w-full max-w-lg bg-[var(--ks-color-bg-elevated)] rounded-[var(--ks-radius-lg)] shadow-[var(--ks-shadow-soft)] overflow-hidden border border-[var(--ks-color-border-subtle)]"
              onClick={(event) => event.stopPropagation()}
            >
              <div className="flex items-center justify-between p-6 border-b border-[rgba(225,228,240,0.9)] bg-[rgba(244,247,254,0.5)]">
                <div>
                  <h2 className="text-lg font-semibold text-[var(--ks-color-text-primary)]">Transferir entre contas</h2>
                  <p className="text-sm text-[var(--ks-color-text-muted)]">
                    Registra a saída nesta conta e a entrada na conta de destino, com histórico nas duas.
                  </p>
                </div>
                <button
                  type="button"
                  onClick={closeTransfer}
                  className="rounded-full p-2 text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-primary)] hover:bg-[rgba(244, 247, 254,0.9)] transition-colors"
                  disabled={saving}
                >
                  ✕
                </button>
              </div>
              <form onSubmit={handleTransfer} className="p-6 space-y-5">
                {formError ? (
                  <div className="px-3 py-2.5 rounded-xl text-sm bg-red-50 text-red-700 border border-red-100">
                    {formError}
                  </div>
                ) : null}
                <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 space-y-2">
                  <div className="flex items-center justify-between gap-3">
                    <span>Conta de origem</span>
                    <strong className="text-slate-950">{transferringAccount.name}</strong>
                  </div>
                  <div className="flex items-center justify-between gap-3">
                    <span>Saldo disponível</span>
                    <strong className="text-slate-950">{formatMoney(transferringAccount.current_balance)}</strong>
                  </div>
                </div>
                <div className="space-y-2">
                  <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                    Conta de destino
                  </label>
                  <CustomSelect
                    value={transferForm.destination_bank_account_id}
                    onChange={(value) => setTransferForm((prev) => ({ ...prev, destination_bank_account_id: value }))}
                    options={transferDestinationOptions}
                    className="w-full"
                  />
                </div>
                <div className="space-y-2">
                  <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                    Valor transferido
                  </label>
                  <CampoDecimal
                    valor={transferForm.amount === "" ? null : Number(transferForm.amount)}
                    aoMudar={(valor) => setTransferForm((prev) => ({ ...prev, amount: String(valor) }))}
                    zeroVazio
                    className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                    placeholder="0,00"
                  />
                </div>
                <div className="space-y-2">
                  <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                    Data da transferência
                  </label>
                  <input
                    type="date"
                    value={transferForm.date}
                    onChange={(event) => setTransferForm((prev) => ({ ...prev, date: event.target.value }))}
                    className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                  />
                </div>
                <div className="space-y-2">
                  <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                    Motivo obrigatório
                  </label>
                  <textarea
                    value={transferForm.reason}
                    onChange={(event) => setTransferForm((prev) => ({ ...prev, reason: event.target.value }))}
                    className="min-h-[96px] w-full resize-none px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                    placeholder="Ex: pagamento da fatura do cartão pela conta principal."
                  />
                </div>
                {transferDestinationOptions.length <= 1 ? (
                  <div className="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
                    Nenhuma outra conta ativa para receber a transferência.
                  </div>
                ) : null}
                <div className="flex items-center justify-end gap-3">
                  <button
                    type="button"
                    onClick={closeTransfer}
                    className="px-5 py-3 text-sm font-medium text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-primary)] rounded-xl hover:bg-[rgba(244, 247, 254,0.9)] transition-colors"
                    disabled={saving}
                  >
                    Cancelar
                  </button>
                  <button
                    type="submit"
                    disabled={saving || transferDestinationOptions.length <= 1}
                    className="px-5 py-3 text-sm font-medium text-white bg-[var(--ks-color-primary)] hover:bg-[var(--ks-color-primary-strong)] rounded-xl transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
                  >
                    {saving ? "Transferindo..." : "Registrar transferência"}
                  </button>
                </div>
              </form>
            </motion.div>
          </motion.div>
        ) : null}

        {deletingAccount ? (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-[130] flex items-start justify-center bg-black/40 backdrop-blur-sm px-4 py-10 overflow-y-auto"
            onClick={closeDelete}
          >
            <motion.div
              initial={{ opacity: 0, y: 10, scale: 0.98 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: 10, scale: 0.98 }}
              transition={{ duration: 0.12 }}
              className="w-full max-w-lg bg-[var(--ks-color-bg-elevated)] rounded-[var(--ks-radius-lg)] shadow-[var(--ks-shadow-soft)] overflow-hidden border border-[var(--ks-color-border-subtle)]"
              onClick={(event) => event.stopPropagation()}
            >
              {deleteDependencies ? (
                <>
                  <div className="p-6 border-b border-[rgba(225,228,240,0.9)] bg-rose-50/70">
                    <h2 className="text-lg font-bold text-rose-700">Ação irreversível necessária</h2>
                    <p className="mt-1 text-sm text-rose-700/90 font-medium">
                      Esta conta possui vínculos operacionais. Para excluí-la, você precisa decidir o que fazer com os registros.
                    </p>
                  </div>
                  <div className="p-6 space-y-6">
                    {formError ? (
                      <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800 font-medium">
                        {formError}
                      </div>
                    ) : null}

                    <div className="rounded-2xl border border-rose-200 bg-white p-4">
                      <p className="text-sm font-semibold text-slate-800 mb-2">Vínculos detectados ({deleteDependencies.total}):</p>
                      <ul className="list-disc pl-5 text-sm text-slate-600 space-y-1">
                        {deleteDependencies.blockers?.map((b: string) => (
                          <li key={b}>{b}</li>
                        ))}
                      </ul>
                    </div>

                    <div className="space-y-3">
                      <label className="flex items-start gap-3 p-4 rounded-xl border border-slate-200 hover:bg-slate-50 cursor-pointer transition-colors">
                        <input
                          type="radio"
                          name="hardDeleteMode"
                          className="mt-1"
                          checked={hardDeleteMode === "migrate"}
                          onChange={() => setHardDeleteMode("migrate")}
                        />
                        <div>
                          <p className="font-semibold text-slate-800">Transferir vínculos para outra conta</p>
                          <p className="text-xs text-slate-500 mt-1">Mantém a integridade do DRE. Os registros antigos passarão a apontar para a conta selecionada abaixo.</p>
                          {hardDeleteMode === "migrate" && (
                            <select
                              value={hardDeleteTargetId}
                              onChange={(e) => setHardDeleteTargetId(e.target.value)}
                              className="mt-3 block w-full rounded-xl border-0 py-2.5 pl-3 pr-10 text-[var(--ks-color-text-primary)] shadow-sm ring-1 ring-inset ring-[var(--ks-color-border-subtle)] focus:ring-2 focus:ring-inset focus:ring-[var(--ks-color-primary)] sm:text-sm sm:leading-6 bg-white"
                            >
                              {transferDestinationOptions.filter(o => o.value !== deletingAccount.bank_account_id).map((opt) => (
                                <option key={opt.value} value={opt.value}>
                                  {opt.label}
                                </option>
                              ))}
                            </select>
                          )}
                        </div>
                      </label>

                      <label className="flex items-start gap-3 p-4 rounded-xl border border-rose-200 bg-rose-50/50 hover:bg-rose-50 cursor-pointer transition-colors">
                        <input
                          type="radio"
                          name="hardDeleteMode"
                          className="mt-1"
                          checked={hardDeleteMode === "exterminate"}
                          onChange={() => setHardDeleteMode("exterminate")}
                        />
                        <div className="flex-1">
                          <p className="font-bold text-rose-700">Exterminar todo o histórico</p>
                          <p className="text-xs text-rose-700/80 mt-1">Apaga permanentemente a conta e todos os pagamentos e registros de caixa associados. Destrói o DRE e não tem volta.</p>
                          {hardDeleteMode === "exterminate" && (
                            <div className="mt-3">
                              <label className="block text-xs font-semibold text-rose-700 mb-1">Digite o nome da conta para confirmar:</label>
                              <input
                                type="text"
                                placeholder={deletingAccount.name ?? ""}
                                value={hardDeleteConfirmName}
                                onChange={(e) => setHardDeleteConfirmName(e.target.value)}
                                className="block w-full rounded-xl border-0 py-2 text-rose-900 shadow-sm ring-1 ring-inset ring-rose-300 placeholder:text-rose-300 focus:ring-2 focus:ring-inset focus:ring-rose-500 sm:text-sm sm:leading-6 bg-white"
                              />
                            </div>
                          )}
                        </div>
                      </label>
                    </div>

                    <div className="flex items-center justify-end gap-3 pt-2">
                      <button
                        type="button"
                        onClick={closeDelete}
                        className="px-5 py-3 text-sm font-medium text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-primary)] rounded-xl hover:bg-slate-100 transition-colors"
                        disabled={saving}
                      >
                        Cancelar
                      </button>
                      <button
                        type="button"
                        onClick={handleHardDelete}
                        disabled={!hardDeleteMode || saving}
                        className="px-5 py-3 text-sm font-bold text-white bg-rose-600 hover:bg-rose-700 rounded-xl transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
                      >
                        {saving ? "Processando..." : "Confirmar exclusão"}
                      </button>
                    </div>
                  </div>
                </>
              ) : (
                <>
                  <div className="p-6 border-b border-[rgba(225,228,240,0.9)] bg-rose-50/70">
                    <h2 className="text-lg font-semibold text-rose-700">Excluir conta de liquidação</h2>
                    <p className="mt-1 text-sm text-rose-700/80">
                      A exclusão física só será direta se a conta não tiver histórico.
                    </p>
                  </div>
                  <div className="p-6 space-y-5">
                    {formError ? (
                      <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">
                        {formError}
                      </div>
                    ) : null}
                    <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">
                      Conta selecionada: <strong>{deletingAccount.name}</strong>
                    </div>
                    <div className="flex items-center justify-end gap-3">
                      <button
                        type="button"
                        onClick={closeDelete}
                        className="px-5 py-3 text-sm font-medium text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-primary)] rounded-xl hover:bg-[rgba(244, 247, 254,0.9)] transition-colors"
                        disabled={actionState.type === "delete"}
                      >
                        Cancelar
                      </button>
                      {podeLancar && (<button
                        type="button"
                        onClick={handleDelete}
                        disabled={actionState.type === "delete"}
                        className="px-5 py-3 text-sm font-medium text-white bg-rose-600 hover:bg-rose-700 rounded-xl transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
                      >
                        {actionState.type === "delete" ? "Validando..." : "Excluir"}
                      </button>)}
                    </div>
                  </div>
                </>
              )}
            </motion.div>
          </motion.div>
        ) : null}

        {isModalOpen ? (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-[120] flex items-start justify-center bg-black/40 backdrop-blur-sm px-4 py-10 overflow-y-auto"
            onClick={closeModal}
          >
            <motion.div
              initial={{ opacity: 0, y: 10, scale: 0.98 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: 10, scale: 0.98 }}
              transition={{ duration: 0.12 }}
              className="w-full max-w-xl bg-[var(--ks-color-bg-elevated)] rounded-[var(--ks-radius-lg)] shadow-[var(--ks-shadow-soft)] overflow-hidden border border-[var(--ks-color-border-subtle)] flex flex-col"
              onClick={(event) => event.stopPropagation()}
            >
              <div className="flex items-center justify-between p-6 border-b border-[rgba(225,228,240,0.9)] bg-[rgba(244, 247, 254,0.5)]">
                <h2 className="text-lg font-semibold text-[var(--ks-color-text-primary)]">
                  {modalTitle}
                </h2>
                <button
                  type="button"
                  onClick={closeModal}
                  className="rounded-full p-2 text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-primary)] hover:bg-[rgba(244, 247, 254,0.9)] transition-colors"
                  disabled={saving}
                >
                  ✕
                </button>
              </div>

              <form onSubmit={handleSave} className="p-6 space-y-6">
                {formError ? (
                  <div className="px-3 py-2.5 rounded-xl text-sm bg-red-50 text-red-700 border border-red-100">
                    {formError}
                  </div>
                ) : null}

                <div className="space-y-2">
                  <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                    {isCashForm ? "Nome do caixa físico" : "Apelido da conta"}
                  </label>
                  <input
                    value={form.name}
                    onChange={(event) => setForm((prev) => ({ ...prev, name: event.target.value }))}
                    className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                    placeholder={isCashForm ? "Ex: Caixa da loja" : "Ex: Conta principal"}
                  />
                </div>

                {!isCashForm ? (
                  <>
                    <div className="space-y-2">
                      <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                        Banco
                      </label>
                      <CustomSelect
                        value={form.bank_code}
                        onChange={(value) => {
                          const selected = BANK_OPTION_LOOKUP.get(value);
                          setForm((prev) => ({
                            ...prev,
                            bank_code: value,
                            bank_name: selected?.name ?? "",
                          }));
                        }}
                        options={BANK_SELECT_OPTIONS}
                        className="w-full"
                      />
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                          Agência
                        </label>
                        <input
                          value={form.agency_number}
                          onChange={(event) => setForm((prev) => ({ ...prev, agency_number: event.target.value }))}
                          className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                          placeholder="Ex: 1234"
                        />
                      </div>

                      <div className="space-y-2">
                        <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                          Dígito da agência
                        </label>
                        <input
                          value={form.agency_digit}
                          onChange={(event) => setForm((prev) => ({ ...prev, agency_digit: event.target.value }))}
                          className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                          placeholder="Opcional"
                        />
                      </div>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                          Conta
                        </label>
                        <input
                          value={form.account_number}
                          onChange={(event) => setForm((prev) => ({ ...prev, account_number: event.target.value }))}
                          className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                          placeholder="Ex: 123456"
                        />
                      </div>
                      <div className="space-y-2">
                        <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                          Dígito da conta
                        </label>
                        <input
                          value={form.account_digit}
                          onChange={(event) => setForm((prev) => ({ ...prev, account_digit: event.target.value }))}
                          className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                          placeholder="Opcional"
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                        Pix
                      </label>
                      <input
                        value={form.pix_key}
                        onChange={(event) => setForm((prev) => ({ ...prev, pix_key: event.target.value }))}
                        className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                        placeholder="Opcional"
                      />
                    </div>
                  </>
                ) : null}

                <div className="space-y-2">
                  <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                    Status
                  </label>
                  <select
                    value={form.active ? "ativa" : "inativa"}
                    onChange={(event) => setForm((prev) => ({ ...prev, active: event.target.value === "ativa" }))}
                    className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                  >
                    <option value="ativa">Ativa</option>
                    <option value="inativa">Inativa</option>
                  </select>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                      Tipo da conta
                    </label>
                    <select
                      value={form.type}
                      onChange={(event) =>
                        setForm((prev) => ({
                          ...prev,
                          type: event.target.value as BankAccountFormState["type"],
                        }))
                      }
                      className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                    >
                      <option value="corrente">Corrente</option>
                      <option value="poupanca">Poupança</option>
                      <option value="caixa">Caixa Físico</option>
                    </select>
                  </div>

                  <div className="space-y-2">
                    <label className="text-xs font-medium text-[var(--ks-color-text-soft)] uppercase tracking-[0.16em]">
                      {editingAccount ? "Saldo atual (somente leitura)" : "Saldo inicial"}
                    </label>
                    <input
                      type="number"
                      step="0.01"
                      value={form.initial_balance}
                      onChange={(event) => setForm((prev) => ({ ...prev, initial_balance: event.target.value }))}
                      disabled={Boolean(editingAccount)}
                      className="w-full px-4 py-3 rounded-xl border border-[rgba(198,203,224,0.9)] text-base outline-none bg-white focus:ring-2 focus:ring-[rgba(10, 192, 214,0.16)] focus:border-[rgba(10, 192, 214,0.9)] transition-colors"
                      placeholder="0,00"
                    />
                  </div>
                </div>

                <div className="flex items-center justify-end gap-3">
                  <button
                    type="button"
                    onClick={closeModal}
                    className="px-5 py-3 text-sm font-medium text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-primary)] rounded-xl hover:bg-[rgba(244, 247, 254,0.9)] transition-colors"
                    disabled={saving}
                  >
                    Cancelar
                  </button>
                  <button
                    type="submit"
                    disabled={saving}
                    className="px-5 py-3 text-sm font-medium text-white bg-[var(--ks-color-primary)] hover:bg-[var(--ks-color-primary-strong)] rounded-xl transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
                  >
                    {saving ? "Salvando..." : saveLabel}
                  </button>
                </div>
              </form>
            </motion.div>
          </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  );
}