// SCREEN 02 — Full Timeline & History
// Premium chronological history acting as the system of record.

function ScreenTimeline() {
  const v = VEHICLE;
  const [filter, setFilter] = React.useState('All');
  const types = ['All', 'Service', 'Restoration', 'Concours', 'Transport', 'Appraisal', 'Acquisition', 'Paint'];

  const events = filter === 'All' ? v.timeline : v.timeline.filter(e => e.type === filter);

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

      <ScreenIntro
        eyebrow="TIMELINE · SYSTEM OF RECORD"
        title="THE COMPLETE HISTORY"
        sub={`Every owner, every shop, every dollar. ${v.timeline.length} verified events since acquisition, ${v.ownership_chain.length} owners total.`}
        right={
          <div style={{ textAlign: 'right' }}>
            <div style={{
              fontFamily: T.display, fontSize: 32, fontWeight: 700,
              color: P.gold, letterSpacing: '-0.02em',
            }}>{v.timeline.length}</div>
            <Eyebrow color={P.mute}>EVENTS</Eyebrow>
          </div>
        }
      />

      {/* Filter chips */}
      <div className="proto-scroll" style={{
        overflowX: 'auto', padding: '4px 22px 14px',
      }}>
        <div style={{ display: 'flex', gap: 6, minWidth: 'max-content' }}>
          {types.map(t => {
            const on = t === filter;
            return (
              <button key={t}
                onClick={() => setFilter(t)}
                style={{
                  padding: '8px 12px',
                  background: on ? P.paper : 'transparent',
                  color: on ? P.ink : P.mute,
                  border: `1px solid ${on ? P.paper : P.slate}`,
                  fontFamily: T.mono, fontSize: 9, fontWeight: 600,
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  cursor: 'pointer', flex: '0 0 auto',
                }}>{t}</button>
            );
          })}
        </div>
      </div>

      {/* Timeline rail */}
      <div style={{ padding: '0 22px 24px', position: 'relative' }}>
        {/* Vertical line */}
        <div style={{
          position: 'absolute', left: 30, top: 8, bottom: 24,
          width: 1, background: P.slate,
        }} />

        {events.map((e, i) => {
          const isAcq = e.type === 'Acquisition';
          const isConcours = e.type === 'Concours';
          const dot = isAcq ? P.gold : isConcours ? P.goldHi : P.paper;

          return (
            <div key={i} style={{
              position: 'relative', paddingLeft: 48, paddingBottom: 22,
            }}>
              {/* Dot */}
              <div style={{
                position: 'absolute', left: 26, top: 4,
                width: 9, height: 9, background: dot,
                border: `2px solid ${P.ink}`,
                outline: `1px solid ${P.slate}`,
              }} />

              {/* Date stamp */}
              <div style={{
                fontFamily: T.mono, fontSize: 9, letterSpacing: '0.18em',
                color: P.mute, textTransform: 'uppercase', marginBottom: 4,
              }}>
                {e.date}  ·  {fmtMiles(e.mileage)}
              </div>

              {/* Card */}
              <InkCard accent={isAcq || isConcours} padding={14}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
                  <div style={{ flex: 1 }}>
                    <Eyebrow color={isConcours ? P.goldHi : P.gold}>{e.type}</Eyebrow>
                    <div style={{
                      fontFamily: T.display, fontSize: 16, fontWeight: 600,
                      color: P.paper, marginTop: 6, lineHeight: 1.1,
                      letterSpacing: '-0.005em',
                    }}>{e.title}</div>
                    <div style={{
                      fontFamily: T.body, fontSize: 11, color: P.mute, marginTop: 4,
                    }}>{e.vendor}</div>
                  </div>
                  {e.cost != null && (
                    <div style={{ textAlign: 'right', flex: '0 0 auto' }}>
                      <div style={{
                        fontFamily: T.display, fontSize: 14, fontWeight: 600,
                        color: P.paper,
                      }}>
                        {fmtMoney(e.cost, { compact: e.cost > 10_000 })}
                      </div>
                    </div>
                  )}
                </div>

                {e.note && (
                  <div style={{
                    fontFamily: T.body, fontSize: 11, color: P.bone, marginTop: 10,
                    lineHeight: 1.45, paddingTop: 10, borderTop: `1px solid ${P.slate}`,
                  }}>{e.note}</div>
                )}

                {/* Attachments */}
                {e.attachments > 0 && (
                  <div style={{
                    marginTop: 10, paddingTop: 10, borderTop: `1px solid ${P.slate}`,
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  }}>
                    <div style={{ display: 'flex', gap: 4 }}>
                      {Array.from({ length: Math.min(e.attachments, 3) }).map((_, j) => (
                        <div key={j} style={{
                          width: 28, height: 28,
                          background: `repeating-linear-gradient(135deg, ${P.slate} 0 5px, ${P.graphite} 5px 6px)`,
                        }} />
                      ))}
                    </div>
                    <div style={{
                      fontFamily: T.mono, fontSize: 9, color: P.gold,
                      letterSpacing: '0.18em', textTransform: 'uppercase',
                    }}>{e.attachments} ATTACHED ↗</div>
                  </div>
                )}
              </InkCard>
            </div>
          );
        })}

        {/* End cap */}
        <div style={{ position: 'relative', paddingLeft: 48 }}>
          <div style={{
            position: 'absolute', left: 22, top: 4,
            width: 17, height: 17, border: `1.5px solid ${P.gold}`,
            background: P.ink, transform: 'rotate(45deg)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <div style={{ width: 5, height: 5, background: P.gold }} />
          </div>
          <Eyebrow color={P.gold}>RECORD OPENS</Eyebrow>
          <div style={{
            fontFamily: T.display, fontSize: 16, fontWeight: 600,
            color: P.paper, marginTop: 6,
          }}>FEBRUARY 1973 — KARMANN BODYWORKS, OSNABRÜCK</div>
          <div style={{
            fontFamily: T.body, fontSize: 11, color: P.mute, marginTop: 4,
          }}>Delivered to Porsche AG Werk II · Color #117 Light Yellow</div>
        </div>
      </div>

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

Object.assign(window, { ScreenTimeline });