/* global React, ReactDOM, Sections, PxIcon */

const NAV = [
  { key: 'home',         label: 'HOME',         num: '01', icon: 'home' },
  { key: 'about',        label: 'ABOUT',        num: '02', icon: 'user' },
  { key: 'experience',   label: 'EXPERIENCE',   num: '03', icon: 'exp' },
  { key: 'projects',     label: 'PROJECTS',     num: '04', icon: 'proj' },
  { key: 'skills',       label: 'SKILLS',       num: '05', icon: 'skill' },
  { key: 'publications', label: 'PUBLICATIONS', num: '06', icon: 'book' },
  { key: 'contact',      label: 'CONTACT',      num: '07', icon: 'mail' },
];

function Clock() {
  const [t, setT] = React.useState(new Date());
  React.useEffect(() => {
    const id = setInterval(() => setT(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const pad = (n) => String(n).padStart(2,'0');
  return (
    <span>{pad(t.getHours())}:{pad(t.getMinutes())}:{pad(t.getSeconds())}</span>
  );
}

function App() {
  const [view, setView] = React.useState(() => localStorage.getItem('sion-view') || 'home');
  const viewRef = React.useRef(null);

  const go = (key) => {
    if (key === view) return;
    // pixel transition
    if (window.pixelTransition) {
      window.pixelTransition(() => {
        setView(key);
        localStorage.setItem('sion-view', key);
        if (viewRef.current) viewRef.current.scrollTop = 0;
      });
    } else {
      setView(key);
      localStorage.setItem('sion-view', key);
    }
  };

  // keyboard nav
  React.useEffect(() => {
    const onKey = (e) => {
      const n = parseInt(e.key, 10);
      if (!isNaN(n) && n >= 1 && n <= NAV.length) go(NAV[n-1].key);
      if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
        const idx = NAV.findIndex(v => v.key === view);
        go(NAV[(idx+1) % NAV.length].key);
      }
      if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
        const idx = NAV.findIndex(v => v.key === view);
        go(NAV[(idx-1+NAV.length) % NAV.length].key);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [view]);

  const Comp = Sections[view] || Sections.home;
  const activeIdx = NAV.findIndex(v => v.key === view);

  return (
    <React.Fragment>
      {/* Sidebar */}
      <aside className="sidebar" data-screen-label="sidebar">
        <div className="brand">
          <div className="brand-mark">SJ</div>
          <div className="brand-text">
            <div className="name">SION.DEV</div>
            <div className="sub">v1.0.0 · build 042</div>
          </div>
        </div>

        <div style={{fontFamily:'Press Start 2P, monospace', fontSize:8, color:'var(--text-mute)', letterSpacing:'0.1em', margin:'6px 2px'}}>
          ▸ MENU
        </div>

        <nav className="nav">
          {NAV.map((n) => (
            <div key={n.key}
                 className={`nav-item ${view === n.key ? 'active' : ''}`}
                 onClick={() => go(n.key)}>
              <span className="num">{n.num}</span>
              <span className="ico"><PxIcon type={n.icon} color="currentColor" size={16}/></span>
              <span>{n.label}</span>
            </div>
          ))}
        </nav>

        <div className="sidebar-foot">
          <div style={{fontFamily:'Press Start 2P, monospace', fontSize:8, color:'var(--text-mute)', letterSpacing:'0.1em'}}>
            ▸ STATUS
          </div>
          <span className="status-chip">
            <span className="status-dot"></span>
            OPEN TO WORK
          </span>
          <div className="socials">
            <a className="sock" href="https://github.com/jeonsion" target="_blank" rel="noopener noreferrer" title="GitHub">
              <svg width="14" height="14" viewBox="0 0 16 16" shapeRendering="crispEdges">
                {[[5,2],[6,2],[7,2],[8,2],[9,2],[10,2],[4,3],[11,3],[3,4],[12,4],[3,5],[12,5],[3,6],[12,6],[3,7],[12,7],[4,8],[5,8],[6,8],[9,8],[10,8],[11,8],[5,9],[6,9],[9,9],[10,9],[5,10],[10,10],[5,11],[6,11],[7,11],[8,11],[9,11],[10,11],[4,12],[6,12],[9,12],[11,12],[4,13],[6,13],[9,13],[11,13]]
                  .map((p,i) => <rect key={i} x={p[0]} y={p[1]} width="1" height="1" fill="currentColor"/>)}
              </svg>
            </a>
            <a className="sock" href="https://www.linkedin.com/in/sion-jeon" target="_blank" rel="noopener noreferrer" title="LinkedIn">
              <svg width="14" height="14" viewBox="0 0 16 16" shapeRendering="crispEdges">
                {[[3,3],[4,3],[5,3],[3,4],[4,4],[5,4],[3,6],[4,6],[3,7],[4,7],[3,8],[4,8],[3,9],[4,9],[3,10],[4,10],[3,11],[4,11],[3,12],[4,12],[6,6],[7,6],[8,6],[9,6],[10,6],[11,6],[12,6],[6,7],[7,7],[12,7],[6,8],[7,8],[9,8],[10,8],[11,8],[12,8],[6,9],[7,9],[9,9],[12,9],[6,10],[7,10],[9,10],[12,10],[6,11],[7,11],[9,11],[12,11],[6,12],[7,12],[9,12],[12,12]]
                  .map((p,i) => <rect key={i} x={p[0]} y={p[1]} width="1" height="1" fill="currentColor"/>)}
              </svg>
            </a>
            <a className="sock" href="mailto:a24349663@gmail.com" title="Email">
              <PxIcon type="mail" size={16}/>
            </a>
          </div>
          <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'var(--text-mute)', marginTop: 6}}>
            © SION 2026 · made w/ ♥
          </div>
        </div>
      </aside>

      {/* Main */}
      <main className="main">
        <div className="topbar">
          <div className="crumbs">
            <span>~</span><span className="slash">/</span>
            <span>sion.dev</span><span className="slash">/</span>
            <span className="here">{view}</span>
          </div>
          <div style={{display:'flex', gap:14, alignItems:'center'}}>
            <span style={{fontSize:12, color:'var(--text-mute)'}}>
              <span className="kbd">1-8</span> jump · <span className="kbd">↑↓</span> nav
            </span>
            <span className="clock"><Clock/></span>
          </div>
        </div>

        <div className="view" ref={viewRef} data-screen-label={`0${activeIdx+1} ${view}`}>
          <Comp go={go}/>
        </div>
      </main>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App/>);