"use client";

import { usePermissoes } from "@/lib/permissoes-do-usuario";
import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import Image from "next/image";
import { ArrowDownRight, ArrowUpRight, FileText, Loader2, PlusCircle } from "lucide-react";
import { toast } from "sonner";
import { PageHeader } from "@/components/ui/page-header";
import { CustomSelect } from "@/components/ui/custom-select";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { formatMoney } from "@/lib/utils";
import { PixIcon, CashIcon, CreditCardIcon, DebitCardIcon, TransferIcon } from "@/components/icons/payment-icons";
import { resolveBankDisplayName, resolveLogoSrc } from "@/lib/bank-logos";
import { Valor } from "@/components/ui/valor";
/* O dinheiro desta tela passa pelo <Valor>: quem nao tem a permissao de ver
   valores continua abrindo a tela e trabalhando, com os numeros borrados. */
const dinheiro = (v: number) => <Valor>{formatMoney(v)}</Valor>;

type CashFlowEntry = {
  date: string;
  description: string;
  type: "IN" | "OUT";
  origin: string;
  amount: number;
  bank_account_id: string;
  category_name: string | null;
  reference_id: string | null;
  payment_method: string | null;
  order_id: string | null;
};

type CashFlowSummary = {
  total_in: number;
  total_out: number;
  net_total: number;
};

type BankAccountOption = {
  bank_account_id: string;
  name: string;
  bank_code: string | null;
  bank_name: string | null;
  logo_key: string | null;
};

type ManualCashFlowDraft = {
  date: string;
  type: "IN" | "OUT";
  amount: string;
  description: string;
  category_name: string;
  bank_account_id: string;
};

const manualTypeOptions = [
  { value: "IN", label: "Entrada" },
  { value: "OUT", label: "Saída" },
];

const modalControlClass =
  "w-full min-h-11 rounded-2xl border border-[rgba(198,203,224,0.9)] bg-white px-4 py-2.5 text-sm text-[var(--ks-color-text-primary)] transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(10,192,214,0.28)] focus-visible:border-[rgba(10,192,214,0.9)]";

function formatCurrencyMaskedInput(value: string) {
  const digits = value.replace(/\D/g, "");
  if (!digits) return "";
  const amount = Number(digits) / 100;
  return amount.toLocaleString("pt-BR", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });
}

function parseCurrencyMaskedInput(value: string) {
  const normalized = value.replace(/\./g, "").replace(",", ".");
  const amount = Number(normalized);
  return Number.isFinite(amount) ? amount : NaN;
}

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

const methodIcons: Record<string, React.ReactNode> = {
  pix: <PixIcon className="w-6 h-6 text-[#4DB6AC]" />,
  cash: <CashIcon className="w-6 h-6 text-green-600" />,
  credit_card: <CreditCardIcon className="w-6 h-6 text-indigo-600" />,
  debit_card: <DebitCardIcon className="w-6 h-6 text-indigo-400" />,
  transfer: <TransferIcon className="w-6 h-6 text-purple-600" />,
};

function BankLogo({ bank }: { bank: BankAccountOption | null }) {
  const [failed, setFailed] = useState(false);

  if (!bank) {
    return <span className="text-xs text-[var(--ks-color-text-muted)]">—</span>;
  }

  const logoSrc = failed
    ? "/banks/default.svg"
    : resolveLogoSrc(bank.logo_key, bank.bank_code, bank.bank_name ?? bank.name ?? "");

  return (
    <div className="h-8 w-8 rounded-lg bg-zinc-50 border border-zinc-200 flex items-center justify-center overflow-hidden flex-shrink-0">
      <Image
        loader={passthroughLoader}
        src={logoSrc}
        alt={bank.bank_name ?? "Logo do banco"}
        width={24}
        height={24}
        className="h-6 w-6 object-contain"
        onError={() => setFailed(true)}
      />
    </div>
  );
}

function formatDate(value: string) {
  return new Date(value).toLocaleDateString("pt-BR", { timeZone: "UTC" });
}

function formatMonth(value: Date) {
  const year = value.getFullYear();
  const month = String(value.getMonth() + 1).padStart(2, "0");
  return `${year}-${month}`;
}

function buildBankOptionLabel(value: string) {
  return resolveBankDisplayName(value || "Conta bancária");
}

function buildBankOptions(accounts: BankAccountOption[]) {
  const baseOptions = accounts
    .filter((account) => account.bank_account_id)
    .map((account) => {
      const name = account.name || account.bank_name || "Conta bancária";
      const displayName = buildBankOptionLabel(name);
      const fallbackName = account.name ? buildBankOptionLabel(account.name) : displayName;
      return {
        value: account.bank_account_id,
        baseLabel: displayName,
        fallbackLabel: fallbackName,
        image_url: resolveLogoSrc(account.logo_key, account.bank_code, account.bank_name ?? account.name ?? ""),
      };
    });

  const baseCounts = new Map<string, number>();
  const fallbackCounts = new Map<string, number>();
  baseOptions.forEach((item) => {
    baseCounts.set(item.baseLabel, (baseCounts.get(item.baseLabel) ?? 0) + 1);
    const fallbackKey = `${item.baseLabel}__${item.fallbackLabel}`;
    fallbackCounts.set(fallbackKey, (fallbackCounts.get(fallbackKey) ?? 0) + 1);
  });

  const baseIndex = new Map<string, number>();
  const fallbackIndex = new Map<string, number>();

  return [
    { value: "", label: "Todas as contas" },
    ...baseOptions.map((item) => {
      let label = item.baseLabel;
      const baseCount = baseCounts.get(item.baseLabel) ?? 0;
      if (baseCount > 1) {
        if (item.fallbackLabel && item.fallbackLabel !== item.baseLabel) {
          const fallbackKey = `${item.baseLabel}__${item.fallbackLabel}`;
          const fallbackCount = fallbackCounts.get(fallbackKey) ?? 0;
          if (fallbackCount > 1) {
            const current = (fallbackIndex.get(fallbackKey) ?? 0) + 1;
            fallbackIndex.set(fallbackKey, current);
            label = `${item.baseLabel} · ${item.fallbackLabel} ${current}`;
          } else {
            label = `${item.baseLabel} · ${item.fallbackLabel}`;
          }
        } else {
          const current = (baseIndex.get(item.baseLabel) ?? 0) + 1;
          baseIndex.set(item.baseLabel, current);
          label = `${item.baseLabel} · Conta ${current}`;
        }
      }
      return {
        value: item.value,
        label,
        image_url: item.image_url,
      };
    }),
  ];
}

function CashFlowFilters({
  month,
  bankAccountId,
  bankOptions,
  loading,
  onMonthChange,
  onBankAccountChange,
}: {
  month: string;
  bankAccountId: string;
  bankOptions: { value: string; label: string; image_url?: string | null }[];
  loading: boolean;
  onMonthChange: (value: string) => void;
  onBankAccountChange: (value: string) => void;
}) {
  return (
    <div className="ks-surface p-4 rounded-2xl border border-zinc-100">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="space-y-2">
          <label className="text-xs uppercase tracking-[0.2em] text-[var(--ks-color-text-muted)] font-semibold">
            Período
          </label>
          <input
            type="month"
            value={month}
            onChange={(event) => onMonthChange(event.target.value)}
            className="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm text-[var(--ks-color-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--ks-color-primary)]"
          />
        </div>
        <div className="space-y-2">
          <label className="text-xs uppercase tracking-[0.2em] text-[var(--ks-color-text-muted)] font-semibold">
            Conta bancária
          </label>
          <CustomSelect
            value={bankAccountId}
            onChange={onBankAccountChange}
            options={bankOptions}
            className="w-full"
          />
          {loading ? (
            <p className="text-xs text-[var(--ks-color-text-muted)]">Carregando contas...</p>
          ) : null}
        </div>
      </div>
    </div>
  );
}

function CashFlowKpis({
  summary,
  loading,
}: {
  summary: CashFlowSummary | null;
  loading: boolean;
}) {
  const netPositive = (summary?.net_total ?? 0) >= 0;

  if (loading) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {Array.from({ length: 3 }).map((_, index) => (
          <div key={index} className="ks-surface p-6 rounded-2xl animate-pulse">
            <div className="h-4 bg-gray-200 rounded w-2/3 mb-3" />
            <div className="h-8 bg-gray-200 rounded w-1/2" />
          </div>
        ))}
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div className="ks-surface p-6 rounded-2xl border border-emerald-100">
        <p className="text-xs uppercase tracking-[0.2em] text-emerald-600 font-semibold">Entradas</p>
        <p className="mt-2 text-2xl font-bold text-emerald-700">
          {dinheiro(summary?.total_in ?? 0)}
        </p>
      </div>
      <div className="ks-surface p-6 rounded-2xl border border-rose-100">
        <p className="text-xs uppercase tracking-[0.2em] text-rose-600 font-semibold">Saídas</p>
        <p className="mt-2 text-2xl font-bold text-rose-700">
          {dinheiro(summary?.total_out ?? 0)}
        </p>
      </div>
      <div className="ks-surface p-6 rounded-2xl border border-zinc-100">
        <p className="text-xs uppercase tracking-[0.2em] text-[var(--ks-color-text-muted)] font-semibold">
          Resultado líquido
        </p>
        <p className={`mt-2 text-2xl font-bold ${netPositive ? "text-emerald-700" : "text-rose-700"}`}>
          {dinheiro(summary?.net_total ?? 0)}
        </p>
      </div>
    </div>
  );
}

function CashFlowRow({
  entry,
  bank,
}: {
  entry: CashFlowEntry;
  bank: BankAccountOption | null;
}) {
  const isIn = entry.type === "IN";
  const categoryLabel = entry.category_name ?? "Sem categoria";
  const actionHref =
    entry.origin === "PEDIDO" && entry.order_id ? `/dashboard/orders/${entry.order_id}` : null;
  const paymentIcon = entry.payment_method ? methodIcons[entry.payment_method] : null;

  return (
    <div className="p-4 rounded-2xl border border-zinc-100 bg-white shadow-sm">
      <div className="flex flex-col gap-3 md:hidden">
        <div className="flex items-start justify-between gap-3">
          <div className="flex items-start gap-3">
            <div
              className={`h-10 w-10 rounded-xl flex items-center justify-center ${
                isIn ? "bg-emerald-50 text-emerald-600" : "bg-rose-50 text-rose-600"
              }`}
            >
              {isIn ? <ArrowUpRight className="w-5 h-5" /> : <ArrowDownRight className="w-5 h-5" />}
            </div>
            <div>
              {actionHref ? (
                <Link
                  href={actionHref}
                  className="text-sm font-semibold text-[var(--ks-color-text-primary)] hover:text-[var(--ks-color-primary)]"
                >
                  {entry.description}
                </Link>
              ) : (
                <p className="text-sm font-semibold text-[var(--ks-color-text-primary)]">
                  {entry.description}
                </p>
              )}
              <div className="mt-1 flex flex-wrap items-center gap-2">
                <span className="text-xs font-medium text-[var(--ks-color-text-muted)]">{entry.origin}</span>
                <span className="text-xs px-2 py-0.5 rounded-full border border-zinc-200 bg-zinc-50 text-zinc-600">
                  {categoryLabel}
                </span>
              </div>
            </div>
          </div>
          <div className={`text-sm font-bold ${isIn ? "text-emerald-700" : "text-rose-700"}`}>
            {dinheiro(entry.amount)}
          </div>
        </div>

        <div className="grid grid-cols-2 gap-3 text-sm text-[var(--ks-color-text-primary)]">
          <div className="flex items-center gap-2">
            <span className="text-xs text-[var(--ks-color-text-muted)]">Data</span>
            <span className="font-medium">{formatDate(entry.date)}</span>
          </div>
          <div className="flex items-center gap-2 justify-end">
            <span className="text-xs text-[var(--ks-color-text-muted)]">Tipo</span>
            <span className={`font-semibold ${isIn ? "text-emerald-700" : "text-rose-700"}`}>
              {isIn ? "Entrada" : "Saída"}
            </span>
          </div>
        </div>

        <div className="flex items-center justify-between gap-3">
          <div className="flex items-center gap-2">
            <BankLogo bank={bank} />
          </div>
          <div className="flex items-center gap-2">
            {paymentIcon ?? <span className="text-xs text-[var(--ks-color-text-muted)]">—</span>}
          </div>
        </div>

      </div>

      <div className="hidden md:grid grid-cols-[2.2fr_0.9fr_0.8fr_1fr_0.8fr_1fr_0.8fr] gap-4 items-center">
        <div className="flex items-start gap-3">
          <div
            className={`h-10 w-10 rounded-xl flex items-center justify-center ${
              isIn ? "bg-emerald-50 text-emerald-600" : "bg-rose-50 text-rose-600"
            }`}
          >
            {isIn ? <ArrowUpRight className="w-5 h-5" /> : <ArrowDownRight className="w-5 h-5" />}
          </div>
          <div>
            <p className="text-sm font-semibold text-[var(--ks-color-text-primary)]">{entry.description}</p>
            <div className="mt-1 flex flex-wrap items-center gap-2">
              <span className="text-xs font-medium text-[var(--ks-color-text-muted)]">{entry.origin}</span>
              <span className="text-xs px-2 py-0.5 rounded-full border border-zinc-200 bg-zinc-50 text-zinc-600">
                {categoryLabel}
              </span>
            </div>
          </div>
        </div>

        <div>
          <p className="text-sm font-medium text-[var(--ks-color-text-primary)]">{formatDate(entry.date)}</p>
        </div>

        <div>
          <p className={`text-sm font-semibold ${isIn ? "text-emerald-700" : "text-rose-700"}`}>
            {isIn ? "Entrada" : "Saída"}
          </p>
        </div>

        <div className="flex">
          <BankLogo bank={bank} />
        </div>

        <div className="flex items-center">
          {paymentIcon ?? <span className="text-xs text-[var(--ks-color-text-muted)]">—</span>}
        </div>

        <div className="text-right">
          <p className={`text-sm font-bold ${isIn ? "text-emerald-700" : "text-rose-700"}`}>
            {dinheiro(entry.amount)}
          </p>
        </div>

        <div className="flex md:justify-end">
          {actionHref ? (
            <Link href={actionHref} className="ks-button ks-button-secondary ks-button-sm">
              <FileText size={14} />
              Ver Pedido
            </Link>
          ) : (
            <span className="hidden md:inline text-xs text-[var(--ks-color-text-muted)]">—</span>
          )}
        </div>
      </div>
    </div>
  );
}

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

  const searchParams = useSearchParams();
  const [entries, setEntries] = useState<CashFlowEntry[]>([]);
  const [summary, setSummary] = useState<CashFlowSummary | null>(null);
  const [loadingEntries, setLoadingEntries] = useState(true);
  const [loadingSummary, setLoadingSummary] = useState(true);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [bankAccounts, setBankAccounts] = useState<BankAccountOption[]>([]);
  const [loadingBanks, setLoadingBanks] = useState(true);
  const [selectedMonth, setSelectedMonth] = useState(() => formatMonth(new Date()));
  const [selectedBank, setSelectedBank] = useState(searchParams.get("bank_account_id") ?? "");
  const [showManualForm, setShowManualForm] = useState(false);
  const [savingManual, setSavingManual] = useState(false);
  const [refreshNonce, setRefreshNonce] = useState(0);
  const [manualDraft, setManualDraft] = useState<ManualCashFlowDraft>({
    date: new Date().toISOString().slice(0, 10),
    type: "IN",
    amount: "",
    description: "",
    category_name: "",
    bank_account_id: "",
  });

  useEffect(() => {
    if (!manualDraft.bank_account_id && bankAccounts.length > 0) {
      setManualDraft((prev) => ({ ...prev, bank_account_id: bankAccounts[0].bank_account_id }));
    }
  }, [bankAccounts, manualDraft.bank_account_id]);

  useEffect(() => {
    let active = true;

    async function loadEntries() {
      setLoadingEntries(true);
      try {
        const params = new URLSearchParams();
        if (selectedMonth) params.set("month", selectedMonth);
        if (selectedBank) params.set("bank_account_id", selectedBank);

        const response = await fetch(`/api/cash-flow?${params.toString()}`);
        const payload = await response.json();
        if (!response.ok) {
          throw new Error(payload?.error ?? "Falha ao carregar fluxo de caixa.");
        }
        if (active) {
          setEntries(payload?.entries ?? payload?.data ?? []);
        }
      } catch (error) {
        if (active) {
          setErrorMessage(error instanceof Error ? error.message : "Falha ao carregar fluxo de caixa.");
        }
      } finally {
        if (active) {
          setLoadingEntries(false);
        }
      }
    }

    async function loadSummary() {
      setLoadingSummary(true);
      try {
        const params = new URLSearchParams();
        if (selectedMonth) params.set("month", selectedMonth);
        if (selectedBank) params.set("bank_account_id", selectedBank);

        const response = await fetch(`/api/cash-flow/summary?${params.toString()}`);
        const payload = await response.json();
        if (!response.ok) {
          throw new Error(payload?.error ?? "Falha ao carregar resumo do fluxo de caixa.");
        }
        if (active) {
          setSummary(payload?.summary ?? payload ?? null);
        }
      } catch (error) {
        if (active) {
          setErrorMessage(error instanceof Error ? error.message : "Falha ao carregar resumo do fluxo de caixa.");
        }
      } finally {
        if (active) {
          setLoadingSummary(false);
        }
      }
    }

    loadEntries();
    loadSummary();

    return () => {
      active = false;
    };
  }, [selectedBank, selectedMonth, refreshNonce]);

  useEffect(() => {
    let active = true;

    async function loadBankAccounts() {
      setLoadingBanks(true);
      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.");
        }
        if (active) {
          setBankAccounts(payload?.accounts ?? []);
        }
      } catch (error) {
        if (active) {
          setErrorMessage(error instanceof Error ? error.message : "Falha ao carregar contas bancárias.");
        }
      } finally {
        if (active) {
          setLoadingBanks(false);
        }
      }
    }

    loadBankAccounts();
    return () => {
      active = false;
    };
  }, []);

  async function handleCreateManualEntry() {
    try {
      setSavingManual(true);
      const amount = parseCurrencyMaskedInput(manualDraft.amount);
      if (!Number.isFinite(amount) || amount <= 0) {
        throw new Error("Informe um valor válido.");
      }
      if (!manualDraft.description.trim()) {
        throw new Error("Informe a descrição.");
      }
      if (!manualDraft.bank_account_id) {
        throw new Error("Selecione a conta bancária.");
      }
      const response = await fetch("/api/cash-flow", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          date: manualDraft.date,
          type: manualDraft.type,
          amount,
          description: manualDraft.description.trim(),
          category_name: manualDraft.category_name.trim(),
          bank_account_id: manualDraft.bank_account_id,
        }),
      });
      const payload = await response.json().catch(() => null);
      if (!response.ok) {
        throw new Error(payload?.error || "Falha ao criar lançamento manual.");
      }
      toast.success("Lançamento manual criado.");
      setManualDraft((prev) => ({
        ...prev,
        amount: "",
        description: "",
        category_name: "",
      }));
      setShowManualForm(false);
      setRefreshNonce((prev) => prev + 1);
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "Falha ao criar lançamento manual.");
    } finally {
      setSavingManual(false);
    }
  }

  const sortedEntries = useMemo(() => {
    return [...entries].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
  }, [entries]);

  const bankMap = useMemo(() => {
    return new Map(bankAccounts.map((account) => [account.bank_account_id, account]));
  }, [bankAccounts]);

  const bankOptions = useMemo(() => buildBankOptions(bankAccounts), [bankAccounts]);

  const content = useMemo(() => {
    if (loadingEntries) {
      return (
        <div className="space-y-3">
          {Array.from({ length: 6 }).map((_, index) => (
            <div key={index} className="ks-surface p-4 rounded-2xl animate-pulse">
              <div className="h-4 bg-gray-200 rounded w-2/3 mb-3" />
              <div className="h-3 bg-gray-200 rounded w-1/3" />
            </div>
          ))}
        </div>
      );
    }

    if (errorMessage) {
      return (
        <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 o fluxo de caixa.
          </p>
          <p className="text-sm text-[var(--ks-color-text-muted)] mt-2">{errorMessage}</p>
        </div>
      );
    }

    if (sortedEntries.length === 0) {
      return (
        <div className="ks-surface p-8 rounded-2xl text-center">
          <p className="text-[var(--ks-color-text-primary)] font-semibold">Nenhum lançamento encontrado.</p>
          <p className="text-sm text-[var(--ks-color-text-muted)] mt-2">
            As movimentações aparecerão aqui conforme forem registradas.
          </p>
        </div>
      );
    }

    return (
      <div className="space-y-3">
        {sortedEntries.map((entry, index) => (
          <CashFlowRow
            key={`${entry.date}-${entry.bank_account_id}-${index}`}
            entry={entry}
            bank={bankMap.get(entry.bank_account_id) ?? null}
          />
        ))}
      </div>
    );
  }, [bankMap, errorMessage, loadingEntries, sortedEntries]);

  return (
    <div className="space-y-6">
      <PageHeader
        title="Fluxo de Caixa"
        subtitle="Entradas, saídas e resultado líquido do período"
        actions={
          <button
            type="button"
            onClick={() => setShowManualForm(true)}
            className="ks-button ks-button-primary"
          >
            <PlusCircle size={16} />
            Nova movimentação
          </button>
        }
      />
      <Dialog open={showManualForm} onOpenChange={setShowManualForm}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>Nova movimentação financeira</DialogTitle>
            <DialogDescription>
              Lance entradas ou saídas que não vieram de pedidos, como aporte, empréstimo ou recebimento avulso.
            </DialogDescription>
          </DialogHeader>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
            <input
              type="date"
              value={manualDraft.date}
              onChange={(e) => setManualDraft((p) => ({ ...p, date: e.target.value }))}
              className={modalControlClass}
            />
            <CustomSelect
              value={manualDraft.type}
              onChange={(value) => setManualDraft((p) => ({ ...p, type: value === "OUT" ? "OUT" : "IN" }))}
              options={manualTypeOptions}
              className="w-full"
              portal={false}
            />
            <input
              type="text"
              inputMode="decimal"
              value={manualDraft.amount}
              onChange={(e) => setManualDraft((p) => ({ ...p, amount: formatCurrencyMaskedInput(e.target.value) }))}
              placeholder="0,00"
              className={modalControlClass}
            />
            <input
              value={manualDraft.description}
              onChange={(e) => setManualDraft((p) => ({ ...p, description: e.target.value }))}
              placeholder="Descrição"
              className={`${modalControlClass} md:col-span-2`}
            />
            <input
              value={manualDraft.category_name}
              onChange={(e) => setManualDraft((p) => ({ ...p, category_name: e.target.value }))}
              placeholder="Categoria (opcional)"
              className={modalControlClass}
            />
            <div className="md:col-span-2">
              <CustomSelect
                value={manualDraft.bank_account_id}
                onChange={(value) => setManualDraft((p) => ({ ...p, bank_account_id: value }))}
                options={[
                  { value: "", label: "Selecione a conta" },
                  ...bankAccounts.map((bank) => ({
                    value: bank.bank_account_id,
                    label: buildBankOptionLabel(bank.name || bank.bank_name || "Conta bancária"),
                    image_url: resolveLogoSrc(
                      bank.logo_key,
                      bank.bank_code,
                      bank.bank_name ?? bank.name ?? ""
                    ),
                  })),
                ]}
                className="w-full"
                portal={false}
              />
            </div>
          </div>

          <DialogFooter>
            <button
              type="button"
              onClick={() => setShowManualForm(false)}
              className="ks-button ks-button-secondary"
            >
              Cancelar
            </button>
            {podeLancar && (<button
              type="button"
              onClick={handleCreateManualEntry}
              disabled={savingManual}
              className="ks-button ks-button-primary disabled:opacity-60 disabled:cursor-not-allowed"
            >
              {savingManual ? <Loader2 size={16} className="animate-spin" /> : <PlusCircle size={16} />}
              Salvar lançamento
            </button>)}
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <CashFlowFilters
        month={selectedMonth}
        bankAccountId={selectedBank}
        bankOptions={bankOptions}
        loading={loadingBanks}
        onMonthChange={setSelectedMonth}
        onBankAccountChange={setSelectedBank}
      />

      <CashFlowKpis summary={summary} loading={loadingSummary} />

      <div className="space-y-4">
        <div className="hidden md:grid grid-cols-[2.2fr_0.9fr_0.8fr_1fr_0.8fr_1fr_0.8fr] gap-4 px-4 text-xs uppercase tracking-[0.2em] text-[var(--ks-color-text-muted)]">
          <span>Descrição</span>
          <span>Data</span>
          <span>Tipo</span>
          <span>Banco</span>
          <span>Forma</span>
          <span className="text-right">Valor</span>
          <span className="text-right">Ações</span>
        </div>
        {content}
      </div>
    </div>
  );
}