// Hotel Walks — Property User Dashboard ("Today").
// The operator's daily view: outbound walks in progress, urgent items, queue health.

(function() {
  const { Caps, Btn, Pill, SerifI, Hr, money } = window.UI;
  const { SmartKey } = window.HW;

  const STATUS_LABELS = {
    broadcasting: { label: "Broadcasting",  tone: "warn"    },
    accepted:     { label: "Accepted",      tone: "good"    },
    letter_sent:  { label: "Letter sent",   tone: "filled"  },
    declined:     { label: "Declined",      tone: "muted"   },
  };

  function PageHead() {
    const { ME } = window.HW_DATA;
    const today = new Date().toLocaleDateString(undefined, { weekday: "long", month: "long", day: "numeric" });
    return (
      <div className="pad-lg page-head" style={{
        padding: "44px 48px 28px",
        borderBottom: "1px solid var(--rule)",
        display: "grid", gridTemplateColumns: "1fr auto", gap: 24, alignItems: "end",
      }}>
        <div>
          <Caps>{today}</Caps>
          <div className="serif-i" style={{ fontSize: 60, lineHeight: 1, marginTop: 12 }}>
            Today at {ME.property.name}.
          </div>
          <div style={{ marginTop: 20, display: "inline-flex", alignItems: "center", gap: 10 }}>
            <span aria-hidden="true" style={{
              display: "inline-block", width: 8, height: 8, borderRadius: 8,
              background: "var(--good)",
              boxShadow: "0 0 0 4px rgba(47,107,63,0.15)",
            }} />
            <span className="mono" style={{ fontSize: 13, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)" }}>
              Walked 3 · 1 inbound · all timers green
            </span>
          </div>
        </div>
        <div className="head-ctas" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <a href="#/app/send" style={{ textDecoration: "none" }}>
            <Btn size="lg">+ Send a walk</Btn>
          </a>
        </div>
      </div>
    );
  }

  function StatStrip() {
    const stats = [
      { label: "Walks open now",   value: "3",    sub: "2 broadcasting · 1 awaiting letter" },
      { label: "Next escalation",  value: "12m",  sub: "Ifeoma Okonkwo · broadcasting to 3" },
    ];
    return (
      <div style={{ borderBottom: "1px solid var(--rule)" }} className="stat-strip-wrap">
        <div className="stat-strip" style={{ display: "grid", gridTemplateColumns: `repeat(${stats.length}, 1fr)`, padding: "0 48px" }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              padding: `28px ${i === stats.length - 1 ? 0 : 32}px 32px ${i === 0 ? 0 : 32}px`,
              borderRight: i < stats.length - 1 ? "1px solid var(--rule)" : undefined,
            }}>
              <Caps>{s.label}</Caps>
              <div className="serif-i" style={{ fontSize: 48, marginTop: 14, lineHeight: 1 }}>{s.value}</div>
              <div style={{ marginTop: 10, fontSize: 14, color: "var(--muted)" }}>{s.sub}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  function SentTable() {
    const { SENT, HOTEL_BY_ID } = window.HW_DATA;
    return (
      <section className="pad-md" style={{ padding: "44px 48px 16px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24 }}>
          <div>
            <Caps>Outbound walks · today</Caps>
            <div className="serif-i" style={{ fontSize: 32, marginTop: 8 }}>In flight</div>
          </div>
          <a href="#/app/send" style={{ textDecoration: "none" }}><Btn size="sm" kind="ghost">New request →</Btn></a>
        </div>

        {/* Header row */}
        <div className="walks-grid hw-row-header" style={{
          display: "grid",
          gridTemplateColumns: "100px 1.2fr 1.3fr 100px 140px 150px 110px",
          padding: "10px 0",
          borderTop: "1px solid var(--ink)",
          borderBottom: "1px solid var(--rule)",
        }}>
          {["Sent", "Guest", "Re-housed at", "Rate", "Status", "Timer", ""].map((h, i) => (
            <div key={i} style={{ paddingLeft: i === 5 ? 18 : 0 }}><Caps>{h}</Caps></div>
          ))}
        </div>

        {SENT.map(w => {
          const s = STATUS_LABELS[w.status];
          return (
            <div key={w.id} className="walks-grid hw-row" style={{
              display: "grid",
              gridTemplateColumns: "100px 1.2fr 1.3fr 100px 140px 150px 110px",
              padding: "20px 0",
              borderBottom: "1px solid var(--rule)",
              alignItems: "center",
            }}>
              <div className="mono" style={{ fontSize: 13 }}>{w.sentAt}</div>
              <div>
                <div className="row-name" style={{ fontSize: 15 }}>{w.guest.name}</div>
                <div className="mono" style={{ fontSize: 13, color: "var(--muted)", marginTop: 4 }}>{w.guest.confirmation} · {w.guest.party} guest{w.guest.party>1?"s":""} · {w.guest.nights}n</div>
              </div>
              <div>
                {w.to ? (
                  <>
                    <div className="row-name" style={{ fontSize: 15 }}>{w.to.name}</div>
                    <div className="row-sub" style={{ fontSize: 13, marginTop: 2 }}>{w.to.area}</div>
                  </>
                ) : (
                  <div style={{ fontSize: 14, color: "var(--muted)" }}>
                    <span className="row-name" style={{ fontSize: 15, color: "var(--ink)" }}>— pending —</span>
                    <div style={{ marginTop: 4 }}>Broadcasting to {w.broadcastTo.length} partners</div>
                  </div>
                )}
              </div>
              <div className="mono" style={{ fontSize: 14 }}>
                {w.rate ? money(w.rate) : <span style={{ color: "var(--muted)" }}>—</span>}
              </div>
              <div><Pill tone={s.tone}>{s.label}</Pill></div>
              <div style={{ fontSize: 14, color: "var(--muted)", paddingLeft: 18 }}>
                {w.status === "broadcasting" && (
                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <CountdownDot mins={w.timer} />
                    <span className="mono" style={{ fontSize: 15 }}>{w.timer}m</span>
                  </div>
                )}
                {w.status === "accepted" && <span style={{ color: "var(--muted)" }}>—</span>}
                {w.status === "letter_sent" && <span style={{ color: "var(--muted)" }}>—</span>}
              </div>
              <div style={{ textAlign: "right" }}>
                {w.status === "accepted" && (
                  <a href={`#/app/letter/${w.id}`} style={{ textDecoration: "none" }}><Btn size="sm">Letter →</Btn></a>
                )}
                {w.status === "letter_sent" && (
                  <a href={`#/app/letter/${w.id}`} style={{ textDecoration: "none" }}><Btn size="sm" kind="ghost">View</Btn></a>
                )}
                {w.status === "broadcasting" && (
                  <Btn size="sm" kind="danger" onClick={() => alert("Cancelled (demo)")}>Cancel</Btn>
                )}
              </div>
            </div>
          );
        })}
      </section>
    );
  }

  function CountdownDot({ mins }) {
    const tone = mins <= 5 ? "var(--warn)" : mins <= 15 ? "#c89048" : "var(--good)";
    return <span style={{ width: 8, height: 8, borderRadius: 50, background: tone, display: "inline-block" }}/>;
  }

  function InboundPanel() {
    const { INCOMING } = window.HW_DATA;
    return (
      <section className="pad-md" style={{ padding: "44px 48px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24 }}>
          <div>
            <Caps>Inbound · awaiting your decision</Caps>
            <div className="serif-i" style={{ fontSize: 32, marginTop: 8 }}>You have {INCOMING.length} opportunities.</div>
          </div>
          <a href="#/app/incoming" style={{ textDecoration: "none" }}><Btn size="sm" kind="ghost">See all →</Btn></a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))", gap: 0, borderTop: "1px solid var(--ink)" }} className="inbound-grid">
          {INCOMING.map((op, i) => (
            <a key={op.id} href={`#/app/incoming/${op.id}`} style={{
              display: "block", padding: "26px 28px", textDecoration: "none", color: "inherit",
              borderLeft: i === 0 ? "1px solid var(--rule)" : undefined,
              borderRight: "1px solid var(--rule)",
              borderBottom: "1px solid var(--rule)",
              position: "relative",
            }}>
              {op.urgent && (
                <div style={{ position: "absolute", top: 14, right: 18 }}>
                  <Pill tone="warn">Urgent</Pill>
                </div>
              )}
              <Caps>{op.when} · {op.rooms} room{op.rooms>1?"s":""}</Caps>
              <div className="serif-i" style={{ fontSize: 26, marginTop: 14, marginBottom: 6, lineHeight: 1.1 }}>{op.from.name}</div>
              <div style={{ fontSize: 13, color: "var(--muted)" }}>{op.from.area}</div>
              <Hr style={{ margin: "18px 0" }} />
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                <Caps>Target rate</Caps>
                <Caps>Your rate</Caps>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <div className="mono" style={{ fontSize: 16 }}>{op.targetRate ? money(op.targetRate) : "—"}</div>
                <div className="mono" style={{ fontSize: 16 }}>{money(op.myRate)}</div>
              </div>
              <div style={{ marginTop: 22, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <Caps>Expires in {op.expiresIn}m</Caps>
                <Caps>Open →</Caps>
              </div>
            </a>
          ))}
        </div>
      </section>
    );
  }

  const responsiveCSS = `
    @media (max-width: 900px) {
      .walks-grid { grid-template-columns: 1fr !important; gap: 8px; padding: 18px 0 !important; }
      .walks-grid > *:empty { display: none; }
    }
    @media (max-width: 720px) {
      .stat-strip { grid-template-columns: 1fr !important; padding: 0 20px !important; }
      .stat-strip > div { border-right: none !important; border-bottom: 1px solid var(--rule); padding: 20px 0 22px !important; }
      .stat-strip > div:last-child { border-bottom: none; }
      .stat-strip > div .serif-i { font-size: 36px !important; }
      .page-head { grid-template-columns: 1fr !important; }
      .page-head .serif-i { font-size: 38px !important; }
      .page-head .head-ctas { flex-direction: row !important; flex-wrap: wrap; }
      .page-head .head-ctas a { flex: 1; }
      .page-head .head-ctas a > * { width: 100%; }
      .inbound-grid { grid-template-columns: 1fr !important; }
    }
  `;

  function Dashboard() {
    return (
      <div data-screen-label="Property User · Today" style={{ background: "var(--paper)" }}>
        <style>{responsiveCSS}</style>
        <PageHead />
        <StatStrip />
        <SentTable />
        <InboundPanel />
      </div>
    );
  }

  window.Screens = window.Screens || {};
  window.Screens.Dashboard = Dashboard;
})();