/* HoldBanner.jsx — the advisory "reserved for a show" warning (Editorial E3a, decision D5).
   Shown on the matter page, the asset request page and the episode page. It never blocks
   anything: it tells the reader that another show has first use of this case's material
   until a date. Data: LedgerAPI.ed.holds (asset_holds, synced from Airtable Restricted Assets).

   Props: matterIds, requestIds (what to check), currentShow (the episode's show: a hold for
   the same show reads as "reserved for this show" rather than a warning). */
(function () {
  const Ic = ({ n }) => <span className="ic-wrap" key={n}><i data-lucide={n} /></span>;
  const icons = () => setTimeout(() => window.lucide && window.lucide.createIcons(), 30);

  function HoldBanner({ matterIds = [], requestIds = [], currentShow = null }) {
    const [rows, setRows] = React.useState([]);
    const key = [...matterIds, "|", ...requestIds].join(",");
    React.useEffect(() => {
      let live = true;
      setRows([]);
      const ed = window.LedgerAPI && window.LedgerAPI.ed;
      if (!ed || !ed.holds) return undefined;
      ed.holds({ matterIds, requestIds }).then((r) => { if (live) setRows(r || []); }).catch(() => { /* advisory: never break the page */ });
      return () => { live = false; };
    }, [key]);
    React.useEffect(() => { if (rows.length) icons(); }, [rows]);
    if (!rows.length) return null;

    const fmt = (d) => window.LedgerTime.fmtDate(d);
    return (
      <div className="hold-banners">
        {rows.map((h) => {
          const own = currentShow && h.reserved_for_show === currentShow;
          return (
            <div key={h.hold_id} className={"hold-banner" + (own ? " own" : "")} role="note">
              <Ic n={own ? "bookmark" : "lock"} />
              <div className="hold-banner__body">
                <div className="hold-banner__head">
                  {own ? <>Reserved for this show, <b>{h.show_label}</b></> : <>Reserved for <b>{h.show_label}</b></>}
                  {h.hold_until ? <> until <b>{fmt(h.hold_until)}</b></> : <> (no end date set)</>}
                  {h.label && <span className="hold-banner__label"> · {h.label}</span>}
                </div>
                <div className="hold-banner__sub">
                  {own
                    ? "Other shows have been asked to wait before using this case's material."
                    : "Advisory: check with the show before using this case's material elsewhere."}
                  {h.source === "airtable_restricted_assets" && " From Restricted Assets in Airtable."}
                </div>
                {(h.file_path || h.reason) && (
                  <div className="hold-banner__meta">
                    {h.file_path && <span className="hold-banner__path">{h.file_path}</span>}
                    {h.reason && <span className="hold-banner__reason">{h.reason}</span>}
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    );
  }

  window.LedgerHoldBanner = HoldBanner;
})();