// Screen 4 — CCC Knowledge Agent (chat)
// Sarah asks about T16 fault code E-47.

function ScreenKnowledge({ onNavigate }) {
  return (
    <div className="main" style={{ padding: '24px 28px 32px' }}>
      <div className="screen" data-screen-label="04 Knowledge Agent">
        <div className="pgheader">
          <div>
            <h1>Knowledge Agent</h1>
            <div className="sub">Service manuals, the Ask portal and every TSB — answered in plain English, with sources.</div>
          </div>
          <div className="right">
            <button className="tn-btn tn-btn--ghost tn-btn--sm"><Icon name="history" size={14} /> History</button>
            <button className="tn-btn tn-btn--secondary tn-btn--sm">Save thread</button>
            <button className="tn-btn tn-btn--primary tn-btn--sm">New question</button>
          </div>
        </div>

        <div className="chat-shell">
          {/* Sidebar — recent + saved */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div className="kn-side">
              <div className="h">Recent questions</div>
              <div className="item">
                <Icon name="message" size={14} className="ic" />
                <div>
                  <div className="nm">T16 fault E-47 — what is it?</div>
                  <div className="mt">just now</div>
                </div>
              </div>
              <div className="item">
                <Icon name="message" size={14} className="ic" />
                <div>
                  <div className="nm">S30 hydraulic pressure — service interval</div>
                  <div className="mt">Fri 15 May</div>
                </div>
              </div>
              <div className="item">
                <Icon name="message" size={14} className="ic" />
                <div>
                  <div className="nm">Woolworths Tier 1 freight terms</div>
                  <div className="mt">Wed 13 May</div>
                </div>
              </div>
              <div className="item">
                <Icon name="message" size={14} className="ic" />
                <div>
                  <div className="nm">ec-H2O membrane replacement window</div>
                  <div className="mt">Mon 11 May</div>
                </div>
              </div>
              <div className="item">
                <Icon name="message" size={14} className="ic" />
                <div>
                  <div className="nm">M30 LPG conversion — AU compliance</div>
                  <div className="mt">Fri 8 May</div>
                </div>
              </div>
            </div>

            <div className="kn-side">
              <div className="h">Saved answers</div>
              <div className="item">
                <Icon name="shield" size={14} className="ic" style={{ color: 'var(--tn-amber-600)' }} />
                <div>
                  <div className="nm">T16 battery fault codes — quick ref</div>
                  <div className="mt">12 sources</div>
                </div>
              </div>
              <div className="item">
                <Icon name="shield" size={14} className="ic" style={{ color: 'var(--tn-amber-600)' }} />
                <div>
                  <div className="nm">Glad rules · quote-first checklist</div>
                  <div className="mt">3 sources</div>
                </div>
              </div>
              <div className="item">
                <Icon name="shield" size={14} className="ic" style={{ color: 'var(--tn-amber-600)' }} />
                <div>
                  <div className="nm">E-WAF template · Woolworths AP</div>
                  <div className="mt">2 sources</div>
                </div>
              </div>
            </div>

            <div style={{ background: 'var(--tn-blue-50)', border: '1px solid #B3DCEE', borderRadius: 4, padding: 14, fontSize: 12, color: 'var(--tn-blue-900)' }}>
              <div style={{ display: 'flex', gap: 8, alignItems: 'center', fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 11.5, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--tn-blue-700)', marginBottom: 6 }}>
                <Icon name="bolt" size={12} /> Connected sources
              </div>
              <div style={{ lineHeight: 1.55 }}>
                Service manuals (412), Ask Portal threads (8,917), TSBs (231), IRIS Asset Manager, parts catalogue, account rule books.
              </div>
            </div>
          </div>

          {/* Chat */}
          <div className="chat-pane" data-comment-anchor="chat">
            <div className="chat-header">
              <span className="badge">Knowledge</span>
              <span className="ttl">Thread · T16 fault E-47</span>
              <span className="sub">started 08:12 AEST</span>
              <div style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>4 sources · 1.2 s</div>
            </div>

            <div className="chat-body">
              {/* User question */}
              <div className="msg user">
                <div className="av">SM</div>
                <div className="bubble">
                  <div className="nm">Sarah Mitchell <span className="tm">08:12</span></div>
                  <div className="content">
                    What's fault code <b>E-47</b> on the T16 mean, and how do I tell the customer? Marsden Park RDC has 2 units showing it.
                  </div>
                </div>
              </div>

              {/* AI response */}
              <div className="msg ai">
                <div className="av"><Icon name="sparkles" size={16} /></div>
                <div className="bubble">
                  <div className="nm">Knowledge Agent <span className="tm">08:12 · 1.2 s</span></div>
                  <div className="content">
                    <div className="section">
                      <div className="h">What E-47 means</div>
                      <p>
                        <b>E-47 · Brush motor over-current</b>. The main scrub-brush motor is drawing more current than the controller will allow for &gt;15 s.
                        On the T16 this fault almost always points to one of three causes, in order of likelihood:
                      </p>
                      <ol>
                        <li><b>Debris jammed in the brush deck</b> — strapping, shrink-wrap, pallet bands. Most common at retail DCs.</li>
                        <li><b>Worn or seized brush bearing</b> — the brush won't spin freely by hand.</li>
                        <li><b>Brush motor connector water ingress</b> — common after ec-H2O hose splits.</li>
                      </ol>
                    </div>

                    <div className="section">
                      <div className="h ok">Troubleshooting · what the operator can check now</div>
                      <ol>
                        <li>Power down at the key switch · isolate the battery.</li>
                        <li>Lift the brush deck and inspect for debris wrapped around the brush shaft.</li>
                        <li>Spin each brush by hand — should rotate cleanly, no grind.</li>
                        <li>Inspect the motor connector under the deck for moisture or green corrosion.</li>
                        <li>Reset the fault: hold <span className="hl">RESET</span> + <span className="hl">▼</span> for 5 s.</li>
                      </ol>
                      <p>If E-47 clears after a debris pull, log a watch-job. If it re-trips within an hour, dispatch a tech — brush motor swap is a 90 min job onsite.</p>
                    </div>

                    <div className="summary-box" data-comment-anchor="cust-summary">
                      <div className="h">Customer-friendly summary · ready to paste</div>
                      "Hi — fault code E-47 means the main scrub brush is being held back from spinning, almost always because something's wrapped around the shaft (strapping, plastic). If your operator can lift the deck and clear any debris, then hold RESET + the down arrow for 5 seconds, the unit should come back. If it trips again within the hour, leave it down — we'll get a tech onsite to check the brush motor. I'll book one provisionally for this afternoon."
                    </div>

                    <div className="cite-chips">
                      <span className="cite-chip"><span className="ix">1</span> T16 Service Manual · p.142</span>
                      <span className="cite-chip"><span className="ix">2</span> Ask Portal thread #4892 — "E-47 at Coles, 3 strikes"</span>
                      <span className="cite-chip"><span className="ix">3</span> TSB-2024-031 · brush motor connector ingress</span>
                      <span className="cite-chip"><span className="ix">4</span> IRIS · T16-AU2218 service history</span>
                    </div>

                    <div className="followups">
                      <span className="followup" onClick={() => onNavigate(2)}><Icon name="send" size={12} /> Draft a customer reply</span>
                      <span className="followup" onClick={() => onNavigate(3)}><Icon name="parts" size={12} /> Find the brush motor part</span>
                      <span className="followup"><Icon name="tool" size={12} /> Log this as a service request</span>
                      <span className="followup"><Icon name="calendar" size={12} /> Book a tech at Marsden Park</span>
                      <span className="followup"><Icon name="external" size={12} /> Open the TSB</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="chat-input">
              <Icon name="message" size={16} style={{ color: 'var(--fg-3)' }} />
              <div className="field">Ask a follow-up · "What's the brush motor part number for the T16?"</div>
              <button className="tn-btn tn-btn--primary tn-btn--sm"><Icon name="send" size={13} stroke={2.4} /> Send</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ScreenKnowledge = ScreenKnowledge;