"use client";
import * as React from "react";
import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import { formatMs } from "@/lib/format";
import { AXIS_TICK, CHART_COLORS, CHART_MARGIN, formatBucketLabel, formatTick } from "./chart-theme";
import { ChartTooltip } from "./chart-tooltip";
import { ChartLegend } from "./chart-frame";

export interface LatencyPoint {
  t: string;
  p50: number | null;
  p95: number | null;
}

/** P50 (accent) and P95 (neutral) latency over time; one axis, gaps where no requests happened. */
export function LatencyLineChart({ data, bucket, height = 240 }: { data: LatencyPoint[]; bucket: "hour" | "day"; height?: number }) {
  const last = [...data].reverse().find((d) => d.p50 !== null);
  const tickEvery = Math.max(1, Math.ceil(data.length / (bucket === "hour" ? 8 : 10)));
  return (
    <div>
      <ChartLegend
        className="mb-3"
        items={[
          { label: "P50", color: CHART_COLORS.accent, value: last ? formatMs(last.p50) : undefined },
          { label: "P95", color: CHART_COLORS.muted, value: last ? formatMs(last.p95) : undefined },
        ]}
      />
      <ResponsiveContainer width="100%" height={height}>
        <LineChart data={data} margin={CHART_MARGIN}>
          <CartesianGrid vertical={false} stroke={CHART_COLORS.grid} />
          <XAxis dataKey="t" tickFormatter={(v: string) => formatTick(v, bucket)} tick={AXIS_TICK} axisLine={false} tickLine={false} interval={tickEvery - 1} minTickGap={16} />
          <YAxis tick={AXIS_TICK} axisLine={false} tickLine={false} width={48} tickFormatter={(v: number) => formatMs(v)} />
          <Tooltip cursor={{ stroke: CHART_COLORS.faint, strokeWidth: 1 }} content={<ChartTooltip labelFormatter={(l) => formatBucketLabel(String(l), bucket)} names={{ p50: "P50", p95: "P95" }} valueFormatter={(v) => formatMs(v)} />} />
          <Line type="monotone" dataKey="p95" stroke={CHART_COLORS.muted} strokeWidth={2} dot={false} activeDot={{ r: 4, strokeWidth: 2, stroke: CHART_COLORS.surface }} connectNulls={false} isAnimationActive={false} />
          <Line type="monotone" dataKey="p50" stroke={CHART_COLORS.accent} strokeWidth={2} dot={false} activeDot={{ r: 4, strokeWidth: 2, stroke: CHART_COLORS.surface }} connectNulls={false} isAnimationActive={false} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}