"use client";

import { useRef } from "react";
import {
  BarChart as RechartsBarChart,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  CartesianGrid,
  Cell,
  ResponsiveContainer,
  Rectangle,
} from "recharts";
import { CHART_COLORS, CHART_CONFIG } from "./chart-config";

export interface BarChartDatum {
  label: string;
  value: number;
}

export interface BarChartComponentProps {
  title: string;
  description?: string | null;
  data: BarChartDatum[];
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function AnimatedBar({ isNew, ...rest }: any) {
  return (
    <g
      style={
        isNew
          ? { animation: "barSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both" }
          : undefined
      }
    >
      <Rectangle {...rest} />
    </g>
  );
}

export function BarChart({ title, description, data }: BarChartComponentProps) {
  const seen = useRef(new Set<number>());
  const isNew = (i: number) => {
    if (seen.current.has(i)) return false;
    seen.current.add(i);
    return true;
  };

  const hasData = Array.isArray(data) && data.length > 0;

  return (
    <div
      data-testid="bar-chart"
      className="max-w-2xl mx-auto my-4 overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--card)]"
    >
      {hasData && (
        <style>{`@keyframes barSlideIn { from { transform: translateY(40px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(0); opacity: 1; } }`}</style>
      )}
      <div className="p-6 pb-2">
        <h3 className="text-lg font-semibold leading-none tracking-tight text-[var(--foreground)]">
          {title}
        </h3>
        {description ? (
          <p className="text-sm text-[var(--muted-foreground)]">
            {description}
          </p>
        ) : null}
      </div>
      <div className="p-6 pt-2">
        {hasData ? (
          <ResponsiveContainer width="100%" height={280}>
            <RechartsBarChart
              data={data}
              margin={{ top: 12, right: 12, bottom: 4, left: -8 }}
            >
              <CartesianGrid
                strokeDasharray="3 3"
                stroke="var(--border)"
                vertical={false}
              />
              <XAxis
                dataKey="label"
                tick={{ fontSize: 12, fill: "var(--muted-foreground)" }}
                stroke="var(--border)"
                tickLine={false}
                axisLine={false}
              />
              <YAxis
                tick={{ fontSize: 12, fill: "var(--muted-foreground)" }}
                stroke="var(--border)"
                tickLine={false}
                axisLine={false}
              />
              <Tooltip
                contentStyle={CHART_CONFIG.tooltipStyle}
                cursor={{ fill: "var(--secondary)", opacity: 0.5 }}
              />
              <Bar
                isAnimationActive={false}
                dataKey="value"
                radius={[6, 6, 0, 0]}
                maxBarSize={48}
                shape={(props: unknown) => {
                  const p = props as Record<string, unknown>;
                  return (
                    <AnimatedBar {...p} isNew={isNew(p.index as number)} />
                  );
                }}
              >
                {data.map((_, i) => (
                  <Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />
                ))}
              </Bar>
            </RechartsBarChart>
          </ResponsiveContainer>
        ) : (
          <p className="text-[var(--muted-foreground)] text-center py-8 text-sm">
            No data available
          </p>
        )}
      </div>
    </div>
  );
}
