// Alerts — mirrors /dashboard/scheduler.
// Free/Plus: the three seeded defaults. Pro: same list plus Templates / New alert / Set up an alert.
function Alerts() {
  const D = window.ZD_DATA;
  const canCreate = window.ZD_TIER === 'pro';
  const [rules, setRules] = useState(D.alerts);
  const [templatesOpen, setTemplatesOpen] = useState(false);

  const active = rules.filter(r => r.enabled && !r.muted).length;
  const paused = rules.filter(r => r.muted || !r.enabled).length;
  const week = rules.reduce((n, r) => n + r.week, 0);

  const toggle = id => setRules(rules.map(r => r.id === id ? { ...r, enabled: !r.enabled } : r));

  const CHAN = {
    push:     { icon:'bell',            label:'In app' },
    whatsapp: { icon:'message-circle',  label:'WhatsApp' },
  };

  const TEMPLATES = [
    { name:'Big incoming order', blurb:'Flag orders or invoices above a dollar threshold.', when:'Amount ≥ $500' },
    { name:'VIP replies', blurb:'Know the moment a VIP answers you.', when:'Sender is a VIP' },
    { name:'Bill due in 2 days', blurb:'A nudge before anything is due.', when:'2 days before' },
    { name:'Weekly spending summary', blurb:"A Monday recap of the week's money.", when:'Weekly · 9:00 AM' },
  ];

  const EXAMPLES = [
    { group:'Meetings & calendar', prompts:['Notify me when I get a calendar invite', 'Ping me when someone replies to an email I sent'] },
    { group:'Money & orders', prompts:['Notify me when an order or invoice over $5,000 arrives', 'Remind me 2 days before any bill is due'] },
    { group:'Digests & summaries', prompts:['Every morning, summarize what needs me today', 'Send me a weekly summary of spending'] },
  ];

  return (
    <div className="screen-inner alerts-page">
      <div className="statrow">
        <StatCard label="Active alerts" value={active} sub="Watching your inboxes" icon="bell-ring" tint="gold" />
        <StatCard label="Triggered" value={week} sub="Matches this week" icon="zap" tint="green" />
        <StatCard label="Paused" value={paused} sub="Muted for now" icon="pause" tint="purple" />
      </div>

      <div className={canCreate ? 'alerts-layout' : undefined}>
        <div className="card card-pad rise tour-alerts-list">
          <div className="section-h">
            <div>
              <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:18 }}>Your alerts</div>
              <div style={{ fontSize:13, color:'var(--fg-3)', marginTop:2 }}>
                {canCreate
                  ? `${rules.length} rules · tap any rule to edit it`
                  : 'Three watching from day one — pause any you don’t want.'}
              </div>
            </div>
            {canCreate && (
              <div className="alerts-head-actions">
                <button type="button" className="btn btn-secondary" style={{ whiteSpace:'nowrap' }} onClick={() => setTemplatesOpen(true)}>
                  <Icon name="layout-grid" size={15} /> Templates
                </button>
                <button type="button" className="btn btn-primary tour-new-alert" style={{ whiteSpace:'nowrap' }}>
                  <Icon name="plus" size={15} /> New alert
                </button>
              </div>
            )}
          </div>

          <div style={{ marginTop:4 }}>
            {rules.map((r, i) => (
              <div key={r.id} className="alert-row" style={{
                display:'flex', gap:14, alignItems:'flex-start', padding:'15px 0',
                borderBottom:'1px solid var(--border)', opacity: r.enabled ? 1 : 0.55,
              }}>
                <span className="ic-chip" style={{
                  background: r.muted ? 'var(--purple-50)' : r.enabled ? 'var(--gold-100)' : 'var(--surface-sunk)',
                  width:38, height:38, borderRadius:11, display:'grid', placeItems:'center', flex:'none',
                }}>
                  <Icon name={r.muted ? 'bell-off' : 'bell-ring'} size={18}
                        color={r.muted ? 'var(--purple-500)' : r.enabled ? 'var(--gold-600)' : 'var(--fg-4)'} />
                </span>

                <div style={{ minWidth:0, flex:1 }}>
                  <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap' }}>
                    <span style={{ fontWeight:650, fontSize:14.5 }}>{r.name}</span>
                    {r.smart && <span className="pill" style={{ background:'var(--purple-50)', color:'var(--purple-500)' }}>AI check</span>}
                    {r.digest && <span className="pill" style={{ background:'var(--surface-sunk)', color:'var(--fg-3)' }}>{r.digest}</span>}
                    {r.muted && <span className="pill" style={{ background:'var(--purple-50)', color:'var(--purple-500)' }}>Snoozed 2d</span>}
                  </div>

                  <div style={{ fontSize:12.5, color:'var(--fg-3)', marginTop:3 }}>
                    When <b style={{ color:'var(--fg-2)', fontWeight:600 }}>{r.trigger.toLowerCase()}</b>
                    {r.when.length > 0 && <> — {r.when.join(' · ')}</>}
                    {r.lead && <> · {r.lead}</>}
                  </div>
                  {r.smart && (
                    <div style={{ fontSize:12.5, color:'var(--purple-500)', marginTop:3, fontStyle:'italic' }}>
                      “{r.smart}”
                    </div>
                  )}

                  <div style={{ display:'flex', gap:6, marginTop:8, flexWrap:'wrap', alignItems:'center' }}>
                    {r.channels.map(c => (
                      <span key={c} className="pill" style={{ background:'var(--surface-sunk)', color:'var(--fg-3)', display:'inline-flex', gap:4, alignItems:'center' }}>
                        <Icon name={CHAN[c].icon} size={11} /> {CHAN[c].label}
                      </span>
                    ))}
                    {r.task && (
                      <span className="pill" style={{ background:'var(--surface-sunk)', color:'var(--fg-3)', display:'inline-flex', gap:4, alignItems:'center' }}>
                        <Icon name="check-square" size={11} /> Creates a task
                      </span>
                    )}
                    <span style={{ fontSize:11.5, color:'var(--fg-4)', marginLeft:'auto' }}>
                      {r.total} matches · last {r.last.toLowerCase()}
                    </span>
                  </div>
                </div>

                <button
                  className={i === 0 ? 'tour-alert-toggle' : undefined}
                  onClick={() => toggle(r.id)}
                  title={r.enabled ? 'Turn off' : 'Turn on'}
                  aria-label={r.enabled ? `Pause ${r.name}` : `Resume ${r.name}`}
                  style={{
                    flex:'none', width:38, height:22, borderRadius:11, border:'none', cursor:'pointer', padding:2,
                    background: r.enabled ? 'var(--gold-500)' : 'var(--border-strong)',
                    display:'flex', justifyContent: r.enabled ? 'flex-end' : 'flex-start',
                  }}>
                  <span style={{ width:18, height:18, borderRadius:'50%', background:'#fff', display:'block' }} />
                </button>
              </div>
            ))}
          </div>
        </div>

        {canCreate && (
          <div className="card alert-ai-panel tour-alert-setup rise">
            <div className="alert-ai-head">
              <span className="alert-ai-glyph">
                <Icon name="sparkles" size={20} color="var(--gold-600)" />
              </span>
              <div className="alert-ai-titles">
                <div className="alert-ai-title">Set up an alert</div>
                <div className="alert-ai-sub">Describe it — or tap an example</div>
              </div>
            </div>
            <div className="alert-ai-body">
              {EXAMPLES.map(g => (
                <div key={g.group} className="alert-ai-group">
                  <div className="alert-ai-group-label">{g.group}</div>
                  {g.prompts.map(p => (
                    <button type="button" key={p} className="alert-ai-try">
                      <Icon name="corner-down-left" size={14} color="var(--fg-4)" />
                      <span className="alert-ai-try-text"><span className="alert-ai-try-k">Try</span>{p}</span>
                    </button>
                  ))}
                </div>
              ))}
            </div>
            <div className="alert-ai-foot">
              <div className="alert-ai-input">
                <span className="alert-ai-spark"><Icon name="sparkles" size={16} color="var(--gold-600)" /></span>
                <input aria-label="Describe an alert" placeholder="Describe an alert…" readOnly />
                <span className="alert-ai-send" aria-hidden="true"><Icon name="arrow-up" size={16} color="#fff" /></span>
              </div>
            </div>
          </div>
        )}
      </div>

      <div className="card card-pad rise" style={{ marginTop:16 }}>
        <div className="section-h">
          <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:18 }}>Recent matches</div>
          <span style={{ fontSize:12.5, color:'var(--fg-3)' }}>Last 7 days</span>
        </div>
        <div className="noti-list">
          {D.alertMatches.map(m => (
            <div className="noti-row" key={m.id}>
              <span className="noti-ic" style={{ background: m.ai ? 'var(--purple-50)' : 'var(--gold-100)' }}>
                <Icon name={m.ai ? 'sparkles' : 'zap'} size={17} color={m.ai ? 'var(--purple-500)' : 'var(--gold-600)'} />
              </span>
              <div className="noti-main">
                <div className="noti-t">{m.subject}</div>
                <div className="noti-m">
                  {m.rule} · {m.why}{' '}
                  <span style={{ color:'var(--fg-4)' }}>· {m.sender}</span>
                </div>
              </div>
              <span className="noti-when">{m.when}</span>
            </div>
          ))}
        </div>
      </div>

      <p style={{ textAlign:'center', fontSize:12.5, color:'var(--fg-4)', marginTop:14 }}>
        Pause any alert you don’t need — it stays in your list.
      </p>

      {templatesOpen && (
        <div className="modal-scrim" onClick={() => setTemplatesOpen(false)}>
          <div className="modal" style={{ width:640 }} onClick={e => e.stopPropagation()}>
            <button type="button" className="modal-x" onClick={() => setTemplatesOpen(false)} aria-label="Close">
              <Icon name="x" size={16} />
            </button>
            <div className="modal-body">
              <h3>Alert templates</h3>
              <p className="msub">Ready-made alerts — pick one, then tweak the trigger, conditions and actions.</p>
              <div style={{ display:'grid', gap:10, paddingBottom:8 }}>
                {TEMPLATES.map(t => (
                  <div key={t.name} style={{
                    display:'flex', alignItems:'center', gap:12, padding:'12px 14px',
                    border:'1px solid var(--border)', borderRadius:14, background:'var(--surface-sunk)',
                  }}>
                    <span className="ic-chip" style={{ background:'var(--gold-100)', width:36, height:36, borderRadius:10, display:'grid', placeItems:'center', flex:'none' }}>
                      <Icon name="bell" size={16} color="var(--gold-600)" />
                    </span>
                    <div style={{ minWidth:0, flex:1 }}>
                      <div style={{ fontWeight:650, fontSize:14 }}>{t.name}</div>
                      <div style={{ fontSize:12.5, color:'var(--fg-3)', marginTop:2 }}>{t.blurb} · {t.when}</div>
                    </div>
                    <button type="button" className="btn btn-secondary" style={{ flex:'none' }} onClick={() => setTemplatesOpen(false)}>Use</button>
                  </div>
                ))}
              </div>
            </div>
            <div className="modal-foot">
              <button type="button" className="btn btn-ghost" onClick={() => setTemplatesOpen(false)}>Close</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}