/* ============================================================
   AttendanceView.jsx — ลงเวลา + เวรประจำวัน (GPS check-in)
   ============================================================ */

// ── การตั้งค่าโรงเรียน (localStorage · admin แก้ไขได้) ──
const _DEFAULT_LIFF_URL = 'https://liff.line.me/2010994640-rrtDbNgn';
const _DEFAULT_SCHOOL = {
  liffUrl: _DEFAULT_LIFF_URL,             // ลิงก์ LIFF เช็คชื่อ (เปิดใน LINE)
  address: 'โรงเรียนหนองตาคงพิทยาคาร',
  workStart: '07:30', workEnd: '16:30',   // เวลาทำงาน
  lateAfter: '08:00',                     // สายหลังเวลานี้
  ceremonyTime: '08:00',                  // เวลาเข้าแถวเคารพธงชาติ
};
function useSchoolConfig(){
  const [cfg, setCfg] = React.useState(()=>{
    try{ const raw = localStorage.getItem('ntk_school_cfg'); if(raw) return {..._DEFAULT_SCHOOL, ...JSON.parse(raw)}; }catch(e){}
    return _DEFAULT_SCHOOL;
  });
  const save = patch=> setCfg(c=>{ const n={...c, ...patch}; try{localStorage.setItem('ntk_school_cfg', JSON.stringify(n));}catch(e){} return n; });
  return [cfg, save];
}

// ── ประเภทเวร ──
const DUTY_TYPES = [
  {id:'morning',    label:'เวรเช้า',       time:'06:30–08:00', color:'#f59e0b', icon:'clock'},
  {id:'afternoon',  label:'เวรกลางวัน',    time:'11:30–13:00', color:'#0ea5e9', icon:'clock'},
  {id:'evening',    label:'เวรเย็น',        time:'15:30–17:00', color:'#8b5cf6', icon:'clock'},
  {id:'holiday',    label:'เวรวันหยุด',     time:'ทั้งวัน',      color:'#ec4899', icon:'shield'},
  {id:'night',      label:'เวรกลางคืน',     time:'18:00–06:00', color:'#1e293b', icon:'shield'},
];
const dutyById = id => DUTY_TYPES.find(d=>d.id===id) || DUTY_TYPES[0];

// ── การเก็บข้อมูลลงเวลา (localStorage รวมทั้งโรงเรียน) ──
function useAttendance(){
  const key = 'ntk_attendance_v1';
  const [records, setRecords] = React.useState(()=>{
    try{ const raw = localStorage.getItem(key); if(raw) return JSON.parse(raw); }catch(e){}
    return {};   // { 'YYYY-MM-DD': { [teacherId]: {checkIn, checkOut, duty} } }
  });
  const save = updater => setRecords(r=>{ const n = typeof updater==='function' ? updater(r) : updater; try{localStorage.setItem(key, JSON.stringify(n));}catch(e){} return n; });
  const checkIn = (teacherId, geo, when)=> save(r=>{
    const date = when.slice(0,10);
    const day = {...(r[date]||{})};
    day[teacherId] = {...(day[teacherId]||{}), checkIn:{time:when, ...geo}};
    return {...r, [date]:day};
  });
  const checkOut = (teacherId, geo, when)=> save(r=>{
    const date = when.slice(0,10);
    const day = {...(r[date]||{})};
    day[teacherId] = {...(day[teacherId]||{}), checkOut:{time:when, ...geo}};
    return {...r, [date]:day};
  });
  return {records, save, checkIn, checkOut};
}

// ── การเก็บตารางเวรประจำวัน (localStorage) ──
function useDutyRoster(){
  const key = 'ntk_duty_roster_v1';
  const [roster, setRoster] = React.useState(()=>{
    try{ const raw = localStorage.getItem(key); if(raw) return JSON.parse(raw); }catch(e){}
    return {};   // { 'YYYY-MM-DD': { [dutyId]: [teacherId, ...] } }
  });
  const save = updater => setRoster(r=>{ const n = typeof updater==='function' ? updater(r) : updater; try{localStorage.setItem(key, JSON.stringify(n));}catch(e){} return n; });
  return {roster, save};
}

// ── Haversine distance (meters) ──
function distanceM(lat1, lon1, lat2, lon2){
  const R = 6371000;
  const φ1 = lat1*Math.PI/180, φ2 = lat2*Math.PI/180;
  const dφ = (lat2-lat1)*Math.PI/180, dλ = (lon2-lon1)*Math.PI/180;
  const a = Math.sin(dφ/2)**2 + Math.cos(φ1)*Math.cos(φ2)*Math.sin(dλ/2)**2;
  return 2 * R * Math.asin(Math.sqrt(a));
}

// ── GPS hook ──
function useGeolocation(){
  const [pos, setPos] = React.useState(null);
  const [err, setErr] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const request = React.useCallback(()=>{
    setErr(''); setLoading(true);
    if(!navigator.geolocation){ setErr('เบราว์เซอร์ไม่รองรับ GPS'); setLoading(false); return; }
    navigator.geolocation.getCurrentPosition(
      p=>{ setPos({lat:p.coords.latitude, lng:p.coords.longitude, accuracy:p.coords.accuracy, ts:Date.now()}); setLoading(false); },
      e=>{
        const msg = {1:'ผู้ใช้ไม่อนุญาตให้เข้าถึงตำแหน่ง (Permission denied)',
                     2:'ไม่สามารถระบุตำแหน่งได้ (Position unavailable)',
                     3:'ค้นหาตำแหน่งนานเกินไป (Timeout)'}[e.code] || e.message;
        setErr(msg); setLoading(false);
      },
      {enableHighAccuracy:true, timeout:15000, maximumAge:0}
    );
  },[]);
  return {pos, err, loading, request, clear:()=>{setPos(null);setErr('');}};
}

// ── เวลาไทย (HH:MM) ──
function hhmm(iso){ if(!iso) return '—'; try{ const d=new Date(iso); return String(d.getHours()).padStart(2,'0')+':'+String(d.getMinutes()).padStart(2,'0'); }catch{ return '—'; } }
function todayIso(){ return new Date().toISOString().slice(0,10); }
function isLate(checkInIso, lateAfter){
  if(!checkInIso) return false;
  const d = new Date(checkInIso);
  const [h,m] = (lateAfter||'08:00').split(':').map(Number);
  return (d.getHours()>h) || (d.getHours()===h && d.getMinutes()>m);
}

// ─────────────────────────────────────────────────────────
// AttendanceView — สำหรับครู (เปิด LINE LIFF สำหรับเช็คชื่อ)
// ─────────────────────────────────────────────────────────
function AttendanceView({me}){
  const [school] = useSchoolConfig();
  const {records} = useAttendance();
  const {roster} = useDutyRoster();
  const today = todayIso();
  const myToday = (records[today]||{})[me.id] || {};
  const late = isLate(myToday.checkIn?.time, school.lateAfter);
  const myDutyToday = (()=>{
    const day = roster[today] || {};
    for(const dId of Object.keys(day)) if((day[dId]||[]).includes(me.id)) return dutyById(dId);
    return null;
  })();
  const monthStats = React.useMemo(()=>{
    const mo = today.slice(0,7);
    let workdays=0, checked=0, lates=0;
    Object.keys(records).forEach(d=>{
      if(!d.startsWith(mo)) return;
      const dd = new Date(d+'T00:00:00');
      if(dd>new Date()) return;
      if(dd.getDay()===0 || dd.getDay()===6) return;
      workdays++;
      const r = (records[d]||{})[me.id];
      if(r?.checkIn) checked++;
      if(r?.checkIn && isLate(r.checkIn.time, school.lateAfter)) lates++;
    });
    return {workdays, checked, lates, absent: workdays-checked};
  // eslint-disable-next-line
  },[records, today, me.id]);

  const openLiff = ()=> window.open(school.liffUrl, '_blank', 'noopener');
  const isDone = !!myToday.checkIn;

  return (
    <div>
      <div style={{marginBottom:18}}>
        <h1 style={{fontSize:22,color:'var(--brand-900)'}}>เช็คชื่อครูหน้าเสาธง</h1>
        <p style={{margin:'4px 0 0',color:'var(--ink-2)',fontSize:14}}>เปิดระบบเช็คชื่อผ่าน LINE LIFF · เวลาเข้าแถว {school.ceremonyTime} น.</p>
      </div>

      {/* วันนี้ / เวรประจำวัน */}
      {myDutyToday && (
        <div className="at-duty-badge mt0" style={{background:myDutyToday.color+'20',borderColor:myDutyToday.color+'55',color:myDutyToday.color}}>
          <Icon name={myDutyToday.icon} size={18}/>
          <div>
            <b>วันนี้ท่านมีเวรประจำวัน — {myDutyToday.label}</b>
            <span style={{marginLeft:8,fontSize:12.5,opacity:.85}}>เวลา {myDutyToday.time}</span>
          </div>
        </div>
      )}

      {/* Big LIFF card */}
      <Card className="mt16">
        <div className="at-liff-hero">
          <div className="at-liff-clock">
            <div className="at-liff-brand">
              <span className="at-line-badge">LINE</span>
              <span>ระบบเช็คชื่อหน้าเสาธง</span>
            </div>
            <div className="at-liff-time">{new Date().toLocaleTimeString('th-TH',{hour:'2-digit',minute:'2-digit'})}</div>
            <div className="at-liff-date">{thaiDateFull ? thaiDateFull(today) : today}</div>
          </div>

          <div className="at-liff-status">
            {isDone ? (
              <div className="at-liff-done">
                <Icon name="checkCircle" size={26}/>
                <div>
                  <b>เช็คชื่อแล้ว · เวลา {hhmm(myToday.checkIn.time)}</b>
                  {late ? <span className="at-tag late" style={{marginLeft:8}}>สาย</span>
                        : <span className="at-tag ok" style={{marginLeft:8}}>ตรงเวลา</span>}
                </div>
              </div>
            ) : (
              <div className="at-liff-pending">
                <Icon name="hourglass" size={22}/>
                <div>ยังไม่ได้เช็คชื่อวันนี้ · กดปุ่มด้านล่างเพื่อเปิดระบบใน LINE</div>
              </div>
            )}

            <button className="btn btn-lg at-liff-btn" onClick={openLiff}>
              <span className="at-line-icon">LINE</span>
              {isDone ? 'เปิดระบบเช็คชื่ออีกครั้ง' : 'เปิดระบบเช็คชื่อหน้าเสาธง'}
              <Icon name="send" size={16}/>
            </button>
            <div className="at-liff-url">
              <Icon name="info" size={12}/> ระบบเปิดใน LINE Application · หากยังไม่มี LINE จะเปิดหน้าเว็บสำหรับ Login
            </div>
          </div>
        </div>
      </Card>

      {/* สรุปเดือนนี้ */}
      <div className="stats mt16">
        <Stat k="วันทำการเดือนนี้" v={monthStats.workdays} unit="วัน" tone="blue" icon="calendar"/>
        <Stat k="เช็คชื่อแล้ว" v={monthStats.checked} unit="วัน" tone="green" icon="checkCircle"/>
        <Stat k="มาสาย" v={monthStats.lates} unit="ครั้ง" tone="amber" icon="clock"/>
        <Stat k="ไม่ได้เช็คชื่อ" v={monthStats.absent} unit="วัน" tone="red" icon="xCircle"/>
      </div>

      {/* ประวัติ 7 วันล่าสุด */}
      <Card className="mt16">
        <CardHead icon="clipboard" title="ประวัติการเช็คชื่อ 7 วันล่าสุด" sub="ข้อมูลจากระบบ LIFF (ซิงก์เมื่อออนไลน์)"/>
        <div className="card-pad">
          <div className="at-history">
            {[6,5,4,3,2,1,0].map(offset=>{
              const d = new Date(); d.setDate(d.getDate()-offset);
              const iso = d.toISOString().slice(0,10);
              const rec = (records[iso]||{})[me.id];
              const isWeekend = d.getDay()===0 || d.getDay()===6;
              const wasLate = rec?.checkIn && isLate(rec.checkIn.time, school.lateAfter);
              return (
                <div key={iso} className={`at-hist-row ${isWeekend?'weekend':''}`}>
                  <div className="at-hist-date">
                    <b>{['อา','จ','อ','พ','พฤ','ศ','ส'][d.getDay()]}</b>
                    <span>{d.getDate()}/{d.getMonth()+1}</span>
                  </div>
                  <div className="at-hist-mid">
                    {isWeekend ? <span className="muted">— วันหยุด —</span>
                      : rec?.checkIn ? <>
                        <span className="at-hist-in">เช็คชื่อ {hhmm(rec.checkIn.time)}</span>
                        {wasLate && <span className="at-tag late" style={{marginLeft:6}}>สาย</span>}
                      </> : <span className="muted">— ไม่ได้เช็คชื่อ —</span>}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </Card>

      <div className="note-box mt16">
        <Icon name="info" size={18} style={{flex:'none'}}/>
        <div>
          <div>ระบบเช็คชื่อทำผ่าน <b>LINE LIFF</b> — เปิดในแอป LINE บนโทรศัพท์ · ระบบจะยืนยันตัวตนและตำแหน่งอัตโนมัติ</div>
          <div style={{marginTop:6,fontSize:12.5,color:'var(--ink-3)'}}>เวลาสายนับหลัง {school.lateAfter} น. · LIFF: <code style={{fontSize:11,color:'var(--brand-600)'}}>{school.liffUrl}</code></div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────
// AdminAttendanceView — แดชบอร์ดผู้บริหาร
// ─────────────────────────────────────────────────────────
function AdminAttendanceView(){
  const [school, saveSchool] = useSchoolConfig();
  const {records} = useAttendance();
  const {roster, save:saveRoster} = useDutyRoster();
  const [tab, setTab] = React.useState('today');
  const teachers = window.TEACHERS || [];
  const today = todayIso();
  const day = records[today]||{};
  const isWeekend = (()=>{const d=new Date(); return d.getDay()===0||d.getDay()===6;})();

  const status = teachers.map(t=>{
    const r = day[t.id];
    const late = r?.checkIn && isLate(r.checkIn.time, school.lateAfter);
    return {t, r, status: r?.checkIn ? (late?'late':'ok') : 'absent'};
  });
  const onTime = status.filter(x=>x.status==='ok').length;
  const lateCount = status.filter(x=>x.status==='late').length;
  const absent = status.filter(x=>x.status==='absent').length;

  return (
    <div>
      <div style={{marginBottom:18}}>
        <h1 style={{fontSize:22,color:'var(--brand-900)'}}>Dashboard เช็คชื่อหน้าเสาธง</h1>
        <p style={{margin:'4px 0 0',color:'var(--ink-2)',fontSize:14}}>ติดตามสถานะการเช็คชื่อหน้าเสาธงผ่าน LINE LIFF · จัดตารางเวรประจำวัน</p>
      </div>

      <div className="stats">
        <Stat k="ครูทั้งหมด" v={teachers.length} unit="ท่าน" tone="blue" icon="users"/>
        <Stat k="เช็คชื่อตรงเวลา" v={onTime} unit="ท่าน" tone="green" icon="checkCircle"/>
        <Stat k="เช็คชื่อสาย" v={lateCount} unit="ท่าน" tone="amber" icon="clock"/>
        <Stat k="ยังไม่เช็คชื่อ" v={absent} unit="ท่าน" tone="red" icon="xCircle"/>
      </div>

      {isWeekend && (
        <div className="note-box mt16" style={{background:'#fef3c7',borderColor:'#fcd34d'}}>
          <Icon name="info" size={18} style={{color:'#d97706',flex:'none'}}/>
          <div>วันนี้เป็นวันหยุด — ครูปกติไม่ต้องเช็คชื่อ ยกเว้นครูที่มีเวรวันหยุด</div>
        </div>
      )}

      {/* Sub-tabs */}
      <div className="ac-subtabs mt16">
        {[
          ['today','สถานะวันนี้','clock'],
          ['duty','จัดตารางเวร','shield'],
          ['month','สรุปรายเดือน','layers'],
          ['settings','ตั้งค่าระบบ LIFF','gear'],
        ].map(([id,lbl,ic])=>(
          <button key={id} className={`ac-subtab ${tab===id?'active':''}`} onClick={()=>setTab(id)}>
            <Icon name={ic} size={14}/>{lbl}
          </button>
        ))}
      </div>

      {tab==='today' && <TodayStatus status={status} school={school}/>}
      {tab==='duty' && <DutyRoster teachers={teachers} roster={roster} save={saveRoster}/>}
      {tab==='month' && <MonthSummary records={records} teachers={teachers} school={school}/>}
      {tab==='settings' && <SchoolSettings school={school} save={saveSchool}/>}
    </div>
  );
}

function TodayStatus({status, school}){
  const [filter, setFilter] = React.useState('all');
  const filtered = status.filter(x=> filter==='all' || x.status===filter);
  return (
    <Card className="mt16">
      <CardHead icon="users" title="สถานะการเช็คชื่อวันนี้"
        sub={`เกณฑ์สาย: หลัง ${school.lateAfter} น. · เวลาเข้าแถวเคารพธงชาติ ${school.ceremonyTime} น.`}/>
      <div className="card-pad">
        <div className="flex ac gap8 wrap" style={{marginBottom:12}}>
          {[['all','ทั้งหมด'],['ok','ตรงเวลา'],['late','สาย'],['absent','ยังไม่เช็คชื่อ']].map(([k,l])=>(
            <button key={k} className={`sub-filter ${filter===k?'active':''}`} onClick={()=>setFilter(k)}>{l}</button>
          ))}
        </div>
        <div className="at-status-grid">
          {filtered.map(({t,r,status:st})=>(
            <div key={t.id} className={`at-status-card ${st}`}>
              <Avatar t={t} size="sm"/>
              <div style={{flex:1,minWidth:0}}>
                <div className="at-status-name">{fullTitle(t)}</div>
                <div className="at-status-meta">
                  {st==='ok' && <>✓ เช็คชื่อ {hhmm(r.checkIn.time)}</>}
                  {st==='late' && <>⚠️ สาย · เช็คชื่อ {hhmm(r.checkIn.time)}</>}
                  {st==='absent' && <span className="muted">— ยังไม่เช็คชื่อ —</span>}
                </div>
              </div>
              <span className={`at-status-tag ${st}`}>
                {st==='ok'?'ตรงเวลา':st==='late'?'สาย':'ยังไม่เช็คชื่อ'}
              </span>
            </div>
          ))}
        </div>
      </div>
    </Card>
  );
}

function DutyRoster({teachers, roster, save}){
  const [date, setDate] = React.useState(todayIso());
  const day = roster[date] || {};
  const [selDuty, setSelDuty] = React.useState('morning');
  const [selTeacher, setSelTeacher] = React.useState('');
  const assign = ()=>{
    if(!selTeacher) return;
    save(r=>{
      const d = {...(r[date]||{})};
      const cur = new Set(d[selDuty]||[]);
      cur.add(selTeacher);
      d[selDuty] = [...cur];
      return {...r, [date]:d};
    });
    setSelTeacher('');
  };
  const remove = (dutyId, tid)=>{
    save(r=>{
      const d = {...(r[date]||{})};
      d[dutyId] = (d[dutyId]||[]).filter(x=>x!==tid);
      return {...r, [date]:d};
    });
  };
  return (
    <Card className="mt16">
      <CardHead icon="shield" title="จัดตารางเวรประจำวัน"/>
      <div className="card-pad">
        <div className="form-grid-2">
          <div className="field"><label>วันที่</label><input type="date" className="inp" value={date} onChange={e=>setDate(e.target.value)}/></div>
          <div className="field"><label>ประเภทเวร</label>
            <select className="sel" value={selDuty} onChange={e=>setSelDuty(e.target.value)}>
              {DUTY_TYPES.map(d=><option key={d.id} value={d.id}>{d.label} · {d.time}</option>)}
            </select>
          </div>
        </div>
        <div className="flex ac gap8 mt12">
          <select className="sel" value={selTeacher} onChange={e=>setSelTeacher(e.target.value)} style={{flex:1}}>
            <option value="">เลือกครู…</option>
            {teachers.map(t=><option key={t.id} value={t.id}>{fullTitle(t)}</option>)}
          </select>
          <button className="btn" onClick={assign}><Icon name="plus" size={15}/> เพิ่ม</button>
        </div>

        <div className="at-duty-grid mt16">
          {DUTY_TYPES.map(d=>{
            const list = (day[d.id]||[]).map(tid=>teachers.find(t=>t.id===tid)).filter(Boolean);
            return (
              <div key={d.id} className="at-duty-col" style={{borderTopColor:d.color}}>
                <div className="at-duty-h">
                  <Icon name={d.icon} size={16} style={{color:d.color}}/>
                  <b style={{color:d.color}}>{d.label}</b>
                  <span className="tiny">· {d.time}</span>
                </div>
                {list.length===0 ? <div className="muted tiny">— ยังไม่มอบหมาย —</div>
                  : list.map(t=>(
                    <div key={t.id} className="at-duty-item">
                      <Avatar t={t} size="sm"/>
                      <span style={{flex:1,fontSize:13}}>{fullTitle(t)}</span>
                      <button className="lf-comp-del" onClick={()=>remove(d.id, t.id)} title="ลบ"><Icon name="x" size={12}/></button>
                    </div>
                  ))}
              </div>
            );
          })}
        </div>
      </div>
    </Card>
  );
}

function MonthSummary({records, teachers, school}){
  const [mo, setMo] = React.useState(todayIso().slice(0,7));
  const rows = teachers.map(t=>{
    let checked=0, lates=0, absent=0;
    Object.keys(records).forEach(d=>{
      if(!d.startsWith(mo)) return;
      const dd = new Date(d+'T00:00:00');
      if(dd>new Date()) return;
      if(dd.getDay()===0 || dd.getDay()===6) return;
      const r = (records[d]||{})[t.id];
      if(r?.checkIn){ checked++; if(isLate(r.checkIn.time, school.lateAfter)) lates++; }
      else absent++;
    });
    return {t, checked, lates, absent};
  }).sort((a,b)=>b.lates-a.lates || b.absent-a.absent);
  return (
    <Card className="mt16">
      <CardHead icon="layers" title="สรุปการเช็คชื่อรายเดือน"
        right={<input type="month" className="inp" value={mo} onChange={e=>setMo(e.target.value)} style={{width:180}}/>}/>
      <div className="card-pad">
        <div className="tbl-wrap">
          <table className="tbl" style={{minWidth:600}}>
            <thead><tr><th>ครู</th><th style={{textAlign:'center'}}>เช็คชื่อ</th><th style={{textAlign:'center'}}>สาย</th><th style={{textAlign:'center'}}>ไม่ได้เช็ค</th></tr></thead>
            <tbody>
              {rows.map(({t,checked,lates,absent})=>(
                <tr key={t.id}>
                  <td><div className="flex ac gap8"><Avatar t={t} size="sm"/><span style={{fontWeight:500}}>{fullTitle(t)}</span></div></td>
                  <td className="num" style={{textAlign:'center',color:'var(--green)',fontWeight:600}}>{checked||'–'}</td>
                  <td className="num" style={{textAlign:'center',color:lates?'var(--amber)':'var(--ink-3)',fontWeight:lates?600:400}}>{lates||'–'}</td>
                  <td className="num" style={{textAlign:'center',color:absent?'#dc2626':'var(--ink-3)',fontWeight:absent?600:400}}>{absent||'–'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </Card>
  );
}

function SchoolSettings({school, save}){
  const testLiff = ()=> window.open(school.liffUrl, '_blank', 'noopener');
  return (
    <Card className="mt16">
      <CardHead icon="gear" title="ตั้งค่าระบบเช็คชื่อ LIFF" sub="ลิงก์ LIFF · เวลาเข้าแถว · เกณฑ์สาย"/>
      <div className="card-pad">
        <div className="field">
          <label>ลิงก์ LINE LIFF สำหรับเช็คชื่อ</label>
          <input type="url" className="inp" value={school.liffUrl}
            onChange={e=>save({liffUrl:e.target.value})} placeholder="https://liff.line.me/…"/>
          <div className="tiny" style={{color:'var(--ink-3)',marginTop:4}}>
            ลิงก์นี้จะเปิดใน LINE เมื่อครูกดปุ่ม "เปิดระบบเช็คชื่อหน้าเสาธง"
          </div>
        </div>
        <div className="form-grid-2 mt12">
          <div className="field"><label>ชื่อ/ที่อยู่โรงเรียน</label>
            <input type="text" className="inp" value={school.address} onChange={e=>save({address:e.target.value})}/></div>
          <div className="field"><label>เวลาเข้าแถวเคารพธงชาติ</label>
            <input type="time" className="inp" value={school.ceremonyTime||'08:00'} onChange={e=>save({ceremonyTime:e.target.value})}/></div>
          <div className="field"><label>เวลาเริ่มงาน</label>
            <input type="time" className="inp" value={school.workStart} onChange={e=>save({workStart:e.target.value})}/></div>
          <div className="field"><label>เกณฑ์เวลาสาย (หลังเวลานี้ = สาย)</label>
            <input type="time" className="inp" value={school.lateAfter} onChange={e=>save({lateAfter:e.target.value})}/></div>
          <div className="field"><label>เวลาเลิกงาน</label>
            <input type="time" className="inp" value={school.workEnd} onChange={e=>save({workEnd:e.target.value})}/></div>
        </div>
        <div className="flex ac gap8 mt12 wrap">
          <button className="btn" onClick={testLiff}>
            <Icon name="send" size={15}/> ทดสอบเปิดลิงก์ LIFF
          </button>
          <button className="btn ghost" onClick={()=>{if(confirm('รีเซ็ตกลับเป็นลิงก์เริ่มต้น?')) save({liffUrl:_DEFAULT_LIFF_URL});}}>
            <Icon name="swap" size={14}/> รีเซ็ตลิงก์เริ่มต้น
          </button>
        </div>
        <div className="note-box mt12" style={{background:'#eff6ff',borderColor:'#bfdbfe'}}>
          <Icon name="info" size={16} style={{color:'var(--brand-600)',flex:'none'}}/>
          <div style={{fontSize:12.5}}>
            ระบบใช้ LINE LIFF (LINE Front-end Framework) — เปิดใน LINE Application เพื่อยืนยันตัวตนและตำแหน่งอัตโนมัติ · ครูต้องมีบัญชี LINE และผูกกับ Official Account ของโรงเรียน
          </div>
        </div>
      </div>
    </Card>
  );
}

window.AttendanceView = AttendanceView;
window.AdminAttendanceView = AdminAttendanceView;