/* ============================================================
   ScheduleView.jsx — ภาระงานสอนของฉัน (ดู/เพิ่ม/แก้ไขตารางสอน + ภาระงานอื่น)
   ============================================================ */

function CellEditor({init, onSave, onDelete, onClose}){
  const [day, setDay] = React.useState(init.day || WEEKDAYS[0]);
  const [period, setPeriod] = React.useState(init.period || 1);
  const [kind, setKind] = React.useState(init.kind || 'class');
  const [code, setCode] = React.useState(init.code || '');
  const [subject, setSubject] = React.useState(init.subject || SUBJECT_GROUPS[0]);
  const [className, setClassName] = React.useState(init.className || '');
  const [room, setRoom] = React.useState(init.room || '');
  const [activity, setActivity] = React.useState(init.activity || '');
  const editing = init.exists;

  const save = ()=>{
    if(kind==='class'){
      if(!className.trim()) return;
      onSave(day, period, {code:code.trim()||'-', subject, className:className.trim(), room:room.trim()});
    } else {
      if(!activity.trim()) return;
      onSave(day, period, {activity:activity.trim()});
    }
  };

  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <div className="modal-hd"><h3>{editing?'แก้ไข':'เพิ่ม'}ภาระงานในตาราง</h3></div>
        <div className="modal-bd">
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
            <div className="field mb0"><label>วัน</label>
              <select className="sel" value={day} onChange={e=>setDay(e.target.value)}>{WEEKDAYS.map(d=><option key={d}>{d}</option>)}</select>
            </div>
            <div className="field mb0"><label>คาบที่</label>
              <select className="sel" value={period} onChange={e=>setPeriod(+e.target.value)}>{PERIODS.map(p=><option key={p.p} value={p.p}>คาบ {p.p} ({p.t})</option>)}</select>
            </div>
          </div>

          <div className="chips" style={{margin:'16px 0'}}>
            <button className={`chip-r ${kind==='class'?'on':''}`} onClick={()=>setKind('class')}>
              <span className="ic" style={{color:kind==='class'?'var(--brand-600)':'var(--ink-3)'}}><Icon name="calendar" size={19}/></span>
              <span className="ttl">คาบสอน (วิชา)</span><span className="ds">มีรหัสวิชา ชั้น ห้อง</span>
            </button>
            <button className={`chip-r ${kind==='activity'?'on':''}`} onClick={()=>setKind('activity')}>
              <span className="ic" style={{color:kind==='activity'?'var(--brand-600)':'var(--ink-3)'}}><Icon name="clipboard" size={19}/></span>
              <span className="ttl">ภาระงานอื่น</span><span className="ds">ชุมนุม โฮมรูม เวร ฯลฯ</span>
            </button>
          </div>

          {kind==='class' ? (
            <>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
                <div className="field"><label>รหัสวิชา</label>
                  <input className="inp num" value={code} onChange={e=>setCode(e.target.value)} placeholder="เช่น ท22101"/></div>
                <div className="field"><label>ชั้น/ห้อง</label>
                  <input className="inp" list="cls-list" value={className} onChange={e=>setClassName(e.target.value)} placeholder="เช่น ม.2/5"/>
                  <datalist id="cls-list">{ALL_CLASSES.map(c=><option key={c} value={c}/>)}</datalist></div>
              </div>
              <div style={{display:'grid',gridTemplateColumns:'1.5fr 1fr',gap:12}}>
                <div className="field mb0"><label>กลุ่มสาระ/วิชา</label>
                  <select className="sel" value={subject} onChange={e=>setSubject(e.target.value)}>{SUBJECT_GROUPS.map(s=><option key={s}>{s}</option>)}</select></div>
                <div className="field mb0"><label>ห้องเรียน (สถานที่)</label>
                  <input className="inp num" value={room} onChange={e=>setRoom(e.target.value)} placeholder="เช่น 425"/></div>
              </div>
            </>
          ) : (
            <div className="field mb0"><label>รายละเอียดภาระงาน</label>
              <input className="inp" value={activity} onChange={e=>setActivity(e.target.value)} placeholder="เช่น ชุมนุม, ลูกเสือ-เนตรนารี, คุมเวร" autoFocus/></div>
          )}
        </div>
        <div className="modal-ft">
          {editing && <Btn variant="danger" icon="x" onClick={()=>onDelete(init.day,init.period)} style={{marginRight:'auto'}}>ลบ</Btn>}
          <Btn variant="ghost" onClick={onClose}>ยกเลิก</Btn>
          <Btn variant="primary" icon="check" onClick={save}>บันทึก</Btn>
        </div>
      </div>
    </div>
  );
}

function DutyModal({onSave, onClose}){
  const [title, setTitle] = React.useState('');
  const [detail, setDetail] = React.useState('');
  const presets = ['ครูเวรประจำวัน','หัวหน้ากลุ่มสาระ','งานประกันคุณภาพ','ครูที่ปรึกษา','งานกิจกรรมพัฒนาผู้เรียน'];
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <div className="modal-hd"><h3>เพิ่มภาระงานอื่นที่ได้รับมอบหมาย</h3></div>
        <div className="modal-bd">
          <div className="flex wrap gap8" style={{marginBottom:12}}>
            {presets.map(p=><button key={p} className="badge b-done" style={{cursor:'pointer',border:'1px solid var(--brand-100)'}} onClick={()=>setTitle(p)}>{p}</button>)}
          </div>
          <div className="field"><label>ชื่อภาระงาน</label>
            <input className="inp" value={title} onChange={e=>setTitle(e.target.value)} placeholder="เช่น หัวหน้างานวิชาการ" autoFocus/></div>
          <div className="field mb0"><label>รายละเอียด (ถ้ามี)</label>
            <input className="inp" value={detail} onChange={e=>setDetail(e.target.value)} placeholder="เช่น ทุกวันจันทร์ เวรเช้า"/></div>
        </div>
        <div className="modal-ft">
          <Btn variant="ghost" onClick={onClose}>ยกเลิก</Btn>
          <Btn variant="primary" icon="check" disabled={!title.trim()} onClick={()=>onSave({title:title.trim(),detail:detail.trim()})}>บันทึก</Btn>
        </div>
      </div>
    </div>
  );
}

function ScheduleView({me, schedule, duties, onUpdateCell, onDeleteCell, onAddDuty, onRemoveDuty}){
  const [editing, setEditing] = React.useState(null);
  const [addDuty, setAddDuty] = React.useState(false);

  const totalClasses = WEEKDAYS.reduce((n,d)=>n+(schedule[d]||[]).filter(s=>s&&s.code).length,0);
  const totalAct = WEEKDAYS.reduce((n,d)=>n+(schedule[d]||[]).filter(s=>s&&s.activity).length,0);

  return (
    <div>
      <div className="flex ac jb wrap gap12" style={{marginBottom:18}}>
        <div>
          <h1 style={{fontSize:22,color:'var(--brand-900)'}}>ภาระงานสอนของฉัน</h1>
          <p style={{margin:'4px 0 0',color:'var(--ink-2)',fontSize:14}}>{formalName(me)} · {me.primary} — คลิกช่องในตารางเพื่อเพิ่ม/แก้ไข</p>
        </div>
        <Btn variant="primary" icon="plus" onClick={()=>setEditing({day:WEEKDAYS[0],period:1,kind:'class',exists:false})}>เพิ่มคาบสอน</Btn>
      </div>

      <div className="stats" style={{gridTemplateColumns:'repeat(3,1fr)'}}>
        <Stat k="คาบสอน/สัปดาห์" v={totalClasses} unit="คาบ" tone="blue" icon="calendar"/>
        <Stat k="ภาระงานอื่นในตาราง" v={totalAct} unit="รายการ" tone="amber" icon="clipboard"/>
        <Stat k="กลุ่มสาระหลัก" v={me.subjects.length} unit="กลุ่ม" tone="green" icon="layers"/>
      </div>

      <div className="scroll-x-hint">← เลื่อนตารางแนวนอนเพื่อดูทุกคาบ →</div>
      <div className="wk-grid">
        <table className="wk">
          <thead>
            <tr>
              <th style={{width:62}}>วัน \ คาบ</th>
              {PERIODS.map(p=><th key={p.p}>คาบ {p.p}<small>{p.t}</small></th>)}
            </tr>
          </thead>
          <tbody>
            {WEEKDAYS.map(d=>(
              <tr key={d}>
                <td className="daycol">{d}</td>
                {PERIODS.map(p=>{
                  const slot = (schedule[d]||[])[p.p-1];
                  const has = !!slot;
                  const open = ()=> setEditing({
                    day:d, period:p.p, exists:has,
                    kind: slot ? (slot.code?'class':'activity') : 'class',
                    code:slot?.code, subject:slot?.subject, className:slot?.className, room:slot?.room, activity:slot?.activity,
                  });
                  return (
                    <td key={p.p} className={`cell ${has?'has':''}`}>
                      <div className="cell-in" onClick={open}>
                        {!slot && <div className="cell-empty"><Icon name="plus" size={16}/></div>}
                        {slot && slot.code && <>
                          <span className="cc-code">{slot.code}</span>
                          <span className="cc-cls">{slot.className}</span>
                          {slot.room && <span className="cc-room">ห้อง {slot.room}</span>}
                        </>}
                        {slot && slot.activity && <span className="cc-act">{slot.activity}</span>}
                      </div>
                    </td>
                  );
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="flex ac jb wrap gap12" style={{margin:'28px 0 14px'}}>
        <div className="flex ac gap8">
          <Icon name="clipboard" size={18} style={{color:'var(--brand-600)'}}/>
          <b style={{fontFamily:'Kanit',fontSize:16,color:'var(--brand-900)'}}>ภาระงานอื่นที่ได้รับมอบหมาย</b>
        </div>
        <Btn variant="ghost" size="sm" icon="plus" onClick={()=>setAddDuty(true)}>เพิ่มภาระงาน</Btn>
      </div>
      {duties.length===0
        ? <Card><Empty icon="clipboard" title="ยังไม่มีภาระงานอื่น" desc="เช่น ครูเวร หัวหน้างาน ครูที่ปรึกษา — กดเพิ่มภาระงาน"/></Card>
        : <div className="list-gap">{duties.map((d,i)=>(
            <div key={i} className="duty-item">
              <span className="di"><Icon name="shield" size={17}/></span>
              <div className="grow"><div style={{fontWeight:600,fontSize:14}}>{d.title}</div>{d.detail && <div className="tiny">{d.detail}</div>}</div>
              <button style={{background:'none',border:'none',color:'var(--ink-3)'}} onClick={()=>onRemoveDuty(i)}><Icon name="x" size={18}/></button>
            </div>
          ))}</div>}

      <div className="note-box mt16">
        <Icon name="info" size={18} style={{flex:'none'}}/>
        <div>ข้อมูลตารางสอนนี้ดึงมาจากไฟล์ <b>ตารางสอน ภาคเรียนที่ 1/2569</b> และใช้เป็นฐานข้อมูลในการแจ้งลา และให้ระบบแนะนำครูสอนแทนที่ว่างในคาบนั้น ๆ</div>
      </div>

      {editing && <CellEditor init={editing}
        onSave={(day,period,slot)=>{onUpdateCell(day,period,slot);setEditing(null);}}
        onDelete={(day,period)=>{onDeleteCell(day,period);setEditing(null);}}
        onClose={()=>setEditing(null)}/>}
      {addDuty && <DutyModal onSave={(d)=>{onAddDuty(d);setAddDuty(false);}} onClose={()=>setAddDuty(false)}/>}
    </div>
  );
}

Object.assign(window, { ScheduleView, CellEditor, DutyModal });