"use client";
import { Area, AreaChart, CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import { fmtPrice, fmtDate } from "@/lib/format";

const RED = "#e0263c";
export function PriceHistoryChart({ events, rent = false }: { events: { ts: string; price: number }[]; rent?: boolean }) {
  if (events.length < 2) return null;
  const data = events.map((e) => ({ t: new Date(e.ts).getTime(), price: e.price }));
  return (
    <div className="h-44">
      <ResponsiveContainer>
        <LineChart data={data} margin={{ top: 8, right: 8, bottom: 0, left: 0 }}>
          <CartesianGrid stroke="#eef0f3" vertical={false} />
          <XAxis dataKey="t" type="number" domain={["dataMin", "dataMax"]} tickFormatter={(v) => fmtDate(new Date(v).toISOString())} tick={{ fontSize: 11, fill: "#7a8190" }} axisLine={false} tickLine={false} minTickGap={40} />
          <YAxis tickFormatter={(v) => fmtPrice(v, { compact: true })} tick={{ fontSize: 11, fill: "#7a8190" }} axisLine={false} tickLine={false} width={56} domain={["auto", "auto"]} />
          <Tooltip formatter={(v) => [fmtPrice(Number(v), { rent }), "Prix demandé"]} labelFormatter={(v) => fmtDate(new Date(Number(v)).toISOString(), "long")} contentStyle={{ borderRadius: 10, border: "1px solid #e6e8ec", fontSize: 12 }} />
          <Line type="stepAfter" dataKey="price" stroke={RED} strokeWidth={2} dot={{ r: 3, fill: RED }} isAnimationActive={false} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

export function IndexChart({ points, label = "Indice de prix" }: { points: { month: string; idx: number; ppm2?: number; n?: number }[]; label?: string }) {
  if (points.length < 2) return null;
  const data = points.map((p) => ({ m: p.month, v: Math.round(p.idx * 1000) / 10, ppm2: p.ppm2 }));
  return (
    <div className="h-52">
      <ResponsiveContainer>
        <AreaChart data={data} margin={{ top: 8, right: 8, bottom: 0, left: 0 }}>
          <defs><linearGradient id="tvg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor={RED} stopOpacity={0.25} /><stop offset="100%" stopColor={RED} stopOpacity={0} /></linearGradient></defs>
          <CartesianGrid stroke="#eef0f3" vertical={false} />
          <XAxis dataKey="m" tick={{ fontSize: 11, fill: "#7a8190" }} axisLine={false} tickLine={false} minTickGap={32} tickFormatter={(m) => m.slice(0, 4)} />
          <YAxis tick={{ fontSize: 11, fill: "#7a8190" }} axisLine={false} tickLine={false} width={40} domain={["auto", "auto"]} tickFormatter={(v) => `${v}`} />
          <Tooltip formatter={(v, _n, p) => [`${v} (base 100 = dernier mois)${p?.payload?.ppm2 ? ` · ${Math.round(p.payload.ppm2).toLocaleString("fr-CA")} $/m²` : ""}`, label]} contentStyle={{ borderRadius: 10, border: "1px solid #e6e8ec", fontSize: 12 }} />
          <Area type="monotone" dataKey="v" stroke={RED} strokeWidth={2} fill="url(#tvg)" isAnimationActive={false} />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}