knur-app/components/gcb-chart.tsx

"use client";

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

type GcbPoint = { distanceKm: number; left: number; right: number };

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

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

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

  return (
    <div className="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>Balans kontaktu</span>
        <span className="flex items-center gap-1">
          <span className="inline-block h-2 w-4 rounded" style={{ background: "var(--color-accent)" }} />
          Lewa
        </span>
        <span className="flex items-center gap-1">
          <span className="inline-block h-2 w-4 rounded" style={{ background: "var(--color-sand)" }} />
          Prawa
        </span>
      </div>
      <ResponsiveContainer width="100%" height={120}>
        <AreaChart syncId={syncId} data={data} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
          <defs>
            <linearGradient id={`gcb-l-${uid}`} x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="var(--color-accent)" stopOpacity={0.2} />
              <stop offset="95%" stopColor="var(--color-accent)" stopOpacity={0} />
            </linearGradient>
            <linearGradient id={`gcb-r-${uid}`} x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="var(--color-sand)" stopOpacity={0.2} />
              <stop offset="95%" stopColor="var(--color-sand)" 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
            stroke="var(--color-fg)"
            opacity={0.5}
            fontSize={11}
            width={44}
            tickFormatter={(v) => `${Number(v).toFixed(0)}%`}
            domain={[40, 60]}
            ticks={[40, 45, 50, 55, 60]}
          />
          <Tooltip
            contentStyle={{
              background: "var(--color-bg)",
              border: "1px solid var(--color-muted)",
              borderRadius: 8,
              fontSize: 12,
              color: "var(--color-fg)",
            }}
            formatter={(value, name) => [
              `${Number(value).toFixed(1)}%`,
              name === "left" ? "Lewa" : "Prawa",
            ]}
            labelFormatter={(l) => `${Number(l).toFixed(2)} km`}
          />
          <ReferenceLine y={50} stroke="var(--color-fg)" strokeOpacity={0.3} strokeDasharray="4 4" />
          <Area
            type="monotone"
            dataKey="left"
            name="left"
            stroke="var(--color-accent)"
            strokeWidth={2}
            fill={`url(#gcb-l-${uid})`}
            dot={false}
          />
          <Area
            type="monotone"
            dataKey="right"
            name="right"
            stroke="var(--color-sand)"
            strokeWidth={2}
            fill={`url(#gcb-r-${uid})`}
            dot={false}
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}