/* global React */
const _useInView_pr = window.useInView;
const { useEffect: _useEffect_pr, useRef: _useRef_pr, useState: _useState_pr, useCallback: _useCallback_pr } = React;

const MILESTONES = [
  {
    year: '1958',
    yearAria: '1958',
    datetime: '1958-01-01',
    short: 'Vznik',
    heading: 'Vznik garáží ČSAD',
    body: 'Začíná stavba garáží Československé státní automobilové dopravy v ulici K Podlesí. Areál slouží jako depo pro nové autobusy nově zavedené MHD v Příbrami.',
    photo: {
      kind: 'real',
      src: 'assets/foto-historicke-1958-rto.png',
      alt: 'Škoda 706 RTO LUX před nově postavenými garážemi ČSAD, rok 1958',
    },
    key: true,
  },
  {
    year: '60.–80. léta',
    yearAria: 'Šedesátá až osmdesátá léta',
    short: 'Boom',
    heading: 'Klíčové dopravní depo',
    body: 'V době hornického a uranového boomu Příbrami zajišťuje areál městské, regionální i dálkové autobusové linky. Stává se jedním z nejdůležitějších dopravních uzlů středních Čech.',
    photo: {
      kind: 'real',
      src: 'assets/foto-historicke-1970s-aerial.png',
      alt: 'Letecký pohled na areál ČSAD Příbram v 70. letech – odstavné plochy, Karosy a věž Vojtěch v pozadí',
    },
  },
  {
    year: 'srpen 1968',
    yearAria: 'Srpen 1968',
    datetime: '1968-08-21',
    short: 'Srpen ’68',
    heading: 'Tichý svědek dějin',
    body: 'Před garážemi ČSAD Příbram parkují sovětské tanky a obrněné transportéry. V Příbrami probíhá stávka uranových horníků se sloganem „Ani gram uranu!“. Areál se zapisuje do moderních československých dějin.',
    photo: {
      kind: 'real',
      src: 'assets/foto-historicke-1968-tank.jpg',
      alt: 'Sovětský tank a autobus Karosa před garážemi ČSAD Příbram, srpen 1968',
      credit: 'Archiv: Hornické muzeum Příbram',
    },
    key: true,
  },
  {
    year: '1997',
    datetime: '1997-01-01',
    short: 'Privatizace',
    heading: 'Privatizace',
    body: 'Dopravní závod prochází privatizací, vzniká ČSAD Příbram s.r.o. Areál nadále slouží jako depo autobusů.',
    photo: {
      kind: 'real',
      src: 'assets/foto-historicke-1997-karosa.jpg',
      alt: 'Karosa B732 v livreji ČSAD před vozovnou, polovina 90. let',
    },
  },
  {
    year: '2004',
    datetime: '2004-01-01',
    short: 'BUS real',
    heading: 'Vznik BUS real, s.r.o.',
    body: 'Vstup mezinárodního dopravce Connex (později Veolia, dnes Arriva) a vznik společnosti BUS real, s.r.o. Začíná postupná přeměna části areálu v komerční komplex.',
    photo: {
      kind: 'real',
      src: 'assets/foto-historicke-2004-connex.jpg',
      alt: 'Autobus dopravce Connex Východní Čechy, polovina 2000. let',
      credit: 'Foto: trolejbus.cz',
    },
  },
  {
    year: 'dnes',
    yearAria: 'Současnost',
    short: 'Dnes',
    heading: 'Areál ve dvou rolích',
    body: 'Většina areálu dnes slouží desítkám firem – sklady, výrobní dílny, kanceláře. Z části areálu ale dál vyjíždí autobusy regionálního dopravce. Šedesát sedm let v provozu, pořád v pohybu.',
    photo: { kind: 'real', src: 'assets/foto-pribram-dnes-2026.jpg', alt: 'Areál BUS real dnes – letecký pohled, květen 2026' },
    key: true,
  },
];

function MilestoneSlide({ data, isActive }) {
  const YearTag = data.datetime ? 'time' : 'span';
  const yearProps = data.datetime
    ? { dateTime: data.datetime }
    : { 'aria-label': data.yearAria || data.year };

  return (
    <article className={`pr-slide ${isActive ? 'is-active' : ''} ${data.key ? 'is-key' : ''}`} aria-hidden={!isActive}>
      <figure className="pr-slide-media">
        {data.photo ? (
          data.photo.kind === 'real' ? (
            <>
              <img src={data.photo.src} alt={data.photo.alt} loading="lazy" />
              {data.photo.credit && (
                <figcaption className="pr-slide-credit t-mono">{data.photo.credit}</figcaption>
              )}
            </>
          ) : (
            <div className="pr-slide-ph" role="img" aria-label={data.photo.label}>
              <span className="pr-ph-tag t-mono">Dobová fotka</span>
              <span className="pr-ph-cap t-mono">{data.photo.label}</span>
            </div>
          )
        ) : (
          <div className="pr-slide-no-photo" aria-hidden="true">
            <span className="pr-no-photo-year t-display">{data.year}</span>
          </div>
        )}
      </figure>
      <div className="pr-slide-text">
        <YearTag className="pr-slide-year t-mono" {...yearProps}>{data.year}</YearTag>
        <h3 className="pr-slide-h">{data.heading}</h3>
        <p className="pr-slide-body">{data.body}</p>
      </div>
    </article>
  );
}

function SectionPribeh() {
  const [headRef, headIn] = _useInView_pr(0.2);
  const [stageRef, stageIn] = _useInView_pr(0.15);
  const [active, setActive] = _useState_pr(0);
  const total = MILESTONES.length;

  const go = _useCallback_pr((idx) => {
    setActive((idx + total) % total);
  }, [total]);

  // Keyboard nav when stage focused
  const stageFocusRef = _useRef_pr(null);
  _useEffect_pr(() => {
    const el = stageFocusRef.current;
    if (!el) return;
    const onKey = (e) => {
      if (e.key === 'ArrowRight') { e.preventDefault(); go(active + 1); }
      else if (e.key === 'ArrowLeft') { e.preventDefault(); go(active - 1); }
    };
    el.addEventListener('keydown', onKey);
    return () => el.removeEventListener('keydown', onKey);
  }, [active, go]);

  // Touch swipe support
  _useEffect_pr(() => {
    const el = stageFocusRef.current;
    if (!el) return;
    let startX = 0;
    let dx = 0;
    const onStart = (e) => { startX = e.touches[0].clientX; dx = 0; };
    const onMove = (e) => { dx = e.touches[0].clientX - startX; };
    const onEnd = () => {
      if (Math.abs(dx) > 50) {
        if (dx < 0) go(active + 1);
        else go(active - 1);
      }
    };
    el.addEventListener('touchstart', onStart, { passive: true });
    el.addEventListener('touchmove', onMove, { passive: true });
    el.addEventListener('touchend', onEnd);
    return () => {
      el.removeEventListener('touchstart', onStart);
      el.removeEventListener('touchmove', onMove);
      el.removeEventListener('touchend', onEnd);
    };
  }, [active, go]);

  const progress = (active / (total - 1)) * 100;

  return (
    <section id="pribeh" className="sec sec-pribeh">
      <div className="container">
        <header ref={headRef} className={`pribeh-header ${headIn ? 'is-in' : ''}`}>
          <div className="t-eyebrow"><span className="dot"></span>Příběh</div>
          <h2 className="t-display t-h2 pribeh-h2">Areál, který viděl proměnu Příbrami.</h2>
          <p className="t-body-l pribeh-intro">
            Stojí tu od roku 1958. Vyrostl v době, kdy Příbram dostala svoji první městskou hromadnou dopravu a začínala se měnit v moderní průmyslové město. Od té doby zažil socialistickou industrializaci, srpen 1968, privatizaci 90. let i dnešní transformaci v komerční centrum desítek firem. A motory tu nikdy úplně neutichly.
          </p>
        </header>

        <div
          ref={(node) => { stageRef.current = node; stageFocusRef.current = node; }}
          className={`pr-stage ${stageIn ? 'is-in' : ''}`}
          tabIndex={0}
          role="region"
          aria-label="Časová osa areálu, použijte šipky pro pohyb"
        >
          {/* Slides + arrows — arrows sit outside the overflow:hidden wrap */}
          <div className="pr-slides-area">
            <div className="pr-slides-wrap">
              <div
                className="pr-slides-track"
                style={{ transform: `translateX(-${active * 100}%)` }}
              >
                {MILESTONES.map((m, i) => (
                  <MilestoneSlide key={m.year} data={m} isActive={i === active} />
                ))}
              </div>
            </div>

            <button
              type="button"
              className="pr-arrow pr-arrow-prev"
              onClick={() => go(active - 1)}
              disabled={active === 0}
              aria-label="Předchozí milník"
            >
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
            </button>
            <button
              type="button"
              className="pr-arrow pr-arrow-next"
              onClick={() => go(active + 1)}
              disabled={active === total - 1}
              aria-label="Další milník"
            >
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
            </button>
          </div>

          {/* Timeline rail with year ticks */}
          <div className="pr-rail-wrap" role="tablist" aria-label="Roky">
            <div className="pr-rail">
              <span className="pr-rail-fill" style={{ width: `${progress}%` }} />
            </div>
            <ol className="pr-ticks">
              {MILESTONES.map((m, i) => (
                <li key={m.year} className={`pr-tick ${i === active ? 'is-active' : ''} ${i < active ? 'is-past' : ''} ${m.key ? 'is-key' : ''}`}>
                  <button
                    type="button"
                    role="tab"
                    aria-selected={i === active}
                    aria-controls={`milestone-${i}`}
                    onClick={() => go(i)}
                    className="pr-tick-btn"
                  >
                    <span className="pr-tick-dot" aria-hidden="true" />
                    <span className="pr-tick-label t-mono">{m.short}</span>
                    <span className="pr-tick-year">{m.year}</span>
                  </button>
                </li>
              ))}
            </ol>
          </div>

          {/* Counter */}
          <div className="pr-counter t-mono" aria-live="polite">
            <span className="pr-counter-cur">{String(active + 1).padStart(2, '0')}</span>
            <span className="pr-counter-sep">/</span>
            <span className="pr-counter-tot">{String(total).padStart(2, '0')}</span>
          </div>
        </div>

        <figure className="pribeh-quote is-in">
          <span className="pribeh-quote-mark" aria-hidden="true">„</span>
          <blockquote>
            <p>
              Od stříbra k autobusům, od autobusů k podnikání. Areál, který nikdy nezhasl motory – jen postupně přidal další cestující.
            </p>
          </blockquote>
        </figure>
      </div>
    </section>
  );
}

window.SectionPribeh = SectionPribeh;