"use client";

import { ArrowDownRight, ArrowUpRight, Minus } from "lucide-react";
import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Line, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";

import type { Formato } from "@/lib/paineis/metricas";

import { CORES, formatar, formatarCurto, type ResultadoDoWidget, type Widget } from "./comum";

type DicaProps = { active?: boolean; payload?: Array<{ name?: string; value?: number; color?: string; payload?: { rotulo?: string } }>; label?: string; formato: Formato };

function Dica({ active, payload, label, formato }: DicaProps) {
  if (!active || !payload?.length) return null;
  return (
    <div className="rounded-lg bg-white px-3 py-2 text-xs shadow-lg ring-1 ring-slate-200/70">
      <p className="mb-1 font-semibold text-slate-700">{label ?? payload[0]?.payload?.rotulo}</p>
      {payload.map((item, i) => (
        <p key={i} className="flex items-center gap-2 text-slate-600">
          <span className="h-2 w-2 rounded-full" style={{ background: item.color ?? CORES[0] }} />
          {payload.length > 1 ? `${item.name}: ` : ""}
          <span className="ks-num font-semibold text-slate-900">{formatar(item.value ?? 0, formato)}</span>
        </p>
      ))}
    </div>
  );
}

function Numero({ resultado }: { resultado: ResultadoDoWidget }) {
  const v = resultado.anterior?.variacao;
  const tom = v === null || v === undefined || v === 0 ? "flat" : v > 0 ? "up" : "down";
  const Icone = tom === "up" ? ArrowUpRight : tom === "down" ? ArrowDownRight : Minus;
  return (
    <div className="flex h-full flex-col justify-end gap-2">
      <p className="ks-num text-3xl font-bold tracking-tight text-slate-900">{formatar(resultado.valor, resultado.formato)}</p>
      {resultado.anterior ? (
        <div className="flex flex-wrap items-center gap-2 text-xs text-slate-500">
          <span className={`ks-delta ks-delta-${tom}`}>
            <Icone className="h-3.5 w-3.5" />
            {v === null || v === undefined ? "sem base" : `${v > 0 ? "+" : ""}${v.toLocaleString("pt-BR")}%`}
          </span>
          <span>
            antes: <span className="ks-num font-medium text-slate-600">{formatar(resultado.anterior.valor, resultado.formato)}</span> ({resultado.anterior.rotulo})
          </span>
        </div>
      ) : null}
    </div>
  );
}

function Barras({ resultado, noTempo }: { resultado: ResultadoDoWidget; noTempo: boolean }) {
  const dados = resultado.grupos ?? [];
  const f = resultado.formato;
  if (noTempo) {
    return (
      <ResponsiveContainer width="100%" height={240}>
        <BarChart data={dados} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
          <CartesianGrid vertical={false} stroke="#EEF0F5" />
          <XAxis dataKey="rotulo" tickLine={false} axisLine={false} tick={{ fontSize: 11, fill: "#8A8FA3" }} minTickGap={12} />
          <YAxis tickLine={false} axisLine={false} width={64} tick={{ fontSize: 11, fill: "#8A8FA3" }} tickFormatter={(n: number) => formatarCurto(n, f)} />
          <Tooltip cursor={{ fill: "rgba(124,58,237,0.06)" }} content={<Dica formato={f} />} />
          <Bar dataKey="valor" name="Valor" radius={[6, 6, 0, 0]} fill={CORES[0]} maxBarSize={36} />
        </BarChart>
      </ResponsiveContainer>
    );
  }
  const altura = Math.max(160, dados.length * 34 + 16);
  return (
    <ResponsiveContainer width="100%" height={altura}>
      <BarChart data={dados} layout="vertical" margin={{ top: 4, right: 16, left: 4, bottom: 4 }}>
        <XAxis type="number" hide />
        <YAxis
          type="category"
          dataKey="rotulo"
          width={150}
          tickLine={false}
          axisLine={false}
          tick={{ fontSize: 12, fill: "#3F3F58" }}
          tickFormatter={(rotulo: string) => (rotulo.length > 22 ? `${rotulo.slice(0, 21)}…` : rotulo)}
        />
        <Tooltip cursor={{ fill: "rgba(124,58,237,0.06)" }} content={<Dica formato={f} />} />
        <Bar dataKey="valor" name="Valor" radius={[0, 6, 6, 0]} maxBarSize={22}>
          {dados.map((_, i) => (
            <Cell key={i} fill={CORES[i % CORES.length]} />
          ))}
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  );
}

function Linha({ resultado }: { resultado: ResultadoDoWidget }) {
  const f = resultado.formato;
  const dados = (resultado.grupos ?? []).map((g) => ({ rotulo: g.rotulo, valor: g.valor, ...(g.extra ?? {}) }));
  const temEntradas = resultado.colunas.some((c) => c.id === "entradas");
  return (
    <ResponsiveContainer width="100%" height={240}>
      <AreaChart data={dados} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
        <defs>
          <linearGradient id={`grad-${resultado.widget_id}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={CORES[0]} stopOpacity={0.28} />
            <stop offset="100%" stopColor={CORES[0]} stopOpacity={0} />
          </linearGradient>
        </defs>
        <CartesianGrid vertical={false} stroke="#EEF0F5" />
        <XAxis dataKey="rotulo" tickLine={false} axisLine={false} tick={{ fontSize: 11, fill: "#8A8FA3" }} minTickGap={16} />
        <YAxis tickLine={false} axisLine={false} width={64} tick={{ fontSize: 11, fill: "#8A8FA3" }} tickFormatter={(n: number) => formatarCurto(n, f)} />
        <Tooltip content={<Dica formato={f} />} />
        {temEntradas ? (
          <>
            <Line type="monotone" dataKey="entradas" name="Entradas" stroke={CORES[2]} strokeWidth={2} dot={false} />
            <Line type="monotone" dataKey="saidas" name="Saídas" stroke={CORES[4]} strokeWidth={2} dot={false} />
          </>
        ) : null}
        <Area type="monotone" dataKey="valor" name={temEntradas ? "Saldo" : "Valor"} stroke={CORES[0]} strokeWidth={2.5} fill={`url(#grad-${resultado.widget_id})`} />
      </AreaChart>
    </ResponsiveContainer>
  );
}

function Pizza({ resultado }: { resultado: ResultadoDoWidget }) {
  const f = resultado.formato;
  const dados = (resultado.grupos ?? []).filter((g) => g.valor > 0);
  const total = dados.reduce((s, g) => s + g.valor, 0);
  return (
    <div className="flex flex-col items-center gap-4 sm:flex-row">
      <div className="h-[200px] w-[200px] shrink-0">
        <ResponsiveContainer width="100%" height="100%">
          <PieChart>
            <Pie data={dados} dataKey="valor" nameKey="rotulo" innerRadius={58} outerRadius={92} paddingAngle={2} stroke="none">
              {dados.map((_, i) => (
                <Cell key={i} fill={CORES[i % CORES.length]} />
              ))}
            </Pie>
            <Tooltip content={<Dica formato={f} />} />
          </PieChart>
        </ResponsiveContainer>
      </div>
      <ul className="w-full min-w-0 space-y-1.5 text-sm">
        {dados.map((g, i) => (
          <li key={g.chave} className="flex items-center gap-2">
            <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ background: CORES[i % CORES.length] }} />
            <span className="min-w-0 flex-1 truncate text-slate-700">{g.rotulo}</span>
            <span className="ks-num font-semibold text-slate-900">{formatar(g.valor, f)}</span>
            <span className="ks-num w-11 text-right text-xs text-slate-400">{total ? Math.round((g.valor / total) * 100) : 0}%</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function Tabela({ resultado }: { resultado: ResultadoDoWidget }) {
  const f = resultado.formato;
  const grupos = resultado.grupos ?? [];
  const colunas = resultado.colunas;
  const modelo = { gridTemplateColumns: `minmax(0,1fr) repeat(${colunas.length + 1}, minmax(72px, auto))` };
  return (
    <div className="-mx-1 text-sm">
      <div className="grid gap-3 px-1 pb-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-400" style={modelo}>
        <span>{(resultado.rotulo_do_grupo ?? "").replace(/^Por /, "") || "Item"}</span>
        <span className="text-right">Valor</span>
        {colunas.map((c) => (
          <span key={c.id} className="text-right">
            {c.rotulo}
          </span>
        ))}
      </div>
      {grupos.map((g, i) => (
        <div key={g.chave} className="grid items-center gap-3 border-t border-slate-100/60 px-1 py-2 hover:bg-[var(--ks-color-bg-subtle)]/50" style={modelo}>
          <span className="flex min-w-0 items-center gap-2">
            <span className="ks-num w-5 shrink-0 text-xs text-slate-400">{i + 1}</span>
            <span className="truncate font-medium text-slate-800">{g.rotulo}</span>
          </span>
          <span className="ks-num text-right font-semibold text-slate-900">{formatar(g.valor, f)}</span>
          {colunas.map((c) => (
            <span key={c.id} className="ks-num text-right text-slate-600">
              {formatar(g.extra?.[c.id] ?? 0, c.formato)}
            </span>
          ))}
        </div>
      ))}
    </div>
  );
}

export function ConteudoDoQuadro({ widget, resultado }: { widget: Widget; resultado: ResultadoDoWidget | undefined }) {
  if (!resultado) return <div className="h-24 animate-pulse rounded-lg bg-slate-100/70" />;
  if (resultado.erro) return <p className="text-sm text-slate-500">{resultado.erro}</p>;
  if (widget.tipo === "numero") return <Numero resultado={resultado} />;
  if (!resultado.grupos?.length || resultado.grupos.every((g) => g.valor === 0 && !g.extra)) {
    if (widget.tipo !== "linha") return <p className="py-8 text-center text-sm text-slate-400">Nada neste período.</p>;
  }
  if (widget.tipo === "barras") return <Barras resultado={resultado} noTempo={widget.agrupar_por === "tempo"} />;
  if (widget.tipo === "linha") return <Linha resultado={resultado} />;
  if (widget.tipo === "pizza") return <Pizza resultado={resultado} />;
  return <Tabela resultado={resultado} />;
}