// Screen 2 — AI-Drafted Reply Review
// E-WAF and Invoice Auto-Matcher in action — Woolworths AP, invoice EF4933.

function ScreenReply({ onNavigate }) {
  return (
    <div className="screen" style={{ display: 'flex', flexDirection: 'column', minHeight: 'calc(100vh - 60px)' }}
         data-screen-label="02 AI Reply Review">
      {/* Breadcrumb / context strip */}
      <div style={{ background: '#fff', borderBottom: '1px solid var(--border-1)', padding: '12px 28px', display: 'flex', alignItems: 'center', gap: 14 }}>
        <div style={{ fontSize: 12.5, color: 'var(--fg-2)', display: 'flex', alignItems: 'center', gap: 6 }}>
          <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')}>Woolworths Group</a>
          <span style={{ color: 'var(--fg-3)' }}>/</span>
          <span>Reply review</span>
        </div>
        <h1 style={{ margin: '0 0 0 8px', fontFamily: 'var(--font-heading)', fontSize: 17, fontWeight: 700 }}>
          Re: Invoice EF4933 — site visit confirmation required
        </h1>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8, alignItems: 'center', fontSize: 12, color: 'var(--fg-2)' }}>
          <span style={{ fontFamily: 'var(--font-mono)' }}>Thread #CCC-09277</span>
          <button className="tn-btn tn-btn--ghost tn-btn--sm">‹ Prev</button>
          <button className="tn-btn tn-btn--ghost tn-btn--sm">Next ›</button>
        </div>
      </div>

      {/* Context bar */}
      <div style={{ background: '#fff', borderBottom: '1px solid var(--border-1)', padding: '12px 28px', display: 'flex', gap: 22, alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
          <div className="overline">Customer</div>
          <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 14 }}>Woolworths Group · Accounts Payable</div>
        </div>
        <div style={{ width: 1, height: 36, background: 'var(--border-1)' }}></div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
          <div className="overline">Tier</div>
          <span className="tn-tier tn-tier--platinum">Platinum</span>
        </div>
        <div style={{ width: 1, height: 36, background: 'var(--border-1)' }}></div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
          <div className="overline">Account manager</div>
          <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 14 }}>Owen McKinley</div>
        </div>
        <div style={{ width: 1, height: 36, background: 'var(--border-1)' }}></div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
          <div className="overline">Open jobs</div>
          <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 14 }}>14 active · 2 awaiting parts</div>
        </div>
        <div style={{ width: 1, height: 36, background: 'var(--border-1)' }}></div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
          <div className="overline">SLA</div>
          <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 14, color: 'var(--tn-amber-600)' }}>02 h 45 m remaining</div>
        </div>
        <div style={{ marginLeft: 'auto' }}>
          <button className="tn-btn tn-btn--ghost tn-btn--sm" onClick={() => onNavigate(5, 'key-accounts')}>
            View account <Icon name="external" size={12} />
          </button>
        </div>
      </div>

      {/* Split */}
      <div className="split" style={{ flex: 1, minHeight: 0 }}>
        {/* LEFT — original */}
        <section>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div className="overline">Original message</div>
            <div style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--fg-3)' }}>
              Received Sun 17 May · 23:48 AEST · via accounts@woolworths.com.au
            </div>
          </div>

          <div className="email-block">
            <div className="head">
              <div className="who">
                <div className="av">JD</div>
                <div>
                  <div className="nm">Janelle Doulis</div>
                  <div className="ro">Accounts Payable · Woolworths Group</div>
                </div>
                <div className="tm">23:48 AEST</div>
              </div>
              <div className="subj">Invoice EF4933 — site visit confirmation required</div>
            </div>
            <div className="body">
              <p>Hi Tennant team,</p>
              <p>We've received invoice <b>EF4933</b> for the January site visit at the Erskine Park DC. Before AP can release payment we need the matching <b>E-WAF / site visit acknowledgement</b> form showing the work order number and the operator sign-off.</p>
              <p>I checked our inbox back to mid-January — we have the invoice but I can't find the E-WAF anywhere on file. Could you re-send so we can finalise this month's run?</p>
              <p>Work order on the invoice line item is <b>WO-EF4933-AU</b>. Need this by EOD Monday to make the May payment cycle.</p>
              <p style={{ color: 'var(--fg-2)', fontSize: 13 }}>Thanks,<br />Janelle Doulis<br />Accounts Payable · Woolworths Group<br />janelle.doulis@woolworths.com.au</p>
            </div>
            <div className="attach-strip">
              <span className="attach-chip"><Icon name="pdf" size={12} /> invoice_EF4933.pdf · 96 KB</span>
            </div>
          </div>

          {/* Account context */}
          <div className="card" style={{ padding: 14 }}>
            <div className="overline">Account context · auto-loaded</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginTop: 10 }}>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>Past 90 days · AP queries</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: 'var(--tn-navy)' }}>17</div>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>E-WAFs matched by AI</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: 'var(--tn-blue-500)' }}>16 / 17</div>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>Avg resolution time</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: 'var(--tn-success-500)' }}>6 m</div>
                <div style={{ fontSize: 11.5, color: 'var(--fg-2)' }}>down from 4 d</div>
              </div>
            </div>
          </div>
        </section>

        {/* RIGHT — AI activity + draft */}
        <section className="right-col">
          <div className="ai-activity" data-comment-anchor="ai-activity">
            <div className="head">
              <span className="badge">AI Activity</span>
              <span className="ttl">E-WAF · Invoice Auto-Matcher</span>
              <div className="conf">
                <div className="b"><i style={{ width: '96%' }}></i></div>
                <div className="n">96%</div>
                <div className="l">Confident</div>
              </div>
            </div>
            <div className="timeline" style={{ marginTop: 4 }}>
              <div className="ev">
                <div className="pt"></div><div className="ln"></div>
                <div className="t">Opened <span className="mono">invoice_EF4933.pdf</span> from inbound attachment <span className="ts">06:14</span></div>
              </div>
              <div className="ev">
                <div className="pt"></div><div className="ln"></div>
                <div className="t">Read work order number <span className="mono" style={{ background: 'var(--tn-blue-50)', padding: '0 4px', borderRadius: 2 }}>WO-EF4933-AU</span> from line 3 <span className="ts">06:14</span></div>
              </div>
              <div className="ev">
                <div className="pt"></div><div className="ln"></div>
                <div className="t">Located <span className="mono" style={{ background: 'var(--tn-blue-50)', padding: '0 4px', borderRadius: 2 }}>EWAF-EF4933-AU.pdf</span> in <b>Woolworths shared inbox</b> · 16 Jan, attached to job EF4933 <span className="ts">06:14</span></div>
              </div>
              <div className="ev">
                <div className="pt"></div><div className="ln"></div>
                <div className="t">Verified operator sign-off (J. Toomey) and date stamp 14 Jan 11:38 <span className="ts">06:15</span></div>
              </div>
              <div className="ev">
                <div className="pt"></div><div className="ln"></div>
                <div className="t">Merged invoice + E-WAF → <span className="mono" style={{ background: 'var(--tn-blue-50)', padding: '0 4px', borderRadius: 2 }}>EF4933_invoice_and_EWAF.pdf</span> · 312 KB <span className="ts">06:15</span></div>
              </div>
              <div className="ev">
                <div className="pt"></div>
                <div className="t">Drafted reply against Woolworths AP template · 1 prior thread referenced <span className="ts">06:15</span></div>
              </div>
            </div>
          </div>

          <div className="draft-pane">
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 18px', borderBottom: '1px solid var(--border-1)' }}>
              <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 Draft</span>
              <span className="tn-badge tn-badge--success"><span className="tn-dot"></span>Ready to send</span>
              <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>Drafted 06:15 · model tennant-care-v3</span>
            </div>
            <div className="meta">
              <div className="k">To</div><div>Janelle Doulis &lt;janelle.doulis@woolworths.com.au&gt;</div>
              <div className="k">Cc</div><div>Owen McKinley (account manager), AP-Aus &lt;ap-aus@woolworths.com.au&gt;</div>
              <div className="k">Subject</div><div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700 }}>Re: Invoice EF4933 — site visit confirmation required</div>
            </div>
            <div className="body">
              <p>Hi Janelle,</p>
              <p>Thanks for chasing — apologies you didn't see the E-WAF land in the original despatch run. I've matched it against the invoice and attached the merged file so you've got everything in one place for AP.</p>
              <p>For the record:</p>
              <p style={{ paddingLeft: 12, borderLeft: '2px solid var(--tn-blue-200)' }}>
                · Work order <span className="hl">WO-EF4933-AU</span><sup className="c">1</sup><br />
                · Site visit <b>14 Jan 2026</b>, Erskine Park DC<br />
                · Operator sign-off · <b>J. Toomey</b>, 11:38 AEDT<sup className="c">2</sup><br />
                · Technician · D. Spiteri (Tennant Service · Sydney)<sup className="c">2</sup>
              </p>
              <p>The merged PDF (invoice + E-WAF) is attached. This sits in your standard Woolworths AP format — let me know if anything else is needed to clear the May run.</p>
              <p style={{ color: 'var(--fg-2)', fontSize: 13 }}>Kind regards,<br />Tennant Customer Care · ANZ<br />+61 1800 226 843</p>
            </div>

            {/* Merged attachment */}
            <div className="attach-strip" style={{ background: '#fff', borderTop: '1px solid var(--border-1)' }}>
              <span className="attach-chip merged" data-comment-anchor="merged-pdf"><Icon name="merge" size={12} /> EF4933_invoice_and_EWAF.pdf · 312 KB · <b style={{ marginLeft: 4 }}>merged by AI</b></span>
            </div>

            <div className="cites">
              <div className="overline">Source citations · 2</div>
              <div className="cite">
                <span className="ix">1</span>
                <Icon name="pdf" size={13} />
                <span>invoice_EF4933.pdf · page 1, line 3</span>
                <span className="src">from inbound · 23:48</span>
              </div>
              <div className="cite">
                <span className="ix">2</span>
                <Icon name="file_text" size={13} />
                <span>EWAF-EF4933-AU.pdf · Woolworths shared inbox</span>
                <span className="src">filed 14 Jan 11:38</span>
              </div>
            </div>
          </div>

          <div style={{ flex: 1 }}></div>
        </section>
      </div>

      {/* Sticky action bar */}
      <div className="action-bar" data-comment-anchor="action-bar">
        <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="edit" size={14} /> Edit draft</button>
        <div className="spacer"></div>
        <div style={{ fontSize: 12, color: 'var(--fg-2)', marginRight: 14 }}>
          Will send from <b>care-anz@tennantco.com</b> · cc'd to Owen McKinley
        </div>
        <button className="tn-btn tn-btn--secondary">Schedule send</button>
        <button className="tn-btn tn-btn--primary" onClick={() => onNavigate(1)}>
          <Icon name="send" size={14} stroke={2.4} /> Approve &amp; send
        </button>
      </div>
    </div>
  );
}

window.ScreenReply = ScreenReply;