// Dashboard — Sarah's landing screen. Mixes KPI tiles (with sparklines),
// a live activity feed (right rail), pipeline distribution, and the top tenants snapshot.
// Modern but disciplined: tonal surfaces, subtle motion, no decorative gradients.

const ACTIVITY = [
  { t: "32s",   tone: "info",    icon: "ti-broadcast",     who: "Khao Hom Thai",   what: "live session started · 'Spring rice promotion'" },
  { t: "1m",    tone: "success", icon: "ti-check",         who: "System",          what: "sanctions screen cleared · Sanya Traders" },
  { t: "4m",    tone: "warning", icon: "ti-clock-cog",     who: "Bangkok Beauty",  what: "manual review SLA 1h 24m remaining" },
  { t: "11m",   tone: "info",    icon: "ti-user-plus",     who: "Hat Yai Fresh",   what: "identity documents submitted" },
  { t: "23m",   tone: "danger",  icon: "ti-alert-triangle",who: "Bangkok Beauty",  what: "sanctions match · awaiting review" },
  { t: "38m",   tone: "success", icon: "ti-receipt-2",     who: "Pim Suksamran",   what: "approved settlement batch 2026-03-W2 · ¥10.4M CNY" },
  { t: "1h",    tone: "info",    icon: "ti-edit",          who: "Alex Chen",       what: "commission rate adjusted · Khao Hom Thai → 12%" },
  { t: "2h",    tone: "success", icon: "ti-shield-check",  who: "System",          what: "KYC approved · Riang Mai Coffee" },
];

const TOP_TENANTS = [
  { name: "Siam Cosmetic",     mrr: 2840000, trend: [80, 78, 82, 86, 90, 92, 94, 100], tone: "success" },
  { name: "Krua Phuket",       mrr: 1980000, trend: [60, 62, 65, 70, 74, 76, 78, 85],  tone: "success" },
  { name: "Khao Hom Thai",     mrr: 1247500, trend: [50, 55, 58, 60, 62, 64, 68, 70],  tone: "success" },
  { name: "Riang Mai Coffee",  mrr:  620000, trend: [40, 42, 44, 46, 47, 49, 50, 52],  tone: "success" },
  { name: "Lanna Tea",         mrr:  312000, trend: [30, 33, 32, 35, 34, 33, 32, 30],  tone: "neutral" },
  { name: "Thai Wellness",     mrr:  420000, trend: [50, 48, 46, 44, 40, 38, 35, 32],  tone: "danger" },
];

const PIPELINE_DIST = [
  { state: "approved",      label: "Approved",      count: 198, tone: "success" },
  { state: "submitted",     label: "Submitted",     count:  18, tone: "info" },
  { state: "manual_review", label: "Manual review", count:   6, tone: "warning" },
  { state: "rejected",      label: "Rejected",      count:   4, tone: "danger" },
  { state: "expired",       label: "Expired",       count:   2, tone: "neutral" },
];

function Dashboard() {
  const total = PIPELINE_DIST.reduce((s, p) => s + p.count, 0);

  return (
    <div>
      <div className="page-head">
        <h1>Dashboard</h1>
        <span className="count">Mar 18, 2026 · 09:42 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-calendar"></i>Last 7 days</button>
          <button className="btn primary"><i className="ti ti-report"></i>Export report</button>
        </div>
      </div>

      <div className="statusbar fade-up" style={{animationDelay: "20ms", marginBottom: 12}}>
        <div className="item"><span className="live-dot success"></span><span className="key">System</span><span className="val">healthy</span></div>
        <div className="sep"></div>
        <div className="item"><span className="key">Active live sessions</span><span className="val">3</span></div>
        <div className="sep"></div>
        <div className="item"><span className="key">Open SLAs</span><span className="val">2</span></div>
        <div className="sep"></div>
        <div className="item"><span className="key">Last KMS rotation</span><span className="val">12d ago</span></div>
        <div className="right">
          <span className="key">FX</span>
          <span style={{fontFamily:"var(--font-mono)", fontSize:12}}>THB→CNY 1:0.21</span>
          <span style={{fontFamily:"var(--font-mono)", fontSize:12}}>CNY→USD 1:0.140</span>
        </div>
      </div>

      <div className="kpi-row fade-up" style={{animationDelay: "60ms", marginBottom: 16}}>
        <div className="kpi">
          <div className="head"><i className="ti ti-coin"></i><span className="lbl">Platform MRR</span></div>
          <div className="val mono">¥10.4M<span className="iso">CNY</span></div>
          <Sparkline data={[6.4, 6.8, 7.1, 7.6, 8.1, 8.7, 9.4, 10.4]} width={240} height={28} />
          <div className="foot"><span className="up"><i className="ti ti-trending-up" style={{fontSize:13}}></i>+12.4%</span> vs last month</div>
        </div>
        <div className="kpi">
          <div className="head"><i className="ti ti-buildings"></i><span className="lbl">Active tenants</span></div>
          <div className="val">228</div>
          <Sparkline data={[210, 213, 216, 218, 220, 222, 225, 228]} width={240} height={28} tone="success" />
          <div className="foot"><span className="up"><i className="ti ti-trending-up" style={{fontSize:13}}></i>+18 this week</span></div>
        </div>
        <div className="kpi">
          <div className="head"><i className="ti ti-broadcast"></i><span className="lbl">Live sessions / day</span></div>
          <div className="val">47</div>
          <Sparkline data={[28, 32, 35, 31, 40, 44, 46, 47]} width={240} height={28} tone="success" />
          <div className="foot"><span className="up"><i className="ti ti-trending-up" style={{fontSize:13}}></i>+9 vs Mon</span></div>
        </div>
        <div className="kpi">
          <div className="head"><i className="ti ti-shield-half"></i><span className="lbl">Sanctions queue</span></div>
          <div className="val">2</div>
          <Sparkline data={[5, 4, 3, 6, 4, 3, 2, 2]} width={240} height={28} tone="warning" />
          <div className="foot"><span className="down"><i className="ti ti-trending-down" style={{fontSize:13}}></i>−1</span> vs yesterday</div>
        </div>
      </div>

      <div className="dash-grid">
        <div className="dash-left">
          <div className="panel fade-up" style={{animationDelay: "100ms"}}>
            <div className="panel-head">
              <h3>Top tenants by MRR</h3>
              <span className="label-caps">Mar · YTD</span>
              <div className="right"><span className="btn tertiary" style={{fontSize:12}}>Open report <i className="ti ti-arrow-up-right"></i></span></div>
            </div>
            <table>
              <thead>
                <tr>
                  <th>Tenant</th>
                  <th style={{width:160}}>30-day trend</th>
                  <th style={{textAlign:"right"}}>MRR</th>
                </tr>
              </thead>
              <tbody>
                {TOP_TENANTS.map((t, i) => (
                  <tr key={t.name}>
                    <td><div className="org-name">{t.name}</div></td>
                    <td><Sparkline data={t.trend} width={140} height={20} tone={t.tone} mini={true} area={false} /></td>
                    <td className="num">฿{t.mrr.toLocaleString()} THB</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="panel fade-up" style={{animationDelay: "140ms"}}>
            <div className="panel-head">
              <h3>Onboarding pipeline</h3>
              <span className="label-caps">{total} active</span>
            </div>
            <div className="pipe-dist">
              {PIPELINE_DIST.map(p => (
                <div key={p.state} className="pipe-row">
                  <div className="pname">{p.label}</div>
                  <div className="track">
                    <div className={"fill " + p.tone} style={{width: (p.count / total) * 100 + "%"}}></div>
                  </div>
                  <div className="pval">{p.count}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="dash-right">
          <div className="panel fade-up" style={{animationDelay: "180ms"}}>
            <div className="panel-head">
              <h3>Live activity</h3>
              <div className="right"><span className="live-label"><span className="live-dot success"></span>Live</span></div>
            </div>
            <div className="activity">
              {ACTIVITY.map((a, i) => (
                <div key={i} className="activity-row">
                  <div className={"av " + a.tone}><i className={"ti " + a.icon} style={{fontSize:11}}></i></div>
                  <div>
                    <div className="what"><span className="who" style={{fontWeight:500, color:"var(--on-surface)"}}>{a.who}</span> · {a.what}</div>
                  </div>
                  <div className="when">{a.t}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;