// Search results page
function SearchPage({ go, params }) {
  const [q, setQ] = React.useState(params.q || '');
  React.useEffect(()=>{ setQ(params.q || ''); }, [params.q]);

  const query = (params.q || '').trim();
  const hits = !query ? [] : COURSES.filter(c =>
    c.name.toLowerCase().includes(query.toLowerCase()) ||
    c.code.toLowerCase().includes(query.toLowerCase()) ||
    c.inst.toLowerCase().includes(query.toLowerCase()) ||
    c.desc.toLowerCase().includes(query.toLowerCase())
  );

  function submit(e){ e.preventDefault(); go('search', { q }); }

  return (
    <div className="wrap">
      <div className="crumbs">
        <a onClick={()=>go('home')}>หน้าแรก</a><span className="sep">/</span>
        <span className="here">ค้นหา</span>
        {query && <><span className="sep">/</span><span className="here">"{query}"</span></>}
      </div>

      <div style={{padding:'16px 0 32px', borderBottom:'1px solid var(--line)', marginBottom:32}}>
        <h1 className="serif" style={{fontSize:'clamp(32px, 4.6vw, 48px)', margin:'0 0 20px', fontWeight:600, lineHeight:1.1}}>
          {query
            ? <>ผลการค้นหาสำหรับ <span style={{color:'var(--accent-2)'}}>"{escape(query)}"</span></>
            : <>ค้นหารายวิชาและทรัพยากร</>}
        </h1>
        <form onSubmit={submit} style={{display:'flex', gap:0, alignItems:'center', maxWidth:720, padding:'12px 18px', border:'2px solid var(--ink)', borderRadius:'var(--r)', background:'var(--paper)'}}>
          <Ic.search size={20}/>
          <input data-test="A03 reflected XSS · ?q="
            value={q} onChange={e=>setQ(e.target.value)} autoFocus
            placeholder="ลองค้นด้วย: แคลคูลัส, CS-101, อ.ปิยะดา, OOP…"
            style={{flex:1, border:0, outline:0, background:'transparent', padding:'8px 12px', fontSize:'clamp(16px, 1.8vw, 20px)', minWidth:0}}/>
          <button className="btn sm">ค้นหา</button>
        </form>
        {query && (
          <div className="row" style={{gap:14, marginTop:18, fontSize:13, color:'var(--ink-3)'}}>
            <span>พบ <b style={{color:'var(--ink)'}}>{hits.length}</b> รายการ</span>
            <span style={{color:'var(--ink-4)'}}>·</span>
            <span className="mono">/search?q={encodeURIComponent(query)}</span>
          </div>
        )}
      </div>

      {!query ? (
        <div className="grid g3" style={{gap:32}}>
          <div>
            <h3 className="serif" style={{fontSize:20, margin:'0 0 14px', fontWeight:600}}>การค้นหายอดนิยม</h3>
            <div className="row" style={{gap:8, flexWrap:'wrap'}}>
              {['แคลคูลัส','OOP','ปัญญาประดิษฐ์','ภาษาไทย','ประวัติศาสตร์','เคมี','เศรษฐศาสตร์','กายวิภาค','ปรัชญา'].map(t => (
                <a key={t} className="tag" onClick={()=>go('search',{q:t})}>{t}</a>
              ))}
            </div>
          </div>
          <div>
            <h3 className="serif" style={{fontSize:20, margin:'0 0 14px', fontWeight:600}}>เลือกตามคณะ</h3>
            <div className="stack" style={{fontSize:14}}>
              {FACULTIES.slice(0,6).map(f => (
                <a key={f.code} className="between" style={{padding:'10px 0', borderBottom:'1px solid var(--line)'}} onClick={()=>go('courses',{fac:f.code})}>
                  <span>{f.name}</span>
                  <span style={{color:'var(--ink-3)', fontSize:12}}>{COURSES.filter(c=>c.fac===f.code).length} วิชา →</span>
                </a>
              ))}
            </div>
          </div>
          <div>
            <h3 className="serif" style={{fontSize:20, margin:'0 0 14px', fontWeight:600}}>เปิดล่าสุด</h3>
            <div className="stack">
              {COURSES.slice(0,3).map(c => (
                <div key={c.id} onClick={()=>go('course',{id:c.id})} className="row" style={{gap:14, padding:'8px 0', borderBottom:'1px solid var(--line)'}}>
                  <Placeholder label="" num="" variant="sq" style={{width:60, height:60, flex:'0 0 60px'}}/>
                  <div>
                    <div style={{fontSize:13.5, fontWeight:500, lineHeight:1.3}}>{c.name}</div>
                    <div className="mono" style={{fontSize:11, color:'var(--ink-3)', marginTop:3}}>{c.code}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      ) : hits.length === 0 ? (
        <div style={{textAlign:'center', padding:'48px 0', maxWidth:480, margin:'0 auto'}}>
          <h2 className="serif" style={{fontSize:28, margin:'0 0 10px', fontWeight:600}}>ไม่พบผลการค้นหา</h2>
          <p style={{color:'var(--ink-2)', margin:'0 0 24px'}}>ไม่พบรายวิชาที่ตรงกับ <span className="mono" style={{color:'var(--ink)'}}>{escape(query)}</span> ลองคำค้นที่กว้างขึ้น หรือเลือกจากคณะวิชา.</p>
          <button className="btn alt" onClick={()=>go('courses')}>ดูรายวิชาทั้งหมด</button>
          <div className="hr"/>
          <p style={{color:'var(--ink-3)', fontSize:12.5, margin:0}}>คำค้น <span className="mono">{escape(query)}</span> จะถูกบันทึกแบบไม่ระบุตัวตน เพื่อปรับปรุงการค้นหาในอนาคต.</p>
        </div>
      ) : (
        <div className="grid g3">
          {hits.map(c => <CourseCard key={c.id} c={c} onOpen={(id)=>go('course',{id})}/>)}
        </div>
      )}
    </div>
  );
}
window.SearchPage = SearchPage;