// App shell — Aksaraphat University e-learning portal

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "testMode": false,
  "accent": "#b88532",
  "showUtil": true
}/*EDITMODE-END*/;

function Header({ go, route, onSearch, isAuth, user, onLogout }) {
  const displayName = user?.name || 'นักศึกษา';
  const initial = (displayName || 'น').slice(0, 1);
  const [q, setQ] = React.useState('');
  function submit(e){ e.preventDefault(); if (q.trim()) { go('search',{q:q.trim()}); setQ(''); } }
  const navs = [
    { id:'home',      label:'หน้าแรก' },
    { id:'courses',   label:'รายวิชา' },
    { id:'dashboard', label:'หลักสูตรของฉัน' },
    { id:'news',      label:'ข่าวประกาศ' },
  ];
  return (
    <header className="site">
      <div className="wrap">
        <div className="nav-row">
          <div className="brand" onClick={()=>go('home')}>
            <div className="crest">ท</div>
            <div className="brand-name">
              มหาวิทยาลัยทดสอบ
              <small>TEST UNIVERSITY · ใช้ในการทดสอบระบบ</small>
            </div>
          </div>

          <nav className="main">
            {navs.map(n => (
              <a key={n.id} className={`nav-link ${route===n.id?'active':''}`} onClick={()=>go(n.id)}>{n.label}</a>
            ))}
          </nav>

          <form className="search-inline" onSubmit={submit} data-test="A03 reflected ?q">
            <Ic.search size={15}/>
            <input value={q} onChange={e=>setQ(e.target.value)} placeholder="ค้นหารายวิชา…"/>
          </form>

          <button className="icon-btn" title="การแจ้งเตือน">
            <Ic.bell/>
            <span className="pill-num">3</span>
          </button>

          {isAuth ? (
            <>
              <button className="row" style={{gap:8, padding:'4px 4px 4px 12px', background:'var(--bg-2)', border:'1px solid var(--line)', borderRadius:99, cursor:'default'}} onClick={()=>go('dashboard')}>
                <span style={{fontSize:13, color:'var(--ink-2)'}}>{displayName.split(' ')[0]}</span>
                <span style={{width:30, height:30, borderRadius:99, background:'var(--ink)', color:'var(--accent)', display:'grid', placeItems:'center', fontFamily:'Noto Serif Thai, serif', fontWeight:600}}>{initial}</span>
              </button>
              <button className="btn alt sm" onClick={onLogout} title="ออกจากระบบ">ออก</button>
            </>
          ) : (
            <button className="btn sm" onClick={()=>go('login')} data-test="A07 auth entry">เข้าสู่ระบบ</button>
          )}
        </div>
      </div>
    </header>
  );
}

function Footer({ go }) {
  return (
    <footer className="site">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <h3>มหาวิทยาลัยทดสอบ</h3>
            <p>เปิดประตูสู่ปัญญา · ใช้ในการทดสอบระบบ</p>
            <p style={{marginTop:14}}>
              <a href="mailto:info@aksaraphat.example.ac.th">info@aksaraphat.example.ac.th</a>
              <span className="mono" style={{fontSize:13}}>โทร · 02-555-0144</span>
            </p>
          </div>
          <div>
            <h4>การศึกษา</h4>
            <a onClick={()=>go('courses')}>รายวิชาทั้งหมด</a>
            <a onClick={()=>go('courses')}>หลักสูตรปริญญาตรี</a>
            <a onClick={()=>go('courses')}>หลักสูตรบัณฑิตศึกษา</a>
            <a>หลักสูตรประกาศนียบัตร</a>
            <a>หลักสูตรการศึกษาต่อเนื่อง</a>
          </div>
          <div>
            <h4>นักศึกษา</h4>
            <a onClick={()=>go('login')}>เข้าสู่ระบบ</a>
            <a onClick={()=>go('dashboard')}>หลักสูตรของฉัน</a>
            <a>สำนักทะเบียน</a>
            <a>ทุนการศึกษา</a>
            <a>หอพักนักศึกษา</a>
            <a>บริการสุขภาพ</a>
          </div>
          <div>
            <h4>เกี่ยวกับเรา</h4>
            <a>ประวัติมหาวิทยาลัย</a>
            <a>คณะวิชา</a>
            <a onClick={()=>go('news')}>ข่าวและประกาศ</a>
            <a>การวิจัย</a>
            <a>ติดต่อเรา</a>
            <a>ร่วมงานกับเรา</a>
          </div>
        </div>
        <div className="footer-foot">
          <span>© 2569 มหาวิทยาลัยทดสอบ · ใช้ในการทดสอบระบบ</span>
          <span>นโยบายความเป็นส่วนตัว · ข้อกำหนดการใช้งาน · นโยบายคุกกี้</span>
          <span className="mono">v2026.05.13 · build a8f3c2</span>
        </div>
      </div>
    </footer>
  );
}

// Test info bar
function TestInfoBar({ route, params }) {
  const map = {
    home:      { path:'/', cache:'public, max-age=300', surface:'newsletter, ค้นหา · static page' },
    courses:   { path:`/courses?fac=${params.fac||''}&level=&sort=`, cache:'public, max-age=120, s-maxage=300', surface:'ตัวกรอง, sort, pagination · semi-static' },
    course:    { path:`/courses/${params.id||'cs101'}`, cache:'public, max-age=300, s-maxage=3600, swr=600', surface:'?id= (IDOR), ฟอรัม (stored XSS), ลงทะเบียน (race)' },
    lecture:   { path:`/learn/${params.id||'cs101'}/${params.lec||'L4'}`, cache:'private, max-age=0', surface:'HLS stream, บันทึก (XSS), progress tracking' },
    dashboard: { path:'/dashboard', cache:'private, no-store', surface:'ผลการเรียน, deadlines · authenticated' },
    login:     { path:'/login', cache:'no-store', surface:'login (A07 cred stuff), register (A07 enum)' },
    search:    { path:`/search?q=${encodeURIComponent(params.q||'')}`, cache:'no-store', surface:'?q= (reflected XSS, SQLi)' },
    news:      { path:`/news${params.id?'/'+params.id:''}`, cache:'public, max-age=600', surface:'ความคิดเห็น (stored XSS)' },
  };
  const r = map[route] || map.home;
  return (
    <div style={{
      position:'fixed', left:0, right:0, bottom:0, zIndex:50,
      background:'var(--ink)', color:'var(--bg)',
      fontFamily:'JetBrains Mono, monospace', fontSize:11,
      borderTop:'2px solid var(--accent)',
      display:'flex', alignItems:'center', gap:14, padding:'8px 18px',
      overflow:'auto', whiteSpace:'nowrap'
    }}>
      <span style={{background:'var(--accent)', color:'var(--ink)', padding:'2px 8px', borderRadius:2, fontWeight:600, letterSpacing:'.08em'}}>TEST MODE</span>
      <span style={{color:'rgba(245,239,226,.5)'}}>route</span> <b>{route}</b>
      <span style={{color:'rgba(245,239,226,.5)'}}>path</span> <b>{r.path}</b>
      <span style={{color:'rgba(245,239,226,.5)'}}>cache-control</span> <b>{r.cache}</b>
      <span style={{color:'rgba(245,239,226,.5)'}}>surface</span> <b>{r.surface}</b>
      <span style={{flex:1}}/>
      <span style={{color:'rgba(245,239,226,.5)'}}>edge BKK-3 · TLS 1.3 · h2 · 22ms</span>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const initial = window.pathToRoute(window.location.pathname, window.location.search);
  const [route, setRoute] = React.useState(initial.route);
  const [params, setParams] = React.useState(initial.params);
  const [enrolled, setEnrolled] = React.useState([]);
  const [isAuth, setIsAuth] = React.useState(false);
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    document.body.classList.toggle('test-mode', !!t.testMode);
    document.documentElement.style.setProperty('--accent', t.accent);
  }, [t.testMode, t.accent]);

  // History API: normalize address bar on load + sync on back/forward
  React.useEffect(() => {
    const norm = window.pathToRoute(window.location.pathname, window.location.search);
    window.history.replaceState(null, '', window.routeToPath(norm.route, norm.params));
    function onPop() {
      const next = window.pathToRoute(window.location.pathname, window.location.search);
      setRoute(next.route);
      setParams(next.params);
      window.scrollTo({ top: 0, behavior: 'instant' });
    }
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, []);

  async function refreshAuth() {
    const me = await window.api.me();
    setIsAuth(!!me);
    setUser(me);
    if (me) {
      try {
        const { enrolled } = await window.api.enrollments();
        setEnrolled(enrolled);
      } catch {}
    } else {
      setEnrolled([]);
    }
  }

  React.useEffect(() => { refreshAuth(); }, []);

  function go(r, p = {}) {
    const path = window.routeToPath(r, p);
    if (path !== window.location.pathname + window.location.search) {
      window.history.pushState(null, '', path);
    }
    setRoute(r); setParams(p);
    window.scrollTo({ top: 0, behavior: 'instant' });
  }

  async function enroll(id) {
    setEnrolled(e => e.includes(id) ? e : [...e, id]);
    try {
      await window.api.enroll(id);
    } catch (err) {
      if (err.status === 401) { go('login'); }
      setEnrolled(e => e.filter(x => x !== id));
    }
  }

  async function onLoginSuccess() {
    await refreshAuth();
  }

  async function onLogout() {
    try { await window.api.logout(); } catch {}
    setIsAuth(false); setUser(null); setEnrolled([]);
    go('home');
  }

  return (
    <>
      <div style={{
        background: 'var(--maroon)', color: 'var(--paper)',
        textAlign: 'center', padding: '6px 16px',
        fontSize: 13, fontWeight: 600, letterSpacing: '.02em',
      }}>
        เว็บไซต์นี้ใช้ในการทดสอบระบบเท่านั้น
      </div>
      {t.showUtil && (
        <div className="util">
          <div className="wrap">
            <div className="links">
              <a>สำนักทะเบียน</a>
              <a>ห้องสมุดกลาง</a>
              <a>ระบบเทคโนโลยีสารสนเทศ</a>
              <a>ศิษย์เก่าสัมพันธ์</a>
            </div>
            <div className="lang">
              <a><b>ไทย</b></a>
              <a>ENG</a>
              <span style={{color:'rgba(245,239,226,.3)'}}>·</span>
              <a>ขนาดตัวอักษร ก-</a>
              <a>ก+</a>
            </div>
          </div>
        </div>
      )}
      <Header go={go} route={route} isAuth={isAuth} user={user} onLogout={onLogout}/>

      <main style={{paddingBottom: t.testMode ? 56 : 0}}>
        {route === 'home'      && <HomePage go={go}/>}
        {route === 'courses'   && <CoursesPage go={go} params={params}/>}
        {route === 'course'    && <CoursePage go={go} params={params} enroll={enroll} enrolled={enrolled}/>}
        {route === 'lecture'   && <LecturePage go={go} params={params}/>}
        {route === 'dashboard' && <DashboardPage go={go} enrolled={enrolled}/>}
        {route === 'login'     && <LoginPage go={go} onLogin={onLoginSuccess}/>}
        {route === 'search'    && <SearchPage go={go} params={params}/>}
        {route === 'news'      && <NewsPage go={go} params={params}/>}
      </main>

      {route !== 'login' && route !== 'lecture' && <Footer go={go}/>}

      {t.testMode && <TestInfoBar route={route} params={params}/>}

      <TweaksPanel title="Tweaks">
        <TweakSection label="ทดสอบ / Test surface"/>
        <TweakToggle label="โหมดทดสอบ (เน้น input + endpoint bar)" value={t.testMode}
          onChange={v => setTweak('testMode', v)}/>
        <TweakSection label="รูปลักษณ์"/>
        <TweakColor label="สีหลัก (accent)" value={t.accent}
          options={['#b88532','#7d2a2a','#306060','#4a3d5c','#3d5074']}
          onChange={v => setTweak('accent', v)}/>
        <TweakToggle label="แสดงแถบเมนูบน" value={t.showUtil}
          onChange={v => setTweak('showUtil', v)}/>
      </TweaksPanel>
    </>
  );
}

window.hydrate().then(() => {
  ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
});