"use client";

import { useEffect, useState } from "react";
import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";

type VolumeChartProps = {
  data: { label: string; volumeKg: number }[];
};

export function VolumeChart({ data }: VolumeChartProps) {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  if (!mounted) {
    return (
      <div className="w-full rounded-lg border border-muted/40 bg-surface p-4">
        <div className="mb-2 h-4 w-56 animate-pulse rounded bg-muted/30" />
        <div className="h-[180px] animate-pulse rounded bg-muted/20" />
      </div>
    );
  }

  return (
    <div className="w-full rounded-lg border border-muted/40 bg-surface p-4">
      <div className="mb-2 text-sm text-fg/60">Wolumen treningowy (ciężar × powtórzenia)</div>
      <ResponsiveContainer width="100%" height={180}>
        <BarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
          <XAxis dataKey="label" stroke="var(--color-fg)" opacity={0.5} fontSize={12} />
          <YAxis stroke="var(--color-fg)" opacity={0.5} fontSize={12} width={48} />
          <Tooltip
            cursor={{ fill: "var(--color-bg)" }}
            contentStyle={{
              background: "var(--color-bg)",
              border: "1px solid var(--color-muted)",
              borderRadius: 8,
              fontSize: 12,
              color: "var(--color-fg)",
            }}
            formatter={(value) => [`${Math.round(Number(value)).toLocaleString("pl-PL")} kg`, "Wolumen"]}
          />
          <Bar dataKey="volumeKg" fill="var(--color-accent)" radius={[4, 4, 0, 0]} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}