perfect-postcode/frontend/src/components/map/PriceHistoryChart.tsx

import { useMemo, useRef, useState, useEffect } from 'react';
import type { PricePoint } from '../../types';
import { formatValue } from '../../lib/format';

interface PriceHistoryChartProps {
  points: PricePoint[];
}

const PADDING = { top: 8, right: 8, bottom: 20, left: 42 };
const HEIGHT = 120;
const priceFmt = { prefix: '£' };

export default function PriceHistoryChart({ points }: PriceHistoryChartProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [width, setWidth] = useState(0);

  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;
    const observer = new ResizeObserver((entries) => {
      const w = entries[0].contentRect.width;
      if (w > 0) setWidth(w);
    });
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  const { yearMin, yearMax, priceMin, priceMax, medians, priceTicks } = useMemo(() => {
    let yMin = Infinity,
      yMax = -Infinity;
    for (const p of points) {
      if (p.year < yMin) yMin = p.year;
      if (p.year > yMax) yMax = p.year;
    }

    // Use p5/p95 to clip outliers
    const sorted = points.map((p) => p.price).sort((a, b) => a - b);
    const p5 = sorted[Math.floor(sorted.length * 0.05)];
    const p95 = sorted[Math.min(sorted.length - 1, Math.ceil(sorted.length * 0.95))];
    const pRange = p95 - p5 || 1;
    const pMin = Math.max(0, p5 - pRange * 0.1);
    const pMax = p95 + pRange * 0.1;

    // Yearly medians (robust to outliers)
    const byYear = new Map<number, number[]>();
    for (const p of points) {
      const yr = Math.floor(p.year);
      const arr = byYear.get(yr);
      if (arr) arr.push(p.price);
      else byYear.set(yr, [p.price]);
    }
    const yearlyMedians = Array.from(byYear.entries())
      .map(([yr, prices]) => {
        prices.sort((a, b) => a - b);
        const mid = Math.floor(prices.length / 2);
        const median = prices.length % 2 ? prices[mid] : (prices[mid - 1] + prices[mid]) / 2;
        return { year: yr, price: median };
      })
      .sort((a, b) => a.year - b.year);

    // 3-year rolling average
    const meds = yearlyMedians.map((pt, i) => {
      let sum = pt.price;
      let count = 1;
      for (let j = i - 1; j >= 0 && pt.year - yearlyMedians[j].year <= 1; j--) {
        sum += yearlyMedians[j].price;
        count++;
      }
      for (let j = i + 1; j < yearlyMedians.length && yearlyMedians[j].year - pt.year <= 1; j++) {
        sum += yearlyMedians[j].price;
        count++;
      }
      return { year: pt.year + 0.5, price: sum / count };
    });

    const ticks = niceTicksForRange(pMin, pMax, 4);

    return {
      yearMin: yMin,
      yearMax: yMax,
      priceMin: pMin,
      priceMax: pMax,
      medians: meds,
      priceTicks: ticks,
    };
  }, [points]);

  const plotW = width - PADDING.left - PADDING.right;
  const plotH = HEIGHT - PADDING.top - PADDING.bottom;
  const yearRange = yearMax - yearMin || 1;

  const scaleX = (year: number) => PADDING.left + ((year - yearMin) / yearRange) * plotW;
  const scaleY = (price: number) => {
    const t = (price - priceMin) / (priceMax - priceMin || 1);
    return PADDING.top + (1 - Math.max(0, Math.min(1, t))) * plotH;
  };

  // Year labels: every 5 years
  const yearStart = Math.ceil(yearMin / 5) * 5;
  const yearLabels: number[] = [];
  for (let y = yearStart; y <= yearMax; y += 5) yearLabels.push(y);

  const medianPolyline = medians.map((a) => `${scaleX(a.year)},${scaleY(a.price)}`).join(' ');

  return (
    <div ref={containerRef} style={{ height: HEIGHT }}>
      {width > 0 && (
        <svg width={width} height={HEIGHT}>
          {/* Grid lines */}
          {priceTicks.map((tick) => (
            <line
              key={tick}
              x1={PADDING.left}
              y1={scaleY(tick)}
              x2={width - PADDING.right}
              y2={scaleY(tick)}
              className="stroke-warm-200 dark:stroke-warm-700"
              strokeWidth={1}
            />
          ))}

          {/* Dots (clamp outliers to visible range) */}
          {points.map((p, i) => (
            <circle
              key={i}
              cx={scaleX(p.year)}
              cy={scaleY(p.price)}
              r={3}
              className="fill-teal-500 dark:fill-teal-400"
              opacity={0.35}
            />
          ))}

          {/* Median line */}
          {medians.length > 1 && (
            <polyline
              points={medianPolyline}
              fill="none"
              className="stroke-teal-600 dark:stroke-teal-400"
              strokeWidth={2}
              strokeLinejoin="round"
            />
          )}

          {/* Y-axis labels */}
          {priceTicks.map((tick) => (
            <text
              key={`label-${tick}`}
              x={PADDING.left - 4}
              y={scaleY(tick)}
              textAnchor="end"
              dominantBaseline="middle"
              className="fill-warm-500 dark:fill-warm-400"
              fontSize={10}
            >
              {formatValue(tick, priceFmt)}
            </text>
          ))}

          {/* X-axis year labels */}
          {yearLabels.map((yr) => (
            <text
              key={yr}
              x={scaleX(yr)}
              y={HEIGHT - 2}
              textAnchor="middle"
              className="fill-warm-500 dark:fill-warm-400"
              fontSize={10}
            >
              {yr}
            </text>
          ))}
        </svg>
      )}
    </div>
  );
}

/** Generate ~count nice round tick values spanning [min, max]. */
function niceTicksForRange(min: number, max: number, count: number): number[] {
  const range = max - min;
  if (range <= 0) return [min];
  const rough = range / count;
  const magnitude = Math.pow(10, Math.floor(Math.log10(rough)));
  let step: number;
  const normalized = rough / magnitude;
  if (normalized <= 1.5) step = magnitude;
  else if (normalized <= 3.5) step = 2 * magnitude;
  else if (normalized <= 7.5) step = 5 * magnitude;
  else step = 10 * magnitude;

  const ticks: number[] = [];
  const start = Math.ceil(min / step) * step;
  for (let t = start; t <= max; t += step) {
    ticks.push(t);
  }
  return ticks;
}