// -----------------------------------------------------------------------------
// House-Ka — Homes-for-sale aggregator (Canada outside Québec, Ontario first)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// components/NearbyPlaces.tsx : “Shops and transit” block (listing page)
//   Distance to the closest location of each big banner (Costco, Walmart,
//   Canadian Tire… via the Mapbox Search Box API) + nearest transit stops.
//   SVG monogram chips in the banners' colours (no registered logos).
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { CommercesNearby, fetchCommerces, fmtDist } from "../api";

// id -> [background colour, monogram, text colour]
const ICONS: Record<string, [string, string, string?]> = {
  metro_station: ["#0083C9", "M"],
  rem_station: ["#84BD00", "R"],
  arret_bus: ["#4E5357", "B"],
  gare_train: ["#6E5B3F", "T"],
  costco: ["#005DAA", "C"],
  walmart: ["#0071CE", "W"],
  metro: ["#EF3E42", "M"],
  iga: ["#D50032", "IGA"],
  maxi: ["#0079C1", "Mx"],
  superc: ["#E4002B", "SC"],
  provigo: ["#DA291C", "P"],
  canadiantire: ["#D6001C", "CT"],
  dollarama: ["#00B140", "D", "#FFDD00"],
  saq: ["#892034", "SAQ"],
  pharmaprix: ["#E11B22", "Ph"],
  jeancoutu: ["#003DA5", "JC"],
  homedepot: ["#F96302", "HD"],
  rona: ["#1B4298", "R"],
};

function Chip({ id }: { id: string }) {
  const [bg, mono, fg] = ICONS[id] ?? ["#777", "•"];
  const fs = mono.length >= 3 ? 9 : mono.length === 2 ? 11 : 14;
  return (
    <svg className="cm-ico" viewBox="0 0 28 28" width="28" height="28"
         aria-hidden="true">
      {["metro_station", "rem_station", "arret_bus", "gare_train"].includes(id)
        ? <circle cx="14" cy="14" r="13" fill={bg} />
        : <rect x="1" y="1" width="26" height="26" rx="7" fill={bg} />}
      <text x="14" y="14" textAnchor="middle" dominantBaseline="central"
            fontSize={fs} fontWeight="800" fontFamily="inherit"
            fill={fg ?? "#fff"}>{mono}</text>
    </svg>
  );
}

export default function NearbyPlaces({ lat, lng }:
    { lat: number | null; lng: number | null }) {
  const [d, setD] = useState<CommercesNearby | null>(null);
  useEffect(() => {
    setD(null);
    if (lat == null || lng == null) return;
    fetchCommerces(lat, lng).then(setD).catch(() => setD(null));
  }, [lat, lng]);
  if (lat == null || lng == null || !d) return null;
  const all = [...(d.transit ?? []), ...(d.commerces ?? [])];
  if (all.length === 0) return null;

  return (
    <section className="f-bloc f-commerces" id="nearby">
      <h2>Shops and transit</h2>
      <ul className="cm-grille">
        {all.map((c) => (
          <li key={c.id} className="cm-item"
              title={c.adresse || undefined}>
            <Chip id={c.id} />
            <span className="cm-txt">
              <span className="cm-nom">{c.commerce}</span>
              <span className="cm-poi">{c.nom}</span>
            </span>
            <span className="cm-dist">{fmtDist(c.dist_m)}</span>
          </li>
        ))}
      </ul>
      <p className="fine">
        Closest location of each banner — straight-line distances (Mapbox
        search; transit: OpenStreetMap).
      </p>
    </section>
  );
}