/* global React, Icon, Logo, ROOMS */
const { useState: useStateDash } = React;

const Sidebar = ({ items, current, onNav, footer }) => (
  <aside className="sidebar">
    <div style={{ padding: "0 12px 16px" }}><Logo /></div>
    {items.map((sec, si) => (
      <div key={si}>
        {sec.label && <div className="sidebar-section">{sec.label}</div>}
        {sec.items.map(it => (
          <div key={it.id} className={`sidebar-item ${current === it.id ? "active" : ""}`} onClick={() => onNav(it.id)}>
            <Icon name={it.icon} className="i i-sm" />
            <span style={{ flex: 1 }}>{it.label}</span>
            {it.badge && <span className="badge badge-accent" style={{ height: 18, padding: "0 6px", fontSize: 10 }}>{it.badge}</span>}
          </div>
        ))}
      </div>
    ))}
    <div style={{ marginTop: "auto" }}>{footer}</div>
  </aside>
);

const SidebarFooter = ({ name, sub, onNav }) => (
  <div className="card card-pad" style={{ padding: 12 }}>
    <div className="row gap-3">
      <span className="avatar avatar-sm b3">{name[0]}</span>
      <div className="col" style={{ flex: 1, minWidth: 0 }}>
        <span className="t-sm" style={{ fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{name}</span>
        <span className="t-xs muted" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{sub}</span>
      </div>
      <button className="btn btn-icon btn-ghost" style={{ height: 28, width: 28 }} onClick={() => onNav("home")}><Icon name="settings" className="i i-sm" /></button>
    </div>
  </div>
);

const DashTopBar = ({ title, subtitle, action }) => (
  <div className="row spread" style={{ padding: "20px 32px", borderBottom: "1px solid var(--line-1)", background: "var(--bg-0)", position: "sticky", top: 0, zIndex: 20 }}>
    <div className="col gap-1">
      <h1 className="t-h1">{title}</h1>
      {subtitle && <p className="t-sm muted">{subtitle}</p>}
    </div>
    <div className="row gap-3">
      <button className="btn btn-icon btn-ghost"><Icon name="search" /></button>
      <button className="btn btn-icon btn-ghost" style={{ position: "relative" }}>
        <Icon name="bell" />
        <span style={{ position: "absolute", top: 6, right: 6, width: 8, height: 8, background: "var(--accent)", borderRadius: 999 }} />
      </button>
      {action}
    </div>
  </div>
);

// ─── LISTER DASHBOARD ────────────────────────────────────────────
const PageListerDash = ({ onNav }) => {
  const [section, setSection] = useStateDash("overview");
  const items = [
    { label: "Workspace", items: [
      { id: "overview", icon: "chart", label: "Overview" },
      { id: "properties", icon: "home", label: "My properties", badge: 3 },
      { id: "inquiries", icon: "inbox", label: "Inquiries", badge: 7 },
      { id: "messages", icon: "msg", label: "Messages" },
      { id: "calendar", icon: "calendar", label: "Calendar" },
      { id: "payouts", icon: "cash", label: "Payouts" },
    ]},
    { label: "Account", items: [
      { id: "verify", icon: "shield", label: "Verification" },
      { id: "settings", icon: "settings", label: "Settings" },
    ]},
  ];

  return (
    <div className="app-shell">
      <Sidebar
        items={items}
        current={section}
        onNav={(id) => { if (id === "messages") onNav("messages"); else setSection(id); }}
        footer={<SidebarFooter name="Dana Kowalski" sub="Host · Oakland" onNav={onNav} />}
      />
      <div className="col" style={{ minWidth: 0 }}>
        {section === "overview" && <ListerOverview onNav={onNav} setSection={setSection} />}
        {section === "properties" && <ListerProperties onNav={onNav} />}
        {section === "inquiries" && <ListerInquiries onNav={onNav} />}
        {section === "calendar" && <ListerCalendar />}
        {section === "payouts" && <ListerPayouts />}
        {section === "verify" && <ListerVerify />}
        {section === "settings" && <ListerSettings />}
      </div>
    </div>
  );
};

const ListerOverview = ({ onNav, setSection }) => (
  <>
    <DashTopBar
      title="Good evening, Dana."
      subtitle="3 active rooms · 2 open inquiries · next move-in May 8"
      action={<button className="btn btn-primary" onClick={() => setSection("properties")}><Icon name="plus" className="i i-sm" /> Add a room</button>}
    />
    <div style={{ padding: 32, display: "flex", flexDirection: "column", gap: 24 }}>

      {/* Stats */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
        {[
          { l: "Active listings", v: "3", d: "100% occupancy", up: true },
          { l: "Open inquiries", v: "07", d: "+2 this week", up: true },
          { l: "Income · May", v: "$2,160", d: "on track for $2,160", up: true },
          { l: "Guest rating", v: "4.9", d: "47 reviews", up: false },
        ].map(s => (
          <div key={s.l} className="card stat-tile">
            <span className="stat-label">{s.l}</span>
            <span className="stat-value">{s.v}</span>
            <span className={`stat-delta ${s.up ? "up" : ""}`}>{s.d}</span>
          </div>
        ))}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 24 }}>
        {/* Income chart */}
        <div className="card card-pad">
          <div className="row spread" style={{ marginBottom: 20 }}>
            <div className="col gap-1">
              <span className="t-mono-xs muted">Last 6 months</span>
              <h3 className="t-h2">Income</h3>
            </div>
            <div className="pill-tab-row">
              <button className="pill-tab active">6M</button>
              <button className="pill-tab">1Y</button>
              <button className="pill-tab">All</button>
            </div>
          </div>
          <IncomeChart />
        </div>

        {/* Calendar preview */}
        <div className="card card-pad">
          <div className="row spread" style={{ marginBottom: 16 }}>
            <h3 className="t-h2">Upcoming move-ins / outs</h3>
            <a className="t-sm" style={{ color: "var(--accent)", cursor: "pointer" }}>Open calendar →</a>
          </div>
          <div className="col gap-3">
            {[
              { d: "MAY 04", t: "Move-in · Carla T.", r: "Sunny private room", k: "in" },
              { d: "MAY 08", t: "Move-in · Reggie W.", r: "Quiet upstairs room", k: "in" },
              { d: "MAY 22", t: "Lease ends · Yasmin H.", r: "Ground-floor accessible", k: "out" },
              { d: "JUN 01", t: "Renewal due · Mike R.", r: "Studio with private bath", k: "renew" },
            ].map((e, i) => (
              <div key={i} className="row gap-3" style={{ padding: 12, borderRadius: 8, background: "var(--bg-2)" }}>
                <span className="t-mono-sm" style={{ background: "var(--bg-0)", padding: "8px 10px", borderRadius: 6, color: "var(--accent)" }}>{e.d}</span>
                <div className="col" style={{ flex: 1 }}>
                  <span className="t-sm" style={{ fontWeight: 500 }}>{e.t}</span>
                  <span className="t-xs muted">{e.r}</span>
                </div>
                <span className={`badge ${e.k === "in" ? "badge-success" : e.k === "out" ? "badge-warn" : "badge-info"}`}>
                  {e.k === "in" ? "Move-in" : e.k === "out" ? "Move-out" : "Renew"}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24 }}>
        {/* Recent inquiries */}
        <div className="card card-pad">
          <div className="row spread" style={{ marginBottom: 16 }}>
            <h3 className="t-h2">New inquiries</h3>
            <span className="badge badge-accent">3 new</span>
          </div>
          <div className="col gap-3">
            {[
              { n: "Marisol Rivera", a: "Bay Area Outreach", room: "Sunny private room", t: "2h ago", b: "b3" },
              { n: "Carla Tran", a: "Direct inquiry", room: "Quiet upstairs room", t: "yesterday", b: "b2" },
              { n: "James W.", a: "VA placement", room: "Veteran preferred", t: "2d ago", b: "b4" },
            ].map((q, i) => (
              <div key={i} className="row gap-3" style={{ padding: 10, borderRadius: 8, cursor: "pointer" }} onClick={() => setSection("inquiries")}>
                <span className={`avatar avatar-sm ${q.b}`}>{q.n[0]}</span>
                <div className="col" style={{ flex: 1, minWidth: 0 }}>
                  <span className="t-sm" style={{ fontWeight: 500 }}>{q.n}</span>
                  <span className="t-xs muted" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{q.a} · {q.room}</span>
                </div>
                <span className="t-xs muted">{q.t}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Verification */}
        <div className="card card-pad">
          <div className="row spread" style={{ marginBottom: 16 }}>
            <h3 className="t-h2">Compliance</h3>
            <span className="badge badge-success"><Icon name="check" className="i i-sm" /> Cleared</span>
          </div>
          <div className="col gap-3">
            {[
              { l: "Identity verified", s: "ok" },
              { l: "Background check", s: "ok" },
              { l: "Property safety inspection", s: "ok" },
              { l: "W-9 on file", s: "ok" },
              { l: "Insurance certificate", s: "warn", d: "expires Jul 14" },
            ].map((v, i) => (
              <div key={i} className="row spread" style={{ padding: "8px 0", borderBottom: i < 4 ? "1px solid var(--line-1)" : "none" }}>
                <div className="row gap-2">
                  <Icon name={v.s === "ok" ? "check" : "bell"} className="i i-sm" style={{ color: v.s === "ok" ? "var(--success)" : "var(--warn)" }} />
                  <span className="t-sm">{v.l}</span>
                </div>
                <span className="t-xs muted">{v.d || "—"}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Recent reviews */}
        <div className="card card-pad">
          <div className="row spread" style={{ marginBottom: 16 }}>
            <h3 className="t-h2">Recent reviews</h3>
            <span className="row gap-1 t-sm"><Icon name="star" className="i i-sm" style={{ color: "var(--accent)" }} /> 4.9</span>
          </div>
          <div className="col gap-3">
            {[
              { n: "Carla T.", t: "Dana picked me up from the bus station — felt safe right away.", r: 5 },
              { n: "Reggie W.", t: "Fair price, clean room, weekly check-ins. No issues at all.", r: 5 },
              { n: "Mike R.", t: "First stable address in three years. Just renewed.", r: 5 },
            ].map((r, i) => (
              <div key={i} className="col gap-1" style={{ padding: "10px 0", borderBottom: i < 2 ? "1px solid var(--line-1)" : "none" }}>
                <div className="row spread">
                  <span className="t-sm" style={{ fontWeight: 500 }}>{r.n}</span>
                  <span className="t-mono-sm" style={{ color: "var(--accent)" }}>{"★".repeat(r.r)}</span>
                </div>
                <p className="t-xs muted">"{r.t}"</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </>
);

const IncomeChart = () => {
  const months = ["Dec", "Jan", "Feb", "Mar", "Apr", "May"];
  const data = [1450, 1700, 1700, 2080, 2160, 2160];
  const max = 2400;
  return (
    <div className="col gap-2">
      <div className="row" style={{ alignItems: "flex-end", gap: 14, height: 200 }}>
        {data.map((v, i) => (
          <div key={i} className="col" style={{ flex: 1, alignItems: "center", gap: 8, height: "100%", justifyContent: "flex-end" }}>
            <span className="t-mono-xs muted">${(v / 1000).toFixed(1)}k</span>
            <div style={{
              width: "100%",
              height: `${(v / max) * 80}%`,
              background: i === data.length - 1 ? "var(--accent)" : "linear-gradient(180deg, var(--bg-3), var(--bg-2))",
              borderRadius: 8,
              boxShadow: i === data.length - 1 ? "0 0 24px var(--accent-dim)" : "0 0 0 1px var(--line-1) inset",
            }} />
          </div>
        ))}
      </div>
      <div className="row" style={{ gap: 14 }}>
        {months.map(m => <span key={m} className="t-mono-xs muted" style={{ flex: 1, textAlign: "center" }}>{m}</span>)}
      </div>
    </div>
  );
};

const ListerProperties = ({ onNav }) => (
  <>
    <DashTopBar
      title="My properties"
      subtitle="3 rooms across 2 properties"
      action={<><button className="btn btn-outline">Import from CSV</button><button className="btn btn-primary"><Icon name="plus" className="i i-sm" /> Add a room</button></>}
    />
    <div style={{ padding: 32, display: "flex", flexDirection: "column", gap: 20 }}>
      <div className="row gap-3">
        <div className="pill-tab-row">
          <button className="pill-tab active">All · 3</button>
          <button className="pill-tab">Active · 3</button>
          <button className="pill-tab">Draft · 0</button>
          <button className="pill-tab">Archived · 1</button>
        </div>
        <div className="grow" />
        <button className="btn btn-sm btn-outline"><Icon name="filter" className="i i-sm" /> Filter</button>
      </div>

      <div className="card" style={{ overflow: "hidden", padding: 0 }}>
        <table className="table">
          <thead>
            <tr>
              <th>Room</th>
              <th>Property</th>
              <th>Status</th>
              <th>Rent</th>
              <th>Occupancy</th>
              <th>Inquiries</th>
              <th>Rating</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {ROOMS.slice(0, 3).map((r, i) => (
              <tr key={r.id} style={{ cursor: "pointer" }} onClick={() => onNav("listing", { id: r.id })}>
                <td>
                  <div className="row gap-3">
                    <div className={`photo has-img`} style={{ width: 56, height: 44, borderRadius: 6, backgroundImage: `url(${window.ROOM_IMG[i % 8]})` }}></div>
                    <div className="col">
                      <span style={{ fontWeight: 500 }}>{r.title}</span>
                      <span className="t-xs muted">{r.type}</span>
                    </div>
                  </div>
                </td>
                <td className="muted">1247 Adeline · #{i + 1}</td>
                <td><span className="badge badge-success"><span className="dot live" />Live</span></td>
                <td className="t-mono">${r.price}/mo</td>
                <td><span className="t-mono-sm">100%</span> <span className="t-xs muted">until Oct</span></td>
                <td><span className="badge badge-accent">{[3, 2, 2][i]} new</span></td>
                <td className="t-mono">★ {r.rating}</td>
                <td><Icon name="chevRight" className="i i-sm muted" /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Add new room CTA */}
      <div className="card card-pad" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, alignItems: "center", padding: 32, background: "linear-gradient(135deg, oklch(from var(--accent) l c h / 0.08), var(--bg-1))" }}>
        <div className="col gap-3">
          <span className="eyebrow">Quick add</span>
          <h3 className="t-display">Add a second room in 4 minutes.</h3>
          <p className="t-body muted">Most hosts who add a second room earn 80% more without doubling their workload. We'll prefill what we can from your existing listing.</p>
          <div className="row gap-3">
            <button className="btn btn-primary"><Icon name="plus" className="i i-sm" /> Start a new room</button>
            <button className="btn btn-ghost">Or duplicate an existing one →</button>
          </div>
        </div>
        <div className="col gap-2">
          {["Address & photos", "Room facts (bed, bath, lock)", "Rent & length of stay", "Vouchers & program eligibility", "House rules & quiet hours"].map((s, i) => (
            <div key={s} className="row gap-3" style={{ padding: "10px 14px", background: "var(--bg-2)", borderRadius: 8, boxShadow: "0 0 0 1px var(--line-1) inset" }}>
              <span className="t-mono-sm" style={{ color: "var(--accent)", width: 22 }}>0{i + 1}</span>
              <span className="t-sm">{s}</span>
              <div className="grow" />
              <Icon name="chevRight" className="i i-sm muted" />
            </div>
          ))}
        </div>
      </div>
    </div>
  </>
);

const ListerInquiries = ({ onNav }) => {
  const [selected, setSelected] = useStateDash(0);
  const inquiries = [
    { n: "Marisol Rivera", a: "Bay Area Outreach", room: "Sunny private room", t: "2h ago", b: "b3", st: "new", program: "HUD-VASH", move: "May 8", note: "Placing a 38-year-old veteran with stable employment. He's been in transitional housing for 90 days and is ready for a longer-term spot. References from VA case manager available." },
    { n: "Carla Tran", a: "Direct inquiry", room: "Quiet upstairs room", t: "yesterday", b: "b2", st: "review", program: "Section 8", move: "May 15", note: "Hi! I work part-time as a dental assistant and am looking for a quiet place. Non-smoker, no pets. Happy to provide references from my last two landlords." },
    { n: "James Whitaker", a: "VA placement", room: "Veteran preferred", t: "2d ago", b: "b4", st: "review", program: "HUD-VASH", move: "Jun 1", note: "Vietnam-era veteran. Needs ground-floor or elevator access. Service dog accompanies." },
    { n: "Yasmin Hadid", a: "Roots Recovery", room: "Sunny private room", t: "3d ago", b: "b5", st: "approved", program: "EHV", move: "May 22" },
    { n: "Reggie Williams", a: "Direct inquiry", room: "Quiet upstairs room", t: "5d ago", b: "b1", st: "approved", program: "EHV", move: "May 8" },
    { n: "Tasha Brooks", a: "Bay Area Outreach", room: "Quiet upstairs room", t: "1wk ago", b: "b3", st: "declined", program: "Section 8", move: "—" },
    { n: "Marcus Drew", a: "Direct inquiry", room: "Sunny private room", t: "1wk ago", b: "b4", st: "declined", program: "—", move: "—" },
  ];
  const cur = inquiries[selected];

  return (
    <>
      <DashTopBar title="Inquiries" subtitle={`${inquiries.length} total · 3 awaiting your response`} action={<button className="btn btn-outline">Export CSV</button>} />
      <div style={{ display: "grid", gridTemplateColumns: "380px 1fr", height: "calc(100vh - 88px)" }}>
        <div style={{ borderRight: "1px solid var(--line-1)", overflow: "auto" }}>
          <div className="row gap-2" style={{ padding: 16, borderBottom: "1px solid var(--line-1)" }}>
            <input className="input" placeholder="Search inquiries…" style={{ height: 38 }} />
          </div>
          <div className="col">
            {inquiries.map((q, i) => (
              <div key={i} onClick={() => setSelected(i)} style={{
                padding: 16, borderBottom: "1px solid var(--line-1)", cursor: "pointer",
                background: selected === i ? "var(--bg-2)" : "transparent",
                borderLeft: selected === i ? "2px solid var(--accent)" : "2px solid transparent",
              }}>
                <div className="row gap-3">
                  <span className={`avatar avatar-sm ${q.b}`}>{q.n[0]}</span>
                  <div className="col" style={{ flex: 1, minWidth: 0 }}>
                    <div className="row spread">
                      <span className="t-sm" style={{ fontWeight: 500 }}>{q.n}</span>
                      <span className="t-xs muted">{q.t}</span>
                    </div>
                    <span className="t-xs muted" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{q.a}</span>
                    <div className="row gap-1" style={{ marginTop: 6 }}>
                      <span className="badge" style={{ height: 18, fontSize: 9 }}>{q.room.split(" ").slice(0, 2).join(" ")}</span>
                      <span className={`badge ${q.st === "new" ? "badge-accent" : q.st === "approved" ? "badge-success" : q.st === "declined" ? "" : "badge-info"}`} style={{ height: 18, fontSize: 9 }}>{q.st}</span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ overflow: "auto", padding: 32 }}>
          <div className="row spread" style={{ marginBottom: 24 }}>
            <div className="row gap-4">
              <span className={`avatar avatar-lg ${cur.b}`}>{cur.n[0]}</span>
              <div className="col gap-1">
                <h2 className="t-h1">{cur.n}</h2>
                <p className="t-sm muted">{cur.a} · inquired {cur.t}</p>
                <div className="row gap-2" style={{ marginTop: 6 }}>
                  <span className="badge badge-info">{cur.program}</span>
                  <span className="badge"><Icon name="calendar" className="i i-sm" /> Move-in {cur.move}</span>
                  <span className="badge badge-success"><Icon name="shield" className="i i-sm" /> ID verified</span>
                </div>
              </div>
            </div>
            <div className="row gap-2">
              <button className="btn btn-outline">Decline</button>
              <button className="btn btn-outline"><Icon name="msg" className="i i-sm" /> Message</button>
              <button className="btn btn-primary">Approve & schedule tour</button>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 32 }}>
            <div className="col gap-6">
              <div className="card card-pad">
                <h3 className="t-h2" style={{ marginBottom: 12 }}>About this room request</h3>
                <p className="t-body" style={{ color: "var(--ink-1)" }}>{cur.note || "No additional notes provided."}</p>
              </div>

              <div className="card card-pad">
                <h3 className="t-h2" style={{ marginBottom: 16 }}>Application details</h3>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
                  {[
                    ["Requested room", cur.room],
                    ["Move-in date", cur.move],
                    ["Length of stay", "6 months"],
                    ["Paying with", cur.program],
                    ["Background check", "Cleared (Persona)"],
                    ["Income verified", "Through agency"],
                  ].map(([k, v]) => (
                    <div key={k} className="col">
                      <span className="t-mono-xs muted">{k}</span>
                      <span className="t-sm">{v}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div className="card card-pad">
                <h3 className="t-h2" style={{ marginBottom: 12 }}>Documents</h3>
                <div className="col gap-2">
                  {["Voucher authorization · HUD-VASH", "Photo ID · Verified", "Income letter · Bay Area Outreach"].map((d, i) => (
                    <div key={d} className="row gap-3" style={{ padding: "12px 14px", background: "var(--bg-2)", borderRadius: 8 }}>
                      <Icon name="clipboard" className="i i-sm muted" />
                      <span className="t-sm" style={{ flex: 1 }}>{d}</span>
                      <button className="btn btn-sm btn-ghost"><Icon name="ext" className="i i-sm" /></button>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="col gap-4">
              <div className="card card-pad">
                <span className="t-mono-xs muted">Case worker</span>
                <div className="row gap-3" style={{ marginTop: 10 }}>
                  <span className="avatar b3">M</span>
                  <div className="col">
                    <span className="t-sm" style={{ fontWeight: 500 }}>Marisol Rivera</span>
                    <span className="t-xs muted">Housing Navigator</span>
                  </div>
                </div>
                <hr className="divider" style={{ margin: "16px 0" }} />
                <div className="col gap-2 t-sm">
                  <div className="row spread"><span className="muted">Phone</span><span className="t-mono">(510) 555 · 0142</span></div>
                  <div className="row spread"><span className="muted">Avg. response</span><span className="t-mono">2h</span></div>
                  <div className="row spread"><span className="muted">Placements YTD</span><span className="t-mono">38</span></div>
                </div>
                <button className="btn btn-outline" style={{ width: "100%", marginTop: 16 }}>View agency profile</button>
              </div>

              <div className="card card-pad">
                <h4 className="t-h3" style={{ marginBottom: 12 }}>Suggested response</h4>
                <p className="t-sm muted" style={{ marginBottom: 12 }}>"Hi Marisol — happy to move forward. I have tour slots Wed 5/6 at 2pm or Thu 5/7 at 4pm. Either work?"</p>
                <button className="btn btn-secondary btn-sm" style={{ width: "100%" }}><Icon name="sparkle" className="i i-sm" /> Use & send</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

const ListerCalendar = () => {
  const days = Array.from({ length: 35 }, (_, i) => i - 3);
  const events = { 4: "in", 8: "in", 14: "tour", 22: "out", 28: "tour" };
  return (
    <>
      <DashTopBar title="Calendar" subtitle="May 2026 · 3 active rooms" action={<button className="btn btn-primary"><Icon name="plus" className="i i-sm" /> Block dates</button>} />
      <div style={{ padding: 32 }}>
        <div className="card card-pad">
          <div className="row spread" style={{ marginBottom: 20 }}>
            <h2 className="t-h1">May 2026</h2>
            <div className="row gap-2">
              <button className="btn btn-icon btn-outline"><Icon name="arrowLeft" className="i i-sm" /></button>
              <button className="btn btn-outline">Today</button>
              <button className="btn btn-icon btn-outline"><Icon name="arrowRight" className="i i-sm" /></button>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 1, background: "var(--line-1)", borderRadius: 12, overflow: "hidden", boxShadow: "0 0 0 1px var(--line-1)" }}>
            {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map(d => (
              <div key={d} style={{ background: "var(--bg-1)", padding: 10, textAlign: "center" }} className="t-mono-xs muted">{d}</div>
            ))}
            {days.map((d, i) => {
              const valid = d >= 1 && d <= 31;
              const ev = events[d];
              return (
                <div key={i} style={{ background: "var(--bg-1)", minHeight: 90, padding: 10, opacity: valid ? 1 : 0.3 }}>
                  <span className="t-mono-sm">{valid ? d : ""}</span>
                  {ev === "in" && <div style={{ marginTop: 6, padding: "4px 6px", background: "oklch(0.78 0.12 155 / 0.16)", color: "var(--success)", borderRadius: 4, fontSize: 10, fontFamily: "var(--font-mono)" }}>Move-in</div>}
                  {ev === "out" && <div style={{ marginTop: 6, padding: "4px 6px", background: "oklch(0.80 0.13 65 / 0.16)", color: "var(--warn)", borderRadius: 4, fontSize: 10, fontFamily: "var(--font-mono)" }}>Move-out</div>}
                  {ev === "tour" && <div style={{ marginTop: 6, padding: "4px 6px", background: "var(--info-dim)", color: "var(--info)", borderRadius: 4, fontSize: 10, fontFamily: "var(--font-mono)" }}>Tour 2pm</div>}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </>
  );
};

const ListerPayouts = () => (
  <>
    <DashTopBar title="Payouts" subtitle="Direct deposit · Bank ending in 4127" action={<button className="btn btn-outline">Download statement</button>} />
    <div style={{ padding: 32, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
      {[
        { l: "Available", v: "$2,160.00", d: "Lands May 4" },
        { l: "Pending", v: "$0.00", d: "—" },
        { l: "YTD income", v: "$10,580", d: "+24% YoY" },
      ].map(s => (
        <div key={s.l} className="card stat-tile">
          <span className="stat-label">{s.l}</span>
          <span className="stat-value">{s.v}</span>
          <span className="stat-delta">{s.d}</span>
        </div>
      ))}
    </div>
    <div style={{ padding: "0 32px 32px" }}>
      <div className="card" style={{ padding: 0 }}>
        <table className="table">
          <thead><tr><th>Date</th><th>Room</th><th>Guest</th><th>Period</th><th>Source</th><th style={{ textAlign: "right" }}>Amount</th></tr></thead>
          <tbody>
            {[
              ["May 04", "Sunny private room", "Carla T.", "May 2026", "HUD-VASH", "$685.00"],
              ["Apr 04", "Sunny private room", "Carla T.", "Apr 2026", "HUD-VASH", "$685.00"],
              ["Apr 04", "Quiet upstairs room", "Reggie W.", "Apr 2026", "EHV", "$540.00"],
              ["Apr 04", "Studio with bath", "Mike R.", "Apr 2026", "Section 8", "$935.00"],
              ["Mar 04", "Sunny private room", "Carla T.", "Mar 2026", "HUD-VASH", "$685.00"],
            ].map((row, i) => (
              <tr key={i}>{row.map((c, j) => <td key={j} style={{ textAlign: j === 5 ? "right" : "left", fontFamily: j === 5 || j === 0 ? "var(--font-mono)" : "" }}>{c}</td>)}</tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  </>
);

const ListerVerify = () => (
  <>
    <DashTopBar title="Verification" subtitle="Your trust score builds tenant confidence" />
    <div style={{ padding: 32, maxWidth: 720 }}>
      <div className="card card-pad" style={{ marginBottom: 16 }}>
        <div className="row gap-4">
          <div style={{ width: 64, height: 64, borderRadius: 16, background: "var(--accent-dim)", color: "var(--accent)", display: "grid", placeItems: "center" }}>
            <Icon name="shield" className="i i-lg" />
          </div>
          <div className="col" style={{ flex: 1 }}>
            <h3 className="t-h1">Verified Host</h3>
            <p className="t-sm muted">5 of 5 checks complete · last refreshed Apr 12</p>
          </div>
          <span className="badge badge-success">All clear</span>
        </div>
      </div>
      <div className="col gap-2">
        {[
          { l: "Identity", d: "Verified through Persona on Mar 02", st: "ok" },
          { l: "Background check", d: "Clean record · refreshed annually", st: "ok" },
          { l: "Property safety inspection", d: "Smoke alarms, locks, egress · last Mar 09", st: "ok" },
          { l: "W-9 tax form", d: "On file since Feb 2024", st: "ok" },
          { l: "Property insurance", d: "Expires Jul 14 — please re-upload", st: "warn" },
        ].map((v, i) => (
          <div key={i} className="card card-pad row spread" style={{ padding: 20 }}>
            <div className="col gap-1">
              <div className="row gap-2">
                <Icon name={v.st === "ok" ? "check" : "bell"} className="i i-sm" style={{ color: v.st === "ok" ? "var(--success)" : "var(--warn)" }} />
                <span className="t-h3">{v.l}</span>
              </div>
              <span className="t-sm muted">{v.d}</span>
            </div>
            <button className={`btn btn-sm ${v.st === "ok" ? "btn-ghost" : "btn-primary"}`}>{v.st === "ok" ? "View" : "Re-upload"}</button>
          </div>
        ))}
      </div>
    </div>
  </>
);

const ListerSettings = () => (
  <>
    <DashTopBar title="Settings" />
    <div style={{ padding: 32, maxWidth: 720 }}>
      <div className="card card-pad" style={{ marginBottom: 16 }}>
        <h3 className="t-h2" style={{ marginBottom: 16 }}>Profile</h3>
        <div className="col gap-4">
          <div className="row gap-4" style={{ alignItems: "center" }}>
            <span className="avatar avatar-lg b3">D</span>
            <button className="btn btn-outline btn-sm"><Icon name="upload" className="i i-sm" /> Change photo</button>
          </div>
          <div className="row gap-3">
            <div className="field" style={{ flex: 1 }}><label className="field-label">Full name</label><input className="input" defaultValue="Dana Kowalski" /></div>
            <div className="field" style={{ flex: 1 }}><label className="field-label">Display name</label><input className="input" defaultValue="Dana K." /></div>
          </div>
          <div className="field"><label className="field-label">Bio</label><textarea className="textarea" defaultValue="Quiet West Oakland host. I rent two rooms in my craftsman and prioritize long-term, supported placements." /></div>
        </div>
      </div>
      <div className="card card-pad">
        <h3 className="t-h2" style={{ marginBottom: 16 }}>Notifications</h3>
        <div className="col gap-3">
          {["New inquiries", "Application status changes", "Messages", "Payout deposited", "Marketing & tips"].map((n, i) => (
            <div key={n} className="row spread" style={{ padding: "10px 0", borderBottom: i < 4 ? "1px solid var(--line-1)" : "none" }}>
              <span className="t-sm">{n}</span>
              <Toggle defaultOn={i < 4} />
            </div>
          ))}
        </div>
      </div>
    </div>
  </>
);

const Toggle = ({ defaultOn }) => {
  const [on, setOn] = useStateDash(defaultOn);
  return (
    <button onClick={() => setOn(!on)} style={{ width: 40, height: 24, borderRadius: 999, background: on ? "var(--accent)" : "var(--bg-3)", boxShadow: "0 0 0 1px var(--line-1) inset", padding: 2, position: "relative" }}>
      <span style={{ display: "block", width: 18, height: 18, borderRadius: 999, background: on ? "var(--accent-ink)" : "var(--ink-1)", marginLeft: on ? 16 : 0, transition: "margin .15s" }} />
    </button>
  );
};

// ─── SEEKER DASHBOARD ────────────────────────────────────────────
const PageSeekerDash = ({ onNav }) => {
  const items = [
    { items: [
      { id: "saved", icon: "heart", label: "Saved rooms", badge: 6 },
      { id: "apps", icon: "clipboard", label: "Applications", badge: 2 },
      { id: "messages", icon: "msg", label: "Messages" },
      { id: "tours", icon: "calendar", label: "Tours" },
      { id: "vouchers", icon: "shield", label: "Voucher info" },
    ]},
  ];
  return (
    <div className="app-shell">
      <Sidebar items={items} current="saved" onNav={(id) => id === "messages" ? onNav("messages") : null} footer={<SidebarFooter name="Marisol Rivera" sub="Bay Area Outreach · Case worker" onNav={onNav} />} />
      <div className="col">
        <DashTopBar title="Your housing search" subtitle="Placing 4 clients · 2 awaiting response" action={<button className="btn btn-primary" onClick={() => onNav("search")}><Icon name="search" className="i i-sm" /> New search</button>} />
        <div style={{ padding: 32, display: "flex", flexDirection: "column", gap: 24 }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
            {[
              { l: "Active clients", v: "04" },
              { l: "Saved rooms", v: "06" },
              { l: "Open applications", v: "02" },
              { l: "Placements YTD", v: "38" },
            ].map(s => (
              <div key={s.l} className="card stat-tile">
                <span className="stat-label">{s.l}</span>
                <span className="stat-value">{s.v}</span>
              </div>
            ))}
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 24 }}>
            <div className="card card-pad">
              <div className="row spread" style={{ marginBottom: 16 }}>
                <h3 className="t-h2">Active applications</h3>
                <a className="t-sm" style={{ color: "var(--accent)", cursor: "pointer" }}>View all →</a>
              </div>
              <div className="col">
                {[
                  { c: "James W.", r: "Sunny private room", h: "Dana K.", s: "Tour scheduled", st: "tour" },
                  { c: "Carla T.", r: "Quiet upstairs room", h: "Marco V.", s: "Awaiting host response", st: "wait" },
                  { c: "Yasmin H.", r: "Ground-floor accessible", h: "Ana R.", s: "Approved · move in May 22", st: "ok" },
                  { c: "Reggie W.", r: "Re-entry housing", h: "Reach Forward", s: "Approved · move in May 8", st: "ok" },
                ].map((a, i) => (
                  <div key={i} className="row gap-4" style={{ padding: "14px 0", borderBottom: i < 3 ? "1px solid var(--line-1)" : "none" }}>
                    <span className={`avatar avatar-sm b${(i % 4) + 1}`}>{a.c[0]}</span>
                    <div className="col" style={{ flex: 1 }}>
                      <span className="t-sm" style={{ fontWeight: 500 }}>{a.c}</span>
                      <span className="t-xs muted">{a.r} · {a.h}</span>
                    </div>
                    <span className={`badge ${a.st === "ok" ? "badge-success" : a.st === "tour" ? "badge-info" : "badge-warn"}`}>{a.s}</span>
                    <button className="btn btn-sm btn-outline">Open</button>
                  </div>
                ))}
              </div>
            </div>

            <div className="card card-pad">
              <h3 className="t-h2" style={{ marginBottom: 16 }}>Saved rooms</h3>
              <div className="col gap-3">
                {ROOMS.slice(0, 4).map(r => (
                  <div key={r.id} className="row gap-3" style={{ cursor: "pointer" }} onClick={() => onNav("listing", { id: r.id })}>
                    <div className={`photo has-img`} style={{ width: 64, height: 56, borderRadius: 8, backgroundImage: `url(${window.ROOM_IMG[window.ROOMS.indexOf(r) % 8]})` }}></div>
                    <div className="col" style={{ flex: 1, minWidth: 0 }}>
                      <span className="t-sm" style={{ fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.title}</span>
                      <span className="t-xs muted">{r.area}</span>
                    </div>
                    <span className="t-mono-sm">${r.price}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ─── MESSAGES ────────────────────────────────────────────
const PageMessages = ({ onNav }) => {
  const [active, setActive] = useStateDash(0);
  const threads = [
    { n: "Marisol Rivera", a: "Bay Area Outreach", last: "Either time works. Should we lock in 5/6?", t: "2m", b: "b3", unread: true },
    { n: "Carla Tran", a: "Direct inquiry", last: "Thank you so much for considering me!", t: "1h", b: "b2", unread: true },
    { n: "James Whitaker", a: "VA placement", last: "Service dog is ADA-certified.", t: "3h", b: "b4" },
    { n: "Yasmin Hadid", a: "Roots Recovery", last: "Confirmed move-in for the 22nd 🎉", t: "yesterday", b: "b5" },
    { n: "Reggie Williams", a: "Direct inquiry", last: "I'll bring my voucher paperwork.", t: "2d", b: "b1" },
  ];
  const cur = threads[active];
  const messages = [
    { from: "them", t: "Hi Dana — Marisol from Bay Area Outreach. I'm placing a 38yo veteran (HUD-VASH). He's been in transitional 90 days, ready for stability." },
    { from: "them", t: "Saw your sunny private room is open May 8 — would love to schedule a tour this week if it's still available?" },
    { from: "me", t: "Hi Marisol! Yes, the room is open. Happy to schedule a tour. I have Wed 5/6 at 2pm or Thu 5/7 at 4pm — either work?" },
    { from: "them", t: "Either time works. Should we lock in 5/6?" },
  ];

  return (
    <div className="app-shell">
      <Sidebar
        items={[{ items: [
          { id: "all", icon: "inbox", label: "All messages", badge: 2 },
          { id: "ag", icon: "briefcase", label: "Agencies" },
          { id: "ind", icon: "user", label: "Individuals" },
          { id: "arc", icon: "clipboard", label: "Archived" },
        ]}]}
        current="all"
        onNav={() => {}}
        footer={<SidebarFooter name="Dana Kowalski" sub="Host · Oakland" onNav={onNav} />}
      />
      <div className="col">
        <DashTopBar title="Messages" action={<button className="btn btn-sm btn-outline" onClick={() => onNav("lister-dash")}>← Back to dashboard</button>} />
        <div style={{ display: "grid", gridTemplateColumns: "320px 1fr 320px", height: "calc(100vh - 88px)", minHeight: 600 }}>
          {/* Thread list */}
          <div style={{ borderRight: "1px solid var(--line-1)", overflow: "auto" }}>
            {threads.map((th, i) => (
              <div key={i} onClick={() => setActive(i)} style={{
                padding: 16, borderBottom: "1px solid var(--line-1)", cursor: "pointer",
                background: active === i ? "var(--bg-2)" : "transparent",
                borderLeft: active === i ? "2px solid var(--accent)" : "2px solid transparent",
              }}>
                <div className="row gap-3">
                  <span className={`avatar ${th.b}`}>{th.n[0]}</span>
                  <div className="col" style={{ flex: 1, minWidth: 0 }}>
                    <div className="row spread">
                      <span className="t-sm" style={{ fontWeight: 500 }}>{th.n}</span>
                      <span className="t-xs muted">{th.t}</span>
                    </div>
                    <span className="t-xs muted" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{th.last}</span>
                  </div>
                  {th.unread && <span className="dot" style={{ background: "var(--accent)", width: 8, height: 8 }} />}
                </div>
              </div>
            ))}
          </div>

          {/* Thread view */}
          <div className="col" style={{ minWidth: 0 }}>
            <div className="row spread" style={{ padding: 20, borderBottom: "1px solid var(--line-1)" }}>
              <div className="row gap-3">
                <span className={`avatar ${cur.b}`}>{cur.n[0]}</span>
                <div className="col">
                  <span className="t-h3">{cur.n}</span>
                  <span className="t-xs muted">{cur.a}</span>
                </div>
              </div>
              <div className="row gap-2">
                <button className="btn btn-icon btn-outline"><Icon name="calendar" className="i i-sm" /></button>
                <button className="btn btn-icon btn-outline"><Icon name="paperclip" className="i i-sm" /></button>
                <button className="btn btn-sm btn-primary">Approve application</button>
              </div>
            </div>

            <div style={{ flex: 1, padding: 24, overflow: "auto", display: "flex", flexDirection: "column", gap: 14, justifyContent: "flex-end" }}>
              <div className="row center"><span className="t-mono-xs muted">— Today, 2:14 PM —</span></div>
              {messages.map((m, i) => (
                <div key={i} style={{ display: "flex", justifyContent: m.from === "me" ? "flex-end" : "flex-start" }}>
                  <div style={{
                    maxWidth: "70%",
                    padding: "12px 16px",
                    borderRadius: m.from === "me" ? "16px 16px 4px 16px" : "16px 16px 16px 4px",
                    background: m.from === "me" ? "var(--accent)" : "var(--bg-2)",
                    color: m.from === "me" ? "var(--accent-ink)" : "var(--ink-0)",
                    boxShadow: m.from === "me" ? "none" : "0 0 0 1px var(--line-1) inset",
                    fontSize: 14, lineHeight: 1.5,
                  }}>{m.t}</div>
                </div>
              ))}
            </div>

            <div style={{ padding: 16, borderTop: "1px solid var(--line-1)" }}>
              <div className="row gap-2" style={{ padding: 8, background: "var(--bg-2)", borderRadius: 12, boxShadow: "0 0 0 1px var(--line-1) inset" }}>
                <button className="btn btn-icon btn-ghost"><Icon name="paperclip" className="i i-sm" /></button>
                <input className="input" placeholder="Type a message…" style={{ background: "transparent", boxShadow: "none", height: 40 }} defaultValue="Yes — let's lock 5/6 at 2pm. I'll send a tour confirmation." />
                <button className="btn btn-primary"><Icon name="send" className="i i-sm" /> Send</button>
              </div>
              <div className="row gap-2" style={{ marginTop: 10 }}>
                <span className="chip chip-static" style={{ cursor: "pointer" }}><Icon name="sparkle" className="i i-sm" /> Suggest reply</span>
                <span className="chip chip-static" style={{ cursor: "pointer" }}>Schedule tour</span>
                <span className="chip chip-static" style={{ cursor: "pointer" }}>Send application form</span>
              </div>
            </div>
          </div>

          {/* Side context */}
          <div style={{ borderLeft: "1px solid var(--line-1)", padding: 24, overflow: "auto" }}>
            <h4 className="t-mono-xs muted" style={{ marginBottom: 12 }}>Context</h4>
            <div className="card card-pad" style={{ marginBottom: 16 }}>
              <span className="t-xs muted">Inquiry for</span>
              <h4 className="t-h3" style={{ marginTop: 4 }}>Sunny private room</h4>
              <div className={`photo has-img`} style={{ aspectRatio: "1.6", margin: "12px 0", borderRadius: 8, backgroundImage: `url(${window.ROOM_IMG[0]})` }}></div>
              <div className="row spread t-sm">
                <span className="muted">Move in</span><span className="t-mono">May 8</span>
              </div>
              <div className="row spread t-sm" style={{ marginTop: 4 }}>
                <span className="muted">Voucher</span><span>HUD-VASH</span>
              </div>
            </div>
            <h4 className="t-mono-xs muted" style={{ marginBottom: 12 }}>Quick actions</h4>
            <div className="col gap-2">
              <button className="btn btn-outline" style={{ justifyContent: "flex-start", width: "100%" }}><Icon name="calendar" className="i i-sm" /> Schedule tour</button>
              <button className="btn btn-outline" style={{ justifyContent: "flex-start", width: "100%" }}><Icon name="clipboard" className="i i-sm" /> Send application</button>
              <button className="btn btn-outline" style={{ justifyContent: "flex-start", width: "100%" }}><Icon name="flag" className="i i-sm" /> Flag this thread</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.PageListerDash = PageListerDash;
window.PageSeekerDash = PageSeekerDash;
window.PageMessages = PageMessages;