/* Hotel — live operations dashboard.
 * Click an arrival or a room to inspect.
 */

const hotelTheme = {
  bg:    "#111110",
  card:  "#171715",
  line:  "#242420",
  ink:   "#f0ece4",
  ink2:  "#a8a49b",
  ink3:  "#6b6862",
  amber: "#d99350",
  green: "#6aa37d",
  red:   "#d35a4a",
  blue:  "#6c8db6",
};

// 6 floors × 12 rooms. statuses: c=clean, o=occupied, d=dirty (turnover), b=blocked
const HOTEL_FLOORS = [
  "ccccoocooccc", // F6
  "ooooocoocooc", // F5
  "ooocccoccooo", // F4
  "oodooccooooc", // F3
  "ocooooobocco", // F2
  "cccoocoooccc", // F1
];

const HOTEL_ARRIVALS = [
  { time: "14:30", name: "M. Lefèvre",     room: "612", note: "King · 3 nights",          channel: "Direct",  vip: true,  eta: "on the way · ETA 15 min" },
  { time: "15:00", name: "K. Ben Hadj",     room: "318", note: "Twin · 1 night",            channel: "Booking", vip: false, eta: "no show window opens 17:00" },
  { time: "15:45", name: "Group Hansen ×4", room: "204–207", note: "Adjoining · breakfast×4", channel: "Group",   vip: false, eta: "rooms ready · keys cut" },
  { time: "16:15", name: "Sara Okonkwo",     room: "509", note: "Suite · late check-in",     channel: "Expedia", vip: true,  eta: "flight tracked · landed 14:02" },
  { time: "17:00", name: "Cousens family",   room: "411", note: "Family · cot · 2 adults 2 kids", channel: "Direct",  vip: false, eta: "self-park requested" },
];

// Map a few rooms to guest context so clicking shows real info
const ROOM_INFO = {
  "F6-05": { guest: "Ankit Rao",    out: "tomorrow 11:00", note: "Late checkout requested" },
  "F6-06": { guest: "Y. Tanaka",     out: "today 11:00",    note: "Pending departure — bags in lobby" },
  "F5-04": { guest: "B. & S. Park",  out: "20 May",           note: "Anniversary · turndown set" },
  "F4-03": { guest: "Marquez party",  out: "today 11:00",    note: "Dirty — turnover crew on F4" },
  "F4-04": { guest: "Marquez party",  out: "today 11:00",    note: "Dirty — turnover crew on F4" },
  "F3-03": { guest: "—",                out: "—",                  note: "Maintenance · radiator fix" },
  "F3-02": { guest: "M. Diallo",       out: "19 May",           note: "Stayover · towels +2" },
  "F2-07": { guest: "—",                out: "—",                  note: "Blocked · plumbing 14:00" },
  "F1-05": { guest: "T. Almeida",      out: "tomorrow 11:00", note: "VIP repeat guest" },
};

function HotelStatusKey({ label, color }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, marginRight: 14, fontSize: 11.5, color: hotelTheme.ink2 }}>
      <span style={{ width: 7, height: 7, background: color, borderRadius: 1.5 }} />
      {label}
    </span>
  );
}

function HotelPreview() {
  const [sel, setSel] = React.useState({ kind: "arrival", idx: 0 });

  // Count statuses for the headline
  const counts = { c: 0, o: 0, d: 0, b: 0 };
  HOTEL_FLOORS.forEach(f => f.split("").forEach(c => counts[c]++));
  const total = counts.c + counts.o + counts.d + counts.b;
  const occPct = Math.round(((counts.o + counts.d) / total) * 100);

  const statusColor = (c) => ({
    c: "#3a4036",
    o: hotelTheme.amber,
    d: "#bb6c4a",
    b: "#5a2f2a",
  })[c];

  const statusLabel = (c) => ({
    c: "Clean",  o: "Occupied", d: "Turnover", b: "Out of service",
  })[c];

  // Selected detail
  let detail = null;
  if (sel.kind === "arrival") {
    const a = HOTEL_ARRIVALS[sel.idx];
    detail = (
      <>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <div>
            <span className="mono" style={{ fontSize: 11.5, color: hotelTheme.amber }}>{a.time}</span>
            <span style={{ marginLeft: 10, fontSize: 14, color: hotelTheme.ink, fontWeight: 500 }}>{a.name}</span>
            {a.vip && <span style={{ marginLeft: 8, fontSize: 10, color: hotelTheme.amber, letterSpacing: "0.08em" }}>VIP</span>}
          </div>
          <div className="mono" style={{ fontSize: 12, color: hotelTheme.amber }}>Room {a.room}</div>
        </div>
        <div style={{ fontSize: 12, color: hotelTheme.ink2, marginTop: 6 }}>
          {a.note} · booked via {a.channel}
        </div>
        <div style={{ fontSize: 12, color: hotelTheme.ink3, marginTop: 4 }}>↳ {a.eta}</div>
      </>
    );
  } else if (sel.kind === "room") {
    const { floor, idx } = sel;
    const code = HOTEL_FLOORS[6 - floor].charAt(idx);
    const roomId = "F" + floor + "-" + String(idx + 1).padStart(2, "0");
    const info = ROOM_INFO[roomId] || {};
    detail = (
      <>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <div>
            <span className="mono" style={{ fontSize: 11.5, color: hotelTheme.amber }}>{roomId}</span>
            <span style={{ marginLeft: 10, fontSize: 14, color: hotelTheme.ink, fontWeight: 500 }}>
              {statusLabel(code)}
            </span>
          </div>
          <div style={{ fontSize: 11, color: hotelTheme.ink3 }}>tap another room to inspect</div>
        </div>
        <div style={{ fontSize: 12, color: hotelTheme.ink2, marginTop: 6 }}>
          {info.guest ? <>Guest: <span style={{ color: hotelTheme.ink }}>{info.guest}</span> · check-out {info.out}</> : (
            code === "c" ? "Ready for sale" :
            code === "o" ? "Occupied · stayover" :
            code === "d" ? "Turnover queued for housekeeping" :
            "Out of service"
          )}
        </div>
        {info.note && <div style={{ fontSize: 12, color: hotelTheme.ink3, marginTop: 4 }}>↳ {info.note}</div>}
      </>
    );
  }

  return (
    <div style={{
      background: hotelTheme.bg,
      color: hotelTheme.ink,
      borderRadius: 14,
      padding: "26px 30px 28px",
      fontFamily: '"Inter", sans-serif',
      boxShadow: "0 30px 60px -25px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04)",
      maxWidth: 720,
    }}>
      {/* header */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 22 }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", color: hotelTheme.ink3, textTransform: "uppercase" }}>Front desk · today</div>
          <div style={{ fontSize: 22, fontWeight: 600, marginTop: 4, letterSpacing: "-0.01em" }}>Monday, 18 May</div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", color: hotelTheme.ink3, textTransform: "uppercase" }}>Occupancy</div>
          <div style={{ fontSize: 32, fontWeight: 600, color: hotelTheme.amber, letterSpacing: "-0.02em", marginTop: 2, lineHeight: 1 }}>{occPct}<span style={{ fontSize: 18, color: hotelTheme.ink3 }}>%</span></div>
          <div style={{ fontSize: 11, color: hotelTheme.ink3, marginTop: 4 }}>{counts.o + counts.d} of {total} rooms</div>
        </div>
      </div>

      {/* Two-column body */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 26 }}>
        {/* Today's arrivals */}
        <div>
          <div style={{ fontSize: 11, letterSpacing: "0.14em", color: hotelTheme.ink3, textTransform: "uppercase", marginBottom: 10, display: "flex", justifyContent: "space-between" }}>
            <span>Arrivals · 12</span>
            <span style={{ color: hotelTheme.ink4 }}>click any</span>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
            {HOTEL_ARRIVALS.map((a, i) => {
              const active = sel.kind === "arrival" && sel.idx === i;
              return (
                <button key={i} onClick={() => setSel({ kind: "arrival", idx: i })} style={{
                  textAlign: "left",
                  padding: "8px 10px",
                  display: "grid", gridTemplateColumns: "44px 1fr auto", gap: 10, alignItems: "baseline",
                  background: active ? "rgba(217,147,80,0.08)" : "transparent",
                  borderRadius: 6,
                  cursor: "pointer",
                  boxShadow: active ? "inset 2px 0 0 " + hotelTheme.amber : "inset 2px 0 0 transparent",
                }}
                onMouseEnter={e => { if (!active) e.currentTarget.style.background = "rgba(255,255,255,0.025)"; }}
                onMouseLeave={e => { if (!active) e.currentTarget.style.background = "transparent"; }}
                >
                  <div className="mono" style={{ fontSize: 11.5, color: active ? hotelTheme.amber : hotelTheme.ink3 }}>{a.time}</div>
                  <div>
                    <div style={{ fontSize: 13.5, color: hotelTheme.ink, lineHeight: 1.3 }}>{a.name}</div>
                    <div style={{ fontSize: 11, color: hotelTheme.ink3, marginTop: 1 }}>{a.note}</div>
                  </div>
                  <div className="mono" style={{ fontSize: 12, color: hotelTheme.amber }}>{a.room}</div>
                </button>
              );
            })}
          </div>
        </div>

        {/* Room grid */}
        <div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
            <div style={{ fontSize: 11, letterSpacing: "0.14em", color: hotelTheme.ink3, textTransform: "uppercase" }}>Room status · 6 floors</div>
            <div style={{ fontSize: 11, color: hotelTheme.ink4 }}>tap a room</div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {HOTEL_FLOORS.map((row, i) => {
              const floorNum = 6 - i;
              return (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <div className="mono" style={{ width: 18, fontSize: 10.5, color: hotelTheme.ink3 }}>F{floorNum}</div>
                  <div style={{ display: "flex", gap: 5, flex: 1 }}>
                    {row.split("").map((c, j) => {
                      const active = sel.kind === "room" && sel.floor === floorNum && sel.idx === j;
                      return (
                        <button key={j} onClick={() => setSel({ kind: "room", floor: floorNum, idx: j })}
                          style={{
                            flex: 1,
                            height: 18,
                            background: statusColor(c),
                            borderRadius: 2,
                            cursor: "pointer",
                            boxShadow: active ? "0 0 0 1.5px " + hotelTheme.ink + ", 0 0 0 3px rgba(217,147,80,0.6)" : "none",
                            transition: "transform 0.15s ease",
                            transform: active ? "scale(1.12)" : "scale(1)",
                          }}
                          title={"F" + floorNum + "-" + String(j + 1).padStart(2, "0")} />
                      );
                    })}
                  </div>
                </div>
              );
            })}
          </div>

          <div style={{ display: "flex", marginTop: 14, fontSize: 11, flexWrap: "wrap" }}>
            <HotelStatusKey label={"Clean · " + counts.c} color={"#3a4036"} />
            <HotelStatusKey label={"Occupied · " + counts.o} color={hotelTheme.amber} />
            <HotelStatusKey label={"Turnover · " + counts.d} color={"#bb6c4a"} />
            <HotelStatusKey label={"Out · " + counts.b} color={"#5a2f2a"} />
          </div>
        </div>
      </div>

      {/* Detail strip */}
      <div style={{
        marginTop: 18,
        padding: "12px 16px",
        background: hotelTheme.card,
        borderRadius: 8,
      }}>
        {detail}
      </div>

      {/* Footer KPI row */}
      <div style={{
        marginTop: 20,
        paddingTop: 16,
        borderTop: "1px solid " + hotelTheme.line,
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20,
      }}>
        {[
          ["Arrivals",   "12",  "today"],
          ["Departures", "9",   "today"],
          ["ADR",        "€184", "+€7 vs yest."],
          ["RevPAR",     "€142", "+€11 vs yest."],
        ].map((k, i) => (
          <div key={i}>
            <div style={{ fontSize: 10.5, letterSpacing: "0.12em", color: hotelTheme.ink3, textTransform: "uppercase" }}>{k[0]}</div>
            <div style={{ fontSize: 20, fontWeight: 500, marginTop: 4, letterSpacing: "-0.01em" }}>{k[1]}</div>
            <div style={{ fontSize: 11, color: hotelTheme.ink3, marginTop: 2 }}>{k[2]}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.HotelPreview = HotelPreview;