/**
 * Frise centrée : un point par événement, ordre chronologique (plus ancien en haut).
 * Chaque entrée peut avoir une description optionnelle.
 */
const EVENTS = [
  {
    period: '2018',
    sequence: 0,
    side: 'left',
    title: 'Bac techno STI2D SIN',
    description: 'Don Bosco',
  },
  {
    period: '2019',
    sequence: 1,
    side: 'right',
    title: 'Formation à l’étranger en anglais',
    description: '1 mois — Canada',
  },
  {
    period: '2020-2021',
    sequence: 0,
    side: 'left',
    title: 'CAP Mécanique auto',
    description: 'AF13, Alternance',
  },
  {
    period: '2021-2022',
    sequence: 0,
    side: 'right',
    title: 'CAP Plomberie chauffagerie',
    description: '3 stages de 3 mois',
  },
  {
    period: '2022-2025',
    sequence: 0,
    side: 'left',
    title: 'Administrateur système\nDéveloppeur application',
    description: 'OpenMotion',
  },
  {
    period: '2024-2026',
    sequence: 0,
    side: 'right',
    title: 'Installation et configuration de serveurs personnels',
    description: ' de projets personnels et professionnels.',
  },
]

function parsePeriod(period) {
  const m = String(period).match(/^(\d{4})(?:-(\d{4}))?$/)
  if (!m) return { start: 0, end: 0 }
  const start = Number.parseInt(m[1], 10)
  const end = m[2] ? Number.parseInt(m[2], 10) : start
  return { start, end }
}

function compareChronological(a, b) {
  const pa = parsePeriod(a.period)
  const pb = parsePeriod(b.period)
  if (pa.start !== pb.start) return pa.start - pb.start
  if (pa.end !== pb.end) return pa.end - pb.end
  return (a.sequence ?? 0) - (b.sequence ?? 0)
}

const SORTED_EVENTS = [...EVENTS].sort(compareChronological)

function TimelineCard({ period, title, description, side }) {
  return (
    <article
      className={`formations-timeline__card formations-timeline__card--${side}`}
    >
      <time className="formations-timeline__period" dateTime={period}>
        {period}
      </time>
      <h3 className="formations-timeline__card-title">{title}</h3>
      {description ? (
        <p className="formations-timeline__desc">{description}</p>
      ) : null}
    </article>
  )
}

export function FormationsTimeline() {
  return (
    <div className="formations-timeline">
      <div className="formations-timeline__rows">
        <div className="formations-timeline__line" aria-hidden />
        {SORTED_EVENTS.map((event) => (
          <div
            key={`${event.period}-${event.side}-${event.sequence}-${event.title}`}
            className="formations-timeline__row"
          >
            <div className="formations-timeline__cell formations-timeline__cell--left">
              {event.side === 'left' ? (
                <TimelineCard
                  side="left"
                  period={event.period}
                  title={event.title}
                  description={event.description}
                />
              ) : null}
            </div>
            <div className="formations-timeline__node-wrap">
              <span className="formations-timeline__node" aria-hidden />
            </div>
            <div className="formations-timeline__cell formations-timeline__cell--right">
              {event.side === 'right' ? (
                <TimelineCard
                  side="right"
                  period={event.period}
                  title={event.title}
                  description={event.description}
                />
              ) : null}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
