knur-app/components/exercise-progress-chart.tsx

"use client";

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

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

function E1rmDelta({ data }: { data: ExerciseProgressChartProps["data"] }) {
  const points = data.filter((d) => d.e1rmKg != null).slice(-5);
  if (points.length < 2) return null;

  const first = points[0].e1rmKg!;
  const last = points[points.length - 1].e1rmKg!;
  const diffKg = Math.round((last - first) * 10) / 10;
  const diffPct = Math.round(((last - first) / first) * 100);
  const sign = diffKg >= 0 ? "+" : "";
  const color = diffKg > 0 ? "text-emerald-400" : diffKg < 0 ? "text-rose-400" : "text-fg/40";

  return (
    <span className={`text-xs font-medium tabular-nums ${color}`}>
      E1RM {sign}{diffKg} kg ({sign}{diffPct}%)
    </span>
  );
}

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

  if (data.length < 2) return null;

  if (!mounted) {
    return (
      <div className="w-full rounded-lg border border-muted/40 bg-surface p-4">
        <div className="mb-2 h-4 w-32 animate-pulse rounded bg-muted/30" />
        <div className="h-[150px] 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 flex items-baseline justify-between gap-2">
        <span className="text-sm text-fg/60">{name}</span>
        <E1rmDelta data={data} />
      </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) => {
              if (key === "volumeKg") return [`${Math.round(Number(value)).toLocaleString("pl-PL")} kg`, "Wolumen"];
              if (key === "topWeightKg") return [`${value} kg`, "Maks. ciężar"];
              if (key === "e1rmKg") return [`${value} kg`, "E1RM (Epley)"];
              return [`${value}`, String(key)];
            }}
          />
          <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 }}
          />
          <Line
            yAxisId="weight"
            type="monotone"
            dataKey="e1rmKg"
            stroke="#60a5fa"
            strokeWidth={2}
            strokeDasharray="4 2"
            dot={{ r: 3 }}
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}