import Link from "next/link";
import { Plus } from "lucide-react";
import { createClient } from "@/lib/supabase/server";
import { getLookups } from "@/lib/data";
import { currentMonth, isMonth, money, monthRange, today } from "@/lib/format";
import type { Transaction } from "@/lib/types";
import { PageHeader } from "@/components/PageHeader";
import { MonthNav } from "@/components/MonthNav";
import { TransactionForm } from "@/components/TransactionForm";
import { TransactionRow } from "@/components/TransactionRow";

type SP = { mes?: string; tipo?: string; novo?: string; editar?: string };

export default async function PagarReceber({ params, searchParams }: { params: Promise<{ ws: string }>; searchParams: Promise<SP> }) {
  const { ws } = await params;
  const sp = await searchParams;
  const month = isMonth(sp.mes) ? sp.mes : currentMonth();
  const { start, end } = monthRange(month);
  const tipo = sp.tipo === "receita" || sp.tipo === "despesa" ? sp.tipo : undefined;
  const base = `/w/${ws}/pagar-receber`;
  const qs = (extra: Record<string, string | undefined> = {}) => {
    const p = new URLSearchParams();
    Object.entries({ mes: month, tipo, ...extra }).forEach(([k, v]) => v && p.set(k, v));
    return `${base}?${p}`;
  };

  const supabase = await createClient();
  const pending = supabase.from("transactions").select("*").eq("workspace_id", ws).is("paid_at", null);
  const [monthRes, lateRes, lookups, editing] = await Promise.all([
    pending.gte("date", start).lte("date", end).order("date"),
    supabase.from("transactions").select("*").eq("workspace_id", ws).is("paid_at", null).lt("date", today()).lt("date", start).order("date"),
    getLookups(ws),
    sp.editar ? supabase.from("transactions").select("*").eq("id", sp.editar).single() : Promise.resolve({ data: null }),
  ]);

  const filt = (l: Transaction[]) => (tipo ? l.filter((t) => t.type === tipo) : l);
  const inMonth = filt((monthRes.data ?? []) as Transaction[]);
  const lateBefore = filt((lateRes.data ?? []) as Transaction[]);
  const all = [...(monthRes.data ?? []), ...(lateRes.data ?? [])] as Transaction[];
  const sum = (l: Transaction[], t: string) => l.filter((x) => x.type === t).reduce((s, x) => s + Number(x.amount), 0);
  const late = all.filter((t) => t.date < today());

  const catMap = new Map(lookups.categories.map((c) => [c.id, c]));
  const accMap = new Map(lookups.accounts.map((a) => [a.id, a]));
  const memMap = new Map(lookups.members.map((m) => [m.user_id, m.name.split(" ")[0]]));
  const rows = (l: Transaction[]) =>
    l.map((t) => <TransactionRow key={t.id} tx={t} ws={ws} categories={catMap} accounts={accMap} members={memMap} editHref={qs({ editar: t.id })} />);

  const Tab = ({ v, label }: { v?: string; label: string }) => (
    <Link href={qs({ tipo: v })} className={`rounded-md px-3 py-1 text-sm ${tipo === v ? "bg-stone-900 text-white" : "text-stone-600 hover:bg-stone-100"}`}>{label}</Link>
  );

  return (
    <>
      <PageHeader title="Pagar e receber" subtitle="Lançamentos pendentes, vencimentos e atrasos">
        <MonthNav month={month} basePath={base} extra={{ tipo }} />
        <Link href={qs({ novo: "1" })} className="btn-primary"><Plus size={16} /> Nova conta</Link>
      </PageHeader>

      <div className="mb-6 grid gap-4 sm:grid-cols-3">
        <div className="card"><div className="text-xs text-stone-500">A pagar no mês</div><div className="mt-1 text-2xl font-semibold text-expense tabular">{money(sum((monthRes.data ?? []) as Transaction[], "despesa"))}</div></div>
        <div className="card"><div className="text-xs text-stone-500">A receber no mês</div><div className="mt-1 text-2xl font-semibold text-income tabular">{money(sum((monthRes.data ?? []) as Transaction[], "receita"))}</div></div>
        <div className="card"><div className="text-xs text-stone-500">Em atraso (todos os meses)</div>
          <div className="mt-1 text-2xl font-semibold text-red-600 tabular">{late.length}</div>
          <div className="text-xs text-stone-500">{money(sum(late, "despesa"))} a pagar · {money(sum(late, "receita"))} a receber</div>
        </div>
      </div>

      {(sp.novo || editing.data) && (
        <TransactionForm ws={ws} accounts={lookups.accounts} categories={lookups.categories} defaultStatus="pendente"
          tx={editing.data as Transaction | null} back={qs()} cancelHref={qs()} />
      )}

      <div className="mb-3 inline-flex gap-1 rounded-lg border border-stone-200 bg-white p-1">
        <Tab label="Tudo" /><Tab v="despesa" label="A pagar" /><Tab v="receita" label="A receber" />
      </div>

      <div className="card overflow-x-auto p-0">
        <table className="table">
          <thead><tr><th>Vencimento</th><th>Descrição</th><th>Categoria</th><th>Status</th><th className="text-right!">Valor</th><th /></tr></thead>
          <tbody>
            {!!lateBefore.length && (
              <tr><td colSpan={6} className="bg-red-50 text-xs font-medium text-red-700">Atrasados de meses anteriores</td></tr>
            )}
            {rows(lateBefore)}
            {!!lateBefore.length && !!inMonth.length && (
              <tr><td colSpan={6} className="bg-stone-50 text-xs font-medium text-stone-600">Neste mês</td></tr>
            )}
            {rows(inMonth)}
            {!inMonth.length && !lateBefore.length && (
              <tr><td colSpan={6} className="py-10 text-center text-stone-500">Nada pendente neste mês.</td></tr>
            )}
          </tbody>
        </table>
      </div>
      <p className="mt-3 text-xs text-stone-500">Use ✓ para dar baixa: o lançamento vira pago com a data de hoje e entra no saldo da conta.</p>
    </>
  );
}