// Shared monthly cost + potential savings trend chart: one point per run,
// two lines over a date x-axis. The fleet dashboard (runs aggregated
// client-side) and the region history page feed it their own point
// transforms; nulls render as line gaps (recharts connectNulls=false).

import { CHART_GRID_STROKE, CHART_MIN_TICK_GAP, CHART_SERIES, axisUsd } from "@/lib/chart";
import {
  CartesianGrid,
  Legend,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import { money } from "@/lib/fmt";

export interface CostSavingsPoint {
  /** UTC+8 calendar date label ("YYYY-MM-DD"). */
  date: string;
  cost: number | null;
  savings: number | null;
}

export function CostSavingsTrendChart({ data }: { data: CostSavingsPoint[] }) {
  return (
    <div className="h-64">
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={data} margin={{ top: 8, right: 16, bottom: 0, left: 8 }}>
          <CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_STROKE} />
          <XAxis dataKey="date" tick={{ fontSize: 11 }} minTickGap={CHART_MIN_TICK_GAP} />
          <YAxis tick={{ fontSize: 11 }} tickFormatter={axisUsd} />
          <Tooltip
            formatter={(value, name) => [
              money(Number(value)),
              name === "cost" ? "monthly cost" : "potential savings",
            ]}
          />
          <Legend formatter={(v) => (v === "cost" ? "monthly cost" : "potential savings")} />
          <Line type="monotone" dataKey="cost" stroke={CHART_SERIES.cost} strokeWidth={2} dot={false} />
          <Line type="monotone" dataKey="savings" stroke={CHART_SERIES.savings} strokeWidth={2} dot={false} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}