// TenantDrawer — right-side detail drawer with inline AuditLink + AuditTrailStream.

function TenantDrawer({ tenant, open, onClose }) {
  if (!tenant) return null;
  const audit = [
    { what: "Sanctions screening passed",       when: "2026-03-15 09:42:11 UTC", actor: "System (sanctions adapter)", reason: "all 4 providers clear" },
    { what: "KYC documents approved",           when: "2026-03-15 09:51:33 UTC", actor: "Pim Suksamran · Compliance", reason: "kyc_complete_full_match" },
    { what: "Onboarding state → approved",      when: "2026-03-15 09:51:35 UTC", actor: "System (pipeline)" },
    { what: "Brand created · Khao Hom Premium", when: "2026-03-16 03:18:00 UTC", actor: "Khun Somchai · Producer owner" },
    { what: "Commission rate adjusted to 12%",  when: "2026-03-18 11:02:14 UTC", actor: "Alex Chen · Sales",            reason: "promo_q1_2026 · negotiated rate" },
  ];

  return (
    <React.Fragment>
      <div className={"scrim " + (open?"open":"")} onClick={onClose}></div>
      <aside className={"drawer " + (open?"open":"")} aria-hidden={!open}>
        <header className="drawer-head">
          <div className="org">
            <div className="av" style={{width:32, height:32, fontSize:14}}>{tenant.initial}</div>
            <div>
              <div className="org-name" style={{fontSize:15}}>{tenant.name}</div>
              <div className="org-id">{tenant.tax}</div>
            </div>
          </div>
          <span className="x" onClick={onClose} aria-label="Close"><i className="ti ti-x"></i></span>
        </header>
        <div className="drawer-body">
          <div className="line"><div className="k">Status</div><div className="v"><span className={"pill dot success"}><span className="d"></span>Active</span></div></div>
          <div className="line"><div className="k">Territory</div><div className="v">{tenant.territory}</div></div>
          <div className="line"><div className="k">Brands</div><div className="v">{tenant.brands}</div></div>
          <div className="line"><div className="k">Users</div><div className="v">7 (1 owner · 3 brand managers · 3 staff)</div></div>
          <div className="line"><div className="k">MRR contribution</div><div className="v mono">฿{tenant.mrr.toLocaleString()} THB <span className="audit-link"><i className="ti ti-link"></i>audit</span></div></div>
          <div className="line"><div className="k">Settlement balance</div><div className="v mono">¥262,000 CNY <span className="pill warning" style={{marginLeft:6}}>Provisional</span> <span className="audit-link"><i className="ti ti-link"></i>audit</span></div></div>
          <div className="line"><div className="k">Onboarding pipeline</div><div className="v">approved · 2026-03-15</div></div>
          <div className="line"><div className="k">Last sanctions screen</div><div className="v">2026-03-15 (clear)</div></div>

          <div className="label-caps" style={{marginTop:18, marginBottom:8}}>Audit trail · last 7 days</div>
          <div className="audit-stream">
            {audit.map((e, i) => (
              <div key={i} className="audit-entry">
                <div className="marker" style={i===0?{background:"var(--color-text-on-success)"}:{}}></div>
                <div className="body">
                  <div className="what">{e.what}</div>
                  <div className="when">{e.when}</div>
                  <div className="actor">{e.actor}</div>
                  {e.reason && <div className="reason">reason · {e.reason}</div>}
                </div>
              </div>
            ))}
          </div>
        </div>
      </aside>
    </React.Fragment>
  );
}

window.TenantDrawer = TenantDrawer;