// Courses catalog
function CoursesPage({ go, params }) {
  const [fac, setFac] = React.useState(params.fac || 'all');
  const [level, setLevel] = React.useState('all');
  const [sort, setSort] = React.useState('popular');

  React.useEffect(()=>{ if (params.fac) setFac(params.fac); }, [params.fac]);

  let list = [...COURSES];
  if (fac !== 'all') list = list.filter(c => c.fac === fac);
  if (level !== 'all') list = list.filter(c => c.level.includes(level));
  if (sort === 'rating') list.sort((a,b)=>b.rating-a.rating);
  else if (sort === 'students') list.sort((a,b)=>b.students-a.students);
  else if (sort === 'name') list.sort((a,b)=>a.name.localeCompare(b.name,'th'));

  return (
    <div className="wrap">
      <div className="crumbs">
        <a onClick={()=>go('home')}>หน้าแรก</a><span className="sep">/</span>
        <span className="here">รายวิชาทั้งหมด</span>
        {fac !== 'all' && <><span className="sep">/</span><span className="here">{facName(fac)}</span></>}
      </div>

      <div style={{padding:'12px 0 32px'}}>
        <h1 className="serif" style={{fontSize:'clamp(32px, 4.6vw, 52px)', margin:'0 0 10px', fontWeight:600, color:'var(--ink)', letterSpacing:'-.005em'}}>
          {fac === 'all' ? 'รายวิชาทั้งหมด' : facName(fac)}
        </h1>
        <p style={{color:'var(--ink-2)', margin:0, fontSize:15}}>เลือกเรียนรายวิชาจาก 8 คณะ ทุกระดับชั้น ทั้งหลักสูตรไทยและนานาชาติ.</p>
      </div>

      {/* Filter bar */}
      <div className="panel" style={{padding:'16px 20px', marginBottom:24, display:'grid', gridTemplateColumns:'1fr auto auto auto', gap:16, alignItems:'center'}}>
        <div className="search-inline" data-test="A03 search ?q" style={{minWidth:0, background:'var(--bg-1)'}}>
          <Ic.search size={16}/>
          <input placeholder="ค้นหารายวิชา รหัสวิชา หรือผู้สอน…"/>
        </div>
        <select value={fac} onChange={e=>setFac(e.target.value)} data-test="A03 reflected param"
          style={{padding:'10px 14px', border:'1px solid var(--line-2)', borderRadius:4, background:'var(--paper)', fontSize:14}}>
          <option value="all">ทุกคณะ</option>
          {FACULTIES.map(f => <option key={f.code} value={f.code}>{f.name}</option>)}
        </select>
        <select value={level} onChange={e=>setLevel(e.target.value)}
          style={{padding:'10px 14px', border:'1px solid var(--line-2)', borderRadius:4, background:'var(--paper)', fontSize:14}}>
          <option value="all">ทุกระดับ</option>
          <option value="พื้นฐาน">วิชาพื้นฐานทั่วไป</option>
          <option value="ปี 1">ปริญญาตรี ปี 1</option>
          <option value="ปี 2">ปริญญาตรี ปี 2</option>
          <option value="ปี 3">ปริญญาตรี ปี 3</option>
          <option value="ปี 4">ปริญญาตรี ปี 4</option>
        </select>
        <select value={sort} onChange={e=>setSort(e.target.value)}
          style={{padding:'10px 14px', border:'1px solid var(--line-2)', borderRadius:4, background:'var(--paper)', fontSize:14}}>
          <option value="popular">เรียงตามความนิยม</option>
          <option value="rating">เรียงตามคะแนน</option>
          <option value="students">จำนวนผู้เรียน</option>
          <option value="name">ชื่อวิชา (ก-ฮ)</option>
        </select>
      </div>

      {/* Faculty chips */}
      <div className="row" style={{gap:8, flexWrap:'wrap', marginBottom:32}}>
        <button onClick={()=>setFac('all')} className={`tag ${fac==='all'?'acc':''}`} style={{padding:'6px 14px', cursor:'default', fontSize:13}}>ทั้งหมด ({COURSES.length})</button>
        {FACULTIES.map(f => (
          <button key={f.code} onClick={()=>setFac(f.code)} className={`tag ${fac===f.code?'acc':''}`} style={{padding:'6px 14px', cursor:'default', fontSize:13}}>
            {f.name} ({COURSES.filter(c=>c.fac===f.code).length})
          </button>
        ))}
      </div>

      <div className="between" style={{marginBottom:20}}>
        <span style={{color:'var(--ink-3)', fontSize:13.5}}>พบ <b style={{color:'var(--ink)'}}>{list.length}</b> รายวิชา</span>
        <span className="mono" style={{fontSize:11, color:'var(--ink-4)'}} data-test="?fac=, ?level=, ?sort=">/courses?fac={fac}&amp;level={level}&amp;sort={sort}</span>
      </div>

      {/* Grid */}
      {list.length === 0 ? (
        <div className="panel" style={{textAlign:'center', padding:'56px 24px'}}>
          <h3 className="serif" style={{fontSize:24, margin:'0 0 10px'}}>ไม่พบรายวิชาตามเงื่อนไข</h3>
          <p style={{color:'var(--ink-3)', margin:'0 0 20px'}}>ลองลดเงื่อนไขการกรอง หรือเลือก "ทั้งหมด" เพื่อดูรายวิชาทุกคณะ.</p>
          <button className="btn alt" onClick={()=>{setFac('all'); setLevel('all');}}>ล้างตัวกรอง</button>
        </div>
      ) : (
        <div className="grid g4">
          {list.map(c => <CourseCard key={c.id} c={c} onOpen={(id)=>go('course',{id})}/>)}
        </div>
      )}

      {/* Pagination */}
      <div style={{display:'flex', justifyContent:'center', alignItems:'center', gap:6, padding:'48px 0 24px'}}>
        <button className="icon-btn" data-test="?page=N — IDOR"><Ic.arrowL size={16}/></button>
        {[1,2,3,4].map(n => (
          <button key={n} className="tag" style={{cursor:'default', padding:'6px 12px',
            background: n===1?'var(--ink)':'var(--bg-2)',
            color: n===1?'var(--paper)':'inherit',
            borderColor:'transparent'}}>{n}</button>
        ))}
        <span style={{color:'var(--ink-3)', padding:'0 6px'}}>…</span>
        <button className="tag" style={{cursor:'default', padding:'6px 12px'}}>32</button>
        <button className="icon-btn"><Ic.arrow size={16}/></button>
      </div>
    </div>
  );
}
window.CoursesPage = CoursesPage;