// Student dashboard — "หลักสูตรของฉัน"
function DashboardPage({ go, enrolled }) {
  const myCourses = enrolled.length === 0
    ? COURSES.slice(0, 4)  // demo enrolled
    : COURSES.filter(c => enrolled.includes(c.id));

  return (
    <div className="wrap">
      <div className="crumbs">
        <a onClick={()=>go('home')}>หน้าแรก</a><span className="sep">/</span>
        <span className="here">หลักสูตรของฉัน</span>
      </div>

      <div style={{padding:'8px 0 24px'}}>
        <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', flexWrap:'wrap', gap:24}}>
          <div className="row" style={{gap:18}}>
            <img src="/assets/img/user-paweena.jpg" alt="" loading="lazy"
              style={{width:72, height:72, borderRadius:99, objectFit:'cover', border:'2px solid var(--accent)', boxShadow:'0 6px 16px -6px rgba(26,37,71,.3)'}}/>
            <div>
              <h1 className="serif" style={{fontSize:'clamp(32px, 4.6vw, 48px)', margin:0, fontWeight:600, color:'var(--ink)'}}>สวัสดี ปวีณา</h1>
              <p style={{color:'var(--ink-2)', margin:'8px 0 0', fontSize:15}}>วันนี้คุณมี <b style={{color:'var(--maroon)'}}>2 งานที่ใกล้กำหนดส่ง</b> และ <b>3 วิดีโอที่ยังไม่ได้ดู</b>.</p>
            </div>
          </div>
          <div className="row" style={{gap:10}}>
            <button className="btn alt"><Ic.cal size={15}/> ตารางเรียน</button>
            <button className="btn acc"><Ic.book size={15}/> เพิ่มรายวิชา</button>
          </div>
        </div>
      </div>

      {/* KPI cards */}
      <div className="grid g4" style={{marginBottom:32}}>
        {[
          { l:'รายวิชาที่ลงทะเบียน', v: myCourses.length, u:'วิชา', s:'ภาคต้น 2569' },
          { l:'หน่วยกิตรวม', v: myCourses.reduce((s,c)=>s+c.credits,0), u:'หน่วยกิต', s:'จาก 21 หน่วยกิตเต็ม' },
          { l:'งานที่ใกล้กำหนดส่ง', v: 2, u:'งาน', s:'ในสัปดาห์นี้' },
          { l:'เกรดเฉลี่ยสะสม', v: '3.62', u:'GPA', s:'อันดับ B+ ของรุ่น' },
        ].map(k => (
          <div key={k.l} className="panel" style={{padding:'18px 20px'}}>
            <div style={{fontSize:12.5, color:'var(--ink-3)', letterSpacing:'.02em'}}>{k.l}</div>
            <div style={{fontFamily:'Noto Serif Thai, serif', fontSize:36, fontWeight:600, lineHeight:1.1, marginTop:8, color:'var(--ink)'}}>
              {k.v}<span style={{fontSize:14, color:'var(--ink-3)', marginLeft:6, fontWeight:400}}>{k.u}</span>
            </div>
            <div style={{fontSize:12, color:'var(--ink-3)', marginTop:6}}>{k.s}</div>
          </div>
        ))}
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1.6fr 1fr', gap:32, alignItems:'flex-start'}}>
        <div>
          {/* In progress */}
          <h2 className="serif" style={{fontSize:24, margin:'0 0 16px', fontWeight:600}}>กำลังเรียนอยู่</h2>
          <div className="stack">
            {myCourses.map(c => {
              const progress = [18, 64, 92, 8, 47, 33][myCourses.indexOf(c) % 6];
              return (
                <div key={c.id} className="panel" style={{padding:0, overflow:'hidden', display:'grid', gridTemplateColumns:'180px 1fr auto', gap:0, alignItems:'stretch', cursor:'default'}}
                  onClick={()=>go('lecture',{id:c.id})}>
                  <Placeholder label={c.code} num="" variant="sq" style={{aspectRatio:'auto', height:'100%', minHeight:120}}/>
                  <div style={{padding:'18px 22px'}}>
                    <div className="row" style={{gap:8, marginBottom:6}}>
                      <span className="mono" style={{fontSize:11, color:'var(--accent-2)', fontWeight:600}}>{c.code}</span>
                      <span style={{color:'var(--ink-4)'}}>·</span>
                      <span style={{fontSize:12, color:'var(--ink-3)'}}>{facName(c.fac)}</span>
                    </div>
                    <h3 className="serif" style={{margin:'0 0 6px', fontSize:20, fontWeight:600}}>{c.name}</h3>
                    <p style={{color:'var(--ink-3)', fontSize:13, margin:'0 0 14px'}}>{c.inst}</p>
                    <div className="row" style={{gap:14}}>
                      <div style={{flex:1, maxWidth:300}}>
                        <div className="pbar"><div style={{width:progress+'%'}}/></div>
                        <div className="row" style={{justifyContent:'space-between', marginTop:6, fontSize:12, color:'var(--ink-3)'}}>
                          <span>คืบหน้า {progress}%</span>
                          <span>{Math.round(c.lectures * progress/100)}/{c.lectures} บทเรียน</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div style={{padding:'18px 22px', display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'flex-end', gap:10, borderLeft:'1px solid var(--line)', background:'var(--bg-1)', minWidth:160}}>
                    <button className="btn sm acc">เรียนต่อ <Ic.arrow size={14}/></button>
                    <span style={{fontSize:12, color:'var(--ink-3)'}}>ครั้งสุดท้าย 2 ชม.</span>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Recent grades */}
          <h2 className="serif" style={{fontSize:24, margin:'40px 0 16px', fontWeight:600}}>ผลการประเมินล่าสุด</h2>
          <div className="panel" style={{padding:0, overflow:'hidden'}}>
            <table style={{width:'100%', borderCollapse:'collapse', fontSize:14}}>
              <thead>
                <tr style={{background:'var(--bg-1)', borderBottom:'1px solid var(--line)'}}>
                  <th style={{textAlign:'left', padding:'12px 18px', fontSize:11.5, color:'var(--ink-3)', letterSpacing:'.06em', fontWeight:600, textTransform:'uppercase'}}>รายวิชา</th>
                  <th style={{textAlign:'left', padding:'12px 18px', fontSize:11.5, color:'var(--ink-3)', letterSpacing:'.06em', fontWeight:600, textTransform:'uppercase'}}>งาน</th>
                  <th style={{textAlign:'right', padding:'12px 18px', fontSize:11.5, color:'var(--ink-3)', letterSpacing:'.06em', fontWeight:600, textTransform:'uppercase'}}>คะแนน</th>
                  <th style={{textAlign:'right', padding:'12px 18px', fontSize:11.5, color:'var(--ink-3)', letterSpacing:'.06em', fontWeight:600, textTransform:'uppercase'}}>วันที่</th>
                </tr>
              </thead>
              <tbody>
                {[
                  { c:'CS-101', n:'แบบฝึกหัด 01 · OOP Basics', s:'18/20', d:'12 พ.ค.', ok:true },
                  { c:'MATH-101', n:'ควิซ 02 · ลิมิตและความต่อเนื่อง', s:'17/20', d:'10 พ.ค.', ok:true },
                  { c:'TH-101', n:'งานเขียนเชิงสร้างสรรค์', s:'19/20', d:'08 พ.ค.', ok:true },
                  { c:'HIST-201', n:'รายงาน · ยุคหลังเปลี่ยนแปลงการปกครอง', s:'14/20', d:'05 พ.ค.', ok:false },
                  { c:'CS-101', n:'แบบฝึกหัด 00 · Hello world', s:'20/20', d:'02 พ.ค.', ok:true },
                ].map((g,i) => (
                  <tr key={i} style={{borderBottom:i<4?'1px solid var(--line)':0}}>
                    <td style={{padding:'14px 18px'}}><span className="mono" style={{fontSize:11.5, color:'var(--accent-2)', fontWeight:600}}>{g.c}</span></td>
                    <td style={{padding:'14px 18px'}}>{g.n}</td>
                    <td style={{padding:'14px 18px', textAlign:'right', fontFamily:'JetBrains Mono, monospace', color: g.ok?'var(--ok)':'var(--warn)', fontWeight:600}}>{g.s}</td>
                    <td style={{padding:'14px 18px', textAlign:'right', color:'var(--ink-3)', fontSize:13}}>{g.d}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Sidebar */}
        <aside style={{position:'sticky', top:120, display:'flex', flexDirection:'column', gap:20}}>
          {/* Upcoming */}
          <div className="panel" style={{padding:20}}>
            <div className="between" style={{marginBottom:14}}>
              <h3 className="serif" style={{margin:0, fontSize:18, fontWeight:600}}>กำหนดส่งงาน</h3>
              <span className="tag bad">2 ด่วน</span>
            </div>
            {[
              { c:'CS-101', t:'แบบฝึกหัด 02 · Exception', d:'14 พ.ค.', dl:'23:59', urgent:true },
              { c:'MATH-101', t:'งานบ้านสัปดาห์ที่ 4', d:'16 พ.ค.', dl:'23:59', urgent:true },
              { c:'TH-101', t:'อ่านบทที่ 5 ก่อนเรียน', d:'18 พ.ค.', dl:'08:00', urgent:false },
              { c:'CS-101', t:'โปรเจ็กต์: ห้องสมุดดิจิทัล', d:'12 มิ.ย.', dl:'23:59', urgent:false },
            ].map((a,i) => (
              <div key={i} style={{padding:'12px 0', borderBottom:i<3?'1px solid var(--line)':0}}>
                <div className="row" style={{gap:8, marginBottom:4}}>
                  <span className="mono" style={{fontSize:11, color: a.urgent?'var(--maroon)':'var(--ink-3)', fontWeight:600}}>{a.d}</span>
                  <span style={{color:'var(--ink-4)'}}>·</span>
                  <span className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>{a.dl}</span>
                  {a.urgent && <span className="tag bad" style={{padding:'2px 8px', fontSize:10, marginLeft:'auto'}}>ใกล้</span>}
                </div>
                <div style={{fontSize:13.5, fontWeight: a.urgent?500:400, lineHeight:1.4}}>{a.t}</div>
                <div style={{fontSize:11.5, color:'var(--ink-3)', marginTop:2}}>{a.c}</div>
              </div>
            ))}
          </div>

          {/* Announcements */}
          <div className="panel" style={{padding:20}}>
            <h3 className="serif" style={{margin:'0 0 12px', fontSize:18, fontWeight:600}}>ประกาศของรายวิชา</h3>
            {[
              { c:'CS-101', t:'เลื่อนการสอบกลางภาคจาก 6 มิ.ย. → 13 มิ.ย.', when:'5 ชม.' },
              { c:'HIST-201', t:'เปลี่ยนสถานที่บรรยายเป็นห้อง 305', when:'1 วัน' },
              { c:'TH-101', t:'เปิดอ่านล่วงหน้า: บทที่ 5-6', when:'2 วัน' },
            ].map((n,i) => (
              <div key={i} style={{padding:'10px 0', borderBottom:i<2?'1px solid var(--line)':0}}>
                <div className="row" style={{gap:8, marginBottom:4}}>
                  <span className="mono" style={{fontSize:11, color:'var(--accent-2)', fontWeight:600}}>{n.c}</span>
                  <span style={{flex:1}}/>
                  <span style={{fontSize:11, color:'var(--ink-3)'}}>{n.when}</span>
                </div>
                <div style={{fontSize:13, lineHeight:1.4}}>{n.t}</div>
              </div>
            ))}
          </div>
        </aside>
      </div>
    </div>
  );
}
window.DashboardPage = DashboardPage;