knur-app/components/elevation-chart.tsx

"use client";

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

type Point = { distanceKm: number; altM: number; paceSec?: number };

type Props = {
  data: Point[];
  syncId?: string;
};

function fmtPace(sec: number): string {
  const m = Math.floor(sec / 60);
  const s = Math.round(sec % 60);
  return `${m}:${s.toString().padStart(2, "0")} /km`;
}

export function ElevationChart({ data, syncId }: Props) {
  const uid = useId();
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  if (!mounted) {
    return <div className="h-[140px] animate-pulse rounded-lg border border-muted/40 bg-surface" />;
  }

  const altitudes = data.map((p) => p.altM);
  const minAlt = Math.min(...altitudes);
  const maxAlt = Math.max(...altitudes);
  const altPad = Math.max(5, Math.round((maxAlt - minAlt) * 0.15));

  const pacePoints = data.map((p) => p.paceSec).filter((v): v is number => v != null && v > 0);
  const hasPace = pacePoints.length > 5;
  const minPace = hasPace ? Math.min(...pacePoints) : 0;
  const maxPace = hasPace ? Math.max(...pacePoints) : 0;
  const pacePad = Math.max(5, Math.round((maxPace - minPace) * 0.15));

  const tooltipStyle = {
    background: "var(--color-bg)",
    border: "1px solid var(--color-muted)",
    borderRadius: 8,
    fontSize: 12,
    color: "var(--color-fg)",
  };

  return (
    <div className="w-full rounded-lg border border-muted/40 bg-surface p-4">
      <div className="mb-2 flex items-center gap-4 text-sm text-fg/60">
        <span>Profil wysokości</span>
        {hasPace && (
          <span className="flex items-center gap-1">
            <span className="inline-block h-0.5 w-4" style={{ background: "var(--color-sand)" }} />
            Tempo
          </span>
        )}
      </div>
      <ResponsiveContainer width="100%" height={110}>
        <ComposedChart syncId={syncId} data={data} margin={{ top: 4, right: hasPace ? 52 : 8, left: 0, bottom: 0 }}>
          <defs>
            <linearGradient id={`elev-${uid}`} x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="var(--color-accent)" stopOpacity={0.25} />
              <stop offset="95%" stopColor="var(--color-accent)" stopOpacity={0} />
            </linearGradient>
          </defs>
          <CartesianGrid stroke="var(--color-muted)" opacity={0.3} vertical={false} />
          <XAxis
            dataKey="distanceKm"
            stroke="var(--color-fg)"
            opacity={0.5}
            fontSize={11}
            tickFormatter={(v) => `${Number(v).toFixed(1)} km`}
            interval={Math.max(0, Math.floor(data.length / 5) - 1)}
          />
          <YAxis
            yAxisId="elev"
            stroke="var(--color-fg)"
            opacity={0.5}
            fontSize={11}
            width={44}
            tickFormatter={(v) => `${Math.round(v)} m`}
            domain={[minAlt - altPad, maxAlt + altPad]}
          />
          {hasPace && (
            <YAxis
              yAxisId="pace"
              orientation="right"
              reversed
              stroke="var(--color-sand)"
              opacity={0.5}
              fontSize={11}
              width={50}
              tickFormatter={fmtPace}
              domain={[minPace - pacePad, maxPace + pacePad]}
            />
          )}
          <Tooltip
            contentStyle={tooltipStyle}
            formatter={(value, name) => {
              if (name === "altM") return [`${Math.round(Number(value))} m n.p.m.`, "Wysokość"];
              if (name === "paceSec") return [fmtPace(Number(value)), "Tempo"];
              return [value, name];
            }}
            labelFormatter={(l) => `${Number(l).toFixed(2)} km`}
          />
          <Area
            yAxisId="elev"
            type="monotone"
            dataKey="altM"
            name="altM"
            stroke="var(--color-accent)"
            strokeWidth={2}
            fill={`url(#elev-${uid})`}
            dot={false}
          />
          {hasPace && (
            <Line
              yAxisId="pace"
              type="monotone"
              dataKey="paceSec"
              name="paceSec"
              stroke="var(--color-sand)"
              strokeWidth={1.5}
              dot={false}
              connectNulls={false}
            />
          )}
        </ComposedChart>
      </ResponsiveContainer>
    </div>
  );
}