// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// fiche/PropertyDescription.tsx : description — accroche « en bref » du digest,
//   sections structurées, texte tronqué à ~200 px avec « Lire la suite »,
//   texte original de la source en accordéon.
// -----------------------------------------------------------------------------
import { useState } from "react";
import { Listing } from "../api";
import { Accordion, MoreButton, SectionCard } from "./ui";

export default function PropertyDescription({ l }: { l: Listing }) {
  const dg = l.digest;
  const [open, setOpen] = useState(false);
  const texte = dg?.texte_nettoye || l.description || "";
  if (!dg && !texte) {
    return (
      <SectionCard id="description" title="Description">
        <p className="lk-fine">La source ne fournit pas de description pour cette annonce.</p>
      </SectionCard>
    );
  }
  const long = (dg ? dg.sections.reduce((n, s) => n + s.texte.length, 0) + (dg.en_bref?.length ?? 0) : texte.length) > 420;
  return (
    <SectionCard id="description" title="Description">
      <div className={`lk-desc ${long && !open ? "clamped" : ""}`}>
        <div className="lk-desc-body">
          {dg ? (
            <>
              {dg.en_bref && <p className="lk-desc-lead">{dg.en_bref}</p>}
              {dg.sections.map((s) => (
                <div key={s.titre}>
                  <h4>{s.titre}</h4>
                  <p>{s.texte}</p>
                </div>
              ))}
            </>
          ) : (
            <p>{texte}</p>
          )}
        </div>
      </div>
      {long && <MoreButton onClick={() => setOpen(!open)} expanded={open}>{open ? "Réduire" : "Lire la suite"}</MoreButton>}
      {dg && l.description && (
        <div className="lk-desc-orig">
          <Accordion title="Texte original de la source" small>
            <p style={{ whiteSpace: "pre-line" }}>{l.description}</p>
          </Accordion>
        </div>
      )}
    </SectionCard>
  );
}