// Dashboard, Meetings index, Papers index, Resolutions index, Participants

// ===========================================================
// DASHBOARD
// ===========================================================
const Dashboard = ({ navigate }) => {
  const upcoming = MEETINGS.filter((m) =>
    ["Scheduled", "Draft", "In Progress"].includes(m.status),
  ).sort((a, b) => new Date(a.date) - new Date(b.date));
  const pendingPapers = PAPERS.filter((p) => p.status === "Submitted");
  const awaitingVote = MEETINGS.flatMap((m) =>
    m.agenda
      .filter((a) =>
        ["Pending debate", "Debating", "Ready for vote"].includes(a.status),
      )
      .map((a) => ({ ...a, meeting: m })),
  );
  const recentResolutions = [...RESOLUTIONS]
    .sort((a, b) => new Date(b.passedDate) - new Date(a.passedDate))
    .slice(0, 4);

  return (
    <div className="page" data-screen-label="Dashboard">
      <div className="page__header">
        <div className="page__title-block">
          <h1 className="page__title">Dashboard Here Ok</h1>
          <p className="page__subtitle">
            Overview of council operations · Tuesday, 6 May 2026
          </p>
        </div>
        <div className="page__actions">
          <button
            className="btn"
            onClick={() => navigate({ name: "paper-create" })}
          >
            <Icon name="file-text" size={14} /> New paper
          </button>
          <button
            className="btn btn--primary"
            onClick={() => navigate({ name: "meeting-create" })}
          >
            <Icon name="plus" size={14} /> Create meeting
          </button>
        </div>
      </div>

      {/* Stats */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 12,
          marginBottom: 20,
        }}
      >
        <div className="stat">
          <div className="stat__label">
            <Icon name="calendar" size={12} /> Upcoming meetings
          </div>
          <div className="stat__value">{upcoming.length}</div>
          <div className="stat__delta">
            Next: {upcoming[0] ? relDate(upcoming[0].date) : "—"}
          </div>
        </div>
        <div className="stat">
          <div className="stat__label">
            <Icon name="file-text" size={12} /> Pending papers
          </div>
          <div className="stat__value">{pendingPapers.length}</div>
          <div className="stat__delta">Awaiting agenda inclusion</div>
        </div>
        <div className="stat">
          <div className="stat__label">
            <Icon name="vote" size={12} /> Items awaiting vote
          </div>
          <div className="stat__value">{awaitingVote.length}</div>
          <div className="stat__delta">
            Across {new Set(awaitingVote.map((a) => a.meeting.id)).size}{" "}
            meeting(s)
          </div>
        </div>
        <div className="stat">
          <div className="stat__label">
            <Icon name="gavel" size={12} /> Resolutions (30d)
          </div>
          <div className="stat__value">{RESOLUTIONS.length}</div>
          <div className="stat__delta stat__delta--up">+2 vs prev period</div>
        </div>
      </div>

      {/* Two-column body */}
      <div
        style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16 }}
      >
        {/* Upcoming meetings */}
        <div className="card">
          <div className="card__header">
            <h3 className="card__title">Upcoming meetings</h3>
            <div className="card__actions">
              <button
                className="btn btn--ghost btn--sm"
                onClick={() => navigate({ name: "meetings" })}
              >
                View all <Icon name="chevron-right" size={12} />
              </button>
            </div>
          </div>
          <div className="card__body card__body--flush">
            {upcoming.length === 0 ? (
              <Empty
                icon="calendar"
                title="No upcoming meetings"
                text="Schedule the next council session."
                action={
                  <button
                    className="btn btn--primary btn--sm"
                    onClick={() => navigate({ name: "meeting-create" })}
                  >
                    <Icon name="plus" size={12} /> Create meeting
                  </button>
                }
              />
            ) : (
              <table className="tbl">
                <tbody>
                  {upcoming.map((m) => (
                    <tr
                      key={m.id}
                      onClick={() =>
                        navigate({ name: "meeting-detail", id: m.id })
                      }
                    >
                      <td style={{ width: 56 }}>
                        <div
                          style={{
                            width: 40,
                            padding: "6px 0",
                            textAlign: "center",
                            border: "1px solid var(--border)",
                            borderRadius: 6,
                            background: "white",
                          }}
                        >
                          <div
                            style={{
                              fontSize: 10,
                              color: "var(--muted)",
                              textTransform: "uppercase",
                              letterSpacing: "0.05em",
                            }}
                          >
                            {new Date(m.date).toLocaleString("en-GB", {
                              month: "short",
                            })}
                          </div>
                          <div
                            style={{
                              fontSize: 16,
                              fontWeight: 600,
                              lineHeight: 1,
                            }}
                          >
                            {new Date(m.date).getDate()}
                          </div>
                        </div>
                      </td>
                      <td>
                        <div className="tbl__primary">{m.title}</div>
                        <div className="tbl__sub">
                          {m.no} · <Icon name="clock" size={11} />{" "}
                          {new Date(m.date).toLocaleTimeString("en-GB", {
                            hour: "2-digit",
                            minute: "2-digit",
                          })}{" "}
                          · <Icon name="map-pin" size={11} /> {m.location}
                        </div>
                      </td>
                      <td style={{ width: 110 }}>
                        <TypeBadge type={m.type} />
                      </td>
                      <td style={{ width: 130 }}>
                        <StatusPill status={m.status} />
                      </td>
                      <td style={{ width: 80, textAlign: "right" }}>
                        <span className="muted tnum">
                          {m.agenda.length} items
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        </div>

        {/* Pending papers */}
        <div className="card">
          <div className="card__header">
            <h3 className="card__title">Pending council papers</h3>
            <div className="card__actions">
              <button
                className="btn btn--ghost btn--sm"
                onClick={() => navigate({ name: "papers" })}
              >
                View all <Icon name="chevron-right" size={12} />
              </button>
            </div>
          </div>
          <div
            className="card__body"
            style={{ display: "flex", flexDirection: "column", gap: 0 }}
          >
            {pendingPapers.map((p, i) => (
              <div
                key={p.id}
                onClick={() => navigate({ name: "paper-detail", id: p.id })}
                style={{
                  padding: "10px 0",
                  borderTop: i === 0 ? "0" : "1px solid var(--border-soft)",
                  cursor: "pointer",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 8,
                    marginBottom: 4,
                  }}
                >
                  <span
                    className="badge badge--outline mono"
                    style={{ fontSize: 10.5 }}
                  >
                    {p.id}
                  </span>
                  <StatusPill status={p.status} />
                </div>
                <div style={{ fontWeight: 500, marginBottom: 2 }}>
                  {p.title}
                </div>
                <div
                  className="tbl__sub"
                  style={{ display: "flex", alignItems: "center", gap: 6 }}
                >
                  <Avatar p={getParticipant(p.submittedBy)} size="sm" />
                  <span>{getParticipant(p.submittedBy)?.name}</span>
                  <span>·</span>
                  <span>{p.section}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Recent resolutions */}
        <div className="card">
          <div className="card__header">
            <h3 className="card__title">Recently passed resolutions</h3>
            <div className="card__actions">
              <button
                className="btn btn--ghost btn--sm"
                onClick={() => navigate({ name: "resolutions" })}
              >
                View all <Icon name="chevron-right" size={12} />
              </button>
            </div>
          </div>
          <div
            className="card__body"
            style={{ display: "flex", flexDirection: "column", gap: 0 }}
          >
            {recentResolutions.map((r, i) => (
              <div
                key={r.id}
                onClick={() =>
                  navigate({ name: "resolution-detail", id: r.id })
                }
                style={{
                  padding: "10px 0",
                  borderTop: i === 0 ? "0" : "1px solid var(--border-soft)",
                  cursor: "pointer",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 8,
                    marginBottom: 4,
                  }}
                >
                  <span
                    className="badge badge--outline mono"
                    style={{ fontSize: 10.5 }}
                  >
                    {r.id}
                  </span>
                  <span className="muted" style={{ fontSize: 12 }}>
                    {fmtDate(r.passedDate)}
                  </span>
                </div>
                <div style={{ fontWeight: 500, marginBottom: 4 }}>
                  {r.summary}
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span className="badge badge--brand badge--sm">
                    <Icon name="tag" size={10} /> {r.enforcingParty}
                  </span>
                  <VoteResultPill vote={r.vote} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

// ===========================================================
// MEETINGS INDEX
// ===========================================================
const MeetingsIndex = ({ navigate }) => {
  const [tab, setTab] = React.useState("upcoming");
  const [typeFilter, setTypeFilter] = React.useState("all");
  const [q, setQ] = React.useState("");

  const filtered = MEETINGS.filter((m) =>
    tab === "upcoming"
      ? ["Scheduled", "Draft", "In Progress"].includes(m.status)
      : ["Completed", "Cancelled"].includes(m.status),
  )
    .filter((m) => typeFilter === "all" || m.type === typeFilter)
    .filter(
      (m) =>
        !q ||
        (m.title + m.no + m.location).toLowerCase().includes(q.toLowerCase()),
    )
    .sort((a, b) =>
      tab === "upcoming"
        ? new Date(a.date) - new Date(b.date)
        : new Date(b.date) - new Date(a.date),
    );

  const upcomingCount = MEETINGS.filter((m) =>
    ["Scheduled", "Draft", "In Progress"].includes(m.status),
  ).length;
  const pastCount = MEETINGS.filter((m) =>
    ["Completed", "Cancelled"].includes(m.status),
  ).length;

  return (
    <div className="page" data-screen-label="Meetings">
      <div className="page__header">
        <div className="page__title-block">
          <h1 className="page__title">Meetings</h1>
          <p className="page__subtitle">
            Schedule, build agendas, and run council sessions.
          </p>
        </div>
        <div className="page__actions">
          <button className="btn">
            <Icon name="download" size={14} /> Export
          </button>
          <button
            className="btn btn--primary"
            onClick={() => navigate({ name: "meeting-create" })}
          >
            <Icon name="plus" size={14} /> Create meeting
          </button>
        </div>
      </div>

      <div className="subnav">
        <button
          className={`tab ${tab === "upcoming" ? "tab--active" : ""}`}
          onClick={() => setTab("upcoming")}
        >
          Upcoming <span className="tab__count">{upcomingCount}</span>
        </button>
        <button
          className={`tab ${tab === "past" ? "tab--active" : ""}`}
          onClick={() => setTab("past")}
        >
          Past <span className="tab__count">{pastCount}</span>
        </button>
      </div>

      <div className="filterbar">
        <div className="filterbar__search">
          <Icon name="search" size={14} />
          <input
            placeholder="Search by title, number, or location"
            value={q}
            onChange={(e) => setQ(e.target.value)}
          />
        </div>
        <div className="filterbar__sep" />
        <select
          className="select"
          style={{ width: 150 }}
          value={typeFilter}
          onChange={(e) => setTypeFilter(e.target.value)}
        >
          <option value="all">All types</option>
          <option>General</option>
          <option>Emergency</option>
        </select>
        <button className="btn btn--ghost btn--sm">
          <Icon name="filter" size={12} /> More filters
        </button>
      </div>

      <div className="table-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 110 }}>Meeting #</th>
              <th>Meeting</th>
              <th style={{ width: 110 }}>Type</th>
              <th style={{ width: 160 }}>Date</th>
              <th style={{ width: 200 }}>Location</th>
              <th style={{ width: 80 }}>Items</th>
              <th style={{ width: 130 }}>Participants</th>
              <th style={{ width: 130 }}>Status</th>
              <th style={{ width: 60 }}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.length === 0 && (
              <tr>
                <td colSpan="9">
                  <Empty
                    icon="calendar"
                    title={
                      tab === "upcoming"
                        ? "No upcoming meetings"
                        : "No past meetings yet"
                    }
                    text={
                      tab === "upcoming"
                        ? "Create the next council session to get started."
                        : "Past meetings will be archived here once completed."
                    }
                    action={
                      tab === "upcoming" && (
                        <button
                          className="btn btn--primary btn--sm"
                          onClick={() => navigate({ name: "meeting-create" })}
                        >
                          <Icon name="plus" size={12} /> Create meeting
                        </button>
                      )
                    }
                  />
                </td>
              </tr>
            )}
            {filtered.map((m) => (
              <tr
                key={m.id}
                onClick={() => navigate({ name: "meeting-detail", id: m.id })}
                className={m.status === "Cancelled" ? "tbl__row--inactive" : ""}
              >
                <td className="mono tbl__num">{m.no}</td>
                <td>
                  <div className="tbl__primary">{m.title}</div>
                  {m.notes && (
                    <div className="tbl__sub">
                      {m.notes.slice(0, 80)}
                      {m.notes.length > 80 ? "…" : ""}
                    </div>
                  )}
                </td>
                <td>
                  <TypeBadge type={m.type} />
                </td>
                <td>
                  <div>{fmtDate(m.date)}</div>
                  <div className="tbl__sub">
                    {new Date(m.date).toLocaleTimeString("en-GB", {
                      hour: "2-digit",
                      minute: "2-digit",
                    })}
                  </div>
                </td>
                <td className="muted" style={{ fontSize: 12.5 }}>
                  {m.location}
                </td>
                <td className="tnum">{m.agenda.length}</td>
                <td>
                  <AvatarStack ids={m.participantIds} max={4} />
                </td>
                <td>
                  <StatusPill status={m.status} />
                </td>
                <td>
                  <button
                    className="btn btn--ghost btn--icon btn--sm"
                    onClick={(e) => {
                      e.stopPropagation();
                    }}
                  >
                    <Icon name="more" />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div
        style={{
          marginTop: 10,
          fontSize: 12,
          color: "var(--muted)",
          display: "flex",
          justifyContent: "space-between",
        }}
      >
        <span>
          Showing {filtered.length} of {MEETINGS.length} meetings
        </span>
        <span>Page 1 of 1</span>
      </div>
    </div>
  );
};

// ===========================================================
// COUNCIL PAPERS INDEX
// ===========================================================
const PapersIndex = ({ navigate }) => {
  const [statusFilter, setStatusFilter] = React.useState("all");
  const [sectionFilter, setSectionFilter] = React.useState("all");
  const [meetingFilter, setMeetingFilter] = React.useState("all");
  const [q, setQ] = React.useState("");

  const filtered = PAPERS.filter(
    (p) =>
      (statusFilter === "all" || p.status === statusFilter) &&
      (sectionFilter === "all" || p.section === sectionFilter) &&
      (meetingFilter === "all" || p.relatedMeetingId === meetingFilter) &&
      (!q ||
        (p.title + p.id + p.description)
          .toLowerCase()
          .includes(q.toLowerCase())),
  );

  return (
    <div className="page" data-screen-label="Council Papers">
      <div className="page__header">
        <div className="page__title-block">
          <h1 className="page__title">Council Papers</h1>
          <p className="page__subtitle">
            Submitted papers eligible for inclusion in meeting agendas.
          </p>
        </div>
        <div className="page__actions">
          <button className="btn">
            <Icon name="download" size={14} /> Export
          </button>
          <button
            className="btn btn--primary"
            onClick={() => navigate({ name: "paper-create" })}
          >
            <Icon name="plus" size={14} /> New paper
          </button>
        </div>
      </div>

      <div className="filterbar">
        <div className="filterbar__search">
          <Icon name="search" size={14} />
          <input
            placeholder="Search papers by title, ID or content"
            value={q}
            onChange={(e) => setQ(e.target.value)}
          />
        </div>
        <div className="filterbar__sep" />
        <select
          className="select"
          style={{ width: 160 }}
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value)}
        >
          <option value="all">All statuses</option>
          {[
            "Draft",
            "Submitted",
            "Added to agenda",
            "Voted",
            "Resolved",
            "Rejected",
          ].map((s) => (
            <option key={s}>{s}</option>
          ))}
        </select>
        <select
          className="select"
          style={{ width: 200 }}
          value={sectionFilter}
          onChange={(e) => setSectionFilter(e.target.value)}
        >
          <option value="all">All sections</option>
          {SECTIONS.map((s) => (
            <option key={s}>{s}</option>
          ))}
        </select>
        <select
          className="select"
          style={{ width: 180 }}
          value={meetingFilter}
          onChange={(e) => setMeetingFilter(e.target.value)}
        >
          <option value="all">All meetings</option>
          {MEETINGS.map((m) => (
            <option key={m.id} value={m.id}>
              {m.no}
            </option>
          ))}
        </select>
      </div>

      <div className="table-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 130 }}>Paper #</th>
              <th>Title</th>
              <th style={{ width: 180 }}>Submitted by</th>
              <th style={{ width: 160 }}>Section</th>
              <th style={{ width: 90 }}>Files</th>
              <th style={{ width: 130 }}>Meeting</th>
              <th style={{ width: 150 }}>Status</th>
              <th style={{ width: 110 }}>Submitted</th>
              <th style={{ width: 60 }}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.length === 0 && (
              <tr>
                <td colSpan="9">
                  <Empty
                    icon="file-text"
                    title="No papers found"
                    text="Try changing filters or search terms."
                  />
                </td>
              </tr>
            )}
            {filtered.map((p) => {
              const sub = getParticipant(p.submittedBy);
              const m = p.relatedMeetingId
                ? getMeeting(p.relatedMeetingId)
                : null;
              return (
                <tr
                  key={p.id}
                  onClick={() => navigate({ name: "paper-detail", id: p.id })}
                >
                  <td className="mono tbl__num">{p.id}</td>
                  <td>
                    <div className="tbl__primary">{p.title}</div>
                    <div
                      className="tbl__sub"
                      style={{
                        maxWidth: 480,
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap",
                      }}
                    >
                      {p.description}
                    </div>
                  </td>
                  <td>
                    <div className="row" style={{ gap: 6 }}>
                      <Avatar p={sub} size="sm" />
                      <span style={{ fontSize: 12.5 }}>{sub?.name}</span>
                    </div>
                  </td>
                  <td className="muted" style={{ fontSize: 12.5 }}>
                    {p.section}
                  </td>
                  <td>
                    {p.attachments.length > 0 ? (
                      <span className="badge badge--neutral badge--sm">
                        <Icon name="paperclip" size={10} />{" "}
                        {p.attachments.length}
                      </span>
                    ) : (
                      <span className="muted">—</span>
                    )}
                  </td>
                  <td className="mono tbl__num">{m?.no || "—"}</td>
                  <td>
                    <StatusPill status={p.status} />
                  </td>
                  <td className="muted tnum" style={{ fontSize: 12.5 }}>
                    {fmtDate(p.submittedAt)}
                  </td>
                  <td>
                    <button
                      className="btn btn--ghost btn--icon btn--sm"
                      onClick={(e) => e.stopPropagation()}
                    >
                      <Icon name="more" />
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};

// ===========================================================
// RESOLUTIONS INDEX
// ===========================================================
const ResolutionsIndex = ({ navigate }) => {
  const [q, setQ] = React.useState("");
  const filtered = RESOLUTIONS.filter(
    (r) =>
      !q ||
      (r.summary + r.id + r.enforcingParty)
        .toLowerCase()
        .includes(q.toLowerCase()),
  );

  return (
    <div className="page" data-screen-label="Resolutions">
      <div className="page__header">
        <div className="page__title-block">
          <h1 className="page__title">Resolutions</h1>
          <p className="page__subtitle">
            Council decisions formally passed via vote. Once passed, resolutions
            are archived as final.
          </p>
        </div>
        <div className="page__actions">
          <button className="btn">
            <Icon name="download" size={14} /> Export
          </button>
        </div>
      </div>

      <div className="filterbar">
        <div className="filterbar__search">
          <Icon name="search" size={14} />
          <input
            placeholder="Search resolutions"
            value={q}
            onChange={(e) => setQ(e.target.value)}
          />
        </div>
        <div className="filterbar__sep" />
        <select className="select" style={{ width: 200 }}>
          <option>All enforcing parties</option>
          {SECTIONS.map((s) => (
            <option key={s}>{s}</option>
          ))}
        </select>
        <select className="select" style={{ width: 160 }}>
          <option>All meetings</option>
        </select>
      </div>

      <div className="table-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 90 }}>ID</th>
              <th>Resolution</th>
              <th style={{ width: 200 }}>Enforcing party</th>
              <th style={{ width: 120 }}>Meeting</th>
              <th style={{ width: 180 }}>Vote</th>
              <th style={{ width: 110 }}>Passed</th>
              <th style={{ width: 60 }}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((r) => {
              const m = getMeeting(r.meetingId);
              return (
                <tr
                  key={r.id}
                  onClick={() =>
                    navigate({ name: "resolution-detail", id: r.id })
                  }
                >
                  <td className="mono tbl__num">{r.id}</td>
                  <td>
                    <div className="tbl__primary">{r.summary}</div>
                    {r.paperId && (
                      <div className="tbl__sub">
                        From paper <span className="mono">{r.paperId}</span>
                      </div>
                    )}
                  </td>
                  <td>
                    <span className="badge badge--brand">
                      <Icon name="tag" size={10} /> {r.enforcingParty}
                    </span>
                  </td>
                  <td className="mono tbl__num">{m?.no || "—"}</td>
                  <td>
                    <VoteResultPill vote={r.vote} />
                  </td>
                  <td className="muted tnum" style={{ fontSize: 12.5 }}>
                    {fmtDate(r.passedDate)}
                  </td>
                  <td>
                    <button
                      className="btn btn--ghost btn--icon btn--sm"
                      onClick={(e) => e.stopPropagation()}
                    >
                      <Icon name="more" />
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};

// ===========================================================
// AGENDA ITEMS INDEX (cross-meeting)
// ===========================================================
const AgendaIndex = ({ navigate }) => {
  const all = MEETINGS.flatMap((m) =>
    m.agenda.map((a) => ({ ...a, meeting: m })),
  );
  const [statusFilter, setStatusFilter] = React.useState("all");
  const filtered = all.filter(
    (a) => statusFilter === "all" || a.status === statusFilter,
  );

  return (
    <div className="page" data-screen-label="Agenda Items">
      <div className="page__header">
        <div className="page__title-block">
          <h1 className="page__title">Agenda Items</h1>
          <p className="page__subtitle">
            All items currently or previously on a meeting agenda, across all
            meetings.
          </p>
        </div>
      </div>

      <div className="filterbar">
        <div className="filterbar__search">
          <Icon name="search" size={14} />
          <input placeholder="Search agenda items" />
        </div>
        <div className="filterbar__sep" />
        <select
          className="select"
          style={{ width: 180 }}
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value)}
        >
          <option value="all">All statuses</option>
          {[
            "Pending debate",
            "Debating",
            "Ready for vote",
            "Voted",
            "Resolved",
          ].map((s) => (
            <option key={s}>{s}</option>
          ))}
        </select>
      </div>

      <div className="table-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 130 }}>Paper #</th>
              <th>Item</th>
              <th style={{ width: 120 }}>Meeting</th>
              <th style={{ width: 140 }}>Status</th>
              <th style={{ width: 180 }}>Vote</th>
              <th style={{ width: 110 }}>Resolution</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((a, i) => {
              const p = getPaper(a.paperId);
              return (
                <tr
                  key={i}
                  onClick={() =>
                    navigate({ name: "meeting-detail", id: a.meeting.id })
                  }
                >
                  <td className="mono tbl__num">{a.paperId}</td>
                  <td>
                    <div className="tbl__primary">{p?.title}</div>
                    <div className="tbl__sub">{p?.section}</div>
                  </td>
                  <td className="mono tbl__num">{a.meeting.no}</td>
                  <td>
                    <StatusPill status={a.status} />
                  </td>
                  <td>
                    <VoteResultPill vote={a.vote} />
                  </td>
                  <td>
                    {a.resolutionId ? (
                      <span className="mono tbl__num">{a.resolutionId}</span>
                    ) : (
                      <span className="muted">—</span>
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};

// ===========================================================
// PARTICIPANTS
// ===========================================================
const ParticipantsIndex = () => {
  const [q, setQ] = React.useState("");
  const filtered = PARTICIPANTS.filter(
    (p) =>
      !q ||
      (p.name + p.section + p.role).toLowerCase().includes(q.toLowerCase()),
  );

  return (
    <div className="page" data-screen-label="Participants">
      <div className="page__header">
        <div className="page__title-block">
          <h1 className="page__title">Participants</h1>
          <p className="page__subtitle">
            Councillors and secretariat staff who attend meetings.
          </p>
        </div>
        <div className="page__actions">
          <button className="btn btn--primary">
            <Icon name="plus" size={14} /> Add participant
          </button>
        </div>
      </div>

      <div className="filterbar">
        <div className="filterbar__search">
          <Icon name="search" size={14} />
          <input
            placeholder="Search by name or section"
            value={q}
            onChange={(e) => setQ(e.target.value)}
          />
        </div>
        <div className="filterbar__sep" />
        <select className="select" style={{ width: 200 }}>
          <option>All sections</option>
          {SECTIONS.map((s) => (
            <option key={s}>{s}</option>
          ))}
        </select>
        <select className="select" style={{ width: 140 }}>
          <option>All roles</option>
          <option>Councillor</option>
          <option>Secretariat</option>
        </select>
      </div>

      <div className="table-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th>Name</th>
              <th style={{ width: 240 }}>Section</th>
              <th style={{ width: 160 }}>Role</th>
              <th style={{ width: 110 }}>Meetings (YTD)</th>
              <th style={{ width: 60 }}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((p) => (
              <tr key={p.id}>
                <td>
                  <div className="row" style={{ gap: 10 }}>
                    <Avatar p={p} />
                    <div>
                      <div className="tbl__primary">{p.name}</div>
                      <div className="tbl__sub">ID {p.id.toUpperCase()}</div>
                    </div>
                  </div>
                </td>
                <td>{p.section}</td>
                <td>
                  <span className="badge badge--neutral">{p.role}</span>
                </td>
                <td className="tnum">{Math.floor(Math.random() * 8) + 4}</td>
                <td>
                  <button className="btn btn--ghost btn--icon btn--sm">
                    <Icon name="more" />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

Object.assign(window, {
  Dashboard,
  MeetingsIndex,
  PapersIndex,
  ResolutionsIndex,
  AgendaIndex,
  ParticipantsIndex,
});