"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { AnimatePresence, motion } from "framer-motion";
import {
  ArrowDownRight,
  ArrowUpRight,
  Banknote,
  ChevronLeft,
  ChevronRight,
  CreditCard,
  Filter,
  Wallet,
  X,
} from "lucide-react";
import { PageHeader } from "@/components/ui/page-header";
import { Button } from "@/components/ui/button";
import { CustomSelect } from "@/components/ui/custom-select";
import { formatMoney } from "@/lib/utils";
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 BankAccountOption = {
  bank_account_id: string;
  name: string | null;
  bank_name: string | null;
  bank_code?: string | null;
  logo_key: string | null;
};

type DreAnalyticEntry = {
  date: string;
  type: "IN" | "OUT" | "UNKNOWN";
  origin: string;
  amount: number;
  description: string;
  bank_account_id: string | null;
  bank_account_name: string | null;
  bank_name: string | null;
  logo_key: string | null;
  payment_method: string | null;
  order_id: string | null;
  payable_id: string | null;
  category_id: string | null;
  category_name: string | null;
};

type DreAnalyticResponse = {
  ok: true;
  kpis: {
    revenue: number;
    expenses: number;
    net: number;
    margin: number;
  };
  breakdowns: {
    revenueByMethod: Array<{ method: string; total: number; pct: number }>;
    revenueByBank: Array<{ bank_account_id: string | null; bank_name: string; total: number; pct: number; logo_key: string | null }>;
    expenseByCategory: Array<{ category_id: string | null; category_name: string; total: number; pct: number }>;
    topIn: DreAnalyticEntry[];
    topOut: DreAnalyticEntry[];
  };
  entries: DreAnalyticEntry[];
};

type DrillState =
  | { kind: "method"; value: string; title: string }
  | { kind: "bank"; value: string; title: string }
  | { kind: "category"; value: string; title: string }
  | { kind: "topIn"; title: string }
  | { kind: "topOut"; title: string };

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

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

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

function formatPercent(value: number) {
  return new Intl.NumberFormat("pt-BR", {
    minimumFractionDigits: 1,
    maximumFractionDigits: 1,
  }).format(value);
}

function paymentMethodLabel(method: string) {
  switch (method) {
    case "pix":
      return "Pix";
    case "cash":
      return "Dinheiro";
    case "credit_card":
      return "Cartão de crédito";
    case "debit_card":
      return "Cartão de débito";
    case "transfer":
      return "Transferência";
    case "manual":
      return "Lançamento manual";
    case "sem_forma":
      return "Sem forma de pagamento";
    default:
      return method || "Sem forma de pagamento";
  }
}

function normalizeMethod(value: string | null) {
  return typeof value === "string" && value.trim() ? value.trim() : "sem_forma";
}

function isRevenueEntry(entry: Pick<DreAnalyticEntry, "origin" | "type">) {
  return (entry.origin === "PEDIDO" || entry.origin === "AJUSTE" || entry.origin === "MANUAL") && entry.type === "IN";
}

function methodKeyForEntry(entry: Pick<DreAnalyticEntry, "origin" | "payment_method">) {
  if (entry.origin === "MANUAL") return "manual";
  return normalizeMethod(entry.payment_method);
}

function originLabel(value: string) {
  switch (value) {
    case "PEDIDO":
      return "Pedido";
    case "PAGAR":
      return "Conta a pagar";
    case "AJUSTE":
      return "Ajuste";
    case "MANUAL":
      return "Lançamentos manuais";
    default:
      return value || "Outros";
  }
}

function typeLabel(value: string) {
  if (value === "IN") return "Entrada";
  if (value === "OUT") return "Saída";
  return "Indefinido";
}

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 ?? null,
          account.bank_code ?? null,
          (account.bank_name ?? account.name) ?? null
        ),
      };
    });

  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: "all", 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,
      };
    }),
  ];
}

export default function DreAnalyticPage() {
  const [data, setData] = useState<DreAnalyticResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [selectedMonth, setSelectedMonth] = useState(() => formatMonth(new Date()));
  const [selectedBank, setSelectedBank] = useState("all");
  const [selectedOrigin, setSelectedOrigin] = useState("all");
  const [selectedType, setSelectedType] = useState("all");
  const [bankAccounts, setBankAccounts] = useState<BankAccountOption[]>([]);
  const [loadingBanks, setLoadingBanks] = useState(true);
  const [reloadKey, setReloadKey] = useState(0);
  const [drill, setDrill] = useState<DrillState | null>(null);
  const [drillPage, setDrillPage] = useState(1);

  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;
    };
  }, []);

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

    async function loadAnalytics() {
      setLoading(true);
      setErrorMessage(null);
      try {
        const params = new URLSearchParams();
        if (selectedMonth) params.set("month", selectedMonth);
        if (selectedBank && selectedBank !== "all") params.set("bank_account_id", selectedBank);
        if (selectedOrigin && selectedOrigin !== "all") params.set("origin", selectedOrigin);
        if (selectedType && selectedType !== "all") params.set("type", selectedType);
        const response = await fetch(`/api/financial/dre-analytic?${params.toString()}`);
        const payload = (await response.json().catch(() => null)) as DreAnalyticResponse | { error?: string; message?: string };
        if (!response.ok) {
          const message =
            payload && typeof payload === "object" && "message" in payload && typeof payload.message === "string"
              ? payload.message
              : null;
          const requestError =
            payload && typeof payload === "object" && "error" in payload && typeof payload.error === "string"
              ? payload.error
              : null;
          const msg = message ?? requestError;
          throw new Error(msg || "Falha ao carregar DRE analítico.");
        }
        if (active) {
          setData(payload as DreAnalyticResponse);
        }
      } catch (error) {
        if (active) {
          setErrorMessage(error instanceof Error ? error.message : "Falha ao carregar DRE analítico.");
        }
      } finally {
        if (active) {
          setLoading(false);
        }
      }
    }

    loadAnalytics();
    return () => {
      active = false;
    };
  }, [selectedMonth, selectedBank, selectedOrigin, selectedType, reloadKey]);

  useEffect(() => {
    setDrillPage(1);
  }, [drill]);

  const kpis = data?.kpis ?? { revenue: 0, expenses: 0, net: 0, margin: 0 };
  const breakdowns = data?.breakdowns ?? {
    revenueByMethod: [],
    revenueByBank: [],
    expenseByCategory: [],
    topIn: [],
    topOut: [],
  };
  const entries = useMemo(() => data?.entries ?? [], [data?.entries]);

  const isEmpty = !loading && !errorMessage && entries.length === 0;

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

  const originOptions = useMemo(
    () => [
      { value: "all", label: "Todas as origens" },
      { value: "PEDIDO", label: "Pedido" },
      { value: "PAGAR", label: "Conta a pagar" },
      { value: "AJUSTE", label: "Ajuste" },
      { value: "MANUAL", label: "Lançamento manual" },
    ],
    []
  );

  const typeOptions = useMemo(
    () => [
      { value: "all", label: "Todos os tipos" },
      { value: "IN", label: "Entrada" },
      { value: "OUT", label: "Saída" },
    ],
    []
  );

  const drillEntries = useMemo(() => {
    if (!drill) return [];
    if (drill.kind === "method") {
      return entries
        .filter(
          (entry) =>
            isRevenueEntry(entry) &&
            methodKeyForEntry(entry) === drill.value &&
            entry.type === "IN"
        )
        .sort((a, b) => b.amount - a.amount);
    }
    if (drill.kind === "bank") {
      return entries
        .filter((entry) => (entry.bank_account_id || "unknown") === drill.value)
        .sort((a, b) => b.amount - a.amount);
    }
    if (drill.kind === "category") {
      return entries
        .filter(
          (entry) =>
            entry.origin === "PAGAR" &&
            (entry.category_id || "uncategorized") === drill.value &&
            entry.type === "OUT"
        )
        .sort((a, b) => b.amount - a.amount);
    }
    if (drill.kind === "topIn") {
      return entries
        .filter((entry) => entry.type === "IN")
        .sort((a, b) => b.amount - a.amount);
    }
    return entries
      .filter((entry) => entry.type === "OUT")
      .sort((a, b) => b.amount - a.amount);
  }, [drill, entries]);

  const pageSize = 12;
  const totalPages = Math.max(1, Math.ceil(drillEntries.length / pageSize));
  const pagedEntries = drillEntries.slice((drillPage - 1) * pageSize, drillPage * pageSize);

  return (
    <div className="space-y-8">
      <PageHeader
        title="DRE Analítico"
        subtitle="Resultado por caixa com visão detalhada por origem e dimensões"
      />

      <motion.div
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.3 }}
        className="ks-surface p-5 rounded-3xl border border-[var(--ks-color-border-subtle)] shadow-[var(--ks-shadow-soft)]"
      >
        <p className="text-xs text-[var(--ks-color-text-muted)] mb-4">
          DRE por caixa (baseado nas movimentações em Fluxo de Caixa)
        </p>
        <div className="grid grid-cols-1 md:grid-cols-4 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={selectedMonth}
              onChange={(event) => setSelectedMonth(event.target.value)}
              className="w-full rounded-2xl 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>
          <CustomSelect
            label="Conta bancária"
            value={selectedBank}
            onChange={setSelectedBank}
            options={bankOptions}
            className="text-xs"
          />
          <CustomSelect
            label="Origem"
            value={selectedOrigin}
            onChange={setSelectedOrigin}
            options={originOptions}
            className="text-xs"
          />
          <CustomSelect
            label="Tipo"
            value={selectedType}
            onChange={setSelectedType}
            options={typeOptions}
            className="text-xs"
          />
        </div>
        {loadingBanks ? (
          <p className="text-xs text-[var(--ks-color-text-muted)] mt-3">Carregando contas bancárias...</p>
        ) : null}
      </motion.div>

      {loading ? (
        <div className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            {Array.from({ length: 4 }).map((_, index) => (
              <div key={index} className="ks-surface p-6 rounded-3xl animate-pulse">
                <div className="h-3 w-20 bg-gray-200 rounded mb-4" />
                <div className="h-8 w-32 bg-gray-200 rounded" />
              </div>
            ))}
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {Array.from({ length: 2 }).map((_, index) => (
              <div key={index} className="ks-surface p-6 rounded-3xl animate-pulse h-64" />
            ))}
          </div>
        </div>
      ) : errorMessage ? (
        <div className="ks-surface p-8 rounded-3xl border border-rose-100 flex flex-col items-center gap-3 text-center">
          <p className="text-sm text-rose-600 font-medium">{errorMessage}</p>
          <Button onClick={() => setReloadKey((prev) => prev + 1)}>Tentar novamente</Button>
        </div>
      ) : isEmpty ? (
        <div className="ks-surface p-10 rounded-3xl border border-zinc-100 text-center space-y-4">
          <p className="text-sm text-[var(--ks-color-text-muted)]">
            Sem movimentações no período selecionado.
          </p>
          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Link href="/dashboard/financial/payments" className="ks-button ks-button-secondary">
              Registrar pagamento
            </Link>
            <Link href="/dashboard/financial/payables" className="ks-button ks-button-secondary">
              Registrar conta a pagar
            </Link>
          </div>
        </div>
      ) : (
        <>
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
            <div className="ks-surface p-6 rounded-3xl border border-[rgba(99,102,241,0.2)]">
              <div className="flex items-center justify-between text-xs text-[var(--ks-color-text-muted)]">
                <span>Receita total</span>
                <ArrowUpRight className="w-4 h-4 text-[var(--ks-color-primary-strong)]" />
              </div>
              <p className="mt-3 text-2xl font-semibold text-[var(--ks-color-text-primary)]">
                {dinheiro(kpis.revenue)}
              </p>
            </div>
            <div className="ks-surface p-6 rounded-3xl border border-[rgba(244,63,94,0.18)]">
              <div className="flex items-center justify-between text-xs text-[var(--ks-color-text-muted)]">
                <span>Despesas totais</span>
                <ArrowDownRight className="w-4 h-4 text-rose-500" />
              </div>
              <p className="mt-3 text-2xl font-semibold text-[var(--ks-color-text-primary)]">
                {dinheiro(kpis.expenses)}
              </p>
            </div>
            <div className="ks-surface p-6 rounded-3xl border border-[rgba(16,185,129,0.18)]">
              <div className="flex items-center justify-between text-xs text-[var(--ks-color-text-muted)]">
                <span>Resultado líquido</span>
                <Wallet className="w-4 h-4 text-[var(--ks-color-primary-strong)]" />
              </div>
              <p className={`mt-3 text-2xl font-semibold ${kpis.net >= 0 ? "text-emerald-600" : "text-rose-600"}`}>
                {dinheiro(kpis.net)}
              </p>
            </div>
            <div className="ks-surface p-6 rounded-3xl border border-[rgba(99,102,241,0.18)]">
              <div className="flex items-center justify-between text-xs text-[var(--ks-color-text-muted)]">
                <span>Margem</span>
                <Filter className="w-4 h-4 text-[var(--ks-color-primary-strong)]" />
              </div>
              <p className="mt-3 text-2xl font-semibold text-[var(--ks-color-text-primary)]">
                {formatPercent(kpis.margin)}%
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div className="ks-surface p-6 rounded-3xl border border-[var(--ks-color-border-subtle)]">
              <div className="flex items-center justify-between mb-4">
                <div>
                  <p className="text-sm font-semibold text-[var(--ks-color-text-primary)]">
                    Receita por forma de pagamento
                  </p>
                  <p className="text-xs text-[var(--ks-color-text-muted)]">
                    Entradas agrupadas por forma de recebimento
                  </p>
                </div>
                <CreditCard className="w-5 h-5 text-[var(--ks-color-primary-strong)]" />
              </div>
              <div className="space-y-3">
                {breakdowns.revenueByMethod.slice(0, 6).map((item) => (
                  <button
                    key={item.method}
                    type="button"
                    onClick={() =>
                      setDrill({
                        kind: "method",
                        value: normalizeMethod(item.method),
                        title: `Receita - ${paymentMethodLabel(item.method)}`,
                      })
                    }
                    className="w-full flex items-center justify-between rounded-2xl border border-zinc-100 px-4 py-3 hover:bg-[rgba(248,249,252,0.9)] transition-colors"
                  >
                    <span className="text-sm font-medium text-[var(--ks-color-text-primary)]">
                      {paymentMethodLabel(item.method)}
                    </span>
                    <span className="text-sm text-[var(--ks-color-text-muted)]">
                      {dinheiro(item.total)} · {formatPercent(item.pct)}%
                    </span>
                  </button>
                ))}
                {breakdowns.revenueByMethod.length === 0 ? (
                  <div className="rounded-2xl border border-dashed border-zinc-200 px-4 py-6 text-sm text-[var(--ks-color-text-muted)] text-center">
                    Nenhuma receita registrada.
                  </div>
                ) : null}
              </div>
            </div>

            <div className="ks-surface p-6 rounded-3xl border border-[var(--ks-color-border-subtle)]">
              <div className="flex items-center justify-between mb-4">
                <div>
                  <p className="text-sm font-semibold text-[var(--ks-color-text-primary)]">
                    Receita por conta bancária
                  </p>
                  <p className="text-xs text-[var(--ks-color-text-muted)]">
                    Entradas agrupadas por conta
                  </p>
                </div>
                <Banknote className="w-5 h-5 text-[var(--ks-color-primary-strong)]" />
              </div>
              <div className="space-y-3">
                {breakdowns.revenueByBank.slice(0, 6).map((item) => {
                  const displayName = resolveBankDisplayName(item.bank_name || "Banco");
                  const logoSrc = resolveLogoSrc(item.logo_key, null, item.bank_name);
                  return (
                    <button
                      key={item.bank_account_id ?? item.bank_name}
                      type="button"
                      onClick={() =>
                        setDrill({
                          kind: "bank",
                          value: item.bank_account_id ?? "unknown",
                          title: `Receita - ${displayName}`,
                        })
                      }
                      className="w-full flex items-center justify-between rounded-2xl border border-zinc-100 px-4 py-3 hover:bg-[rgba(248,249,252,0.9)] transition-colors"
                    >
                      <span className="flex items-center gap-3">
                        <span className="h-9 w-9 rounded-xl border border-zinc-100 bg-white flex items-center justify-center overflow-hidden">
                          {logoSrc ? (
                            <Image
                              loader={passthroughLoader}
                              src={logoSrc}
                              alt=""
                              width={32}
                              height={32}
                              className="h-8 w-8 object-contain"
                              onError={(event) => {
                                const target = event.target as HTMLImageElement;
                                target.style.display = "none";
                              }}
                            />
                          ) : (
                            <span className="text-xs text-[var(--ks-color-text-muted)]">
                              {displayName.slice(0, 2).toUpperCase()}
                            </span>
                          )}
                        </span>
                        <span className="text-sm font-medium text-[var(--ks-color-text-primary)]">
                          {displayName}
                        </span>
                      </span>
                      <span className="text-sm text-[var(--ks-color-text-muted)]">
                        {dinheiro(item.total)} · {formatPercent(item.pct)}%
                      </span>
                    </button>
                  );
                })}
                {breakdowns.revenueByBank.length === 0 ? (
                  <div className="rounded-2xl border border-dashed border-zinc-200 px-4 py-6 text-sm text-[var(--ks-color-text-muted)] text-center">
                    Nenhuma receita registrada.
                  </div>
                ) : null}
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div className="ks-surface p-6 rounded-3xl border border-[var(--ks-color-border-subtle)]">
              <div className="flex items-center justify-between mb-4">
                <div>
                  <p className="text-sm font-semibold text-[var(--ks-color-text-primary)]">
                    Despesas por categoria
                  </p>
                  <p className="text-xs text-[var(--ks-color-text-muted)]">
                    Apenas saídas originadas de contas a pagar
                  </p>
                </div>
                <ArrowDownRight className="w-5 h-5 text-rose-500" />
              </div>
              <div className="space-y-3">
                {breakdowns.expenseByCategory.slice(0, 6).map((item) => (
                  <button
                    key={item.category_id ?? item.category_name}
                    type="button"
                    onClick={() =>
                      setDrill({
                        kind: "category",
                        value: item.category_id ?? "uncategorized",
                        title: `Despesa - ${item.category_name}`,
                      })
                    }
                    className="w-full flex items-center justify-between rounded-2xl border border-zinc-100 px-4 py-3 hover:bg-[rgba(248,249,252,0.9)] transition-colors"
                  >
                    <span className="text-sm font-medium text-[var(--ks-color-text-primary)]">
                      {item.category_name}
                    </span>
                    <span className="text-sm text-[var(--ks-color-text-muted)]">
                      {dinheiro(item.total)} · {formatPercent(item.pct)}%
                    </span>
                  </button>
                ))}
                {breakdowns.expenseByCategory.length === 0 ? (
                  <div className="rounded-2xl border border-dashed border-zinc-200 px-4 py-6 text-sm text-[var(--ks-color-text-muted)] text-center">
                    Nenhuma despesa registrada.
                  </div>
                ) : null}
              </div>
            </div>

            <div className="ks-surface p-6 rounded-3xl border border-[var(--ks-color-border-subtle)]">
              <div className="flex items-center justify-between mb-4">
                <div>
                  <p className="text-sm font-semibold text-[var(--ks-color-text-primary)]">
                    Top lançamentos
                  </p>
                  <p className="text-xs text-[var(--ks-color-text-muted)]">
                    Maiores entradas e saídas do período
                  </p>
                </div>
                <Wallet className="w-5 h-5 text-[var(--ks-color-primary-strong)]" />
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-3">
                  <div className="flex items-center justify-between text-xs text-[var(--ks-color-text-muted)]">
                    <span>Entradas</span>
                    <button
                      type="button"
                      onClick={() => setDrill({ kind: "topIn", title: "Top entradas" })}
                      className="text-[var(--ks-color-primary-strong)]"
                    >
                      Ver tudo
                    </button>
                  </div>
                  {breakdowns.topIn.slice(0, 5).map((item) => (
                    <button
                      key={`${item.date}-${item.description}-${item.amount}`}
                      type="button"
                      onClick={() => setDrill({ kind: "topIn", title: "Top entradas" })}
                      className="w-full flex items-center justify-between rounded-2xl border border-zinc-100 px-3 py-2 hover:bg-[rgba(248,249,252,0.9)] transition-colors"
                    >
                      <span className="text-xs text-[var(--ks-color-text-muted)]">{item.description}</span>
                      <span className="text-xs font-semibold text-emerald-600">{dinheiro(item.amount)}</span>
                    </button>
                  ))}
                  {breakdowns.topIn.length === 0 ? (
                    <div className="rounded-2xl border border-dashed border-zinc-200 px-3 py-4 text-xs text-[var(--ks-color-text-muted)] text-center">
                      Sem entradas no período.
                    </div>
                  ) : null}
                </div>
                <div className="space-y-3">
                  <div className="flex items-center justify-between text-xs text-[var(--ks-color-text-muted)]">
                    <span>Saídas</span>
                    <button
                      type="button"
                      onClick={() => setDrill({ kind: "topOut", title: "Top saídas" })}
                      className="text-[var(--ks-color-primary-strong)]"
                    >
                      Ver tudo
                    </button>
                  </div>
                  {breakdowns.topOut.slice(0, 5).map((item) => (
                    <button
                      key={`${item.date}-${item.description}-${item.amount}`}
                      type="button"
                      onClick={() => setDrill({ kind: "topOut", title: "Top saídas" })}
                      className="w-full flex items-center justify-between rounded-2xl border border-zinc-100 px-3 py-2 hover:bg-[rgba(248,249,252,0.9)] transition-colors"
                    >
                      <span className="text-xs text-[var(--ks-color-text-muted)]">{item.description}</span>
                      <span className="text-xs font-semibold text-rose-600">{dinheiro(item.amount)}</span>
                    </button>
                  ))}
                  {breakdowns.topOut.length === 0 ? (
                    <div className="rounded-2xl border border-dashed border-zinc-200 px-3 py-4 text-xs text-[var(--ks-color-text-muted)] text-center">
                      Sem saídas no período.
                    </div>
                  ) : null}
                </div>
              </div>
            </div>
          </div>
        </>
      )}

      <AnimatePresence>
        {drill ? (
          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm px-4">
            <motion.div
              initial={{ opacity: 0, scale: 0.98, y: 12 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.98, y: 12 }}
              className="bg-white rounded-3xl shadow-xl w-full max-w-5xl overflow-hidden border border-[rgba(225,228,240,0.9)]"
            >
              <div className="p-5 border-b border-[rgba(225,228,240,0.9)] flex items-start justify-between gap-4">
                <div className="min-w-0">
                  <p className="text-xs font-semibold tracking-widest text-[var(--ks-color-text-soft)]">
                    Detalhamento
                  </p>
                  <h2 className="text-lg font-semibold truncate">{drill.title}</h2>
                  <p className="text-sm text-[var(--ks-color-text-muted)] mt-1 truncate">
                    {drillEntries.length} lançamentos encontrados
                  </p>
                </div>
                <button
                  type="button"
                  onClick={() => setDrill(null)}
                  className="p-2 rounded-full border border-[rgba(225,228,240,0.9)] text-[var(--ks-color-text-muted)] hover:bg-[rgba(244, 247, 254,0.9)] transition-colors"
                  aria-label="Fechar"
                >
                  <X size={18} />
                </button>
              </div>

              <div className="p-6 space-y-4 max-h-[70vh] overflow-auto">
                {pagedEntries.length === 0 ? (
                  <div className="rounded-2xl border border-dashed border-zinc-200 px-4 py-6 text-sm text-[var(--ks-color-text-muted)] text-center">
                    Nenhum lançamento encontrado.
                  </div>
                ) : (
                  <div className="overflow-x-auto">
                    <table className="w-full text-sm text-left">
                      <thead className="text-xs text-zinc-500 uppercase bg-zinc-50/70 sticky top-0">
                        <tr>
                          <th className="px-4 py-3">Data</th>
                          <th className="px-4 py-3">Descrição</th>
                          <th className="px-4 py-3">Origem</th>
                          <th className="px-4 py-3">Tipo</th>
                          <th className="px-4 py-3">Banco</th>
                          <th className="px-4 py-3 text-right">Valor</th>
                          <th className="px-4 py-3 text-right">Ação</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-zinc-100">
                        {pagedEntries.map((entry) => (
                          <tr key={`${entry.date}-${entry.description}-${entry.amount}`} className="hover:bg-zinc-50/70">
                            <td className="px-4 py-3 text-zinc-600 whitespace-nowrap">
                              {formatDate(entry.date)}
                            </td>
                            <td className="px-4 py-3 text-[var(--ks-color-text-primary)]">
                              <div className="font-medium">{entry.description}</div>
                              <div className="text-xs text-[var(--ks-color-text-muted)]">
                                {paymentMethodLabel(methodKeyForEntry(entry))}
                              </div>
                            </td>
                            <td className="px-4 py-3">
                              <span className="text-xs px-2 py-1 rounded-full bg-[rgba(99,102,241,0.08)] text-[var(--ks-color-primary-strong)]">
                                {originLabel(entry.origin)}
                              </span>
                            </td>
                            <td className="px-4 py-3">
                              <span
                                className={`text-xs px-2 py-1 rounded-full ${
                                  entry.type === "IN"
                                    ? "bg-emerald-50 text-emerald-700"
                                    : "bg-rose-50 text-rose-700"
                                }`}
                              >
                                {typeLabel(entry.type)}
                              </span>
                            </td>
                            <td className="px-4 py-3 text-zinc-600">
                              {entry.bank_account_name || entry.bank_name || "—"}
                            </td>
                            <td className="px-4 py-3 text-right font-semibold text-[var(--ks-color-text-primary)]">
                              {dinheiro(entry.amount)}
                            </td>
                            <td className="px-4 py-3 text-right">
                              {entry.origin === "PEDIDO" && entry.order_id ? (
                                <Link
                                  href={`/dashboard/orders/${entry.order_id}`}
                                  className="text-xs font-medium text-[var(--ks-color-primary-strong)] hover:underline"
                                >
                                  Ver pedido
                                </Link>
                              ) : entry.origin === "PAGAR" && entry.payable_id ? (
                                <Link
                                  href="/dashboard/financial/payables"
                                  className="text-xs font-medium text-[var(--ks-color-primary-strong)] hover:underline"
                                >
                                  Ver conta
                                </Link>
                              ) : (
                                <span className="text-xs text-[var(--ks-color-text-muted)]">—</span>
                              )}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </div>

              {drillEntries.length > pageSize ? (
                <div className="p-5 border-t border-[rgba(225,228,240,0.9)] flex items-center justify-between">
                  <p className="text-xs text-[var(--ks-color-text-muted)]">
                    Página {drillPage} de {totalPages}
                  </p>
                  <div className="flex items-center gap-2">
                    <Button
                      variant="ghost"
                      onClick={() => setDrillPage((prev) => Math.max(1, prev - 1))}
                      disabled={drillPage === 1}
                    >
                      <ChevronLeft size={16} />
                    </Button>
                    <Button
                      variant="ghost"
                      onClick={() => setDrillPage((prev) => Math.min(totalPages, prev + 1))}
                      disabled={drillPage === totalPages}
                    >
                      <ChevronRight size={16} />
                    </Button>
                  </div>
                </div>
              ) : null}
            </motion.div>
          </div>
        ) : null}
      </AnimatePresence>
    </div>
  );
}