// Automations / Rules Builder view
(function() {
  const { useState } = React;
  const { CatPill } = window.UI;

  function RuleCard({ r, expanded, toggle }) {
    return (
      <div style={{ border: '1px solid var(--line)', background: 'var(--bg-1)', marginBottom: 10 }}>
        <div style={{ display: 'flex', alignItems: 'center', padding: '10px var(--pad-x)', gap: 14, cursor: 'pointer' }} onClick={toggle}>
          <span style={{
            width: 10, height: 10, display: 'inline-block',
            background: r.active ? 'var(--pos)' : 'var(--fg-3)',
          }} />
          <span className="mono" style={{ fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.14em' }}>{r.id.toUpperCase()}</span>
          <div style={{ flex: 1, display: 'flex', gap: 10, alignItems: 'center', fontFamily: 'var(--font-mono)', fontSize: 12 }}>
            <span style={{ color: 'var(--cat-violet)' }}>when</span>
            <span style={{ color: 'var(--fg-0)' }}>{r.when}</span>
            <span style={{ color: 'var(--fg-3)' }}>→</span>
            <span style={{ color: 'var(--cat-lime)' }}>then</span>
            <span style={{ color: 'var(--fg-1)' }}>{r.then[0]}{r.then.length > 1 && <span style={{ color: 'var(--fg-3)' }}> +{r.then.length-1}</span>}</span>
          </div>
          <span className="mono" style={{ fontSize: 10, color: 'var(--fg-2)' }}>fired · {r.runs}</span>
          <button className="btn">{r.active ? 'on' : 'off'}</button>
        </div>
        {expanded && (
          <div style={{ padding: '12px var(--pad-x) 14px', borderTop: '1px solid var(--line)', background: 'var(--bg-0)', fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.8 }}>
            <div style={{ color: 'var(--fg-3)' }}>// rule definition · bxdsl v1</div>
            <div><span style={{ color: 'var(--cat-violet)' }}>rule</span> {r.id} {'{'}</div>
            <div style={{ paddingLeft: 16 }}><span style={{ color: 'var(--cat-amber)' }}>when</span> {r.when}</div>
            <div style={{ paddingLeft: 16 }}><span style={{ color: 'var(--cat-amber)' }}>then</span> {'{'}</div>
            {r.then.map((t, i) => (
              <div key={i} style={{ paddingLeft: 32, color: 'var(--fg-0)' }}>{t}<span style={{ color: 'var(--fg-3)' }}>;</span></div>
            ))}
            <div style={{ paddingLeft: 16 }}>{'}'}</div>
            <div>{'}'}</div>
            <div style={{ marginTop: 10, display: 'flex', gap: 6 }}>
              <button className="btn">Edit</button>
              <button className="btn">Test · dry run</button>
              <button className="btn">History</button>
              <button className="btn">Duplicate</button>
            </div>
          </div>
        )}
      </div>
    );
  }

  function Rules() {
    const [open, setOpen] = useState('r1');
    return (
      <div className="page">
        <div className="page-head">
          <div>
            <div className="crumb">workspace<span className="sep">›</span>automations<span className="sep">›</span>rules</div>
            <h1 className="display">Automations <span style={{ color: 'var(--fg-3)', fontStyle: 'italic', fontSize: 22 }}>· rules, schedules, webhooks</span></h1>
            <div className="mono" style={{ fontSize: 11, color: 'var(--fg-2)', marginTop: 6, letterSpacing: '0.1em' }}>
              {DATA.rules.filter(r => r.active).length} active · {DATA.rules.reduce((s,r)=>s+r.runs,0)} total runs · saved 48h/month
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn">Schedules</button>
            <button className="btn">Webhooks</button>
            <button className="btn primary">+ New Rule <kbd>N</kbd></button>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 'var(--gap)' }}>
          <div>
            <div className="sec-label">active · {DATA.rules.filter(r=>r.active).length}</div>
            {DATA.rules.filter(r => r.active).map(r => (
              <RuleCard key={r.id} r={r} expanded={open === r.id} toggle={() => setOpen(open === r.id ? null : r.id)} />
            ))}
            <div className="sec-label">paused · {DATA.rules.filter(r=>!r.active).length}</div>
            {DATA.rules.filter(r => !r.active).map(r => (
              <RuleCard key={r.id} r={r} expanded={open === r.id} toggle={() => setOpen(open === r.id ? null : r.id)} />
            ))}
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap)' }}>
            <div className="panel">
              <div className="panel-head"><span className="panel-title">Scheduled</span></div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, padding: 'var(--pad-x)', display: 'flex', flexDirection: 'column', gap: 8 }}>
                {[
                  ['@daily 06:00', 'reconcile Stripe payouts', 'var(--cat-lime)'],
                  ['@weekly mon', 'generate P&L snapshot', 'var(--cat-cyan)'],
                  ['@monthly 15', 'transfer 30% rev → tax reserve', 'var(--cat-amber)'],
                  ['@monthly 1', 'close prior month books', 'var(--cat-violet)'],
                  ['@quarterly', 'estimated tax payment · IRS', 'var(--cat-blue)'],
                ].map((s, i) => (
                  <div key={i} style={{ display: 'flex', gap: 8 }}>
                    <span style={{ color: s[2], width: 90 }}>{s[0]}</span>
                    <span style={{ color: 'var(--fg-1)' }}>{s[1]}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="panel">
              <div className="panel-head"><span className="panel-title">Activity · 24h</span></div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, padding: 'var(--pad-x)', color: 'var(--fg-1)', lineHeight: 1.9, whiteSpace: 'pre', overflow: 'auto' }}>
{`09:42  r1  AWS → infra          ✓
09:38  r3  Stripe payout → rev  ✓
09:12  r1  Linear → saas        ✓
08:55  r1  Vercel → infra       ✓
08:31  r7  "SQ *" strip         ⧖ paused
23:10  r1  OpenAI → infra       ✓
21:44  r5  Gusto → payroll      ✓
18:02  r1  Anthropic → infra    ✓
14:27  r5  Rippling → contract  ✓
12:58  r2  $4,200 wire flagged  ⚠ review
11:31  r1  United → travel      ✓
09:44  r3  Stripe payout → rev  ✓`}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
  window.RulesView = Rules;
})();