"use client";

import { WidgetEmptyState } from "@/components/widget-empty-state";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import type { PagadorHistoryPoint } from "@/lib/pagadores/details";
import { RiBarChartLine } from "@remixicon/react";
import {
  Bar,
  BarChart,
  CartesianGrid,
  LabelList,
  type LabelProps,
  XAxis,
} from "recharts";
import { currencyFormatter } from "@/lib/lancamentos/formatting-helpers";

const chartConfig = {
  despesas: {
    label: "Despesas",
    color: "hsl(356, 72%, 50%)",
  },
};

type PagadorHistoryCardProps = {
  data: PagadorHistoryPoint[];
};

const ValueLabel = (props: LabelProps) => {
  const { x, y, value, width } = props;
  if (typeof x !== "number" || typeof y !== "number" || width === undefined) {
    return null;
  }
  const labelX = x + (Number(width) ?? 0) / 2;
  const amount =
    typeof value === "number" ? currencyFormatter.format(value) : value;
  const labelY = Math.max(y - 6, 12);
  return (
    <text
      x={labelX}
      y={labelY}
      fill="currentColor"
      textAnchor="middle"
      className="text-[11px] font-semibold text-muted-foreground"
    >
      {amount}
    </text>
  );
};

export function PagadorHistoryCard({ data }: PagadorHistoryCardProps) {
  const hasData = data.length > 0;

  return (
    <Card className="border">
      <CardHeader className="gap-1.5 pb-3">
        <CardTitle className="text-lg font-semibold">
          Evolução (últimos 6 meses)
        </CardTitle>
        <p className="text-xs text-muted-foreground">
          Despesas registradas para este pagador ao longo do tempo.
        </p>
      </CardHeader>

      <CardContent className="pt-0">
        {hasData ? (
          <ChartContainer
            config={chartConfig}
            className="mx-auto flex h-[210px] w-full max-w-[520px] items-center justify-center aspect-auto"
          >
            <BarChart
              data={data}
              barCategoryGap={16}
              margin={{ top: 28, right: 8, left: 8, bottom: 0 }}
            >
              <CartesianGrid strokeDasharray="3 3" vertical={false} />
              <XAxis
                dataKey="label"
                tickLine={false}
                axisLine={false}
                tickMargin={8}
              />
              <ChartTooltip content={<ChartTooltipContent />} />
              <Bar
                dataKey="despesas"
                fill="var(--color-despesas)"
                radius={[6, 6, 0, 0]}
              >
                <LabelList dataKey="despesas" content={<ValueLabel />} />
              </Bar>
            </BarChart>
          </ChartContainer>
        ) : (
          <WidgetEmptyState
            icon={<RiBarChartLine className="size-6 text-muted-foreground" />}
            title="Sem dados para exibir"
            description="Ainda não há movimentações suficientes para gerar este gráfico."
          />
        )}
      </CardContent>
    </Card>
  );
}