import Link from "next/link";
import { AlertTriangle, ArrowDownRight, ArrowUpRight, Wallet } from "lucide-react";
import { createClient } from "@/lib/supabase/server";
import { getLookups, getWorkspace } from "@/lib/data";
import { currentMonth, dateBR, isMonth, money, monthRange, monthShort, shiftMonth, today } from "@/lib/format";
import type { Transaction } from "@/lib/types";
import { PageHeader } from "@/components/PageHeader";
import { MonthNav } from "@/components/MonthNav";
import { CategoryChart, MonthlyChart } from "@/components/Charts";
import { Progress } from "@/components/Progress";
import { ACCOUNT_TYPES } from "@/lib/types";

export default async function Dashboard({ params, searchParams }: { params: Promise<{ ws: string }>; searchParams: Promise<{ mes?: string }> }) {
  const { ws } = await params;
  const { mes } = await searchParams;
  const month = isMonth(mes) ? mes : currentMonth();
  const { start, end } = monthRange(month);
  const from6 = monthRange(shiftMonth(month, -5)).start;
  const base = `/w/${ws}`;

  const supabase = await createClient();
  const [workspace, lookups, txRes, balRes, budRes, upcomingRes] = await Promise.all([
    getWorkspace(ws),
    getLookups(ws),
    supabase.from("transactions").select("type,amount,date,paid_at,category_id").eq("workspace_id", ws).gte("date", from6).lte("date", end),
    supabase.from("account_balances").select("*").eq("workspace_id", ws).eq("archived", false).order("name"),
    supabase.from("budgets").select("category_id,amount").eq("workspace_id", ws),
    supabase.from("transactions").select("*").eq("workspace_id", ws).is("paid_at", null).order("date").limit(8),
  ]);

  const txs = (txRes.data ?? []) as Pick<Transaction, "type" | "amount" | "date" | "paid_at" | "category_id">[];
  const inMonth = txs.filter((t) => t.date >= start);
  const sum = (l: typeof txs, type: string, onlyPaid = false) =>
    l.filter((t) => t.type === type && (!onlyPaid || t.paid_at)).reduce((s, t) => s + Number(t.amount), 0);

  const receitas = sum(inMonth, "receita");
  const despesas = sum(inMonth, "despesa");
  const recPend = receitas - sum(inMonth, "receita", true);
  const despPend = despesas - sum(inMonth, "despesa", true);
  const balances = (balRes.data ?? []) as { id: string; name: string; type: string; balance: number }[];
  const saldo = balances.reduce((s, a) => s + Number(a.balance), 0);

  const monthly = Array.from({ length: 6 }, (_, i) => {
    const m = shiftMonth(month, i - 5);
    const l = txs.filter((t) => t.date.startsWith(m));
    const r = sum(l, "receita"), d = sum(l, "despesa");
    return { label: monthShort(m), receitas: r, despesas: d, resultado: r - d };
  });

  const catMap = new Map(lookups.categories.map((c) => [c.id, c]));
  const byCat = new Map<string, number>();
  inMonth.filter((t) => t.type === "despesa").forEach((t) => byCat.set(t.category_id ?? "", (byCat.get(t.category_id ?? "") ?? 0) + Number(t.amount)));
  const catData = [...byCat.entries()]
    .map(([id, value]) => ({ name: catMap.get(id)?.name ?? "Sem categoria", color: catMap.get(id)?.color ?? "#a8a29e", value }))
    .sort((a, b) => b.value - a.value);

  const budgets = (budRes.data ?? []).map((b) => ({
    name: catMap.get(b.category_id)?.name ?? "—", limit: Number(b.amount), spent: byCat.get(b.category_id) ?? 0,
  })).sort((a, b) => b.spent / b.limit - a.spent / a.limit);

  const upcoming = (upcomingRes.data ?? []) as Transaction[];
  const t0 = today();

  const Kpi = ({ label, value, hint, icon, tone }: { label: string; value: number; hint?: string; icon: React.ReactNode; tone?: string }) => (
    <div className="card">
      <div className="flex items-center justify-between text-xs text-stone-500">{label}{icon}</div>
      <div className={`mt-1 text-2xl font-semibold tabular ${tone ?? ""}`}>{money(value)}</div>
      {hint && <div className="mt-0.5 text-xs text-stone-500">{hint}</div>}
    </div>
  );

  return (
    <>
      <PageHeader title={workspace.name} subtitle={workspace.kind === "empresa" ? "Carteira empresarial" : "Carteira pessoal"}>
        <MonthNav month={month} basePath={base} />
      </PageHeader>

      <div className="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Kpi label="Saldo atual em contas" value={saldo} icon={<Wallet size={14} />} tone={saldo < 0 ? "text-expense" : ""} hint={`${balances.length} conta(s) ativa(s)`} />
        <Kpi label="Receitas do mês" value={receitas} icon={<ArrowUpRight size={14} className="text-income" />} tone="text-income" hint={recPend ? `${money(recPend)} a receber` : "tudo recebido"} />
        <Kpi label="Despesas do mês" value={despesas} icon={<ArrowDownRight size={14} className="text-expense" />} tone="text-expense" hint={despPend ? `${money(despPend)} a pagar` : "tudo pago"} />
        <Kpi label="Resultado do mês" value={receitas - despesas} icon={null} tone={receitas - despesas >= 0 ? "text-income" : "text-expense"}
          hint={receitas ? `margem de ${Math.round(((receitas - despesas) / receitas) * 100)}%` : undefined} />
      </div>

      <div className="mb-6 grid gap-4 lg:grid-cols-5">
        <div className="card lg:col-span-3"><div className="card-title">Últimos 6 meses</div><MonthlyChart data={monthly} /></div>
        <div className="card lg:col-span-2"><div className="card-title">Despesas por categoria</div><CategoryChart data={catData} /></div>
      </div>

      <div className="grid gap-4 lg:grid-cols-3">
        <div className="card">
          <div className="mb-3 flex items-center justify-between">
            <span className="card-title mb-0">Próximos vencimentos</span>
            <Link href={`${base}/pagar-receber`} className="text-xs text-brand-600 hover:underline">ver todos</Link>
          </div>
          <ul className="space-y-2 text-sm">
            {upcoming.map((t) => (
              <li key={t.id} className="flex items-center gap-2">
                {t.date < t0 && <AlertTriangle size={14} className="shrink-0 text-red-500" />}
                <span className={`w-20 shrink-0 tabular ${t.date < t0 ? "text-red-600" : "text-stone-500"}`}>{dateBR(t.date)}</span>
                <span className="flex-1 truncate">{t.description}</span>
                <span className={`tabular font-medium ${t.type === "receita" ? "text-income" : "text-expense"}`}>{money(t.amount)}</span>
              </li>
            ))}
            {!upcoming.length && <li className="text-stone-500">Nenhuma conta pendente.</li>}
          </ul>
        </div>

        <div className="card">
          <div className="mb-3 flex items-center justify-between">
            <span className="card-title mb-0">Orçamento do mês</span>
            <Link href={`${base}/orcamento`} className="text-xs text-brand-600 hover:underline">ajustar</Link>
          </div>
          <ul className="space-y-3 text-sm">
            {budgets.slice(0, 6).map((b) => (
              <li key={b.name}>
                <div className="mb-1 flex justify-between"><span>{b.name}</span>
                  <span className={`tabular ${b.spent > b.limit ? "text-red-600" : "text-stone-500"}`}>{money(b.spent)} / {money(b.limit)}</span></div>
                <Progress value={b.spent} max={b.limit} />
              </li>
            ))}
            {!budgets.length && <li className="text-stone-500">Defina limites por categoria em <Link className="text-brand-600" href={`${base}/orcamento`}>Orçamento</Link>.</li>}
          </ul>
        </div>

        <div className="card">
          <div className="mb-3 flex items-center justify-between">
            <span className="card-title mb-0">Saldo por conta</span>
            <Link href={`${base}/cadastros`} className="text-xs text-brand-600 hover:underline">gerenciar</Link>
          </div>
          <ul className="space-y-2 text-sm">
            {balances.map((a) => (
              <li key={a.id} className="flex items-center justify-between">
                <span>{a.name}<span className="ml-1.5 text-xs text-stone-400">{ACCOUNT_TYPES[a.type]}</span></span>
                <span className={`tabular font-medium ${Number(a.balance) < 0 ? "text-expense" : ""}`}>{money(a.balance)}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </>
  );
}