import Link from "next/link";
import { Download, Plus } from "lucide-react";
import { createClient } from "@/lib/supabase/server";
import { getLookups } from "@/lib/data";
import { currentMonth, isMonth, money, monthRange } 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; cat?: string; conta?: string; q?: string; status?: string; novo?: string; editar?: string };

export default async function Lancamentos({ 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 base = `/w/${ws}/lancamentos`;
  const filters = { tipo: sp.tipo, cat: sp.cat, conta: sp.conta, q: sp.q, status: sp.status };
  const qs = (extra: Record<string, string | undefined> = {}) => {
    const p = new URLSearchParams();
    Object.entries({ mes: month, ...filters, ...extra }).forEach(([k, v]) => v && p.set(k, v));
    return `${base}?${p}`;
  };

  const supabase = await createClient();
  let q = supabase.from("transactions").select("*").eq("workspace_id", ws).gte("date", start).lte("date", end)
    .order("date", { ascending: false }).order("created_at", { ascending: false });
  if (sp.tipo === "receita" || sp.tipo === "despesa") q = q.eq("type", sp.tipo);
  if (sp.cat) q = q.eq("category_id", sp.cat);
  if (sp.conta) q = q.eq("account_id", sp.conta);
  if (sp.status === "pago") q = q.not("paid_at", "is", null);
  if (sp.status === "pendente") q = q.is("paid_at", null);
  if (sp.q) q = q.or(`description.ilike.%${sp.q.replace(/[,()%]/g, " ")}%,counterparty.ilike.%${sp.q.replace(/[,()%]/g, " ")}%`);

  const [{ data }, lookups, editing] = await Promise.all([
    q,
    getLookups(ws),
    sp.editar ? supabase.from("transactions").select("*").eq("id", sp.editar).single() : Promise.resolve({ data: null }),
  ]);
  const txs = (data ?? []) as Transaction[];
  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 inc = txs.filter((t) => t.type === "receita").reduce((s, t) => s + Number(t.amount), 0);
  const exp = txs.filter((t) => t.type === "despesa").reduce((s, t) => s + Number(t.amount), 0);
  const showForm = sp.novo || editing.data;

  return (
    <>
      <PageHeader title="Lançamentos" subtitle="Receitas e despesas da carteira">
        <MonthNav month={month} basePath={base} extra={filters} />
        <a href={`/w/${ws}/lancamentos/export?${new URLSearchParams({ mes: month })}`} className="btn"><Download size={16} /> CSV</a>
        <Link href={qs({ novo: "1" })} className="btn-primary"><Plus size={16} /> Novo</Link>
      </PageHeader>

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

      <form className="mb-4 flex flex-wrap gap-2" action={base}>
        <input type="hidden" name="mes" value={month} />
        <input className="input max-w-56" name="q" placeholder="Buscar descrição ou cliente…" defaultValue={sp.q} />
        <select className="input w-auto" name="tipo" defaultValue={sp.tipo ?? ""}>
          <option value="">Receitas e despesas</option><option value="receita">Receitas</option><option value="despesa">Despesas</option>
        </select>
        <select className="input w-auto" name="status" defaultValue={sp.status ?? ""}>
          <option value="">Todos status</option><option value="pago">Pagos</option><option value="pendente">Pendentes</option>
        </select>
        <select className="input w-auto" name="cat" defaultValue={sp.cat ?? ""}>
          <option value="">Todas categorias</option>
          {lookups.categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
        </select>
        <select className="input w-auto" name="conta" defaultValue={sp.conta ?? ""}>
          <option value="">Todas contas</option>
          {lookups.accounts.map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
        </select>
        <button className="btn">Filtrar</button>
        {Object.values(filters).some(Boolean) && <Link className="btn-ghost self-center" href={`${base}?mes=${month}`}>Limpar</Link>}
      </form>

      <div className="card overflow-x-auto p-0">
        <table className="table">
          <thead>
            <tr><th>Data</th><th>Descrição</th><th>Categoria</th><th>Status</th><th className="text-right!">Valor</th><th /></tr>
          </thead>
          <tbody>
            {txs.map((t) => (
              <TransactionRow key={t.id} tx={t} ws={ws} categories={catMap} accounts={accMap} members={memMap} editHref={qs({ editar: t.id })} />
            ))}
            {!txs.length && (
              <tr><td colSpan={6} className="py-10 text-center text-stone-500">Nenhum lançamento neste mês.</td></tr>
            )}
          </tbody>
          {!!txs.length && (
            <tfoot>
              <tr className="text-sm">
                <td colSpan={4} className="text-right text-stone-500">
                  Receitas <span className="font-medium text-income tabular">{money(inc)}</span> · Despesas{" "}
                  <span className="font-medium text-expense tabular">{money(exp)}</span> · Resultado
                </td>
                <td className={`text-right font-semibold tabular ${inc - exp >= 0 ? "text-income" : "text-expense"}`}>{money(inc - exp)}</td>
                <td />
              </tr>
            </tfoot>
          )}
        </table>
      </div>
    </>
  );
}