// ActionMinutes - board-level "All meetings" page (paginated list of every minutes run for one board)
const { useState: useStateBM, useEffect: useEffectBM } = React;

const AM_MTG_MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

// Parse a server timestamp; treat a naive (no zone) value as UTC so the date chip is stable across timezones.
function amParseDate(iso) {
  if (!iso) return null;
  const d = new Date(/Z$|[+-]\d{2}:\d{2}$/.test(iso) ? iso : iso + "Z");
  return isNaN(d.getTime()) ? null : d;
}

function BoardMeetingsPage({ name, navigate, appState, setAppState }) {
  const boardId = window.location.pathname.split("/")[2];
  const [data, setData] = useStateBM(null);
  const [page, setPage] = useStateBM(1);
  const [loading, setLoading] = useStateBM(true);
  const [error, setError] = useStateBM(null);
  const [creating, setCreating] = useStateBM(false);
  const PAGE_SIZE = 8;

  useEffectBM(() => {
    if (!boardId) { setError("No board specified."); setLoading(false); return; }
    let cancelled = false;
    setLoading(true);
    AM_API.boards.meetings(boardId, page, PAGE_SIZE)
      .then((d) => { if (!cancelled) { setData(d); setError(null); } })
      .catch((e) => { if (!cancelled) setError(e.message || "Could not load meetings."); })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [boardId, page]);

  // Start a fresh meeting for this board (keeps the template, blanks agenda + recording), then open the equation.
  const startNew = async () => {
    if (creating) return;
    setCreating(true);
    try {
      if (setAppState) setAppState((s) => ({ ...s, boardId, boardName: (data && data.boardName) || s.boardName }));
      await AM_API.boards.newMeeting(boardId);
    } catch (e) { /* non-fatal: the equation page falls back to the latest draft */ }
    navigate("/setup/equation");
  };

  const statusMeta = (m) => {
    switch (m.status) {
      case "Complete":
        return { cls: "", badge: <span className="pi-badge pi-badge-success">Draft delivered</span>, go: "/minutes/" + m.generationJobId };
      case "Queued":
      case "Running":
        return { cls: "is-progress", badge: <span className="pi-badge pi-badge-info">{m.percentComplete ? m.percentComplete + "% · processing" : "Processing"}</span>, go: "/jobs/" + m.generationJobId };
      default:
        return { cls: "is-failed", badge: <span className="pi-badge pi-badge-danger">Needs attention</span>, go: "/jobs/" + m.generationJobId };
    }
  };

  const meetings = data ? data.items : [];
  const totalPages = data ? data.totalPages : 1;
  const total = data ? data.totalCount : 0;
  const boardName = (data && data.boardName) || appState.boardName || "Your board";

  // Windowed page pills: first + last always, a small window around the current page, ellipsis for the gaps.
  const pagesToShow = () => {
    const tp = totalPages;
    if (tp <= 7) return Array.from({ length: tp }, (_, i) => i + 1);
    const out = [1];
    const lo = Math.max(2, page - 1), hi = Math.min(tp - 1, page + 1);
    if (lo > 2) out.push("…");
    for (let i = lo; i <= hi; i++) out.push(i);
    if (hi < tp - 1) out.push("…");
    out.push(tp);
    return out;
  };

  return (
    <div className="am-appmain">
      <button className="am-mtg-back" onClick={() => navigate("/home")} aria-label="Back to dashboard">
        <AMIcon name="arrow-left" size={14} /> Dashboard
      </button>

      <div className="am-mtg-head">
        <div>
          <span className="pi-eyebrow">Board</span>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 24, margin: "6px 0 8px" }}>{boardName}</h2>
          <span className="am-mtg-count">{total} {total === 1 ? "meeting" : "meetings"}</span>
        </div>
        <button className="pi-btn pi-btn-primary" onClick={startNew} disabled={creating}>
          <AMIcon name="sparkles" size={14} /> {creating ? "Starting…" : "New minutes"}
        </button>
      </div>

      {loading && (
        <div style={{ display: "flex", justifyContent: "center", minHeight: 220, alignItems: "center" }}>
          <span className="am-spin" style={{ width: 28, height: 28, borderColor: "rgba(3,149,255,0.2)", borderTopColor: "var(--pi-blue)", display: "inline-block" }}></span>
        </div>
      )}

      {!loading && error && (
        <div className="am-domain-note warn"><span className="ico"><AMIcon name="triangle-alert" size={15} /></span><span>{error}</span></div>
      )}

      {!loading && !error && meetings.length === 0 && (
        <div className="am-empty">
          <span className="ic"><AMIcon name="file-text" size={28} strokeWidth={1.5} /></span>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, color: "var(--fg-2)", marginBottom: 4 }}>No meetings yet</div>
          <p style={{ fontSize: 13, color: "var(--fg-3)" }}>Generate your first draft minutes for this board and it will show up here.</p>
        </div>
      )}

      {!loading && !error && meetings.length > 0 && (
        <React.Fragment>
          <div className="am-mtg-list">
            {meetings.map((m, i) => {
              const meta = statusMeta(m);
              const d = amParseDate(m.completedUtc || m.createdUtc);
              return (
                <div
                  key={m.generationJobId}
                  className={"am-mtg-row " + meta.cls}
                  style={{ animationDelay: (i * 45) + "ms" }}
                  role="button" tabIndex={0}
                  aria-label={"Open minutes: " + (m.meetingTitle || "Meeting")}
                  onClick={() => navigate(meta.go)}
                  onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); navigate(meta.go); } }}
                >
                  <span className="am-datechip" aria-hidden="true">
                    {d ? (
                      <React.Fragment>
                        <span className="mo">{AM_MTG_MONTHS[d.getMonth()]}</span>
                        <span className="dy">{d.getDate()}</span>
                        <span className="yr">{d.getFullYear()}</span>
                      </React.Fragment>
                    ) : <AMIcon name="file-text" size={18} color="var(--pi-blue)" />}
                  </span>
                  <span className="am-mtg-body">
                    <span className="am-mtg-title">{m.meetingTitle || "Meeting minutes"}</span>
                    <span className="am-mtg-meta">
                      {meta.badge}
                      {m.rating ? <span className="am-mtg-stars" aria-label={m.rating + " of 5 stars"}>{"★".repeat(m.rating) + "☆".repeat(5 - m.rating)}</span> : null}
                      {d && <span>{d.toLocaleDateString(undefined, { month: "long", day: "numeric", year: "numeric" })}</span>}
                    </span>
                  </span>
                  <span className="am-mtg-go" aria-hidden="true"><AMIcon name="chevron-right" size={18} /></span>
                </div>
              );
            })}
          </div>

          {totalPages > 1 && (
            <div className="am-pager" role="navigation" aria-label="Meetings pagination">
              <button className="am-pager-btn" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1} aria-label="Previous page">
                <AMIcon name="chevron-left" size={15} /> Prev
              </button>
              {pagesToShow().map((p, idx) => p === "…"
                ? <span key={"gap" + idx} className="am-pager-gap" aria-hidden="true">…</span>
                : <button key={p} className={"am-pager-pill" + (p === page ? " active" : "")} onClick={() => setPage(p)} aria-current={p === page ? "page" : undefined} aria-label={"Page " + p}>{p}</button>)}
              <button className="am-pager-btn" onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={page >= totalPages} aria-label="Next page">
                Next <AMIcon name="chevron-right" size={15} />
              </button>
            </div>
          )}
        </React.Fragment>
      )}
    </div>
  );
}

Object.assign(window, { BoardMeetingsPage });