// Overview — Daniel Park's landing. Five hero KPIs + geo split + quarterly perf + compliance health.

function Overview({ period }) {
  return (
    <div>
      <div className="page-head">
        <h1>Executive overview</h1>
        <span className="count">{period} · Mar 18, 2026 · UTC</span>
        <div className="right">
          <button className="btn secondary"><i className="ti ti-refresh"></i>Refresh</button>
          <button className="btn secondary"><i className="ti ti-share"></i>Share with board</button>
          <button className="btn primary"><i className="ti ti-file-text"></i>Open quarterly pack</button>
        </div>
      </div>

      <div className="reveal-gate">
        <i className="ti ti-shield-lock" style={{fontSize:18}}></i>
        <div>
          <strong style={{fontWeight:500}}>Aggregated only.</strong>
          <span style={{marginLeft:6}}>Row-level drill into a tenant or KOL records a `EXEC_DRILL` entry in the audit log with your user ID and reason code (D7 + D10).</span>
        </div>
      </div>

      {/* Hero KPIs */}
      <div className="exec-hero">
        <div className="kpi lead">
          <div className="head"><i className="ti ti-coin"></i><span className="lbl">Platform GMV · {period}</span></div>
          <div className="val mono">$24.8M<span className="iso">USD</span></div>
          <Sparkline data={[14, 15.2, 16.8, 18.4, 19.6, 21.2, 22.8, 24.8]} width={280} height={32} />
          <div className="foot"><span className="up"><i className="ti ti-trending-up" style={{fontSize:13}}></i>+24.8%</span> vs last quarter</div>
        </div>
        <div className="kpi">
          <div className="head"><i className="ti ti-receipt-2"></i><span className="lbl">MRR</span></div>
          <div className="val mono">$1.46M<span className="iso">USD</span></div>
          <Sparkline data={[0.94, 1.02, 1.12, 1.20, 1.28, 1.34, 1.40, 1.46]} width={200} height={28} tone="success" />
          <div className="foot"><span className="up">+12.4%</span> MoM</div>
        </div>
        <div className="kpi">
          <div className="head"><i className="ti ti-buildings"></i><span className="lbl">Active tenants</span></div>
          <div className="val">247</div>
          <Sparkline data={[180, 192, 204, 215, 224, 232, 240, 247]} width={200} height={28} tone="success" />
          <div className="foot"><span className="up">+18</span> this quarter</div>
        </div>
        <div className="kpi">
          <div className="head"><i className="ti ti-percentage"></i><span className="lbl">Gross margin</span></div>
          <div className="val">38.4%</div>
          <Sparkline data={[34, 34.5, 35.2, 36, 36.8, 37.4, 38, 38.4]} width={200} height={28} tone="success" />
          <div className="foot"><span className="up">+1.2pp</span> vs target</div>
        </div>
        <div className="kpi">
          <div className="head"><i className="ti ti-user-minus"></i><span className="lbl">Tenant churn</span></div>
          <div className="val">2.1%</div>
          <Sparkline data={[3.2, 3.0, 2.8, 2.6, 2.5, 2.3, 2.2, 2.1]} width={200} height={28} tone="success" />
          <div className="foot"><span className="up"><i className="ti ti-trending-down" style={{fontSize:13}}></i>−0.8pp</span> vs Q4</div>
        </div>
      </div>

      <div className="dash-grid" style={{gridTemplateColumns: "1.4fr 1fr"}}>
        <div className="dash-left">
          {/* Geo breakdown */}
          <div className="panel" style={{padding: 0}}>
            <div className="panel-head" style={{padding: "16px 18px 0"}}>
              <h3>Cross-border flow</h3>
              <span className="label-caps">Mar · Producer-side → Consumer-side</span>
            </div>
            <div className="geo">
              <div className="country">
                <div style={{display:"flex", alignItems:"center", gap:10}}>
                  <span className="flag">🇹🇭</span>
                  <div>
                    <div className="name">Producer-side · TH</div>
                    <div className="body-sm" style={{color:"var(--on-surface-variant)"}}>208 active producers · 11 regions</div>
                  </div>
                </div>
                <div className="val">฿24.8M <span className="iso" style={{fontSize:13, color:"var(--on-surface-variant)"}}>THB</span></div>
                <div className="delta">+18.4% MoM · ≈ $720K USD</div>
                <div className="bar"><div className="fill" style={{width:"72%"}}></div></div>
                <div className="body-sm" style={{color:"var(--on-surface-variant)"}}>72% of platform GMV originates here</div>
              </div>
              <div className="country">
                <div style={{display:"flex", alignItems:"center", gap:10}}>
                  <span className="flag">🇨🇳</span>
                  <div>
                    <div className="name">Consumer-side · CN</div>
                    <div className="body-sm" style={{color:"var(--on-surface-variant)"}}>48,267 consumers · 32 cities</div>
                  </div>
                </div>
                <div className="val">¥118M <span className="iso" style={{fontSize:13, color:"var(--on-surface-variant)"}}>CNY</span></div>
                <div className="delta">+22.1% MoM · ≈ $16.5M USD</div>
                <div className="bar"><div className="fill" style={{width:"94%"}}></div></div>
                <div className="body-sm" style={{color:"var(--on-surface-variant)"}}>94% target attainment for Q1</div>
              </div>
            </div>
          </div>

          {/* Quarterly performance — simple stacked bars */}
          <div className="panel">
            <div className="panel-head">
              <h3>Quarterly performance</h3>
              <span className="label-caps">GMV in USD · last 6 quarters</span>
            </div>
            <QuarterlyChart />
          </div>
        </div>

        <div className="dash-right">
          {/* Compliance snapshot */}
          <div className="panel">
            <div className="panel-head">
              <h3>Compliance health</h3>
              <span className="live-label" style={{color: "var(--color-text-on-success)"}}><span className="live-dot success"></span>Healthy</span>
            </div>
            <div className="compliance-strip" style={{gridTemplateColumns: "1fr 1fr"}}>
              <div className="compliance-item">
                <div className="name">DSR SLA</div>
                <div className="val">100%</div>
                <div className="meta">12 of 12 within 30d</div>
              </div>
              <div className="compliance-item">
                <div className="name">Sanctions auto-clear</div>
                <div className="val">94.2%</div>
                <div className="meta">+0.4pp vs target</div>
              </div>
              <div className="compliance-item">
                <div className="name">Audit coverage</div>
                <div className="val">99.98%</div>
                <div className="meta">2 events flagged</div>
              </div>
              <div className="compliance-item">
                <div className="name">KMS rotation</div>
                <div className="val">12d</div>
                <div className="meta">last rotation</div>
              </div>
            </div>
          </div>

          {/* Targets card — sensitive ops gate (I7) */}
          <div className="panel">
            <div className="panel-head">
              <h3>2026 targets</h3>
              <span className="label-caps">Annual · I7</span>
            </div>
            <div className="pipe-dist">
              <div className="pipe-row">
                <div className="pname">GMV · $100M</div>
                <div className="track"><div className="fill primary" style={{width:"24.8%"}}></div></div>
                <div className="pval">24.8%</div>
              </div>
              <div className="pipe-row">
                <div className="pname">MRR · $2M</div>
                <div className="track"><div className="fill success" style={{width:"73%"}}></div></div>
                <div className="pval">73%</div>
              </div>
              <div className="pipe-row">
                <div className="pname">Tenants · 500</div>
                <div className="track"><div className="fill info" style={{width:"49%"}}></div></div>
                <div className="pval">49%</div>
              </div>
              <div className="pipe-row">
                <div className="pname">Margin · 42%</div>
                <div className="track"><div className="fill warning" style={{width:"91%"}}></div></div>
                <div className="pval">91%</div>
              </div>
            </div>
            <button className="btn tertiary" style={{alignSelf:"flex-start", marginTop:6, fontSize:12}}>
              <i className="ti ti-lock"></i>Adjust target (requires dual approval)
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function QuarterlyChart() {
  const quarters = [
    { q: "Q1 '25", value: 9.2 },
    { q: "Q2 '25", value: 11.6 },
    { q: "Q3 '25", value: 13.8 },
    { q: "Q4 '25", value: 17.4 },
    { q: "Q1 '26", value: 24.8 },
    { q: "Q2 '26", value: 0, projected: 30 },
  ];
  const max = Math.max(...quarters.map(q => q.projected || q.value));
  return (
    <div style={{display: "flex", alignItems: "flex-end", gap: 14, height: 200, padding: "12px 4px 0"}}>
      {quarters.map(q => {
        const h = (q.value / max) * 180;
        const ph = q.projected ? (q.projected / max) * 180 : 0;
        const isProj = q.projected && !q.value;
        return (
          <div key={q.q} style={{flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 6}}>
            <div style={{fontFamily:"var(--font-mono)", fontSize: 11, color: "var(--on-surface)", fontWeight: 500}}>${isProj ? q.projected : q.value}M</div>
            <div style={{
              width: "100%",
              height: isProj ? ph : h,
              background: isProj
                ? "repeating-linear-gradient(45deg, var(--surface-container) 0 6px, var(--surface-container-low) 6px 12px)"
                : "var(--thaihao-primary)",
              border: isProj ? "0.5px dashed var(--outline)" : "none",
              borderRadius: "4px 4px 0 0",
              transition: "height 600ms cubic-bezier(0.22, 1, 0.36, 1)"
            }}></div>
            <div style={{fontFamily:"var(--font-sans)", fontSize: 11, color: isProj ? "var(--on-surface-variant)" : "var(--on-surface)"}}>
              {q.q}{isProj && " · proj"}
            </div>
          </div>
        );
      })}
    </div>
  );
}

window.Overview = Overview;