function Tickets({ ctx }) {
  const [view, setView] = React.useState('all');
  return (
    <div className="stack">
      <div className="row between">
        <span className="eyebrow">CUSTOMER SUPPORT · TICKETING</span>
        <div className="row" style={{ gap: 8 }}>
          <button className="btn ghost"><Icon name="filter" size={14} /> Filter</button>
          <button className="btn primary"><Icon name="plus" size={14} /> Buat Ticket</button>
        </div>
      </div>

      <div className="grid grid-5">
        <Stat label="Open" value="9" tone="blue" icon="inbox" />
        <Stat label="In Progress" value="6" tone="indigo" icon="clock" />
        <Stat label="Escalated" value="2" tone="red" icon="flag" />
        <Stat label="Resolved (7d)" value="47" delta="+12" tone="green" icon="check" />
        <Stat label="Avg CSAT" value="4.6" delta="+0.2" tone="amber" icon="star" />
      </div>

      <div className="row" style={{ gap: 6 }}>
        {[['all', 'Semua Ticket', 14], ['open', 'Open', 9], ['progress', 'In Progress', 6], ['escalated', 'Escalated', 2], ['resolved', 'Resolved', 47]].map(([id, l, n]) => (
          <button key={id} className={`chip-filter ${view === id ? 'active' : ''}`} onClick={() => setView(id)}>{l} <span style={{ opacity: .7 }}>{n}</span></button>
        ))}
      </div>

      <div className="ticket-board">
        {TICKETS.map(t => (
          <div key={t.id} className="ticket-card" onClick={() => ctx.notify('Buka ticket ' + t.id)}>
            <div>
              <span className="tid">{t.id}</span>
              <div style={{ marginTop: 4 }}><StatusPill tone={t.priority === 'High' ? 'red' : t.priority === 'Medium' ? 'amber' : 'slate'}>{t.priority}</StatusPill></div>
            </div>
            <div className="tsub">
              <b>{t.subject}</b>
              <small>{t.company}</small>
            </div>
            <div>
              <span style={{ fontSize: 11.5, color: 'var(--muted)', display: 'block' }}>SLA</span>
              <b style={{ fontSize: 13, color: t.sla === 'Resolved' ? 'var(--success)' : t.sla.includes('m') && !t.sla.includes('h') ? 'var(--danger)' : 'var(--text)' }}>{t.sla}</b>
            </div>
            <div>
              <span style={{ fontSize: 11.5, color: 'var(--muted)', display: 'block' }}>Agent</span>
              <div className="cell-user"><Avatar name={t.agent} tone="indigo" /><span style={{ fontSize: 12.5, color: 'var(--text2)' }}>{t.agent}</span></div>
            </div>
            <div>
              <StatusPill tone={t.status === 'resolved' ? 'green' : t.status === 'escalated' ? 'red' : t.status === 'in-progress' ? 'indigo' : t.status === 'waiting' ? 'amber' : 'blue'}>
                <span className="dot" />{t.status.replace('-', ' ')}
              </StatusPill>
            </div>
            <div style={{ textAlign: 'right' }}>
              {t.csat ? (
                <div style={{ color: 'var(--warning)', fontSize: 13 }}><b>{t.csat}.0</b> ★</div>
              ) : (
                <button className="btn ghost sm">View →</button>
              )}
            </div>
          </div>
        ))}
      </div>

      <div className="split-2-1">
        <div className="card">
          <div className="card-head"><h3>Ticket Volume · 7 hari terakhir</h3></div>
          <BarChart data={[{m:'Sen',v:8},{m:'Sel',v:12},{m:'Rab',v:10},{m:'Kam',v:15},{m:'Jum',v:9},{m:'Sab',v:4},{m:'Min',v:3}]} color="#0891b2" height={180} />
        </div>
        <div className="card">
          <div className="card-head"><h3>Escalation Panel</h3><span className="status-pill red">2 perlu manajer</span></div>
          <div className="stack" style={{ gap: 10 }}>
            <div style={{ padding: 14, background: 'var(--danger-soft)', borderRadius: 12 }}>
              <div className="row between" style={{ marginBottom: 6 }}>
                <b style={{ fontSize: 13, color: 'var(--text)' }}>TKT-1040 · Kopi Senja Group</b>
                <span className="status-pill red">Critical</span>
              </div>
              <p style={{ fontSize: 12, color: 'var(--text2)', marginBottom: 8 }}>Sinkronisasi menu antar 12 outlet gagal. Berdampak ke operasional pagi.</p>
              <div className="row" style={{ gap: 6 }}>
                <button className="btn danger sm">Escalate ke Tier 3</button>
                <button className="btn ghost sm">Assign manager</button>
              </div>
            </div>
            <div style={{ padding: 14, background: 'var(--warning-soft)', borderRadius: 12 }}>
              <div className="row between" style={{ marginBottom: 6 }}>
                <b style={{ fontSize: 13, color: 'var(--text)' }}>TKT-1042 · PT Sinar Retail</b>
                <span className="status-pill amber">High</span>
              </div>
              <p style={{ fontSize: 12, color: 'var(--text2)', marginBottom: 8 }}>Login SSO error setelah update. Memengaruhi 80+ user.</p>
              <div className="row" style={{ gap: 6 }}>
                <button className="btn ghost sm">Update status</button>
                <button className="btn ghost sm">Reply customer</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Customer Satisfaction (CSAT)</h3><span className="status-pill green">4.6 / 5.0 · 142 responses</span></div>
        <div className="grid grid-5">
          {[['⭐⭐⭐⭐⭐', 78, 'green'], ['⭐⭐⭐⭐', 18, 'blue'], ['⭐⭐⭐', 3, 'amber'], ['⭐⭐', 1, 'red'], ['⭐', 0, 'red']].map(([s, v, c], i) => (
            <div key={i} style={{ padding: 16, background: 'var(--elev)', borderRadius: 12, textAlign: 'center' }}>
              <div style={{ fontSize: 12, marginBottom: 6 }}>{s}</div>
              <b style={{ fontFamily: 'var(--display)', fontSize: 24, color: `var(--${c})` }}>{v}%</b>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { Tickets });