// -----------------------------------------------------------------------------
// Immo-Ka — Agrégateur de propriétés à vendre (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/PropertyAmenities.tsx : inclusions et caractéristiques — grille
//   compacte d'items avec icône contextuelle (AmenityIco), dédoublonnés ;
//   8 visibles, « Voir les N ». Les « Inclusions » / « Exclusions » textuelles
//   de Centris (details) sont ajoutées en note quand elles existent.
// -----------------------------------------------------------------------------
import { useState } from "react";
import { Listing } from "../api";
import AmenityIco from "../components/AmenityIco";
import { Accordion, MoreButton, SectionCard } from "./ui";

const norm = (s: string) => s.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/\s+/g, " ").trim();

export default function PropertyAmenities({ l }: { l: Listing }) {
  const [all, setAll] = useState(false);
  const seen = new Set<string>();
  const items = (l.features ?? []).map((f) => f.trim()).filter((f) => {
    const k = norm(f);
    if (!k || seen.has(k)) return false;
    seen.add(k); return true;
  });
  const d = l.details ?? {};
  const inclusions = typeof d["Inclusions"] === "string" ? String(d["Inclusions"]).trim() : "";
  const exclusions = typeof d["Exclusions"] === "string" ? String(d["Exclusions"]).trim() : "";
  const LIMIT = 8;
  const shown = all ? items : items.slice(0, LIMIT);

  if (items.length === 0 && !inclusions && !exclusions) return null;

  return (
    <SectionCard id="inclusions" title="Caractéristiques et inclusions"
                 sub={items.length ? `${items.length} élément${items.length > 1 ? "s" : ""} publié${items.length > 1 ? "s" : ""} par la source` : undefined}>
      {items.length > 0 && (
        <div className="ik-amen" role="list">
          {shown.map((t) => (
            <div className="ik-amen-it" role="listitem" key={t}>
              <span className="ik-amen-ico" aria-hidden="true"><AmenityIco label={t} size={15} fallback="check" /></span>
              <span className="ik-amen-txt">{t}</span>
            </div>
          ))}
        </div>
      )}
      {items.length > LIMIT && (
        <MoreButton onClick={() => setAll(!all)} expanded={all}>
          {all ? "Réduire" : `Voir les ${items.length} caractéristiques`}
        </MoreButton>
      )}
      {(inclusions || exclusions) && (
        <Accordion title="Inclusions et exclusions de la vente" small defaultOpen={items.length === 0}>
          {inclusions && <p><b>Inclus :</b> {inclusions}</p>}
          {exclusions && <p><b>Exclus :</b> {exclusions}</p>}
        </Accordion>
      )}
    </SectionCard>
  );
}