/* =====================================================================
   PORTAL — deal rooms index + war room (file explorer)
   ===================================================================== */
function PortalHome() {
  const s = useStore();
  const G = window.GLR;
  const me = G.session();
  const mine = s.requests.filter((r) => r.email === me.email);
  return (
    <div className="fade-in" style={{ minHeight: "100vh", background: "var(--paper-2)" }}>
      <PortalBar />
      <div className="wrap" style={{ maxWidth: 1000, padding: "40px 32px 80px" }}>
        <div className="row jb ac wrapf gap12">
          <div>
            <div className="eyebrow">Client portal</div>
            <h1 className="h1" style={{ marginTop: 10 }}>Your deal rooms</h1>
            <p className="lede" style={{ marginTop: 8 }}>Signed in as <b>{me.name}</b> · {me.company}</p>
          </div>
          <button className="btn ghost" onClick={() => navigate("/properties")}><Icon name="search" size={16} /> Browse properties</button>
        </div>

        {mine.length === 0 && (
          <div className="card pad32" style={{ textAlign: "center", marginTop: 28 }}>
            <Icon name="lock" size={28} style={{ color: "var(--slate-2)" }} />
            <h3 className="h3" style={{ marginTop: 12 }}>No deal rooms yet</h3>
            <p className="muted" style={{ marginTop: 6 }}>Request access to a confidential listing to open a secure data room.</p>
            <button className="btn" style={{ marginTop: 18 }} onClick={() => navigate("/properties")}>Browse properties</button>
          </div>
        )}

        <div className="col gap16" style={{ marginTop: 28 }}>
          {mine.map((r) => {
            const l = s.listings.find((x) => x.slug === r.slug);
            if (!l) return null;
            const approved = r.status === "approved";
            const denied = r.status === "denied";
            return (
              <div key={r.id} className={"card portal-room" + (approved ? " hover" : "")} style={{ overflow: "hidden", display: "grid", gridTemplateColumns: "160px 1fr auto", alignItems: "center", cursor: approved ? "pointer" : "default" }} onClick={approved ? () => navigate("/portal/" + l.slug) : undefined}>
                <PhotoBox dataUrl={l.photo} type={l.type} h={96} />
                <div className="pad20">
                  <div className="row gap8 ac wrapf">
                    {approved && <span className="tag avail"><span className="dot" /> Access granted</span>}
                    {r.status === "pending" && <span className="tag" style={{ background: "var(--loi-bg)", color: "var(--loi)" }}><span className="dot" /> Awaiting approval</span>}
                    {denied && <span className="tag" style={{ background: "#fbeeec", color: "var(--danger)" }}><span className="dot" /> Declined</span>}
                    <span className="tag outline">{l.type}</span>
                  </div>
                  <h3 className="h3" style={{ marginTop: 8 }}>{l.address}</h3>
                  <p className="xsmall muted" style={{ marginTop: 2 }}>{l.submarket} · Requested {r.date}{approved ? " · Offers due Jun 27, 2026" : ""}</p>
                </div>
                <div className="pad20">
                  {approved
                    ? <button className="btn ghost sm">Open <Icon name="arrow" size={15} /></button>
                    : r.status === "pending"
                      ? <span className="small muted nowrap"><Icon name="clock" size={14} style={{ verticalAlign: "-2px" }} /> Pending</span>
                      : <button className="btn ghost sm" onClick={(e) => { e.stopPropagation(); navigate("/properties/" + l.slug); }}>View listing</button>}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function PortalBar({ deal }) {
  return (
    <div style={{ background: "var(--navy)", color: "#fff", position: "sticky", top: 0, zIndex: 40 }}>
      <div className="wrap-wide" style={{ height: 60, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div className="row gap16 ac">
          <Logo onNavy onClick={() => navigate("/")} />
          {deal && <><div className="m-hide" style={{ width: 1, height: 24, background: "rgba(255,255,255,0.2)" }} /><div className="row gap8 ac m-hide"><Icon name="lock" size={15} style={{ color: "var(--brass)" }} /><span className="b6">War Room</span><span style={{ color: "#9fb2c6" }}>·</span><span>{deal}</span></div></>}
        </div>
        <div className="row gap16 ac">
          <span className="tag avail m-hide" style={{ background: "rgba(255,255,255,0.1)", color: "#7fe0a8" }}><span className="dot" /> NDA on file</span>
          <button className="linklike small" style={{ color: "#c8d6e5" }} onClick={() => { window.GLR.setSession({ name: "", email: "", company: "" }); navigate("/"); showToast("Signed out"); }}><Icon name="logout" size={15} /> <span className="m-hide">Sign out</span></button>
        </div>
      </div>
    </div>
  );
}

function QAPanel({ slug, me }) {
  const s = useStore();
  const thread = s.qa.filter((x) => x.slug === slug);
  const [text, setText] = useState("");
  const post = () => { if (!text.trim()) return; window.GLR.addQuestion({ slug, email: me.email, name: me.name, q: text.trim() }); setText(""); showToast("Question sent to the deal team"); };
  return (
    <React.Fragment>
      <div className="label">Q&amp;A · deal team {thread.length > 0 && <span className="tag" style={{ marginLeft: 6, height: 18 }}>{thread.length}</span>}</div>
      <div className="col gap10" style={{ marginTop: 12 }}>
        {thread.length === 0 && <p className="xsmall muted">No questions yet. Ask the deal team below — answers are posted here.</p>}
        {thread.map((q) => (
          <div key={q.id} className="card" style={{ padding: 12 }}>
            <div className="row gap8"><Icon name="msg" size={14} style={{ color: "var(--navy)", flex: "none", marginTop: 2 }} /><div style={{ flex: 1, minWidth: 0 }}><div className="small b6">{q.q}</div><div className="xsmall muted" style={{ marginTop: 2 }}>{q.name} · {q.askedAt}</div></div></div>
            {q.a
              ? <div style={{ marginTop: 8, paddingTop: 8, borderTop: "1px solid var(--line)" }}><div className="small" style={{ color: "var(--ink-2)" }}>{q.a}</div><div className="xsmall accent" style={{ marginTop: 3 }}>{q.by} · {q.answeredAt}</div></div>
              : <span className="tag" style={{ marginTop: 8, background: "var(--loi-bg)", color: "var(--loi)" }}><span className="dot" /> Awaiting answer</span>}
          </div>
        ))}
      </div>
      <textarea className="textarea" value={text} onChange={(e) => setText(e.target.value)} style={{ marginTop: 12, minHeight: 70 }} placeholder="Post a question…" />
      <button className="btn sm block" style={{ marginTop: 8 }} onClick={post}>Send to deal team</button>
    </React.Fragment>
  );
}

function WarRoom({ slug }) {
  const s = useStore();
  const G = window.GLR;
  const l = s.listings.find((x) => x.slug === slug) || s.listings.find((x) => x.gated) || s.listings[0];
  const tree = (l.dataroom && l.dataroom.length) ? l.dataroom : s.dataroom;
  const [folder, setFolder] = useState(1);
  const [sel, setSel] = useState(0);
  const [preview, setPreview] = useState(null);
  const [loiOpen, setLoiOpen] = useState(false);
  const cur = tree[folder];
  const mobile = useIsMobile(900);
  const me = G.session();
  const myReq = G.requestFor(l.slug, me.email);
  const approved = myReq && myReq.status === "approved";
  const qaCount = s.qa.filter((x) => x.slug === l.slug).length;
  const myLois = (s.lois || []).filter((x) => x.slug === l.slug && x.email === me.email);
  const lastLoi = myLois[0];
  const dl = (f) => {
    if (!f) return;
    window.GLR.downloadFile(f, l, me.name)
      .then(() => showToast("Download token issued — logged in audit trail"))
      .catch((e) => showToast(e.message || "Download failed"));
  };

  if (!approved) {
    return (
      <div className="fade-in" style={{ minHeight: "100vh", background: "var(--paper-2)" }}>
        <PortalBar deal={l.address} />
        <div className="wrap" style={{ maxWidth: 560, padding: "64px 24px" }}>
          <div className="card pad32" style={{ textAlign: "center" }}>
            <div style={{ width: 60, height: 60, borderRadius: "50%", background: "var(--brass-soft)", color: "var(--brass)", display: "grid", placeItems: "center", margin: "0 auto" }}><Icon name="lock" size={28} /></div>
            <h2 className="h2" style={{ marginTop: 16 }}>{myReq ? "Access pending approval" : "Access required"}</h2>
            <p className="muted" style={{ marginTop: 8 }}>
              {myReq
                ? "Your request for " + l.address + " is in the broker's review queue. You'll be notified by email once it's approved."
                : "The secure data room for " + l.address + " opens after a signed NDA and broker approval."}
            </p>
            {myReq && <div className="row jc" style={{ marginTop: 16 }}><span className="tag" style={{ background: "var(--loi-bg)", color: "var(--loi)" }}><span className="dot" /> Pending review · requested {myReq.date}</span></div>}
            <div className="row jc gap10" style={{ marginTop: 22 }}>
              <button className="btn ghost" onClick={() => navigate("/portal")}>Back to portal</button>
              {!myReq && <button className="btn brass" onClick={() => navigate("/access/" + l.slug)}><Icon name="signature" size={16} /> Request access</button>}
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fade-in" style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
      <PortalBar deal={l.address} />

      {/* deal status strip */}
      <div style={{ background: "var(--paper)", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap-wide wr-statusbar" style={{ padding: "14px 32px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div className="row gap40 wr-status">
            <KV k="Stage" v="Due diligence" />
            <KV k="Offers due" v="June 27, 2026" />
            <KV k="Your access" v="Buyer · read-only" />
            <KV k="Documents" v={tree.reduce((a, f) => a + f.files.length, 0) + " files"} />
          </div>
          <div className="row gap12 ac">
            {lastLoi && <span className="tag avail m-hide"><span className="dot" /> LOI submitted</span>}
            <button className="btn" onClick={() => setLoiOpen(true)}><Icon name="signature" size={16} /> {lastLoi ? "View LOI receipt" : "Submit LOI / Offer"}</button>
          </div>
        </div>
      </div>

      {/* explorer */}
      {mobile ? (
        <div style={{ padding: "16px 18px 70px" }}>
          <div className="label" style={{ marginBottom: 8 }}>Data room · {l.address}</div>
          <div className="row gap8" style={{ overflowX: "auto", paddingBottom: 8, marginBottom: 16 }}>
            {tree.map((f, i) => (
              <button key={i} className={"chip" + (folder === i ? " on" : "")} style={{ flex: "none" }} onClick={() => { setFolder(i); setSel(0); }}>
                {f.folder}<span style={{ opacity: 0.6, marginLeft: 4 }}>{f.files.length}</span>
              </button>
            ))}
          </div>
          <div className="col gap10">
            {cur.files.map((f, i) => (
              <div key={i} className="card" style={{ padding: 14, display: "flex", alignItems: "center", gap: 12 }} onClick={() => setPreview(f)}>
                <Icon name={f.t === "XLSX" ? "grid" : "doc"} size={20} style={{ color: f.t === "XLSX" ? "var(--avail)" : "var(--navy)", flex: "none" }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="b6 small" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{f.n}</div>
                  <div className="xsmall muted">{f.t} · {f.s} · {f.d}</div>
                </div>
                <button className="wr-icbtn" aria-label="Download" onClick={(e) => { e.stopPropagation(); dl(f); }}><Icon name="download" size={18} style={{ color: "var(--slate)" }} /></button>
              </div>
            ))}
          </div>
          <div className="row gap8 ac" style={{ marginTop: 16, color: "var(--slate)" }}>
            <Icon name="shield" size={14} /><span className="xsmall">Files are watermarked with your name &amp; IP. Downloads are logged.</span>
          </div>
          <hr className="divider" style={{ margin: "20px 0" }} />
          <QAPanel slug={l.slug} me={me} />
        </div>
      ) : (
      <div style={{ display: "grid", gridTemplateColumns: "260px minmax(0,1fr) 300px", flex: 1, minHeight: 0 }}>
        {/* tree */}
        <div className="scroll-y" style={{ borderRight: "1px solid var(--line)", background: "var(--paper-2)", padding: 16 }}>
          <div className="label" style={{ padding: "4px 8px 10px" }}>Data room</div>
          <div className="row gap8 ac" style={{ padding: "6px 8px", fontWeight: 700 }}><Icon name="folder" size={16} style={{ color: "var(--navy)" }} fill="var(--navy)" /> {l.address}</div>
          <div className="col" style={{ gap: 2, marginTop: 2 }}>
            {tree.map((f, i) => (
              <button key={i} onClick={() => { setFolder(i); setSel(0); }}
                style={{ textAlign: "left", border: "none", cursor: "pointer", padding: "8px 10px 8px 26px", borderRadius: 4, background: folder === i ? "var(--paper-3)" : "transparent", display: "flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: folder === i ? 600 : 500, color: "var(--ink-2)" }}>
                <Icon name="folder" size={15} style={{ color: "var(--slate)" }} /> {f.folder}
                <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--slate-2)" }}>{f.files.length}</span>
              </button>
            ))}
          </div>
          <hr className="divider" style={{ margin: "14px 0" }} />
          <div className="col gap2">
            <button className="row gap8 ac" style={{ padding: "8px 10px", border: "none", background: "none", cursor: "pointer", fontSize: 14, color: "var(--ink-2)" }}><Icon name="msg" size={15} /> Q&amp;A thread <span className="tag" style={{ marginLeft: "auto", height: 18 }}>{qaCount}</span></button>
            <button className="row gap8 ac" style={{ padding: "8px 10px", border: "none", background: "none", cursor: "pointer", fontSize: 14, color: "var(--ink-2)" }}><Icon name="clock" size={15} /> Activity log</button>
          </div>
        </div>

        {/* file list */}
        <div className="scroll-y" style={{ padding: "20px 28px" }}>
          <div className="row jb ac" style={{ marginBottom: 14 }}>
            <div className="row gap8 ac small muted"><span>{l.address}</span><Icon name="chevR" size={13} /><span className="b6" style={{ color: "var(--ink)" }}>{cur.folder}</span></div>
            <div className="input-ic" style={{ width: 200 }}><Icon name="search" size={15} className="ic" /><input className="input" style={{ height: 36 }} placeholder="Search files…" /></div>
          </div>
          <div className="card" style={{ overflow: "hidden" }}>
            <table className="ledger">
              <thead><tr><th>Name</th><th>Type</th><th className="num">Size</th><th className="num">Updated</th><th></th></tr></thead>
              <tbody>
                {cur.files.map((f, i) => (
                  <tr key={i} className="clickable" onClick={() => setSel(i)} onDoubleClick={() => setPreview(f)} style={{ background: sel === i ? "var(--paper-2)" : undefined }}>
                    <td><div className="row gap10 ac"><Icon name={f.t === "XLSX" ? "grid" : "doc"} size={17} style={{ color: f.t === "XLSX" ? "var(--avail)" : "var(--navy)", flex: "none" }} /> <span className="b6">{f.n}</span></div></td>
                    <td className="muted small">{f.t}</td>
                    <td className="num small tnum">{f.s}</td>
                    <td className="num small muted tnum">{f.d}</td>
                    <td className="num"><div className="row gap4 je">
                      <button className="wr-icbtn" title="Preview" onClick={(e) => { e.stopPropagation(); setPreview(f); }}><Icon name="eye" size={16} /></button>
                      <button className="wr-icbtn" title="Download" onClick={(e) => { e.stopPropagation(); dl(f); }}><Icon name="download" size={16} /></button>
                    </div></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="row gap8 ac" style={{ marginTop: 14, color: "var(--slate)" }}>
            <Icon name="shield" size={14} /><span className="xsmall">Every file is watermarked with your name and IP. Downloads are logged in the activity trail.</span>
          </div>
        </div>

        {/* right rail */}
        <div className="scroll-y" style={{ borderLeft: "1px solid var(--line)", background: "var(--paper-2)", padding: 20 }}>
          <div className="label">Preview</div>
          <div className="card" style={{ overflow: "hidden", marginTop: 10, position: "relative", height: 300, overflowY: "auto" }}>
            {cur.files[sel]
              ? <DocBody doc={window.GLRDOCS.build(cur.files[sel], l)} watermark={me.name} compact />
              : <div className="pad20 muted small">Select a file to preview.</div>}
          </div>
          <div className="row jb ac" style={{ marginTop: 12, gap: 8 }}>
            <div style={{ minWidth: 0 }}>
              <div className="b6 small" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{cur.files[sel] && cur.files[sel].n}</div>
              <div className="xsmall muted">{cur.files[sel] && (cur.files[sel].t + " · " + cur.files[sel].s)}</div>
            </div>
            <button className="btn ghost sm" style={{ flex: "none" }} onClick={() => setPreview(cur.files[sel])}><Icon name="eye" size={15} /> Open</button>
          </div>
          <button className="btn sm block" style={{ marginTop: 10 }} onClick={() => dl(cur.files[sel])}><Icon name="download" size={15} /> Download (logged)</button>

          <hr className="divider" style={{ margin: "20px 0" }} />
          <div className="label">Recent activity</div>
          <div className="col gap12" style={{ marginTop: 12 }}>
            {[["Broker uploaded Rent Roll", "2h ago"], ["You viewed Operating Statement", "3h ago"], ["Q: parking ratio? — answered", "Yesterday"], ["NDA countersigned by Broker", "2 days ago"]].map((a, i) => (
              <div key={i} className="row gap10"><div style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--slate-2)", marginTop: 6, flex: "none" }} /><div><div className="small">{a[0]}</div><div className="xsmall muted">{a[1]}</div></div></div>
            ))}
          </div>

          <hr className="divider" style={{ margin: "20px 0" }} />
          <QAPanel slug={l.slug} me={me} />
        </div>
      </div>
      )}
      {preview && <DocPreviewModal file={preview} listing={l} me={me} onClose={() => setPreview(null)} />}
      {loiOpen && <LoiModal listing={l} me={me} existing={lastLoi} onClose={() => setLoiOpen(false)} />}
    </div>
  );
}

Object.assign(window, { PortalHome, WarRoom });