/* =====================================================================
   ACCESS — NDA flow + Client login
   ===================================================================== */
function StepRail({ step, steps }) {
  return (
    <div className="row ac" style={{ gap: 0 }}>
      {steps.map((s, i) => (
        <React.Fragment key={i}>
          <div className="row ac gap10">
            <div style={{ width: 30, height: 30, borderRadius: "50%", flex: "none", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 13,
              background: i < step ? "var(--navy)" : i === step ? "var(--paper)" : "var(--paper)",
              color: i < step ? "#fff" : i === step ? "var(--navy)" : "var(--slate-2)",
              border: "1.5px solid " + (i <= step ? "var(--navy)" : "var(--line-2)") }}>
              {i < step ? <Icon name="check" size={15} /> : i + 1}
            </div>
            <span className="small b6" style={{ color: i <= step ? "var(--ink)" : "var(--slate-2)", whiteSpace: "nowrap" }}>{s}</span>
          </div>
          {i < steps.length - 1 && <div style={{ flex: 1, height: 1, background: "var(--line-2)", margin: "0 14px", minWidth: 24 }} />}
        </React.Fragment>
      ))}
    </div>
  );
}

function AccessScreen({ slug }) {
  const s = useStore();
  const l = s.listings.find((x) => x.slug === slug) || s.listings[0];
  const nda = s.ndas.find((n) => n.active) || s.ndas[0];
  const [step, setStep] = useState(0);
  const [form, setForm] = useState({ name: "", email: "", company: "", cap: "Principal" });
  const [agree, setAgree] = useState(false);
  const [sig, setSig] = useState("");
  const [req, setReq] = useState(null);
  const steps = ["Identify", "Sign NDA", "Verify"];
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  return (
    <div className="fade-in" style={{ minHeight: "100vh", background: "var(--paper-2)" }}>
      <div className="nav"><div className="wrap nav-in"><Logo onClick={() => navigate("/")} /><button className="linklike small" onClick={() => navigate("/properties/" + l.slug)}>Back to listing</button></div></div>

      <div className="wrap" style={{ maxWidth: 920, padding: "40px 32px 80px" }}>
        <div className="row gap32 m-col" style={{ alignItems: "flex-start" }}>
          {/* deal summary */}
          <div className="card access-summary" style={{ width: 280, flex: "none", overflow: "hidden", position: "sticky", top: 96 }}>
            <PhotoBox dataUrl={l.photo} type={l.type} h={150} />
            <div className="pad20">
              <span className="tag gate"><Icon name="lock" size={11} /> Confidential</span>
              <h3 className="h3" style={{ marginTop: 12 }}>{l.address}</h3>
              <p className="xsmall muted" style={{ marginTop: 4 }}>{l.submarket} · {l.type}</p>
              <hr className="divider" style={{ margin: "14px 0" }} />
              <p className="xsmall muted">You're requesting access to the secure data room: financials, rent roll, leases, title &amp; survey.</p>
            </div>
          </div>

          {/* form */}
          <div className="grow">
            <div className="card pad32">
              <StepRail step={step} steps={steps} />
              <hr className="divider" style={{ margin: "28px 0" }} />

              {step === 0 && (
                <div className="fade-in">
                  <h2 className="h2">Confirm your identity</h2>
                  <p className="muted" style={{ marginTop: 6 }}>Access is granted to verified principals, brokers, and lenders.</p>
                  <div className="col gap16" style={{ marginTop: 24 }}>
                    <div className="field"><label>Full name</label><input className="input" placeholder="Jane Buyer" value={form.name} onChange={set("name")} /></div>
                    <div className="row gap16">
                      <div className="field grow"><label>Work email</label><input className="input" placeholder="jane@fund.com" value={form.email} onChange={set("email")} /></div>
                      <div className="field grow"><label>Company</label><input className="input" placeholder="Acquiring entity" value={form.company} onChange={set("company")} /></div>
                    </div>
                    <div className="field"><label>Capacity</label>
                      <div className="row gap8">{["Principal", "Broker", "Lender"].map((c) => <button key={c} className={"chip" + (form.cap === c ? " on" : "")} onClick={() => setForm({ ...form, cap: c })}>{c}</button>)}</div>
                    </div>
                  </div>
                  <button className="btn block lg" style={{ marginTop: 28 }} disabled={!form.name || !form.email} onClick={() => setStep(1)}>Continue to NDA <Icon name="arrow" size={16} /></button>
                </div>
              )}

              {step === 1 && (
                <div className="fade-in">
                  <h2 className="h2">{nda.name}</h2>
                  <div className="card surface scroll-y" style={{ marginTop: 16, padding: 20, height: 200 }}>
                    <p className="small b6" style={{ color: "var(--ink)" }}>Property: {l.address}, {l.city}, {nda.governing}</p>
                    {nda.body.split("\n\n").map((para, i) => (
                      <p key={i} className="small" style={{ color: "var(--ink-2)", marginTop: 12 }}>{para}</p>
                    ))}
                  </div>
                  <label className="row gap10 ac" style={{ marginTop: 18, cursor: "pointer" }}>
                    <span onClick={() => setAgree(!agree)} style={{ width: 22, height: 22, borderRadius: 4, border: "1.5px solid " + (agree ? "var(--navy)" : "var(--line-2)"), background: agree ? "var(--navy)" : "#fff", display: "grid", placeItems: "center", flex: "none" }}>{agree && <Icon name="check" size={14} style={{ color: "#fff" }} />}</span>
                    <span className="small">I have read and agree to the terms of this Confidentiality Agreement.</span>
                  </label>
                  <div className="row gap16" style={{ marginTop: 18, alignItems: "flex-end" }}>
                    <div className="field grow"><label>Type your full legal name to sign</label><input className="input" placeholder="Jane Buyer" value={sig} onChange={(e) => setSig(e.target.value)} style={{ fontFamily: "Georgia, serif", fontSize: 18, fontStyle: "italic" }} /></div>
                    <div className="field" style={{ width: 150 }}><label>Date</label><input className="input" value={new Date().toLocaleDateString("en-US")} readOnly /></div>
                  </div>
                  <div className="row gap12" style={{ marginTop: 28 }}>
                    <button className="btn ghost" onClick={() => setStep(0)}><Icon name="chevL" size={15} /> Back</button>
                    <button className="btn grow" disabled={!agree || !sig} onClick={() => { const G = window.GLR; const ident = { name: sig || form.name, email: form.email, company: form.company }; G.setSession(ident); setReq(G.addRequest({ slug: l.slug, cap: form.cap, ...ident })); setStep(2); }}><Icon name="signature" size={16} /> Sign &amp; submit</button>
                  </div>
                </div>
              )}

              {step === 2 && (
                <div className="fade-in" style={{ textAlign: "center", padding: "12px 0" }}>
                  <div style={{ width: 60, height: 60, borderRadius: "50%", background: "var(--avail-bg)", color: "var(--avail)", display: "grid", placeItems: "center", margin: "0 auto" }}><Icon name="check" size={30} /></div>
                  <h2 className="h2" style={{ marginTop: 18 }}>NDA signed</h2>
                  <p className="muted" style={{ marginTop: 8, maxWidth: 420, margin: "8px auto 0" }}>We've emailed a verification link to <b>{form.email || "your inbox"}</b>. A broker reviews each request before the data room opens — typically within a few hours.</p>
                  <div className="row jc gap8" style={{ marginTop: 22 }}>
                    <span className="tag avail"><Icon name="check" size={11} /> NDA signed</span>
                    <span className="tag outline">Email — pending</span>
                    <span className="tag gate">Broker review</span>
                  </div>
                  <div className="gate-band pad20" style={{ marginTop: 26, textAlign: "left" }}>
                    <div className="row jb ac"><p className="small b6" style={{ margin: 0 }}>Request submitted</p><span className="tag" style={{ background: "var(--loi-bg)", color: "var(--loi)" }}><span className="dot" /> Pending review</span></div>
                    <p className="xsmall muted" style={{ marginTop: 6 }}>Your request now appears in the broker's review queue. You can track its status in the client portal.</p>
                    <button className="btn block" style={{ marginTop: 12 }} onClick={() => navigate("/portal")}><Icon name="lock" size={15} /> Go to client portal</button>
                    <div className="row gap8 ac" style={{ marginTop: 14, paddingTop: 12, borderTop: "1px dashed #e6d8b8" }}>
                      <Icon name="settings" size={14} style={{ color: "var(--brass)" }} />
                      <span className="xsmall" style={{ flex: 1, color: "var(--ink-2)" }}>Demo: approve this request instantly and enter the data room.</span>
                      <button className="btn brass sm" onClick={() => { if (req) window.GLR.setRequestStatus(req.id, "approved"); navigate("/portal/" + l.slug); }}>Approve &amp; enter</button>
                    </div>
                  </div>
                </div>
              )}
            </div>
            <p className="xsmall muted" style={{ marginTop: 16, textAlign: "center" }}><Icon name="shield" size={13} style={{ verticalAlign: "-2px" }} /> Your information is encrypted and never shared. Standard mutual NDA.</p>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AccessScreen });