// SCREEN 05 — Service & Parts Management
// Operational view: maintenance log + parts inventory.

function ScreenService() {
  const v = VEHICLE;
  const [tab, setTab] = React.useState('service');

  const partsTotal = v.parts.reduce((s, p) => s + p.cost, 0);
  const serviceTotal = v.service.reduce((s, p) => s + (p.cost || 0), 0);

  return (
    <div className="proto-screen" style={{ background: P.ink, color: P.paper }}>

      <ScreenIntro
        eyebrow="SERVICE & PARTS · OPERATIONAL"
        title={tab === 'service' ? 'MAINTENANCE LEDGER' : 'PARTS INVENTORY'}
        sub={tab === 'service'
          ? 'Every service event, vendor, and recommended next-by date.'
          : 'OEM, NOS, and modern equivalents. Track warranty and supplier.'}
      />

      {/* Sub-tabs */}
      <div style={{ padding: '0 22px 16px' }}>
        <div style={{
          display: 'inline-flex', border: `1px solid ${P.slate}`, width: '100%',
        }}>
          {[
            ['service', 'Maintenance', v.service.length],
            ['parts',   'Parts',       v.parts.length],
          ].map(([id, label, count], i) => {
            const on = tab === id;
            return (
              <button key={id}
                onClick={() => setTab(id)}
                style={{
                  flex: 1, padding: '12px 14px',
                  background: on ? P.paper : 'transparent',
                  color: on ? P.ink : P.paper,
                  border: 'none',
                  borderLeft: i > 0 ? `1px solid ${P.slate}` : 'none',
                  fontFamily: T.mono, fontSize: 10, fontWeight: 600,
                  letterSpacing: '0.2em', textTransform: 'uppercase',
                  cursor: 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,
                }}>
                <span>{label}</span>
                <span style={{ color: on ? P.gold : P.mute, fontSize: 10 }}>{count}</span>
              </button>
            );
          })}
        </div>
      </div>

      {tab === 'service' && (
        <>
          {/* Service summary card */}
          <div style={{ padding: '0 22px 14px' }}>
            <div style={{
              background: P.graphite, padding: 16,
              display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14,
            }}>
              <div>
                <Eyebrow color={P.mute}>TOTAL SPEND</Eyebrow>
                <div style={{ fontFamily: T.display, fontSize: 18, fontWeight: 600,
                  color: P.paper, marginTop: 4, letterSpacing: '-0.01em',
                }}>{fmtMoney(serviceTotal, { compact: true })}</div>
              </div>
              <div>
                <Eyebrow color={P.mute}>NEXT DUE</Eyebrow>
                <div style={{ fontFamily: T.display, fontSize: 18, fontWeight: 600,
                  color: P.gold, marginTop: 4, letterSpacing: '-0.01em',
                }}>14 DAYS</div>
              </div>
              <div>
                <Eyebrow color={P.mute}>VENDORS</Eyebrow>
                <div style={{ fontFamily: T.display, fontSize: 18, fontWeight: 600,
                  color: P.paper, marginTop: 4, letterSpacing: '-0.01em',
                }}>3</div>
              </div>
            </div>
          </div>

          <RowRule>SERVICE LOG · {v.service.length} ENTRIES</RowRule>
          <div style={{ padding: '14px 22px 8px' }}>
            {v.service.map((s, i) => (
              <div key={i} style={{
                padding: '14px 0',
                borderBottom: i < v.service.length - 1 ? `1px solid ${P.graphite}` : 'none',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <Eyebrow color={P.gold}>{s.date}  ·  {fmtMiles(s.mileage).toUpperCase()}</Eyebrow>
                  <div style={{
                    fontFamily: T.mono, fontSize: 9, color: P.mute,
                    letterSpacing: '0.16em', textTransform: 'uppercase',
                  }}>NEXT: {s.next.toUpperCase()}</div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
                  marginTop: 6,
                }}>
                  <div>
                    <div style={{
                      fontFamily: T.display, fontSize: 15, fontWeight: 600,
                      color: P.paper, letterSpacing: '-0.005em',
                    }}>{s.item}</div>
                    <div style={{
                      fontFamily: T.body, fontSize: 11, color: P.bone, marginTop: 3,
                    }}>{s.vendor}</div>
                  </div>
                  <div style={{
                    fontFamily: T.display, fontSize: 16, fontWeight: 600,
                    color: P.paper, letterSpacing: '-0.01em',
                  }}>{fmtMoney(s.cost, { compact: s.cost > 10_000 })}</div>
                </div>
              </div>
            ))}
          </div>
        </>
      )}

      {tab === 'parts' && (
        <>
          {/* Parts summary */}
          <div style={{ padding: '0 22px 14px' }}>
            <div style={{
              background: P.graphite, padding: 16,
              display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14,
            }}>
              <div>
                <Eyebrow color={P.mute}>PARTS VALUE</Eyebrow>
                <div style={{ fontFamily: T.display, fontSize: 18, fontWeight: 600,
                  color: P.paper, marginTop: 4, letterSpacing: '-0.01em',
                }}>{fmtMoney(partsTotal, { compact: true })}</div>
              </div>
              <div>
                <Eyebrow color={P.mute}>OEM SHARE</Eyebrow>
                <div style={{ fontFamily: T.display, fontSize: 18, fontWeight: 600,
                  color: P.gold, marginTop: 4, letterSpacing: '-0.01em',
                }}>72%</div>
              </div>
              <div>
                <Eyebrow color={P.mute}>UNDER WTY</Eyebrow>
                <div style={{ fontFamily: T.display, fontSize: 18, fontWeight: 600,
                  color: P.paper, marginTop: 4, letterSpacing: '-0.01em',
                }}>4 / 6</div>
              </div>
            </div>
          </div>

          <RowRule>INVENTORY · {v.parts.length} ITEMS</RowRule>
          <div style={{ padding: '14px 22px 8px' }}>
            {v.parts.map((p, i) => {
              const tone = p.type === 'OEM' ? P.gold
                : p.type === 'OEM-NOS' ? P.goldHi
                : p.type === 'Original' ? P.bone
                : p.type === 'OEM-spec' ? P.paper
                : P.mute;
              return (
                <InkCard key={i} padding={14} style={{ marginBottom: 6 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
                    <div style={{ flex: 1 }}>
                      <div style={{
                        fontFamily: T.display, fontSize: 14, fontWeight: 600,
                        color: P.paper, letterSpacing: '-0.005em',
                      }}>{p.name}</div>
                      <div style={{
                        fontFamily: T.mono, fontSize: 10, color: P.mute,
                        letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 3,
                      }}>{p.spec.toUpperCase()}</div>
                    </div>
                    <span style={{
                      padding: '4px 8px',
                      background: 'transparent',
                      border: `1px solid ${tone}`,
                      color: tone,
                      fontFamily: T.mono, fontSize: 8, fontWeight: 600,
                      letterSpacing: '0.18em', textTransform: 'uppercase',
                      whiteSpace: 'nowrap', flex: '0 0 auto',
                    }}>{p.type}</span>
                  </div>
                  <div style={{ height: 1, background: P.slate, margin: '10px 0' }} />
                  <div style={{
                    display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 8,
                  }}>
                    {[
                      ['INSTALLED', p.installed],
                      ['SUPPLIER',  p.supplier],
                      ['WARRANTY',  p.warranty],
                      ['COST',      fmtMoney(p.cost)],
                    ].map(([k, val]) => (
                      <div key={k}>
                        <div style={{
                          fontFamily: T.mono, fontSize: 8, color: P.mute,
                          letterSpacing: '0.18em', textTransform: 'uppercase',
                        }}>{k}</div>
                        <div style={{
                          fontFamily: T.body, fontSize: 11, color: P.paper, marginTop: 3,
                          lineHeight: 1.3,
                        }}>{val}</div>
                      </div>
                    ))}
                  </div>
                </InkCard>
              );
            })}
          </div>
        </>
      )}

      <div style={{ height: 24 }} />
    </div>
  );
}

Object.assign(window, { ScreenService });