// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/NearbyPlaces.tsx : « À proximité » et « Transport » — carrousels de
//   cartes horizontales (transport · courses · services) construits à partir
//   des POI OpenStreetMap (louka/poi.py) et des grandes bannières (Mapbox),
//   les 4 lieux les plus pertinents en liste, puis « Voir les N lieux »
//   → bottom sheet groupé par catégorie.
// -----------------------------------------------------------------------------
import { ReactNode, useState } from "react";
import { CommerceItem, CommercesNearby, Poi, fmtDist } from "../api";
import {
  IcoBaby, IcoBook, IcoBus, IcoCart, IcoCoffee, IcoDumbbell, IcoHospital, IcoMapPin, IcoPill,
  IcoSchool, IcoStore, IcoTrain, IcoTrees,
} from "../components/Icons";
import BottomSheet from "./BottomSheet";
import { ErrorState, MoreButton, SectionCard, SkeletonLines, SourceLine, fmtMarche, NBSP } from "./ui";
import { Res } from "./useFicheData";

const POI_META: Record<string, { ico: ReactNode; label: string }> = {
  epicerie: { ico: <IcoCart size={17} />, label: "Épicerie" },
  depanneur: { ico: <IcoStore size={17} />, label: "Dépanneur" },
  pharmacie: { ico: <IcoPill size={17} />, label: "Pharmacie" },
  ecole: { ico: <IcoSchool size={17} />, label: "École" },
  garderie: { ico: <IcoBaby size={17} />, label: "Garderie" },
  parc: { ico: <IcoTrees size={17} />, label: "Parc" },
  bus: { ico: <IcoBus size={17} />, label: "Arrêt de bus" },
  metro: { ico: <IcoTrain size={17} />, label: "Métro" },
  gym: { ico: <IcoDumbbell size={17} />, label: "Gym" },
  cafe: { ico: <IcoCoffee size={17} />, label: "Café" },
  clinique: { ico: <IcoHospital size={17} />, label: "Clinique" },
  hopital: { ico: <IcoHospital size={17} />, label: "Hôpital" },
  bibliotheque: { ico: <IcoBook size={17} />, label: "Bibliothèque" },
};
const GROUPES: { titre: string; cats: string[] }[] = [
  { titre: "Transport", cats: ["metro", "bus"] },
  { titre: "Courses", cats: ["epicerie", "depanneur", "pharmacie"] },
  { titre: "Études et famille", cats: ["ecole", "garderie", "bibliotheque"] },
  { titre: "Santé", cats: ["clinique", "hopital"] },
  { titre: "Vie de quartier", cats: ["cafe", "parc", "gym"] },
];
// bannières : [couleur, monogramme, texte]
const BANNIERE_CAT: Record<string, string> = {
  metro_station: "Station de métro", rem_station: "Station REM", arret_bus: "Arrêt de bus", gare_train: "Gare de train",
  costco: "Épicerie · entrepôt", walmart: "Grande surface", metro: "Épicerie", iga: "Épicerie", maxi: "Épicerie",
  superc: "Épicerie", provigo: "Épicerie", canadiantire: "Quincaillerie", dollarama: "Magasin à 1 $", saq: "Alcools",
  pharmaprix: "Pharmacie", jeancoutu: "Pharmacie", homedepot: "Rénovation", rona: "Rénovation",
};
const catDe = (c: CommerceItem) => BANNIERE_CAT[c.id] ?? c.commerce;
const BANNIERES: 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"],
};

export function Pastille({ id }: { id: string }) {
  const [bg, mono, fg] = BANNIERES[id] ?? ["#777", "•"];
  const fs = mono.length >= 3 ? 9 : mono.length === 2 ? 11 : 14;
  const rond = ["metro_station", "rem_station", "arret_bus", "gare_train"].includes(id);
  return (
    <svg className="cm-ico" viewBox="0 0 28 28" width="26" height="26" aria-hidden="true">
      {rond ? <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>
  );
}

interface Carte { key: string; cat: string; nom: string; sous?: string; dist: number; ico: ReactNode; }

function CCard({ c }: { c: Carte }) {
  return (
    <div className="lk-ccard" role="listitem">
      <div className="lk-ccard-top">
        <span className="lk-ccard-c">{c.cat}</span>
        <span aria-hidden="true">{c.ico}</span>
      </div>
      <div className="lk-ccard-d">{fmtDist(c.dist)}</div>
      <div className="lk-ccard-n" title={c.nom}>{c.nom}</div>
      <div className="lk-ccard-m">≈{NBSP}{fmtMarche(c.dist)} à pied{c.sous ? ` · ${c.sous}` : ""}</div>
    </div>
  );
}

export default function NearbyPlaces({ pois, commerces, onRetry }: { pois: Poi[]; commerces: Res<CommercesNearby>; onRetry: () => void }) {
  const [sheet, setSheet] = useState(false);
  const cm = commerces.status === "ok" ? commerces.data : null;
  const transit: CommerceItem[] = cm?.transit ?? [];
  const bannieres: CommerceItem[] = cm?.commerces ?? [];

  // cartes « Transport » : métro/bus/REM/train (bannières transit) + POI bus/métro
  const transport: Carte[] = [
    ...transit.map((t) => ({ key: `t-${t.id}`, cat: catDe(t), nom: t.nom, dist: t.dist_m, ico: <Pastille id={t.id} /> })),
    ...pois.filter((p) => (p.cat === "metro" || p.cat === "bus") && !transit.some((t) => t.dist_m === p.dist_m))
      .map((p) => ({ key: `p-${p.cat}`, cat: POI_META[p.cat].label, nom: p.name, dist: p.dist_m, ico: POI_META[p.cat].ico })),
  ].sort((a, b) => a.dist - b.dist);
  // cartes « Courses et services » : bannières + POI hors transport
  const services: Carte[] = [
    ...bannieres.map((b) => ({ key: `b-${b.id}`, cat: catDe(b), nom: b.nom, dist: b.dist_m, ico: <Pastille id={b.id} /> })),
    ...pois.filter((p) => p.cat !== "metro" && p.cat !== "bus")
      .map((p) => ({ key: `p-${p.cat}`, cat: POI_META[p.cat]?.label ?? p.cat, nom: p.name, dist: p.dist_m, ico: POI_META[p.cat]?.ico ?? <IcoMapPin size={17} /> })),
  ].sort((a, b) => a.dist - b.dist);
  const total = transport.length + services.length;
  const loading = commerces.status === "loading" || commerces.status === "idle";

  if (total === 0 && !loading && commerces.status !== "error") return null;

  // « les plus pertinents » : métro/épicerie/pharmacie/parc/école les plus proches
  const prio = ["Station de métro", "Métro", "Épicerie", "Pharmacie", "Parc", "École", "Arrêt de bus"];
  const top = [...transport, ...services]
    .sort((a, b) => (prio.findIndex((p) => a.cat.startsWith(p)) + 1 || 99) - (prio.findIndex((p) => b.cat.startsWith(p)) + 1 || 99) || a.dist - b.dist)
    .filter((c, i, arr) => arr.findIndex((x) => x.cat === c.cat) === i)
    .slice(0, 4);

  return (
    <>
      <SectionCard id="proximite" title="À proximité" icon={<IcoMapPin size={18} />}
                   sub={total ? `${total} lieux repérés · temps de marche estimés` : undefined}>
        {loading && total === 0 && <SkeletonLines n={3} />}
        {commerces.status === "error" && <ErrorState onRetry={onRetry}>Commerces et transport temporairement indisponibles.</ErrorState>}
        {top.length > 0 && (
          <ul className="lk-list">
            {top.map((c) => (
              <li className="lk-item" key={c.key}>
                <span className="lk-item-ico" aria-hidden="true">{c.ico}</span>
                <div className="lk-item-main">
                  <div className="lk-item-t">{c.nom}</div>
                  <div className="lk-item-s">{c.cat}</div>
                </div>
                <div className="lk-item-r">
                  <div className="lk-item-v">{fmtDist(c.dist)}</div>
                  <div className="lk-item-m">≈{NBSP}{fmtMarche(c.dist)}</div>
                </div>
              </li>
            ))}
          </ul>
        )}
        {services.length > 0 && (
          <>
            <h3 className="lk-card-sub" style={{ margin: "14px 0 8px", fontWeight: 600, color: "var(--lk-text-2)" }}>Courses et services</h3>
            <div className="lk-carousel" role="list" aria-label="Courses et services à proximité">
              {services.slice(0, 12).map((c) => <CCard c={c} key={c.key} />)}
            </div>
          </>
        )}
        {total > 4 && <MoreButton onClick={() => setSheet(true)}>Voir les {total} lieux à proximité</MoreButton>}
        <SourceLine name="OpenStreetMap · Mapbox Search"
                    date={`distances à vol d'oiseau, marche ≈ distance × 1,3 à 4,8${NBSP}km/h`} />
      </SectionCard>

      {transport.length > 0 && (
        <SectionCard id="transport" title="Transport" icon={<IcoTrain size={18} />}
                     sub="Stations et arrêts les plus proches">
          <div className="lk-carousel" role="list" aria-label="Transport en commun à proximité">
            {transport.slice(0, 10).map((c) => <CCard c={c} key={c.key} />)}
          </div>
        </SectionCard>
      )}

      <BottomSheet open={sheet} onClose={() => setSheet(false)} title="Lieux à proximité" sub={`${total} lieux · distances à vol d'oiseau`} tall>
        {GROUPES.map((g) => {
          const items = [
            ...pois.filter((p) => g.cats.includes(p.cat)).map((p) => ({ key: `p-${p.cat}`, cat: POI_META[p.cat]?.label ?? p.cat, nom: p.name, dist: p.dist_m, ico: POI_META[p.cat]?.ico })),
            ...(g.titre === "Transport" ? transit.map((t) => ({ key: `t-${t.id}`, cat: catDe(t), nom: t.nom, dist: t.dist_m, ico: <Pastille id={t.id} /> })) : []),
            ...(g.titre === "Courses" ? bannieres.map((b) => ({ key: `b-${b.id}`, cat: catDe(b), nom: b.nom, dist: b.dist_m, ico: <Pastille id={b.id} /> })) : []),
          ].sort((a, b) => a.dist - b.dist);
          if (items.length === 0) return null;
          return (
            <div key={g.titre} style={{ marginBottom: 14 }}>
              <h4 className="lk-card-sub" style={{ fontWeight: 700, color: "var(--lk-text)", margin: "0 0 4px" }}>{g.titre} <small style={{ fontWeight: 500 }}>· {items.length}</small></h4>
              <ul className="lk-list">
                {items.map((c) => (
                  <li className="lk-item" key={c.key + c.dist}>
                    <span className="lk-item-ico" aria-hidden="true">{c.ico}</span>
                    <div className="lk-item-main"><div className="lk-item-t">{c.nom}</div><div className="lk-item-s">{c.cat}</div></div>
                    <div className="lk-item-r"><div className="lk-item-v">{fmtDist(c.dist)}</div><div className="lk-item-m">≈{NBSP}{fmtMarche(c.dist)}</div></div>
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </BottomSheet>
    </>
  );
}