// Invite visitor flow (drawer), Approvals page, VIP, Workflow builder, Integrations, Tenants, and other pages

function InviteDrawer({ open, onClose }) {
  const [step, setStep] = useState(0);
  const [form, setForm] = useState({
    name: "", email: "", company: "",
    date: "2026-04-23", time: "10:30",
    purpose: "Business meeting",
    destination: "Boardroom A · Tower 1 · L14",
    workflow: "Standard",
    vip: false,
    notifySlack: true,
    notifyEmail: true,
    preregNDA: true,
  });
  useEffect(() => { if (open) setStep(0); }, [open]);
  if (!open) return null;

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const steps = ["Visitor details", "Schedule & location", "Workflow & docs", "Review"];

  return (
    <>
      <div className="scrim" onClick={onClose} />
      <aside className="drawer" style={{width: 620}}>
        <div className="drawer-header">
          <div>
            <div style={{fontWeight: 600, fontSize: 16, letterSpacing: "-0.01em"}}>Invite a visitor</div>
            <div className="muted" style={{fontSize: 12.5, marginTop: 2}}>Creates an invitation, triggers workflow, and emails a QR pass</div>
          </div>
          <button className="icon-btn" onClick={onClose}><I.X /></button>
        </div>
        <div className="drawer-body">
          <div className="steps">
            {steps.map((s, i) => (
              <React.Fragment key={i}>
                <div className={"step " + (i < step ? "done " : "") + (i === step ? "active" : "")}>
                  <div className="dot">{i < step ? <I.Check size={12} sw={2.2}/> : i + 1}</div>
                  <span>{s}</span>
                </div>
                {i < steps.length - 1 && <div className="step-connector" style={{background: i < step ? "var(--accent)" : "var(--border)"}} />}
              </React.Fragment>
            ))}
          </div>

          {step === 0 && (
            <div className="stack-lg">
              <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14}}>
                <div className="field"><label>Full name</label><input className="input" value={form.name} onChange={e=>update("name", e.target.value)} placeholder="Amira Haddad"/></div>
                <div className="field"><label>Company</label><input className="input" value={form.company} onChange={e=>update("company", e.target.value)} placeholder="Lumen Capital"/></div>
                <div className="field" style={{gridColumn: "span 2"}}><label>Email</label><input className="input" value={form.email} onChange={e=>update("email", e.target.value)} placeholder="amira@lumencap.com"/></div>
                <div className="field"><label>Phone (optional)</label><input className="input" placeholder="+971 ·"/></div>
                <div className="field"><label>Nationality</label><select className="select"><option>— Select —</option><option>United Arab Emirates</option><option>Saudi Arabia</option><option>United Kingdom</option></select></div>
              </div>
              <div className="card" style={{background: "var(--accent-soft)", borderColor: "var(--accent-soft-2)"}}>
                <div className="card-body" style={{padding: 14, display: "flex", gap: 10, alignItems: "flex-start"}}>
                  <I.Sparkle sw={1.8} />
                  <div style={{fontSize: 12.5}}>
                    <strong>Smart suggest:</strong> We found 3 prior visits from this email. Pre-fill from last visit (Mar 14, 2026)?
                    <div style={{marginTop: 8}}><button className="btn sm">Use previous data</button></div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {step === 1 && (
            <div className="stack-lg">
              <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14}}>
                <div className="field"><label>Date</label><input className="input" type="date" value={form.date} onChange={e=>update("date", e.target.value)}/></div>
                <div className="field"><label>Time</label><input className="input" type="time" value={form.time} onChange={e=>update("time", e.target.value)}/></div>
                <div className="field" style={{gridColumn: "span 2"}}><label>Purpose of visit</label><input className="input" value={form.purpose} onChange={e=>update("purpose", e.target.value)}/></div>
                <div className="field" style={{gridColumn: "span 2"}}><label>Destination</label><input className="input" value={form.destination} onChange={e=>update("destination", e.target.value)}/></div>
                <div className="field"><label>Expected duration</label><select className="select"><option>30 minutes</option><option>1 hour</option><option>Half day</option><option>Full day</option></select></div>
                <div className="field"><label>Parking needed</label><select className="select"><option>No</option><option>Yes — visitor lot</option><option>Yes — valet</option></select></div>
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="stack-lg">
              <div className="field">
                <label>Approval workflow</label>
                <div className="hint">Determined by visit type, destination and host team. You can override.</div>
                <div style={{display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, marginTop: 4}}>
                  {["Standard", "Secure", "VIP Fast-Track"].map(w => (
                    <div key={w}
                         onClick={() => { update("workflow", w); update("vip", w === "VIP Fast-Track"); }}
                         style={{
                           border: "1px solid " + (form.workflow === w ? "var(--accent)" : "var(--border-strong)"),
                           background: form.workflow === w ? "var(--accent-soft)" : "var(--surface)",
                           padding: 12, borderRadius: 8, cursor: "pointer",
                           boxShadow: form.workflow === w ? "0 0 0 3px var(--accent-soft-2)" : "none",
                         }}>
                      <div style={{fontWeight: 500, fontSize: 13}}>{w}</div>
                      <div className="muted" style={{fontSize: 11.5, marginTop: 3}}>
                        {w === "Standard" && "Host → Security (2 levels)"}
                        {w === "Secure" && "Host → Security → Legal (3 levels, NDA)"}
                        {w === "VIP Fast-Track" && "Bypass approvals · host escort"}
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="field">
                <label>Pre-registration requirements</label>
                <div className="stack-sm" style={{marginTop: 4}}>
                  {[
                    { k: "preregNDA", label: "NDA (DocuSign template)", required: true },
                    { k: "preregID",  label: "Government-issued ID upload", required: true },
                    { k: "preregPhoto", label: "Profile photo for badge", required: false },
                    { k: "preregHealth", label: "Health & safety acknowledgement", required: false },
                  ].map((r, i) => (
                    <label key={i} style={{display: "flex", alignItems: "center", gap: 10, padding: "8px 12px", border: "1px solid var(--border)", borderRadius: 6, cursor: "pointer"}}>
                      <input type="checkbox" defaultChecked={r.required} />
                      <div style={{flex: 1, fontSize: 13}}>{r.label}</div>
                      {r.required && <span className="pill">Required by workflow</span>}
                    </label>
                  ))}
                </div>
              </div>

              <div className="field">
                <label>Notifications</label>
                <div className="stack-sm" style={{marginTop: 4}}>
                  <label style={{display: "flex", alignItems: "center", gap: 10}}><input type="checkbox" checked={form.notifyEmail} onChange={e=>update("notifyEmail", e.target.checked)}/> Email invitation with QR pass to visitor</label>
                  <label style={{display: "flex", alignItems: "center", gap: 10}}><input type="checkbox" checked={form.notifySlack} onChange={e=>update("notifySlack", e.target.checked)}/> Notify me on Slack at check-in</label>
                  <label style={{display: "flex", alignItems: "center", gap: 10}}><input type="checkbox" defaultChecked/> Notify guard station at arrival</label>
                </div>
              </div>
            </div>
          )}

          {step === 3 && (
            <div className="stack-lg">
              <div className="card">
                <div className="card-body" style={{padding: 18}}>
                  <div style={{display: "grid", gridTemplateColumns: "140px 1fr", gap: 10, fontSize: 13}}>
                    <div className="muted">Visitor</div><div><strong>{form.name || "Amira Haddad"}</strong> · {form.company || "Lumen Capital"}</div>
                    <div className="muted">Email</div><div>{form.email || "amira@lumencap.com"}</div>
                    <div className="muted">When</div><div className="tnum">{form.date} · {form.time}</div>
                    <div className="muted">Destination</div><div>{form.destination}</div>
                    <div className="muted">Purpose</div><div>{form.purpose}</div>
                    <div className="muted">Workflow</div><div><span className={"pill " + (form.workflow === "VIP Fast-Track" ? "vip" : "scheduled")}>{form.workflow}</span></div>
                    <div className="muted">Host</div><div>Noor Khalfan · Strategy</div>
                  </div>
                </div>
              </div>
              <div className="card" style={{background: "var(--surface-2)"}}>
                <div className="card-body" style={{padding: 14, fontSize: 12.5}}>
                  <strong>What happens next</strong>
                  <ol style={{margin: "8px 0 0 18px", padding: 0, color: "var(--ink-2)"}}>
                    <li>Invitation email with QR pass sent to visitor.</li>
                    <li>Approval kicks off: {form.workflow === "VIP Fast-Track" ? "bypassed (VIP)" : form.workflow === "Secure" ? "Host → Security → Legal" : "Host → Security"}.</li>
                    <li>On arrival, QR scan at lobby triggers check-in + signage greeting.</li>
                    <li>You'll be notified {form.notifySlack ? "on Slack" : "by email"} when they arrive.</li>
                  </ol>
                </div>
              </div>
            </div>
          )}
        </div>
        <div className="drawer-footer">
          <div className="muted" style={{fontSize: 12, flex: 1}}>Step {step + 1} of {steps.length}</div>
          {step > 0 && <button className="btn" onClick={() => setStep(s => s - 1)}>Back</button>}
          {step < 3
            ? <button className="btn primary" onClick={() => setStep(s => s + 1)}>Continue <I.ChevronRight size={13}/></button>
            : <button className="btn primary" onClick={onClose}><I.Check size={13}/> Send invitation</button>}
        </div>
      </aside>
    </>
  );
}

function Approvals() {
  const [selected, setSelected] = useState(APPROVALS[0].id);
  const sel = APPROVALS.find(a => a.id === selected);
  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Approvals</h1>
          <div className="page-subtitle">6 awaiting your action · 1 overdue · Avg response 14m</div>
        </div>
        <div className="hstack">
          <div className="seg"><button className="active">Queue</button><button>History</button><button>Delegations</button></div>
          <button className="btn ghost"><I.Filter size={14}/> Filters</button>
        </div>
      </div>

      <div style={{display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16}}>
        <div className="card" style={{padding: 0}}>
          <div className="card-header">
            <div><div className="card-title">Pending approvals</div><div className="card-sub">Sorted by SLA</div></div>
            <div className="hstack"><button className="btn sm"><I.Check size={13}/> Approve all low-risk</button></div>
          </div>
          <table className="table">
            <thead><tr><th>ID</th><th>Visitor</th><th>Stage</th><th>Host</th><th>SLA</th><th>Risk</th><th></th></tr></thead>
            <tbody>
              {APPROVALS.map(a => (
                <tr key={a.id} className={selected === a.id ? "selected" : ""} onClick={() => setSelected(a.id)} style={{cursor: "pointer"}}>
                  <td className="mono" style={{fontSize: 12}}>{a.id}</td>
                  <td>
                    <div style={{fontWeight: 500}}>{a.visitor}</div>
                    <div className="muted" style={{fontSize: 12}}>{a.company} · {a.purpose}</div>
                  </td>
                  <td>
                    <div style={{fontSize: 13}}>{a.stage}</div>
                    <div className="muted" style={{fontSize: 11.5}}>Level {a.level}</div>
                  </td>
                  <td style={{fontSize: 13}}>{a.host}</td>
                  <td className="tnum"><span className={"pill " + (a.sla.includes("overdue") ? "denied" : "scheduled")}>{a.sla}</span></td>
                  <td><span className={"pill " + (a.risk === "high" ? "denied" : a.risk === "med" ? "pending" : "approved")}>{a.risk}</span></td>
                  <td><button className="btn sm">Open</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="card" style={{alignSelf: "start", position: "sticky", top: 72}}>
          <div className="card-header">
            <div>
              <div className="card-title">{sel.visitor}</div>
              <div className="card-sub">{sel.id} · {sel.company} · {sel.purpose}</div>
            </div>
            <span className={"pill " + (sel.risk === "high" ? "denied" : sel.risk === "med" ? "pending" : "approved")}>{sel.risk} risk</span>
          </div>
          <div className="card-body stack-lg">
            <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, fontSize: 13}}>
              <div><div className="muted" style={{fontSize: 11.5}}>Host</div><div>{sel.host}</div></div>
              <div><div className="muted" style={{fontSize: 11.5}}>Scheduled</div><div className="tnum">Apr 23 · 10:30</div></div>
              <div><div className="muted" style={{fontSize: 11.5}}>Destination</div><div>Studio 4 · Tower 1 · L2</div></div>
              <div><div className="muted" style={{fontSize: 11.5}}>Duration</div><div>1h 30m</div></div>
            </div>

            <div>
              <div className="muted" style={{fontSize: 11.5, marginBottom: 8}}>Workflow progress</div>
              <div className="stack-sm">
                {[
                  { name: "Host confirmation", by: "Leila Khoury", status: "done", at: "10:42" },
                  { name: "Security review", by: "Security Admin", status: "current", at: "—" },
                  { name: "Compliance & NDA", by: "Hana Yusuf", status: "pending", at: "—" },
                ].map((s, i) => (
                  <div key={i} style={{display: "grid", gridTemplateColumns: "28px 1fr auto", gap: 10, alignItems: "center"}}>
                    <div style={{
                      width: 22, height: 22, borderRadius: "50%",
                      display: "grid", placeItems: "center",
                      background: s.status === "done" ? "var(--accent)" : s.status === "current" ? "var(--surface)" : "var(--surface-2)",
                      border: "1px solid " + (s.status === "current" ? "var(--accent)" : "var(--border-strong)"),
                      color: s.status === "done" ? "#fff" : "var(--ink-3)", fontSize: 11, fontWeight: 600,
                    }}>{s.status === "done" ? <I.Check size={12} sw={2.4}/> : i + 1}</div>
                    <div>
                      <div style={{fontSize: 13, fontWeight: 500}}>{s.name}</div>
                      <div className="muted" style={{fontSize: 11.5}}>{s.by}</div>
                    </div>
                    <div className="tnum muted" style={{fontSize: 12}}>{s.at}</div>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <div className="muted" style={{fontSize: 11.5, marginBottom: 8}}>Submitted documents</div>
              <div className="stack-sm">
                {[
                  { n: "NDA v4.2 — signed", s: "248 KB · PDF" },
                  { n: "Passport scan", s: "1.2 MB · JPG" },
                  { n: "Company letterhead", s: "180 KB · PDF" },
                ].map((d, i) => (
                  <div key={i} style={{display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", border: "1px solid var(--border)", borderRadius: 6}}>
                    <I.Forms sw={1.6}/>
                    <div style={{flex: 1}}>
                      <div style={{fontSize: 13, fontWeight: 500}}>{d.n}</div>
                      <div className="muted" style={{fontSize: 11.5}}>{d.s}</div>
                    </div>
                    <button className="btn sm ghost">View</button>
                  </div>
                ))}
              </div>
            </div>

            <div className="field">
              <label>Decision note</label>
              <textarea className="textarea" placeholder="Optional context for the audit trail…"></textarea>
            </div>

            <div className="hstack" style={{justifyContent: "flex-end"}}>
              <button className="btn danger"><I.X size={13}/> Deny</button>
              <button className="btn">Request info</button>
              <button className="btn primary"><I.Check size={13}/> Approve</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function VipFastTrack() {
  const vips = VISITORS.filter(v => v.type === "vip");
  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">VIP Fast-Track</h1>
          <div className="page-subtitle">Bypass approvals · host escort · private signage · valet</div>
        </div>
        <button className="btn primary"><I.Plus size={14}/> Add VIP</button>
      </div>

      <div className="kpi-grid" style={{gridTemplateColumns: "repeat(3, 1fr)"}}>
        <KPI label="VIP visits today" value="9" delta="+2 vs typical" deltaDir="up" />
        <KPI label="Avg arrival to meeting" value="2m 14s" delta="−38s" deltaDir="up" />
        <KPI label="Satisfaction (post-visit)" value="4.8 / 5" delta="+0.1" deltaDir="up" />
      </div>

      <div className="card" style={{marginBottom: 16}}>
        <div className="card-header">
          <div><div className="card-title">Today · VIP arrivals</div><div className="card-sub">Escorts auto-assigned from host team</div></div>
        </div>
        <table className="table">
          <thead><tr><th>Guest</th><th>Scheduled</th><th>Host</th><th>Entrance</th><th>Escort</th><th>Status</th><th></th></tr></thead>
          <tbody>
            {vips.map(v => (
              <tr key={v.id}>
                <td>
                  <div className="hstack">
                    <Avatar name={v.name} size="sm"/>
                    <div>
                      <div style={{fontWeight: 500}}>{v.name} <span className="pill vip" style={{marginLeft: 6, fontSize: 10}}>VIP</span></div>
                      <div className="muted" style={{fontSize: 12}}>{v.company}</div>
                    </div>
                  </div>
                </td>
                <td className="tnum">{v.scheduled}</td>
                <td>{v.host}</td>
                <td style={{fontSize: 13}}>Executive Entrance · T1</td>
                <td>
                  <div className="hstack">
                    <Avatar name="Samir Farid" size="sm"/>
                    <span style={{fontSize: 13}}>Samir F.</span>
                  </div>
                </td>
                <td>
                  <span className={"pill " + (v.status === "onsite" ? "onsite" : v.status === "approved" ? "approved" : v.status === "pending" ? "pending" : "scheduled")}>
                    <span className="dot"/>{v.status}
                  </span>
                </td>
                <td><button className="btn sm">Manage</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="col-split-2">
        <div className="card">
          <div className="card-header">
            <div><div className="card-title">VIP preferences</div><div className="card-sub">Per-guest preferences — applied automatically on future visits</div></div>
          </div>
          <div className="card-body stack-md">
            {[
              { name: "Hassan Al-Sabah", prefs: ["No lobby photo", "Valet parking", "Arabic signage greeting", "Water — no ice"] },
              { name: "Marcus Chen", prefs: ["Tech demo room preferred", "Charger: USB-C", "No press"] },
              { name: "Johan Lindqvist", prefs: ["Vegan lunch", "Prefer English escort", "Quiet meeting room"] },
            ].map((p, i) => (
              <div key={i} style={{padding: 12, border: "1px solid var(--border)", borderRadius: 8}}>
                <div className="hstack" style={{marginBottom: 8}}>
                  <Avatar name={p.name} size="sm"/>
                  <strong style={{fontWeight: 500}}>{p.name}</strong>
                  <button className="btn sm ghost" style={{marginLeft: "auto"}}><I.Edit size={12}/> Edit</button>
                </div>
                <div className="hstack" style={{flexWrap: "wrap", gap: 6}}>
                  {p.prefs.map(pref => <span key={pref} className="pill vip">{pref}</span>)}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-header">
            <div><div className="card-title">Fast-track rules</div><div className="card-sub">Triggers that grant automatic VIP treatment</div></div>
            <button className="btn sm"><I.Plus size={13}/> New rule</button>
          </div>
          <div className="stack-sm" style={{padding: 6}}>
            {[
              { name: "C-Suite direct report", desc: "When host.title includes 'CEO', 'CFO', 'COO'", status: "active" },
              { name: "Board guest list", desc: "When visitor.email ∈ board-watchlist", status: "active" },
              { name: "Recurring VVIP", desc: "After 5 visits with escort rating > 4.5", status: "active" },
              { name: "Diplomatic credential", desc: "When id.type = 'Diplomatic passport'", status: "paused" },
            ].map((r, i) => (
              <div key={i} style={{display: "grid", gridTemplateColumns: "1fr auto", gap: 10, padding: "10px 14px", borderBottom: i < 3 ? "1px solid var(--border)" : 0, alignItems: "center"}}>
                <div>
                  <div style={{fontSize: 13, fontWeight: 500}}>{r.name}</div>
                  <div className="muted mono" style={{fontSize: 11.5, marginTop: 2}}>{r.desc}</div>
                </div>
                <span className={"pill " + (r.status === "active" ? "approved" : "checkedout")}>{r.status}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { InviteDrawer, Approvals, VipFastTrack });