// Dashboard → Cleanings. Ledger status stays intact; display rules live in lib.
function CleaningsPage() {
  const t = window.useTables(["cleanings", "reservations"]);
  const [filter, setFilter] = React.useState("all");
  const [view, setView] = React.useState("upcoming");
  const c = window.AreteCleanings;
  if (t.status === "loading") return <Loading />;
  if (t.status === "error") return <LoadError error={t.error} onRetry={t.reload} />;
  const rows = c.joinReservations(t.data.cleanings, t.data.reservations);
  const today = todayNY();
  const counts = c.cleaningFilterCounts(rows, { today, view });
  const summary = c.cleaningSummary(rows, today);
  const filtered = c.cleaningView(rows, { today, view, filter });
  const groups = c.groupMonths(filtered, "checkout_date", view === "past" || filter === "done" || filter === "cancelled");
  return <section className="phase4 cleanings-page" aria-label="Cleaning schedule">
    <p className="sub">{summary.needsNow} need you now · {summary.waiting} waiting on a cleaner</p>
    <div className="secthead"><div className="seg" role="group" aria-label="Cleaning dates">
      {[["upcoming", "Upcoming"], ["past", "Past"]].map(([key, label]) => <button key={key} type="button"
        className={view === key && filter !== "done" && filter !== "cancelled" ? "on" : ""}
        aria-pressed={view === key && filter !== "done" && filter !== "cancelled"}
        onClick={() => { setView(key); setFilter("all"); }}>{label}</button>)}
    </div></div>
    <div className="statsrow" role="group" aria-label="Filter cleanings by status">
      {c.FILTERS.map(([key, label]) => <button key={key} type="button" className={"filter" + (filter === key ? " on" : "")}
        aria-pressed={filter === key} onClick={() => setFilter(key)}>{label} <b>{counts[key]}</b></button>)}
    </div>
    {!filtered.length ? <NoData>{rows.length ? "No cleanings with this status." : "No cleanings to show yet."}</NoData> :
      <div className="tcard"><table className="tbl clean stack fixed">
        <caption className="sr">Cleanings by checkout month</caption>
        <colgroup>{[22, 16, 13, 13, 36].map((width, i) => <col key={i} style={{ width: width + "%" }} />)}</colgroup>
        <thead><tr><th scope="col">Checkout · guest</th><th scope="col">Clean</th><th scope="col">Cleaner</th><th scope="col">Breezeway</th><th scope="col">Status</th></tr></thead>
        {groups.map((group) => <tbody key={group.key}>
          <tr className="grp"><th scope="rowgroup" colSpan="5">{group.label}</th></tr>
          {group.rows.map((row) => {
            const status = c.cleaningStatus(row);
            return <tr key={row.booking_code} className={status.className}>
              <td data-l="Checkout"><div><div className="d1 num">{c.shortDate(row.checkout_date)}</div><div className="d2">{row.guest}</div></div></td>
              <td data-l="Clean"><div><div className="d1 num">{c.shortDate(row.clean_date, row.clean_date?.slice(0, 4) !== row.checkout_date.slice(0, 4))}</div><div className="d2">4pm</div></div></td>
              <td data-l="Cleaner">{row.cleaner || <span className="muted">Not picked</span>}</td>
              <td data-l="Breezeway"><span className={"bw" + (status.breezeway.needed && status.inBreezeway ? "" : " muted")}>
                <span aria-hidden={status.breezeway.needed || undefined}>{status.breezeway.symbol}</span>{status.breezeway.label}
              </span></td>
              <td data-l="Status" className="nolab"><div><span className="status"><span className="dot" aria-hidden="true" />{status.label}</span>
                <div className="story">{status.story}</div></div></td>
            </tr>;
          })}
        </tbody>)}
      </table></div>}
  </section>;
}
window.ARETE_PAGES = Object.assign(window.ARETE_PAGES || {}, { "dashboard/cleanings": CleaningsPage });