// assets/screen_notifications.jsx
function ScreenNotifications({ t }) {
  const [tab, setTab] = React.useState('discord');
  return (
    <div className="page">
      <div className="page-head">
        <h1>Notification channels</h1>
        <span className="page-sub">Discord · Email · In-app</span>
        <div className="page-actions">
          <button className="btn primary"><Icon name="plus" size={12} /> Add channel</button>
        </div>
      </div>

      <div className="tabs">
        <div className={`tab ${tab === 'discord' ? 'active' : ''}`} onClick={() => setTab('discord')}>
          <Icon name="discord" size={12} /> Discord <span className="count">{DISCORD_CHANNELS.length}</span>
        </div>
        <div className={`tab ${tab === 'email' ? 'active' : ''}`} onClick={() => setTab('email')}>
          <Icon name="mail" size={12} /> Email <span className="count">{EMAIL_RECIPIENTS.length}</span>
        </div>
        <div className={`tab ${tab === 'inapp' ? 'active' : ''}`} onClick={() => setTab('inapp')}>
          <Icon name="bell" size={12} /> In-app
        </div>
      </div>

      {tab === 'discord' && <DiscordTab />}
      {tab === 'email' && <EmailTab />}
      {tab === 'inapp' && <InAppTab />}
    </div>
  );
}

function DiscordTab() {
  const [adding, setAdding] = React.useState(false);
  return (
    <div className="grid" style={{ gridTemplateColumns: '1.4fr 1fr', gap: 12 }}>
      <div className="card">
        <div className="card-head">
          <h3>Webhooks</h3>
          <span className="sub">{DISCORD_CHANNELS.length} configured</span>
          <div className="actions"><button className="btn xs" onClick={() => setAdding(a => !a)}><Icon name="plus" size={11} /> Add webhook</button></div>
        </div>
        <div className="card-body flush">
          <table className="tbl">
            <thead><tr>
              <th>Channel</th>
              <th>Webhook URL</th>
              <th>Status</th>
              <th>Subscribed alerts</th>
              <th>Last used</th>
              <th style={{ width: 140 }}></th>
            </tr></thead>
            <tbody>
              {DISCORD_CHANNELS.map(c => (
                <tr key={c.id}>
                  <td><Mono>{c.name}</Mono></td>
                  <td className="dim2"><Mono>{c.url_masked}</Mono></td>
                  <td><Badge kind={c.status === 'ok' ? 'success' : 'warning'} dot>{c.status}</Badge></td>
                  <td>
                    {c.subscribed.map(s => <Badge key={s} kind="neutral" style={{ marginRight: 4 }}>{s}</Badge>)}
                  </td>
                  <td className="dim"><Mono>{formatRel(c.last_used)}</Mono></td>
                  <td>
                    <button className="btn xs"><Icon name="send" size={10} /> Test</button>
                    <button className="btn xs ghost"><Icon name="edit" size={11} /></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          {adding && (
            <div style={{ padding: 14, borderTop: '1px solid var(--border-subtle)', background: 'var(--bg-base)' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr 1fr auto', gap: 8, alignItems: 'end' }}>
                <div>
                  <label className="fs-11 dim2" style={{ display: 'block', marginBottom: 4 }}>Name</label>
                  <input className="input" placeholder="#sq-new-alerts" />
                </div>
                <div>
                  <label className="fs-11 dim2" style={{ display: 'block', marginBottom: 4 }}>Webhook URL</label>
                  <input className="input" placeholder="https://discord.com/api/webhooks/…" />
                </div>
                <div>
                  <label className="fs-11 dim2" style={{ display: 'block', marginBottom: 4 }}>Mention roles (optional)</label>
                  <input className="input" placeholder="&lt;@&amp;123456789&gt;" />
                </div>
                <div style={{ display: 'flex', gap: 6 }}>
                  <button className="btn ghost" onClick={() => setAdding(false)}>Cancel</button>
                  <button className="btn primary">Save</button>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      <div className="flex col gap-3" style={{ gap: 12 }}>
        <div className="card">
          <div className="card-head">
            <h3>Message preview</h3>
            <span className="sub">Discord embed for slow_session</span>
          </div>
          <div className="card-body">
            <div style={{ background: '#36393f', borderRadius: 8, padding: 12, color: '#dcddde', fontFamily: 'ui-sans-serif, system-ui', fontSize: 13, borderLeft: '4px solid #f04747' }}>
              <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 8, color: '#fff' }}>🚨 Slow Session Alert</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px 16px', fontSize: 11.5 }}>
                {DISCORD_EXAMPLE.embeds[0].fields.map(f => (
                  <div key={f.name}>
                    <div style={{ color: '#fff', fontWeight: 600, marginBottom: 1 }}>{f.name}</div>
                    <div style={{ color: '#dcddde', fontFamily: 'var(--font-mono)', fontSize: 10.5 }}>{f.value}</div>
                  </div>
                ))}
              </div>
              <a href="#" style={{ marginTop: 10, display: 'inline-block', color: '#00b0f4', fontSize: 11.5 }}>
                <Icon name="external" size={11} style={{ verticalAlign: 'middle' }} /> View session
              </a>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Embed JSON</h3>
            <span className="sub">payload schema</span>
            <div className="actions"><CopyButton text={JSON.stringify(DISCORD_EXAMPLE, null, 2)} /></div>
          </div>
          <div className="card-body flush">
            <pre className="code-block" style={{ borderRadius: 0, border: 0, margin: 0, maxHeight: 280 }}>{JSON.stringify(DISCORD_EXAMPLE, null, 2)}</pre>
          </div>
        </div>
      </div>
    </div>
  );
}

function EmailTab() {
  const [recipients, setRecipients] = React.useState(EMAIL_RECIPIENTS);
  const [newEmail, setNewEmail] = React.useState('');
  return (
    <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 12 }}>
      <div className="card">
        <div className="card-head">
          <h3>Recipients</h3>
          <span className="sub">via Brevo · {recipients.length} addresses</span>
        </div>
        <div className="card-body">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {recipients.map(r => (
              <div key={r} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', background: 'var(--bg-base)', borderRadius: 'var(--radius)', border: '1px solid var(--border-subtle)' }}>
                <Icon name="mail" size={12} className="dim" />
                <Mono>{r}</Mono>
                <button className="btn xs ghost" style={{ marginLeft: 'auto' }}><Icon name="trash" size={11} /></button>
              </div>
            ))}
            <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
              <input className="input" placeholder="new@shopquantum.io" value={newEmail} onChange={e => setNewEmail(e.target.value)} />
              <button className="btn primary" onClick={() => { if (newEmail) { setRecipients(r => [...r, newEmail]); setNewEmail(''); } }}><Icon name="plus" size={12} /> Add</button>
            </div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Template</h3>
          <span className="sub">Markdown · variables {`{{name}}`} {`{{description}}`} {`{{value}}`}</span>
        </div>
        <div className="card-body">
          <label className="fs-11 dim2" style={{ display: 'block', marginBottom: 4 }}>Subject</label>
          <input className="input" defaultValue="[{{severity}}] {{name}} — ShopQuantum admin alert" />

          <label className="fs-11 dim2" style={{ display: 'block', margin: '12px 0 4px' }}>Body (Markdown)</label>
          <textarea className="input" rows={14} style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, resize: 'vertical' }} defaultValue={`## 🚨 {{name}}

{{description}}

### Details
{{#fields}}
- **{{name}}**: \`{{value}}\`
{{/fields}}

[View in admin →]({{admin_link}})

---
*This is an automated alert from ShopQuantum admin. Configure at /alerts.*`} />
          <div style={{ marginTop: 10, display: 'flex', gap: 8 }}>
            <button className="btn"><Icon name="send" size={12} /> Send test</button>
            <button className="btn primary" style={{ marginLeft: 'auto' }}><Icon name="check" size={12} /> Save template</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function InAppTab() {
  return (
    <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 12 }}>
      <div className="card">
        <div className="card-head"><h3>Settings</h3><span className="sub">always on · poll every 30s</span></div>
        <div className="card-body">
          {[
            ['Show toast notifications', true],
            ['Play sound for critical', true],
            ['Show unread badge', true],
            ['Auto-mark as read on view', false],
          ].map(([l, on]) => (
            <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: '1px solid var(--border-subtle)' }}>
              <span className={`toggle ${on ? 'on' : ''}`} />
              <span style={{ fontSize: 12 }}>{l}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Recent notifications</h3><span className="sub">last 24h</span></div>
        <div className="card-body" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {ALERT_HISTORY.slice(0, 5).map(h => (
            <div key={h.id} style={{ display: 'flex', gap: 10, padding: '8px 10px', background: !h.ack ? 'var(--bg-elevated)' : 'transparent', borderRadius: 'var(--radius)', border: '1px solid var(--border-subtle)' }}>
              <div style={{ width: 6, height: 6, borderRadius: '50%', background: !h.ack ? 'var(--accent)' : 'transparent', marginTop: 8, flexShrink: 0 }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 8 }}>
                  {h.alert_name}
                  <Badge kind={h.severity === 'critical' ? 'danger' : h.severity === 'warning' ? 'warning' : 'info'}>{h.severity}</Badge>
                </div>
                <div className="dim2 fs-11 mono" style={{ marginTop: 2 }}>{h.value}</div>
                <div className="dim fs-11 mono" style={{ marginTop: 2 }}>{formatRel(h.ts)}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenNotifications });