"use client";

import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";

type ExerciseProgressChartProps = {
  name: string;
  data: { label: string; volumeKg: number; topWeightKg?: number }[];
};

export function ExerciseProgressChart({ name, data }: ExerciseProgressChartProps) {
  if (data.length < 2) {
    return null;
  }

  return (
    <div className="w-full rounded-lg border border-muted/40 bg-surface p-4">
      <div className="mb-2 text-sm text-fg/60">{name}</div>
      <ResponsiveContainer width="100%" height={150}>
        <LineChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
          <CartesianGrid stroke="var(--color-muted)" opacity={0.3} vertical={false} />
          <XAxis dataKey="label" stroke="var(--color-fg)" opacity={0.5} fontSize={12} />
          <YAxis yAxisId="volume" stroke="var(--color-accent)" opacity={0.7} fontSize={12} width={48} />
          <YAxis
            yAxisId="weight"
            orientation="right"
            stroke="var(--color-sand)"
            opacity={0.7}
            fontSize={12}
            width={48}
          />
          <Tooltip
            contentStyle={{
              background: "var(--color-bg)",
              border: "1px solid var(--color-muted)",
              borderRadius: 8,
              fontSize: 12,
              color: "var(--color-fg)",
            }}
            formatter={(value, key) => [
              key === "topWeightKg" ? `${value} kg` : `${Math.round(Number(value)).toLocaleString("pl-PL")} kg`,
              key === "topWeightKg" ? "Maks. ciężar" : "Wolumen",
            ]}
          />
          <Line
            yAxisId="volume"
            type="monotone"
            dataKey="volumeKg"
            stroke="var(--color-accent)"
            strokeWidth={2}
            dot={{ r: 3 }}
          />
          <Line
            yAxisId="weight"
            type="monotone"
            dataKey="topWeightKg"
            stroke="var(--color-sand)"
            strokeWidth={2}
            dot={{ r: 3 }}
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}