// Screen 3 — Parts Query Interpreter
// Glad asking about a "squeegee for the T20".

const { useState: useState3 } = React;

function ScreenParts({ onNavigate }) {
  const [selected, setSelected] = useState3('1042-T20-RR');

  const parts = [
    {
      id: '1042-T20-RR',
      pn: '1042-T20-RR',
      name: 'Rear squeegee assembly · linatex blade',
      desc: 'Replacement OEM rear squeegee for T20 industrial sweeper. Linatex blade, 1.20 m wide.',
      au: { qty: 14, status: 'in' },
      nz: { qty: 3, status: 'low' },
      price: '$486.00',
      pick: true,
    },
    {
      id: '1042-T20-RR-PU',
      pn: '1042-T20-RR-PU',
      name: 'Rear squeegee assembly · polyurethane blade',
      desc: 'PU blade variant — preferred for abrasive concrete and Glad\'s plant floor finish.',
      au: { qty: 6, status: 'in' },
      nz: { qty: 0, status: 'none' },
      price: '$542.00',
    },
    {
      id: '1042-T20-BLD',
      pn: '1042-T20-BLD',
      name: 'Squeegee blade only · linatex',
      desc: 'Blade refresh if the housing is still good. Cheapest path if the assembly is sound.',
      au: { qty: 32, status: 'in' },
      nz: { qty: 11, status: 'in' },
      price: '$78.00',
    },
  ];

  return (
    <div className="main" style={{ padding: '24px 28px 32px' }}>
      <div className="screen" data-screen-label="03 Parts Interpreter">
        <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' }} onClick={() => onNavigate(5, 'key-accounts')}>Glad Manufacturing</a>
          <span style={{ color: 'var(--fg-3)' }}>/</span>
          <span>Parts query</span>
        </div>

        <div className="pgheader">
          <div>
            <h1>Parts Query Interpreter</h1>
            <div className="sub">Loose part description → matched part numbers, stock, and a customer-ready quote.</div>
          </div>
          <div className="right">
            <button className="tn-btn tn-btn--ghost tn-btn--sm" onClick={() => onNavigate(5, 'key-accounts')}>
              <Icon name="briefcase" size={14} /> Glad account view
            </button>
            <button className="tn-btn tn-btn--secondary tn-btn--sm">Save matches</button>
          </div>
        </div>

        {/* Customer message — verbatim */}
        <div className="customer-msg" data-comment-anchor="cust-msg">
          <div className="av" style={{ background: '#0A4FB0', color: '#fff' }}>BL</div>
          <div style={{ flex: 1 }}>
            <div>
              <span className="nm">Bec Latham</span>
              <span className="ro">Maintenance lead · Glad Manufacturing · Smithfield Plant</span>
              <span className="tm">Mon 18 May · 07:42 AEST</span>
            </div>
            <div className="quote">
              "Hi mate, the squeegee on our T20 keeps coming loose — the rubber bit at the back. Bristle got chewed up too I reckon. Got 6 of these onsite. Can you send a couple of spares and someone to fit 'em?"
            </div>
          </div>
        </div>

        {/* Interpretation */}
        <div className="interp-box" style={{ marginTop: 14 }} data-comment-anchor="interp">
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ background: 'var(--tn-blue-500)', color: '#fff', fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 10.5, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '3px 8px', borderRadius: 2 }}>AI Interpretation</span>
            <span className="tn-badge tn-badge--success"><span className="tn-dot"></span>High confidence</span>
            <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 90, height: 6, background: 'var(--tn-steel-200)', borderRadius: 999, overflow: 'hidden' }}>
                <div style={{ width: '94%', height: '100%', background: 'var(--tn-success-500)' }}></div>
              </div>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>94%</span>
            </div>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10, padding: '8px 12px', background: 'var(--tn-blue-50)', border: '1px solid #B3DCEE', borderRadius: 3, fontSize: 12.5, color: 'var(--tn-blue-700)' }}>
            <Icon name="check" size={14} />
            <span>Read IRIS fleet for Glad · checked AU10 + NZ10 stock · consulted parts catalogue 2026</span>
            <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 11 }}>0.81 s</span>
          </div>

          <div className="row-detected">
            <div className="det">
              <div className="lab">Detected machine</div>
              <div className="val">Tennant T20 · Industrial Sweeper</div>
              <div className="meta">Glad fleet · <b>6 × T20</b> on file at Smithfield · serial range T20-AU-3088 to T20-AU-3093 · all under service agreement</div>
            </div>
            <div className="det">
              <div className="lab">Detected part type</div>
              <div className="val">Rear squeegee assembly</div>
              <div className="meta">Customer language "squeegee… rubber bit at the back" + "bristle chewed up" → rear squeegee + side broom contact. Side broom flagged for inspection.</div>
            </div>
          </div>
        </div>

        {/* Part matches */}
        <div style={{ marginTop: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <div className="overline">Suggested matches · 3 parts · ranked by fit + stock</div>
            <div style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>Prices AUD · ex-GST · ex-freight</div>
          </div>

          <div className="parts-grid">
            {parts.map((p, i) => (
              <div
                key={p.id}
                className={'part-card' + (selected === p.id ? ' selected' : '')}
                onClick={() => setSelected(p.id)}
              >
                <div className="img">
                  {p.pick && <span className="pick-tag">AI Pick</span>}
                  {/* Squeegee SVG illustration placeholder */}
                  <svg width="120" height="64" viewBox="0 0 120 64" fill="none">
                    <rect x="6" y="14" width="108" height="10" rx="2" stroke="currentColor" strokeWidth="1.5" />
                    <rect x="14" y="24" width="92" height="22" fill="currentColor" opacity="0.18" />
                    <line x1="14" y1="46" x2="106" y2="46" stroke="currentColor" strokeWidth="2" />
                    <line x1="20" y1="14" x2="20" y2="8" stroke="currentColor" strokeWidth="1.5" />
                    <line x1="100" y1="14" x2="100" y2="8" stroke="currentColor" strokeWidth="1.5" />
                    <text x="60" y="62" textAnchor="middle" fontSize="8" fill="currentColor" opacity="0.55" fontFamily="monospace">{p.pn}</text>
                  </svg>
                </div>
                <div className="pn">{p.pn}</div>
                <div className="nm">{p.name}</div>
                <div style={{ fontSize: 11.5, color: 'var(--fg-2)', lineHeight: 1.4 }}>{p.desc}</div>
                <div className="stock">
                  <span className={'s ' + (p.au.status === 'in' ? '' : p.au.status === 'low' ? 'low' : 'none')}>AU10 · {p.au.qty}</span>
                  <span className={'s ' + (p.nz.status === 'in' ? '' : p.nz.status === 'low' ? 'low' : 'none')}>NZ10 · {p.nz.qty}</span>
                </div>
                <div className="price">{p.price}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Drafted reply */}
        <div style={{ marginTop: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <div className="overline">Drafted reply · Glad service agreement applied</div>
            <span className="tn-badge tn-badge--brand" style={{ background: 'var(--tn-warning-100)', color: '#8A6300' }}><span className="tn-dot"></span>Quote-first rule</span>
            <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 90, height: 6, background: 'var(--tn-steel-200)', borderRadius: 999, overflow: 'hidden' }}>
                <div style={{ width: '92%', height: '100%', background: 'var(--tn-success-500)' }}></div>
              </div>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>92%</span>
            </div>
          </div>

          <div className="draft-pane">
            <div className="meta">
              <div className="k">To</div><div>Bec Latham &lt;bec.latham@gladmfg.com.au&gt;</div>
              <div className="k">Cc</div><div>Mitch Hardy (Glad account manager) <span style={{ background: 'var(--tn-steel-100)', padding: '2px 7px', borderRadius: 2, fontSize: 12 }}>auto-cc · Tier 1 rule</span></div>
              <div className="k">Subject</div><div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700 }}>Re: T20 squeegee — quote attached</div>
            </div>
            <div className="body">
              <p>Hi Bec,</p>
              <p>Thanks for the heads-up — sounds like the rear squeegee on the T20 has worn through and the side broom may be catching it. I've matched the part and put a quote together so we can move quickly under your service agreement.<sup className="c">1</sup></p>
              <p style={{ paddingLeft: 12, borderLeft: '2px solid var(--tn-blue-200)' }}>
                · <b>Rear squeegee assembly · linatex</b> · PN <span className="hl">1042-T20-RR</span><br />
                · <b>14 in stock at AU10 (Sydney)</b> — can despatch this afternoon for Tuesday AM delivery to Smithfield<sup className="c">2</sup><br />
                · <b>$486.00 ex-GST</b> · freight included under your Tier 1 SLA<sup className="c">3</sup>
              </p>
              <p>Per your account rules I haven't dispatched yet — <b>quote PDF is attached for written approval</b>. Once you sign off I'll book Marcus (your usual tech) to fit it and check the side broom while he's there.<sup className="c">4</sup></p>
              <p style={{ color: 'var(--fg-2)', fontSize: 13 }}>Cheers,<br />Tennant Customer Care · ANZ</p>
            </div>

            <div className="attach-strip" style={{ background: '#fff', borderTop: '1px solid var(--border-1)' }}>
              <span className="attach-chip"><Icon name="pdf" size={12} /> quote_T20_squeegee_Glad_20260518.pdf · 84 KB</span>
            </div>

            <div className="cites">
              <div className="overline">Citations · 4</div>
              <div className="cite"><span className="ix">1</span><Icon name="briefcase" size={13} /><span>IRIS Asset Manager — Glad Manufacturing · Smithfield fleet</span><span className="src">read 07:43</span></div>
              <div className="cite"><span className="ix">2</span><Icon name="doc" size={13} /><span>stock-au10.json · refresh 07:30 AEST</span><span className="src">AU10 Sydney</span></div>
              <div className="cite"><span className="ix">3</span><Icon name="file_text" size={13} /><span>Glad Service Agreement v4.2 · §2.1 freight inclusions</span><span className="src">p.6</span></div>
              <div className="cite"><span className="ix">4</span><Icon name="lock" size={13} /><span>Glad account rule · "Quote first. No work without written approval."</span><span className="src">rule #1</span></div>
            </div>
          </div>
        </div>

        {/* Action bar */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 16, padding: '14px 0' }}>
          <button className="tn-btn tn-btn--ghost"><Icon name="x" size={14} /> Dismiss</button>
          <button className="tn-btn tn-btn--ghost"><Icon name="regen" size={14} /> Regenerate</button>
          <button className="tn-btn tn-btn--ghost"><Icon name="parts" size={14} /> See more matches</button>
          <div style={{ flex: 1 }}></div>
          <button className="tn-btn tn-btn--secondary"><Icon name="edit" size={14} /> Edit draft</button>
          <button className="tn-btn tn-btn--primary" onClick={() => onNavigate(4, 'knowledge')}>
            <Icon name="send" size={14} stroke={2.4} /> Approve &amp; send
          </button>
        </div>
      </div>
    </div>
  );
}

window.ScreenParts = ScreenParts;