// Screen 6 — Key Account Reporting Agent
// Monday morning Woolworths open-jobs report, auto-generated.

function ScreenReports({ onNavigate }) {
  return (
    <div className="main" style={{ padding: '24px 28px 32px' }}>
      <div className="screen" data-screen-label="06 Key Account Report">
        <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)}>Dashboard</a>
          <span style={{ color: 'var(--fg-3)' }}>/</span>
          <span>Reports</span>
          <span style={{ color: 'var(--fg-3)' }}>/</span>
          <span>Woolworths · weekly open jobs</span>
        </div>

        <div className="pgheader">
          <div>
            <h1>Key Account Reports</h1>
            <div className="sub">Auto-compiled weekly. Reviewed in 30 seconds. Sent without retyping.</div>
          </div>
          <div className="right">
            <button className="tn-btn tn-btn--ghost tn-btn--sm"><Icon name="history" size={14} /> All reports</button>
            <button className="tn-btn tn-btn--ghost tn-btn--sm">Switch account ▾</button>
            <button className="tn-btn tn-btn--secondary tn-btn--sm">New report</button>
          </div>
        </div>

        <div className="reports-page">
          {/* LEFT — document */}
          <div className="report-doc">
            {/* Auto-generated banner */}
            <div className="report-banner" data-comment-anchor="auto-banner">
              <div className="ic"><Icon name="check" size={16} stroke={2.5} /></div>
              <div>
                <div className="ttl">Compiled 07:00 AEST · Key Account Reporting Agent</div>
                <div style={{ fontSize: 12 }}>Pulled from IRIS, job board, parts ETAs and tech roster. Ready to send.</div>
              </div>
              <div className="right">
                <span><Icon name="clock" size={12} style={{ verticalAlign: 'middle' }} /> 0 manual edits</span>
                <span>Confidence · 98 %</span>
              </div>
            </div>

            {/* Header */}
            <div className="report-head">
              <div>
                <div className="ov">Tennant Service · ANZ</div>
                <h2>Woolworths · Open Jobs Report</h2>
                <div className="for">Monday 18 May 2026 · Week 21 · covering all 14 Woolworths sites</div>
              </div>
              <div className="recip">
                <div className="ov">Prepared for</div>
                <div className="who">Karen Pillay</div>
                <div>National Facilities · Woolworths Group</div>
                <div style={{ marginTop: 4 }}>cc · D. Wong, M. Aroney, S. Mitchell</div>
              </div>
            </div>

            {/* Summary cells */}
            <div className="report-summary">
              <div className="cell">
                <div className="l">Open jobs</div>
                <div className="n">14</div>
                <div className="sub">across 9 sites</div>
              </div>
              <div className="cell">
                <div className="l">Awaiting parts</div>
                <div className="n warn">4</div>
                <div className="sub">2 ETAs &lt; 48 h</div>
              </div>
              <div className="cell">
                <div className="l">Scheduled this week</div>
                <div className="n">6</div>
                <div className="sub">Mon–Thu</div>
              </div>
              <div className="cell">
                <div className="l">Completed last week</div>
                <div className="n ok">9</div>
                <div className="sub">100 % E-WAF on file</div>
              </div>
            </div>

            {/* Awaiting parts */}
            <div className="report-section">
              <div className="sh">
                <span className="dot parts"></span>
                <span className="ttl">Awaiting parts</span>
                <span className="cnt">· 4 jobs</span>
              </div>
              <div className="job-row">
                <div className="wo">WO-EF5104</div>
                <div className="site"><div className="nm">Erskine Park DC</div><div className="ad">NSW · 2759</div></div>
                <div className="machine">T16 ride-on <div className="ser">SN T16-AU2218</div></div>
                <div className="issue">Brush motor swap · part PN 1180-T16-BM ex AU10</div>
                <div className="eta">ETA Wed 20 May</div>
              </div>
              <div className="job-row">
                <div className="wo">WO-EF5099</div>
                <div className="site"><div className="nm">Marsden Park RDC</div><div className="ad">NSW · 2765</div></div>
                <div className="machine">T16 ride-on <div className="ser">SN T16-AU2241</div></div>
                <div className="issue">Battery cell swap · 2 × 12 V deep cycle</div>
                <div className="eta">ETA Wed 20 May</div>
              </div>
              <div className="job-row">
                <div className="wo">WO-EF5081</div>
                <div className="site"><div className="nm">Wyong DC</div><div className="ad">NSW · 2259</div></div>
                <div className="machine">S30 sweeper <div className="ser">SN S30-AU0917</div></div>
                <div className="issue">Hydraulic hose · supplier backorder</div>
                <div className="eta">ETA Fri 22 May</div>
              </div>
              <div className="job-row">
                <div className="wo">WO-EF5078</div>
                <div className="site"><div className="nm">Truganina DC</div><div className="ad">VIC · 3029</div></div>
                <div className="machine">T16 ride-on <div className="ser">SN T16-AU2310</div></div>
                <div className="issue">Squeegee deck assembly · ex NZ10 (closest stock)</div>
                <div className="eta">ETA Mon 25 May</div>
              </div>
            </div>

            {/* Scheduled */}
            <div className="report-section">
              <div className="sh">
                <span className="dot sched"></span>
                <span className="ttl">Scheduled this week</span>
                <span className="cnt">· 6 jobs</span>
              </div>
              <div className="job-row">
                <div className="wo">WO-EF5121</div>
                <div className="site"><div className="nm">Minchinbury DC</div><div className="ad">NSW · 2770</div></div>
                <div className="machine">2 × T16 · 1 × S30 <div className="ser">routine service · 1000 h</div></div>
                <div className="issue">Marcus Owen + Dan Spiteri · 06:00–14:00</div>
                <div className="eta">Tue 19 May</div>
              </div>
              <div className="job-row">
                <div className="wo">WO-EF5126</div>
                <div className="site"><div className="nm">Erskine Park DC</div><div className="ad">NSW · 2759</div></div>
                <div className="machine">T16 ride-on <div className="ser">SN T16-AU2218</div></div>
                <div className="issue">Brush motor fit · part ETA Wed AM</div>
                <div className="eta">Wed 20 May</div>
              </div>
              <div className="job-row">
                <div className="wo">WO-EF5131</div>
                <div className="site"><div className="nm">Mulgrave DC</div><div className="ad">VIC · 3170</div></div>
                <div className="machine">M30 LPG sweeper <div className="ser">SN M30-AU0044</div></div>
                <div className="issue">Annual LPG cert · J. Toomey</div>
                <div className="eta">Wed 20 May</div>
              </div>
              <div className="job-row">
                <div className="wo">WO-EF5135</div>
                <div className="site"><div className="nm">Larapinta DC</div><div className="ad">QLD · 4110</div></div>
                <div className="machine">T16 ride-on <div className="ser">SN T16-AU2189</div></div>
                <div className="issue">ec-H2O membrane replacement</div>
                <div className="eta">Thu 21 May</div>
              </div>
              <div className="job-row">
                <div className="wo">WO-EF5139</div>
                <div className="site"><div className="nm">Wyong DC</div><div className="ad">NSW · 2259</div></div>
                <div className="machine">S30 sweeper <div className="ser">SN S30-AU0917</div></div>
                <div className="issue">Hydraulic hose fit · Fri pending part ETA</div>
                <div className="eta">Fri 22 May</div>
              </div>
              <div className="job-row">
                <div className="wo">WO-EF5142</div>
                <div className="site"><div className="nm">Hoppers Crossing DC</div><div className="ad">VIC · 3029</div></div>
                <div className="machine">T16 ride-on <div className="ser">SN T16-AU2356</div></div>
                <div className="issue">Routine 1000 h · D. Spiteri</div>
                <div className="eta">Fri 22 May</div>
              </div>
            </div>

            {/* In progress */}
            <div className="report-section">
              <div className="sh">
                <span className="dot prog"></span>
                <span className="ttl">In progress (started, not yet closed)</span>
                <span className="cnt">· 4 jobs</span>
              </div>
              <div className="job-row">
                <div className="wo">WO-EF5070</div>
                <div className="site"><div className="nm">Auburn DC</div><div className="ad">NSW · 2144</div></div>
                <div className="machine">T16 ride-on <div className="ser">SN T16-AU2156</div></div>
                <div className="issue">Diagnostic onsite · second visit booked</div>
                <div className="eta">In progress</div>
              </div>
              <div className="job-row">
                <div className="wo">WO-EF5063</div>
                <div className="site"><div className="nm">Larapinta DC</div><div className="ad">QLD · 4110</div></div>
                <div className="machine">M30 LPG <div className="ser">SN M30-AU0029</div></div>
                <div className="issue">Carbie rebuild · awaiting customer sign-off</div>
                <div className="eta">In progress</div>
              </div>
              <div className="job-row">
                <div className="wo">WO-EF5061</div>
                <div className="site"><div className="nm">Mulgrave DC</div><div className="ad">VIC · 3170</div></div>
                <div className="machine">T16 ride-on <div className="ser">SN T16-AU2094</div></div>
                <div className="issue">Op training refresh · J. Toomey</div>
                <div className="eta">In progress</div>
              </div>
              <div className="job-row">
                <div className="wo">WO-EF5048</div>
                <div className="site"><div className="nm">Townsville DC</div><div className="ad">QLD · 4810</div></div>
                <div className="machine">S30 sweeper <div className="ser">SN S30-AU1102</div></div>
                <div className="issue">Hydraulic diagnostic · part on order</div>
                <div className="eta">In progress</div>
              </div>
            </div>

            {/* Completed last week */}
            <div className="report-section">
              <div className="sh">
                <span className="dot done"></span>
                <span className="ttl">Completed · last week</span>
                <span className="cnt">· 9 jobs · 100 % E-WAF lodged</span>
              </div>
              <div className="job-row">
                <div className="wo">EF4933</div>
                <div className="site"><div className="nm">Erskine Park DC</div><div className="ad">NSW · 2759</div></div>
                <div className="machine">T16 ride-on <div className="ser">SN T16-AU2218</div></div>
                <div className="issue">Jan site visit · invoice + E-WAF cleared Mon AM</div>
                <div className="eta">Closed Mon</div>
              </div>
              <div className="job-row">
                <div className="wo">WO-EF5031</div>
                <div className="site"><div className="nm">Minchinbury DC</div><div className="ad">NSW · 2770</div></div>
                <div className="machine">M30 LPG <div className="ser">SN M30-AU0061</div></div>
                <div className="issue">Annual LPG cert · passed</div>
                <div className="eta">Closed Tue</div>
              </div>
              <div className="job-row">
                <div className="wo">+ 7 more</div>
                <div className="site"><div className="nm">Auburn, Truganina, Wyong, Hoppers, Larapinta, Townsville, Mulgrave</div><div className="ad">All sites cleared</div></div>
                <div className="machine">Mixed fleet <div className="ser">routine service + ad-hoc</div></div>
                <div className="issue">All E-WAFs lodged within 24 h of visit</div>
                <div className="eta">Closed last week</div>
              </div>
            </div>

            <div className="report-foot">
              <Icon name="bolt" size={14} style={{ color: 'var(--tn-blue-500)' }} />
              <span>Report generated from IRIS Asset Manager, the CCC job board, AU10 + NZ10 parts ETAs and tech roster. <a style={{ color: 'var(--fg-link)', cursor: 'pointer' }}>See sources ›</a></span>
              <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)' }}>Run #KAR-WW-2126 · 07:00:14 AEST</span>
            </div>
          </div>

          {/* RIGHT — history rail */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, position: 'sticky', top: 16, alignSelf: 'start' }}>
            <div className="card" style={{ padding: 16 }}>
              <div className="overline">Send to Woolworths</div>
              <div style={{ marginTop: 8, fontSize: 12.5, color: 'var(--fg-2)' }}>Pre-filled from the account's preferred recipient list.</div>
              <div style={{ marginTop: 10, padding: '8px 10px', background: 'var(--tn-steel-50)', border: '1px solid var(--border-1)', borderRadius: 3, fontSize: 12 }}>
                <div><b>To</b> · Karen Pillay &lt;karen.pillay@woolworths.com.au&gt;</div>
                <div style={{ marginTop: 4, color: 'var(--fg-2)' }}><b>Cc</b> · D. Wong, M. Aroney, Owen McKinley (Tennant)</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
                <button className="tn-btn tn-btn--primary"><Icon name="send" size={14} stroke={2.4} /> Send to Woolworths</button>
                <button className="tn-btn tn-btn--secondary"><Icon name="calendar" size={14} /> Schedule for next run</button>
                <button className="tn-btn tn-btn--ghost"><Icon name="edit" size={14} /> Edit before sending</button>
                <button className="tn-btn tn-btn--ghost"><Icon name="download" size={14} /> Download PDF</button>
              </div>
            </div>

            <div className="history-card">
              <h4>Last 8 weekly reports</h4>
              <div className="stat">
                <div className="n">100 %</div>
                <div className="l">Auto-sent · 0 manual edits this month</div>
              </div>
              {[
                { d: 'Mon 11 May', sub: 'Week 20 · 16 jobs', auto: true },
                { d: 'Mon 04 May', sub: 'Week 19 · 13 jobs', auto: true },
                { d: 'Mon 27 Apr', sub: 'Week 18 · 17 jobs', auto: true },
                { d: 'Mon 20 Apr', sub: 'Week 17 · 12 jobs', auto: true },
                { d: 'Mon 13 Apr', sub: 'Week 16 · 19 jobs', auto: true },
                { d: 'Mon 06 Apr', sub: 'Week 15 · 14 jobs', auto: true },
                { d: 'Mon 30 Mar', sub: 'Week 14 · 11 jobs', auto: true },
                { d: 'Mon 23 Mar', sub: 'Week 13 · 18 jobs', auto: true },
              ].map((w, i) => (
                <div key={i} className="week">
                  <div className="d">{w.d}</div>
                  <div style={{ color: 'var(--fg-1)', fontSize: 12.5 }}>{w.sub}</div>
                  <span className="s"><Icon name="check" size={11} /> sent</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ScreenReports = ScreenReports;