// app-preview.jsx — MinutesPreview: formatted legal-style minutes document
(function () {
  const { STATUSES } = window.MeetingData;
  const STATUS_LABEL = {};
  STATUSES.forEach((s) => { STATUS_LABEL[s.key] = s.label; });

  function fmtDate(iso) {
    if (!iso) return "";
    const d = new Date(iso + "T00:00:00");
    if (isNaN(d)) return iso;
    return d.toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" });
  }
  function fmtDue(iso) {
    if (!iso) return "";
    const d = new Date(iso + "T00:00:00");
    if (isNaN(d)) return iso;
    return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
  }

  function voteSentence(v) {
    const f = parseInt(v.for, 10) || 0;
    const a = parseInt(v.against, 10) || 0;
    const ab = parseInt(v.abstain, 10) || 0;
    if (!f && !a && !ab) return "";
    let s = "The motion " + (f > a ? "carried" : "failed") + " by a vote of " + f + " in favor to " + a + " opposed";
    if (ab) s += ", with " + ab + " abstaining";
    return s + ".";
  }

  function MinutesPreview({ meta, items }) {
    const present = (meta.present || "").split(/[,\n]/).map((s) => s.trim()).filter(Boolean);
    const absent = (meta.absent || "").split(/[,\n]/).map((s) => s.trim()).filter(Boolean);

    return (
      <div className="minutes" id="minutes-doc">
        <div className="minutes__head">
          <div className="minutes__org">{meta.org || "Organization Name"}</div>
          <div className="minutes__kind">Minutes of the {meta.kind || "Regular Meeting"} of the Board of Directors</div>
          <div className="minutes__when">
            {fmtDate(meta.date) || "Meeting date"}
            {meta.time ? "  ·  " + meta.time : ""}
            {meta.location ? "  ·  " + meta.location : ""}
          </div>
        </div>

        <div className="minutes__roster">
          <div className="minutes__rosterblock">
            <span className="minutes__rosterlabel">Directors present</span>
            <span className="minutes__rostervalue">{present.length ? present.join(", ") : "—"}</span>
          </div>
          {absent.length > 0 && (
            <div className="minutes__rosterblock">
              <span className="minutes__rosterlabel">Absent</span>
              <span className="minutes__rostervalue">{absent.join(", ")}</span>
            </div>
          )}
          <div className="minutes__rosterblock">
            <span className="minutes__rosterlabel">Quorum</span>
            <span className="minutes__rostervalue">{meta.quorum ? "A quorum was present." : "Not established."}</span>
          </div>
        </div>

        <ol className="minutes__list">
          {items.map((it) => {
            const vs = it.vote.recorded ? voteSentence(it.vote) : "";
            const hasBody = (it.notes && it.notes.trim()) || vs || it.status || it.actions.length;
            const lvl = it.level || (it.isSub ? 1 : 0);
            return (
              <li key={it.id} className={"minutes__item minutes__item--lvl" + lvl}>
                <div className="minutes__itemhead">
                  {it.number && <span className="minutes__itemnum">{it.number}.</span>}
                  <span className="minutes__itemtitle">{it.title}</span>
                  {it.presenter && <span className="minutes__presenter">{it.presenter}</span>}
                  {it.status && <span className={"minutes__badge minutes__badge--" + it.status}>{STATUS_LABEL[it.status]}</span>}
                  {it.page && <span className="minutes__pageref">p.&nbsp;{it.page}</span>}
                </div>
                {hasBody && (
                  <div className="minutes__body">
                    {it.notes && it.notes.trim() &&
                      it.notes.trim().split(/\n+/).map((p, i) => <p key={i} className="minutes__para">{p}</p>)}
                    {vs && <p className="minutes__para minutes__vote">{vs}</p>}
                    {it.actions.length > 0 && (
                      <div className="minutes__actions">
                        <span className="minutes__actionslabel">Action items</span>
                        <ul>
                          {it.actions.map((a) => (
                            <li key={a.id}>
                              {a.text || "—"}
                              {a.owner && <em> — {a.owner}</em>}
                              {a.due && <span className="minutes__due"> (by {fmtDue(a.due)})</span>}
                            </li>
                          ))}
                        </ul>
                      </div>
                    )}
                  </div>
                )}
              </li>
            );
          })}
        </ol>

        <div className="minutes__sig">
          <div className="minutes__sigline">
            <span className="minutes__sigrule"></span>
            <span className="minutes__siglabel">Secretary</span>
          </div>
          <div className="minutes__sigline">
            <span className="minutes__sigrule"></span>
            <span className="minutes__siglabel">Date approved</span>
          </div>
        </div>
      </div>
    );
  }

  window.MinutesPreview = MinutesPreview;
  window.MinutesHelpers = { fmtDate, voteSentence };
})();