/* TopNav · Sidebar · TimelineRail · ShellGlow */
var { useState, useEffect, useRef, useMemo } = React;

function TopNav({ currentView, onViewChange }) {
  const isAct = String(currentView || '').startsWith('ACT_');
  const items = [
    { id: 'OVERTURE', label: 'Overture', match: (v) => v === 'OVERTURE' },
    { id: 'ACT_1', label: 'Timeline', match: () => isAct },
    { id: 'HALL_OF_FAME', label: 'Hall of Fame', match: (v) => v === 'HALL_OF_FAME' },
    { id: 'INSIGHTS', label: 'Insights', match: (v) => v === 'INSIGHTS' },
    { id: 'ENCORE', label: 'Encore', match: (v) => v === 'ENCORE' },
    { id: 'FUTURE', label: 'Masa Depan', match: (v) => v === 'FUTURE' },
  ];
  return (
    <nav className="topnav" aria-label="Primary">
      <div className="topnav__left">
        <button
          className="topnav__brand"
          onClick={() => onViewChange('OVERTURE')}
          aria-label="Kembali ke Overture"
        >
          <img src="assets/logo-ajl.png" alt="" className="topnav__brand-wordmark" />
          <span>AJL40 · Microsite</span>
        </button>
        <a href="/esei/" style={{fontFamily:'var(--font-mono)',fontSize:'10.5px',fontWeight:700,letterSpacing:'var(--tr-eyebrow)',textTransform:'uppercase',color:'var(--gold)',textDecoration:'none',paddingBottom:'0',backgroundImage:'none'}} className="topnav__item">
          ← Siri Esei
        </a>
        <div className="topnav__menu">
          {items.map((it) => (
            <button
              key={it.label}
              onClick={() => onViewChange(it.id)}
              className={
                'topnav__item' + (it.match(currentView) ? ' topnav__item--active' : '')
              }
            >
              {it.label}
            </button>
          ))}
        </div>
      </div>
      <div className="topnav__right">
        <div className="topnav__disc" aria-hidden="true">
          <Icons.Disc3 size={16} />
        </div>
        <span className="topnav__status">
          <span className="topnav__status-dot"></span>Archive Mode · Active
        </span>
      </div>
    </nav>
  );
}

function Sidebar({ currentView, onViewChange }) {
  return (
    <aside className="sidebar" aria-label="Garis masa dekad">
      {window.actsData.map((act, i) => (
        <React.Fragment key={act.id}>
          <button
            onClick={() => onViewChange(act.id)}
            className={
              'sidebar__act' + (currentView === act.id ? ' sidebar__act--active' : '')
            }
            aria-label={`Pergi ke Act ${act.textNumber}, ${act.years}`}
          >
            Act {act.textNumber} · {act.years.replace('—', '–').split('–')[0]}
          </button>
          {i < window.actsData.length - 1 && <div className="sidebar__divider" />}
        </React.Fragment>
      ))}
    </aside>
  );
}

function TimelineRail({ currentView, onViewChange }) {
  const acts = window.actsData;
  const idx = acts.findIndex((a) => a.id === currentView);
  const activeIndex = idx >= 0 ? idx : 0;
  const active = acts[activeIndex];

  const onNext = () => {
    if (idx >= 0 && idx < acts.length - 1) {
      onViewChange(acts[idx + 1].id);
    } else if (idx === acts.length - 1) {
      onViewChange('HALL_OF_FAME');
    } else {
      onViewChange('ACT_1');
    }
  };

  return (
    <footer className="timeline" role="navigation" aria-label="Timeline">
      <div className="timeline__label">Timeline</div>
      <div className="timeline__rail" aria-hidden="true">
        <div
          className="timeline__progress"
          style={{ width: `${(activeIndex / (acts.length - 1)) * 100}%` }}
        />
        {acts.map((act, i) => {
          const pos = (i / (acts.length - 1)) * 100;
          const cls =
            'timeline__node' +
            (i === activeIndex
              ? ' timeline__node--active'
              : i < activeIndex
              ? ' timeline__node--past'
              : '');
          return (
            <button
              key={act.id}
              className={cls}
              style={{ left: `${pos}%` }}
              onClick={() => onViewChange(act.id)}
              title={`${act.subtitle} · ${act.years}`}
              aria-label={`${act.subtitle}, ${act.years}`}
            />
          );
        })}
        <div className="timeline__ticks">
          <span>1986</span>
          <span>1995</span>
          <span>2005</span>
          <span>2015</span>
          <span>2025</span>
        </div>
      </div>
      <div className="timeline__meta">
        <span className="timeline__meta-years">{active.years}</span>
        <span className="timeline__meta-sub">{active.subtitle}</span>
      </div>
      <button
        className="timeline__play"
        onClick={onNext}
        aria-label="Teruskan ke seterusnya"
      >
        <Icons.Play size={12} />
      </button>
    </footer>
  );
}

Object.assign(window, { TopNav, Sidebar, TimelineRail });