/* dashboard.jsx — back-office reception view: passcode → reservations table */
const { useState: useStateD, useMemo: useMemoD, useEffect: useEffectD } = React;

const TODAY = "2026-06-13"; // demo "today" — matches seed so the board lights up

function nightsBetween(a, b) {
  const d = (new Date(b) - new Date(a)) / 86400000;
  return isNaN(d) ? 0 : Math.max(0, Math.round(d));
}
function fmtDate(s) {
  const d = new Date(s + "T00:00:00");
  if (isNaN(d)) return s;
  return d.toLocaleDateString("en-GB", { day: "numeric", month: "short" });
}
const STATUSES = ["New", "Confirmed", "Checked-in", "Cancelled"];
const cls = (s) => "pill " + s.replace("-", "");

function Dashboard({ bookings, onSetStatus, onClose }) {
  const [authed, setAuthed] = useStateD(false);
  const [code, setCode] = useStateD("");
  const [bad, setBad] = useStateD(false);
  const [q, setQ] = useStateD("");
  const [filter, setFilter] = useStateD("All");
  const [sort, setSort] = useStateD({ key: "checkin", dir: "asc" });
  const [active, setActive] = useStateD(null); // ref of open detail

  useEffectD(() => {
    const onKey = (e) => { if (e.key === "Escape") { if (active) setActive(null); else onClose(); } };
    document.addEventListener("keydown", onKey);
    document.body.classList.add("locked");
    return () => { document.removeEventListener("keydown", onKey); document.body.classList.remove("locked"); };
  }, [onClose, active]);

  const tryCode = (e) => {
    e.preventDefault();
    if (code === window.RIAD.passcode) { setAuthed(true); setBad(false); }
    else { setBad(true); }
  };

  // ---- derived stats ----
  const stats = useMemoD(() => {
    const live = bookings.filter((b) => b.status !== "Cancelled");
    const arrivals = live.filter((b) => b.checkin === TODAY).length;
    const pending = bookings.filter((b) => b.status === "New").length;
    const inHouse = bookings.filter((b) => b.status === "Checked-in").length;
    const occupied = live.filter((b) => b.checkin <= TODAY && b.checkout > TODAY).length;
    return { arrivals, pending, inHouse, occupied, rooms: window.RIAD.rooms.length };
  }, [bookings]);

  const counts = useMemoD(() => {
    const c = { All: bookings.length };
    STATUSES.forEach((s) => { c[s] = bookings.filter((b) => b.status === s).length; });
    return c;
  }, [bookings]);

  const rows = useMemoD(() => {
    let r = bookings.slice();
    if (filter !== "All") r = r.filter((b) => b.status === filter);
    if (q.trim()) {
      const t = q.trim().toLowerCase();
      r = r.filter((b) => (b.guest + " " + b.room + " " + b.ref + " " + b.channel).toLowerCase().includes(t));
    }
    const { key, dir } = sort;
    r.sort((a, b) => {
      let x = a[key], y = b[key];
      if (key === "guests") { x = +x; y = +y; }
      if (x < y) return dir === "asc" ? -1 : 1;
      if (x > y) return dir === "asc" ? 1 : -1;
      return 0;
    });
    return r;
  }, [bookings, filter, q, sort]);

  const setSortKey = (key) => setSort((s) => ({ key, dir: s.key === key && s.dir === "asc" ? "desc" : "asc" }));
  const arrow = (key) => sort.key === key ? (sort.dir === "asc" ? "▲" : "▼") : "▲";

  const activeBooking = bookings.find((b) => b.ref === active);

  // ---- passcode gate ----
  if (!authed) {
    return (
      <div className="admin admin-fade" data-screen-label="Staff — passcode">
        <div className="gate">
          <form className="gate-box" onSubmit={tryCode}>
            <span className="star">&#9733;</span>
            <p className="eyebrow">Dar Najma · Reception</p>
            <h3>Staff access</h3>
            <p>Enter the house passcode to open the reservations board.</p>
            <input
              autoFocus type="password" inputMode="numeric" value={code}
              className={bad ? "bad" : ""} placeholder="••••"
              onChange={(e) => { setCode(e.target.value); setBad(false); }}
            />
            <span className="gate-msg">{bad ? "That isn't the code. Try the year on the door." : ""}</span>
            <button className="btn-solid btn-block" type="submit">Enter</button>
            <span className="hint">Demo passcode: 1924</span>
            <button type="button" className="gate-back" onClick={onClose}>&larr; Back to the website</button>
          </form>
        </div>
      </div>
    );
  }

  // ---- board ----
  return (
    <div className="admin admin-fade" data-screen-label="Reception — reservations">
      <div className="admin-top">
        <div className="brand">
          <span className="wm"><span className="star">&#9733;</span> Dar Najma</span>
          <span className="role">Reception</span>
        </div>
        <div className="right">
          <span className="clock">{new Date(TODAY + "T09:00:00").toLocaleDateString("en-GB", { weekday: "long", day: "numeric", month: "long" })}</span>
          <button className="exit" onClick={onClose}>Close board</button>
        </div>
      </div>

      <div className="admin-body">
        <div className="admin-inner">
          <div className="adm-summary">
            <div className="s"><span className="k">Arrivals today</span><span className="v">{stats.arrivals}</span><span className="sub">expected to check in</span></div>
            <div className="s"><span className="k">In the house</span><span className="v">{stats.inHouse}</span><span className="sub">currently checked-in</span></div>
            <div className="s"><span className="k">Occupancy</span><span className="v">{stats.occupied}<span className="unit"> / {stats.rooms}</span></span><span className="sub">rooms tonight</span></div>
            <div className="s"><span className="k">Pending requests</span><span className="v">{stats.pending}</span><span className="sub">awaiting confirmation</span></div>
          </div>

          <div className="adm-toolbar">
            <div className="adm-search">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
              <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search guest, room, ref…" />
            </div>
            <div className="adm-filters">
              {["All", ...STATUSES].map((s) => (
                <button key={s} className={filter === s ? "on" : ""} onClick={() => setFilter(s)}>
                  {s}<span className="cnt">{counts[s] || 0}</span>
                </button>
              ))}
            </div>
          </div>

          <table className="adm-table">
            <thead>
              <tr>
                <th className={sort.key === "guest" ? "active" : ""} onClick={() => setSortKey("guest")}>Guest <span className="sort">{arrow("guest")}</span></th>
                <th className={"hide-sm " + (sort.key === "room" ? "active" : "")} onClick={() => setSortKey("room")}>Room <span className="sort">{arrow("room")}</span></th>
                <th className={sort.key === "checkin" ? "active" : ""} onClick={() => setSortKey("checkin")}>Check-in <span className="sort">{arrow("checkin")}</span></th>
                <th className={"hide-sm " + (sort.key === "checkout" ? "active" : "")} onClick={() => setSortKey("checkout")}>Check-out <span className="sort">{arrow("checkout")}</span></th>
                <th className={"hide-sm " + (sort.key === "guests" ? "active" : "")} onClick={() => setSortKey("guests")}>Guests <span className="sort">{arrow("guests")}</span></th>
                <th className="hide-sm">Channel</th>
                <th className={sort.key === "status" ? "active" : ""} onClick={() => setSortKey("status")}>Status <span className="sort">{arrow("status")}</span></th>
              </tr>
            </thead>
            <tbody>
              {rows.map((b) => (
                <tr key={b.ref} onClick={() => setActive(b.ref)}>
                  <td>
                    <div className="g-name">{b.guest}</div>
                    <div className="ref">{b.ref}{b.checkin === TODAY && b.status !== "Cancelled" ? " · arriving today" : ""}</div>
                  </td>
                  <td className="hide-sm">{b.room}</td>
                  <td>{fmtDate(b.checkin)} <span className="nights">· {nightsBetween(b.checkin, b.checkout)}n</span></td>
                  <td className="hide-sm">{fmtDate(b.checkout)}</td>
                  <td className="hide-sm">{b.guests}</td>
                  <td className="hide-sm"><span className={"chan " + b.channel}>{b.channel}</span></td>
                  <td><span className={cls(b.status)}>{b.status}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
          {rows.length === 0 ? <div className="adm-empty">No reservations match.</div> : null}
        </div>
      </div>

      {/* detail panel */}
      <div className="adm-ov" style={{ pointerEvents: active ? "auto" : "none" }}>
        <div className={"adm-ov-scrim" + (active ? " show" : "")} onClick={() => setActive(null)}></div>
        <aside className={"adm-detail" + (active ? " show" : "")} aria-hidden={!active} data-screen-label="Reservation detail">
          {activeBooking ? (
            <React.Fragment>
              <div className="d-top">
                <div>
                  <div className="ref">{activeBooking.ref} · {activeBooking.channel}</div>
                  <h3>{activeBooking.guest}</h3>
                </div>
                <button className="d-close" onClick={() => setActive(null)}>&#10005;</button>
              </div>
              <div className="d-body">
                <div className="d-facts">
                  <div className="df"><span className="k">Room</span><span className="v">{activeBooking.room}</span></div>
                  <div className="df"><span className="k">Guests</span><span className="v">{activeBooking.guests}</span></div>
                  <div className="df"><span className="k">Check-in</span><span className="v">{fmtDate(activeBooking.checkin)}</span></div>
                  <div className="df"><span className="k">Check-out</span><span className="v">{fmtDate(activeBooking.checkout)}</span></div>
                  <div className="df"><span className="k">Nights</span><span className="v">{nightsBetween(activeBooking.checkin, activeBooking.checkout)}</span></div>
                  <div className="df"><span className="k">Status</span><span className="v" style={{ fontSize: "13px" }}><span className={cls(activeBooking.status)}>{activeBooking.status}</span></span></div>
                </div>

                <div className="d-block">
                  <div className="k">Contact</div>
                  <p>{activeBooking.contact}</p>
                </div>

                <div className="d-block">
                  <div className="k">Note from the desk</div>
                  <p className={activeBooking.note ? "" : "note-empty"}>{activeBooking.note || "No notes on this reservation."}</p>
                </div>

                <div className="d-block">
                  <div className="k">Set status</div>
                  <div className="d-status-row">
                    {STATUSES.map((s) => (
                      <button key={s} className={activeBooking.status === s ? "on" : ""} onClick={() => onSetStatus(activeBooking.ref, s)}>{s}</button>
                    ))}
                  </div>
                </div>
              </div>
              <div className="d-foot">
                {activeBooking.contact.includes("@") ? (
                  <a className="btn-outline btn-block" href={"mailto:" + activeBooking.contact}>Email guest</a>
                ) : (
                  <a className="btn-outline btn-block" href={"tel:" + activeBooking.contact.replace(/\s/g, "")}>Call guest</a>
                )}
                <button className="btn-solid btn-block" onClick={() => setActive(null)}>Done</button>
              </div>
            </React.Fragment>
          ) : null}
        </aside>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;