// Dashboard → Reservations. The shell owns the page title.
function ReservationsPage() {
  const t = window.useTables(["reservations"]);
  const [view, setView] = React.useState("upcoming");
  const c = window.AreteCleanings;
  const today = window.todayNY();
  if (t.status === "loading") return <Loading />;
  if (t.status === "error") return <LoadError error={t.error} onRetry={t.reload} />;
  const rows = c.reservationView(t.data.reservations, { today, view });
  const groups = c.groupMonths(rows, "checkin", view === "past");
  const label = view === "past" ? "Past" : "Upcoming";
  const total = rows.reduce((sum, row) => sum + (Number(row.payout) || 0), 0);
  return <section className="phase4 reservations-page" aria-label="Reservations">
    <div className="secthead">
      <h2>{label}</h2><span className="dd">{rows.length} {rows.length === 1 ? "stay" : "stays"} · {money(total)} payout</span>
      <div className="right"><div className="seg" role="group" aria-label="Reservation period">
        {[["upcoming", "Upcoming"], ["past", "Past"]].map(([key, title]) =>
          <button key={key} type="button" className={view === key ? "on" : ""} aria-pressed={view === key}
            onClick={() => setView(key)}>{title}</button>)}
      </div></div>
    </div>
    {!rows.length ? <NoData>No {view} stays to show.</NoData> : <div className="tcard">
      {groups.map((group) => <div key={group.key}>
        <h3 className="monthhead">{group.label}</h3>
        <ul className="reservation-list">{group.rows.map((row) => <li className="lrow" key={row.id}>
          <span className="ini" aria-hidden="true">{c.initials(row.guest_name)}</span>
          <div className="reservation-detail">
            <div className="t">{row.guest_name || "Guest not listed"}
              {row.stayingNow && <span className="chip staying-now">Staying now</span>}
              {["cancelled", "canceled"].includes(row.status) && <span className="chip">Stay cancelled</span>}
            </div>
            <div className="m">{c.dateRange(row.checkin, row.checkout)}</div>
            <div className="m">{row.nights} {row.nights === 1 ? "night" : "nights"} · {row.guests == null ? "Guest count not listed" : `${row.guests} ${row.guests === 1 ? "guest" : "guests"}`}</div>
          </div>
          <div className="amt"><div className="fig num">{row.payout == null ? "Not listed" : money(row.payout)}</div><div className="m">{c.platform(row.platform)}</div></div>
        </li>)}</ul>
      </div>)}
    </div>}
  </section>;
}
window.ARETE_PAGES = Object.assign(window.ARETE_PAGES || {}, { "dashboard/reservations": ReservationsPage });