// ConsumersList — Phase 5+. Chinese end consumers with PII masked by default.
// Demonstrates the MaskedPII atom and the PIPL compliance banner pattern.

const CONSUMERS = [
  { id: "C-2026-0048213", phone: "+86 ●● ●●● 4521", region: "Beijing",   joined: "2026-01-04", orders: 14, gmv: 4280, consent: "marketing_optin" },
  { id: "C-2026-0048214", phone: "+86 ●● ●●● 8902", region: "Shanghai",  joined: "2026-01-04", orders:  9, gmv: 2140, consent: "transactional" },
  { id: "C-2026-0048221", phone: "+86 ●● ●●● 1147", region: "Guangzhou", joined: "2026-01-05", orders: 22, gmv: 8920, consent: "marketing_optin" },
  { id: "C-2026-0048230", phone: "+86 ●● ●●● 3398", region: "Chengdu",   joined: "2026-01-05", orders:  3, gmv:  640, consent: "transactional" },
  { id: "C-2026-0048244", phone: "+86 ●● ●●● 6602", region: "Shenzhen",  joined: "2026-01-06", orders:  1, gmv:  240, consent: "transactional" },
  { id: "C-2026-0048255", phone: "+86 ●● ●●● 0019", region: "Hangzhou",  joined: "2026-01-06", orders:  7, gmv: 1820, consent: "marketing_optin" },
  { id: "C-2026-0048267", phone: "+86 ●● ●●● 7711", region: "Tianjin",   joined: "2026-01-07", orders: 12, gmv: 3460, consent: "withdrawn" },
];

const CONSENT = {
  marketing_optin: { label: "Marketing opt-in", tone: "success" },
  transactional:   { label: "Transactional",   tone: "info" },
  withdrawn:       { label: "Consent withdrawn", tone: "danger" },
};

function ConsumersList() {
  const [revealed, setRevealed] = React.useState(new Set());
  const [region, setRegion] = React.useState(null);
  const regions = Array.from(new Set(CONSUMERS.map(c => c.region)));
  const rows = CONSUMERS.filter(c => !region || c.region === region);

  const reveal = (id) => setRevealed(s => { const n = new Set(s); n.add(id); return n; });

  return (
    <div>
      <div className="page-head">
        <h1>End consumers</h1>
        <span className="count">{rows.length} of {CONSUMERS.length} · Phase 5+ preview</span>
        <div className="right">
          <button className="btn secondary"><i className="ti ti-download"></i>Export (masked)</button>
          <button className="btn secondary"><i className="ti ti-history"></i>Audit reveals</button>
          <button className="btn primary"><i className="ti ti-file-text"></i>DSR queue</button>
        </div>
      </div>

      <div style={{
        background: "var(--color-background-info)",
        border: "0.5px solid var(--color-border-info)",
        color: "var(--color-text-on-info)",
        padding: "10px 14px",
        borderRadius: 8,
        marginBottom: 12,
        display: "flex", alignItems: "center", gap: 10, fontSize: 13
      }}>
        <i className="ti ti-shield-lock" style={{fontSize: 18}}></i>
        <div>
          <strong style={{fontWeight: 500}}>PIPL / PDPA — all PII masked by default.</strong>
          <span style={{marginLeft: 6}}>Revealing a phone number or full identifier writes a `CONSUMER_PII_REVEAL` entry to the WORM audit log with your user ID and reason. Reason code required from Q2 2026.</span>
        </div>
      </div>

      <div className="kpi-row" style={{marginBottom: 16}}>
        <div className="kpi">
          <div className="head"><i className="ti ti-users"></i><span className="lbl">Registered consumers</span></div>
          <div className="val">48,267</div>
          <Sparkline data={[42000, 43200, 44100, 45000, 46100, 47000, 47800, 48267]} width={240} height={28} tone="success" />
          <div className="foot"><span className="up"><i className="ti ti-trending-up" style={{fontSize:13}}></i>+1,200</span> this week</div>
        </div>
        <div className="kpi">
          <div className="head"><i className="ti ti-shopping-cart"></i><span className="lbl">Orders · MTD</span></div>
          <div className="val">12,840</div>
          <Sparkline data={[7800, 8500, 9100, 10200, 10900, 11600, 12300, 12840]} width={240} height={28} tone="success" />
          <div className="foot"><span className="up"><i className="ti ti-trending-up" style={{fontSize:13}}></i>+18%</span> vs last month</div>
        </div>
        <div className="kpi">
          <div className="head"><i className="ti ti-file-text"></i><span className="lbl">Open DSR requests</span></div>
          <div className="val">4</div>
          <Sparkline data={[6, 7, 5, 8, 6, 5, 4, 4]} width={240} height={28} tone="warning" />
          <div className="foot">1 within 24h SLA</div>
        </div>
        <div className="kpi">
          <div className="head"><i className="ti ti-mail-off"></i><span className="lbl">Consent withdrawn</span></div>
          <div className="val">142</div>
          <Sparkline data={[100, 108, 115, 120, 128, 134, 139, 142]} width={240} height={28} tone="danger" />
          <div className="foot">0.29% of base</div>
        </div>
      </div>

      <div className="filter-bar">
        <span className="label-caps">Region</span>
        <span className={"chip" + (region === null ? " active":"")} onClick={() => setRegion(null)}>All</span>
        {regions.map(r => (
          <span key={r} className={"chip" + (region === r ? " active":"")} onClick={() => setRegion(r)}>{r}</span>
        ))}
      </div>

      <div className="table-card">
        <table>
          <thead>
            <tr>
              <th style={{width:170}}>Consumer ID</th>
              <th>Phone (masked)</th>
              <th style={{width:120}}>Region</th>
              <th style={{width:120}}>Joined</th>
              <th style={{width:90, textAlign:"right"}}>Orders</th>
              <th style={{width:120, textAlign:"right"}}>GMV</th>
              <th style={{width:170}}>Consent</th>
              <th style={{width:36}}></th>
            </tr>
          </thead>
          <tbody>
            {rows.map(c => {
              const isRevealed = revealed.has(c.id);
              return (
                <tr key={c.id}>
                  <td className="data-mono">{c.id}</td>
                  <td>
                    <span className="data-mono" style={{marginRight: 8}}>{isRevealed ? "+86 138 472 4521" : c.phone}</span>
                    {!isRevealed && (
                      <span className="audit-link" onClick={() => reveal(c.id)} style={{cursor: "pointer"}}>
                        <i className="ti ti-eye"></i>reveal
                      </span>
                    )}
                    {isRevealed && (
                      <span className="audit-link" style={{color: "var(--color-text-on-warning)"}}>
                        <i className="ti ti-history"></i>logged
                      </span>
                    )}
                  </td>
                  <td>{c.region}</td>
                  <td className="body-sm" style={{color:"var(--on-surface-variant)"}}>{c.joined}</td>
                  <td className="num">{c.orders}</td>
                  <td className="num">¥{c.gmv.toLocaleString()}</td>
                  <td><span className={"pill " + CONSENT[c.consent].tone}>{CONSENT[c.consent].label}</span></td>
                  <td><span className="kebab"><i className="ti ti-dots-vertical"></i></span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.ConsumersList = ConsumersList;