// Screen 5 — Per-Customer Rules Engine surfacing context
// Glad Manufacturing inquiry with the rules panel persistent on the right.

function ScreenRules({ onNavigate }) {
  return (
    <div className="main" style={{ padding: '24px 28px 32px' }}>
      <div className="screen" data-screen-label="05 Account Rules">
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12.5, color: 'var(--fg-2)', marginBottom: 12 }}>
          <a style={{ color: 'var(--fg-link)', cursor: 'pointer' }} onClick={() => onNavigate(1)}>Inbox</a>
          <span style={{ color: 'var(--fg-3)' }}>/</span>
          <a style={{ color: 'var(--fg-link)', cursor: 'pointer' }}>Key Accounts</a>
          <span style={{ color: 'var(--fg-3)' }}>/</span>
          <span>Glad Manufacturing</span>
        </div>

        <div className="pgheader">
          <div>
            <h1>Glad Manufacturing</h1>
            <div className="sub">Tier 1 · 6 machines · service agreement v4.2 · valid through 30 Sep 2026</div>
          </div>
          <div className="right">
            <button className="tn-btn tn-btn--ghost tn-btn--sm"><Icon name="history" size={14} /> Account history</button>
            <button className="tn-btn tn-btn--ghost tn-btn--sm"><Icon name="file_text" size={14} /> Agreement</button>
            <button className="tn-btn tn-btn--secondary tn-btn--sm">Edit rules</button>
            <button className="tn-btn tn-btn--primary tn-btn--sm">Compose</button>
          </div>
        </div>

        <div className="rules-page">
          {/* LEFT — account body */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            {/* Customer card */}
            <div className="cust-card" data-comment-anchor="cust-card">
              <div className="top">
                <div className="logo">G</div>
                <div style={{ flex: 1 }}>
                  <h2>Glad Manufacturing Pty Ltd</h2>
                  <div className="meta">
                    <span className="tn-tier tn-tier--gold">Tier 1</span>
                    <span style={{ fontSize: 12.5, color: 'var(--fg-2)' }}>Smithfield Plant · 81 Long St, Smithfield NSW 2164</span>
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>Account #</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 600 }}>GL-AU-00482</div>
                </div>
              </div>
              <div className="info-grid">
                <div className="col">
                  <div className="lab">Account manager</div>
                  <div className="val">Mitch Hardy</div>
                  <div className="sub">+61 412 998 ●●● · mitch.h@tennantco.com</div>
                </div>
                <div className="col">
                  <div className="lab">Primary site contact</div>
                  <div className="val">Bec Latham</div>
                  <div className="sub">Maintenance lead · weekdays 06:00–14:00</div>
                </div>
                <div className="col">
                  <div className="lab">AP contact</div>
                  <div className="val">Helen Vu</div>
                  <div className="sub">ap@gladmfg.com.au · NET 30</div>
                </div>
                <div className="col">
                  <div className="lab">Preferred tech</div>
                  <div className="val">Marcus Owen</div>
                  <div className="sub">Sydney west · ID T-AU-118</div>
                </div>
              </div>
            </div>

            {/* AI suggestion banner */}
            <div className="suggest-banner" data-comment-anchor="suggest">
              <div className="ic"><Icon name="sparkles" size={16} /></div>
              <div className="body">
                <div className="h">This looks like a parts query · Glad's "quote-first" rule applies.</div>
                <div className="sub">I've matched a T20 rear squeegee assembly from Bec's 07:42 message. <b>Want me to generate the quote draft</b> instead of replying with a part recommendation directly?</div>
              </div>
              <button className="tn-btn tn-btn--ghost tn-btn--sm">Dismiss</button>
              <button className="tn-btn tn-btn--primary tn-btn--sm" onClick={() => onNavigate(3)}>Generate quote draft <Icon name="arrow_right" size={12} /></button>
            </div>

            {/* Service agreement at a glance */}
            <div className="card" style={{ padding: 24 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
                <Icon name="shield" size={16} style={{ color: 'var(--tn-blue-600)' }} />
                <h3 style={{ margin: 0, fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 14 }}>Service agreement at a glance</h3>
                <span className="tn-badge tn-badge--brand" style={{ marginLeft: 'auto' }}>v4.2 · current</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }}>
                <div>
                  <div className="overline">Fleet</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, color: 'var(--tn-navy)' }}>6</div>
                  <div style={{ fontSize: 12, color: 'var(--fg-2)' }}>T20 sweepers · Smithfield</div>
                </div>
                <div>
                  <div className="overline">SLA · response</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, color: 'var(--tn-blue-500)' }}>4 h</div>
                  <div style={{ fontSize: 12, color: 'var(--fg-2)' }}>Mon–Fri · 07:00–18:00</div>
                </div>
                <div>
                  <div className="overline">Consumables</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, color: 'var(--tn-success-500)' }}>Included</div>
                  <div style={{ fontSize: 12, color: 'var(--fg-2)' }}>Pads, squeegees, brooms</div>
                </div>
                <div>
                  <div className="overline">Renewal</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, color: 'var(--tn-navy)' }}>Sep</div>
                  <div style={{ fontSize: 12, color: 'var(--fg-2)' }}>30 Sep 2026 · auto-renew</div>
                </div>
              </div>
            </div>

            {/* Last 3 jobs */}
            <div className="jobs-list">
              <div className="h"><Icon name="tool" size={14} style={{ color: 'var(--fg-2)' }} /> Last 3 jobs</div>
              <div className="item">
                <div className="wo">WO-GL-22411</div>
                <div>
                  <div className="ttl">T20-AU-3091 · scheduled service · 1000 h</div>
                  <div className="meta">Marcus Owen · 14 May · invoiced $1,240 · E-WAF on file</div>
                </div>
                <div><span className="tn-badge tn-badge--success"><span className="tn-dot"></span>Completed</span></div>
              </div>
              <div className="item">
                <div className="wo">WO-GL-22388</div>
                <div>
                  <div className="ttl">T20-AU-3088 · side broom replacement</div>
                  <div className="meta">Marcus Owen · 02 May · invoiced $312 · written approval 28 Apr</div>
                </div>
                <div><span className="tn-badge tn-badge--success"><span className="tn-dot"></span>Completed</span></div>
              </div>
              <div className="item">
                <div className="wo">WO-GL-22340</div>
                <div>
                  <div className="ttl">T20-AU-3092 · battery diagnostic + cell swap</div>
                  <div className="meta">Marcus Owen · 22 Apr · invoiced $1,815 · written approval 18 Apr</div>
                </div>
                <div><span className="tn-badge tn-badge--success"><span className="tn-dot"></span>Completed</span></div>
              </div>
            </div>

            {/* Current open issues */}
            <div className="jobs-list">
              <div className="h"><Icon name="warning" size={14} style={{ color: 'var(--tn-amber-600)' }} /> Currently open</div>
              <div className="item">
                <div className="wo">WO-GL-22463</div>
                <div>
                  <div className="ttl">T20-AU-3090 · rear squeegee assembly — quote pending</div>
                  <div className="meta">Inbound 07:42 today · AI-drafted quote ready · awaiting Bec's approval</div>
                </div>
                <div><span className="tn-badge tn-badge--warning"><span className="tn-dot"></span>Quote pending</span></div>
              </div>
            </div>
          </div>

          {/* RIGHT — sticky Rules panel */}
          <div className="rules-panel" data-comment-anchor="rules-panel">
            <h3><Icon name="lock" size={14} className="lock" /> Account rules · Glad</h3>
            <div className="src-note">4 rules · last reviewed by Mitch Hardy · 02 May 2026</div>

            <div className="rule">
              <div className="num">1</div>
              <div>
                <div className="body"><span className="em">Quote first.</span> Do not proceed with parts or service work without <b>written approval</b> from Bec Latham or Helen Vu (AP).</div>
                <div className="meta">applied in 3 jobs · last 30 d</div>
              </div>
            </div>
            <div className="rule">
              <div className="num">2</div>
              <div>
                <div className="body">Consumables (pads, squeegees, brooms) are <b>included in the service agreement</b> — bill against PO covered by §2.1, never charge separately.</div>
                <div className="meta">Service agreement v4.2 · §2.1</div>
              </div>
            </div>
            <div className="rule">
              <div className="num">3</div>
              <div>
                <div className="body">Site contact must be <b>notified 24 hours before</b> any visit. Default contact · Bec Latham (mobile). Cc Mitch Hardy on all confirmations.</div>
                <div className="meta">applied in 2 jobs · last 30 d</div>
              </div>
            </div>
            <div className="rule">
              <div className="num">4</div>
              <div>
                <div className="body">SLA · <b>4-hour response</b>, Mon–Fri 07:00–18:00. After-hours callouts require Mitch Hardy's verbal approval before despatch.</div>
                <div className="meta">Service agreement v4.2 · §3</div>
              </div>
            </div>

            <div style={{ marginTop: 20, padding: '14px 16px', background: 'var(--tn-steel-50)', border: '1px solid var(--border-1)', borderRadius: 4, fontSize: 12, color: 'var(--fg-2)', display: 'flex', gap: 10, alignItems: 'flex-start', lineHeight: 1.55 }}>
              <Icon name="bolt" size={14} style={{ color: 'var(--tn-amber-600)', flex: 'none', marginTop: 1 }} />
              <span>These rules are applied automatically to every AI reply, draft, and quote on this account. <a style={{ color: 'var(--fg-link)', cursor: 'pointer' }}>View rule history ›</a></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ScreenRules = ScreenRules;