"use client";

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

type Props = {
  data: { distanceKm: number; value: number }[];
  label: string;
  unit: string;
  color?: string;
  referenceLine?: number;
  decimals?: number;
  format?: "pace";
  reversed?: boolean;
  syncId?: string;
};

export function RunMetricChart({
  data,
  label,
  unit,
  color = "var(--color-accent)",
  referenceLine,
  decimals = 0,
  format,
  reversed = false,
  syncId,
}: Props) {
  const uid = useId();
  const gradId = `grad-${uid.replace(/:/g, "")}`;
  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" />;
  }

  const values = data.map((p) => p.value);
  const min = Math.min(...values);
  const max = Math.max(...values);
  const pad = Math.max(1, Math.round((max - min) * 0.15));
  const fmt = (v: number) => {
    if (format === "pace") {
      const m = Math.floor(v / 60);
      const s = Math.round(v % 60);
      return `${m}:${s.toString().padStart(2, "0")} /km`;
    }
    return decimals > 0 ? `${Number(v).toFixed(decimals)} ${unit}` : `${Math.round(v)} ${unit}`;
  };

  return (
    <div className="rounded-lg border border-muted/40 bg-surface p-4">
      <div className="mb-2 text-sm text-fg/60">{label}</div>
      <ResponsiveContainer width="100%" height={120}>
        <AreaChart syncId={syncId} data={data} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
          <defs>
            <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor={color} stopOpacity={0.25} />
              <stop offset="95%" stopColor={color} 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={50}
            tickFormatter={fmt}
            domain={reversed ? [max + pad, min - pad] : [min - pad, max + pad]}
            reversed={reversed}
          />
          <Tooltip
            contentStyle={{
              background: "var(--color-bg)",
              border: "1px solid var(--color-muted)",
              borderRadius: 8,
              fontSize: 12,
              color: "var(--color-fg)",
            }}
            formatter={(value) => fmt(Number(value))}
            labelFormatter={(l) => `${Number(l).toFixed(2)} km`}
          />
          {referenceLine !== undefined && (
            <ReferenceLine
              y={referenceLine}
              stroke="var(--color-fg)"
              strokeOpacity={0.4}
              strokeDasharray="4 4"
            />
          )}
          <Area
            type="monotone"
            dataKey="value"
            name={label}
            stroke={color}
            strokeWidth={2}
            fill={`url(#${gradId})`}
            dot={false}
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}