// Settings page

const SettingsPage = ({ data, settings, setSettings }) => {
  const [tab, setTab] = React.useState('schedule');
  const [addingHoliday, setAddingHoliday] = React.useState(false);
  const [confirmDelete, setConfirmDelete] = React.useState(null);
  const holidays = settings.holidays || data.holidays;
  const setHolidays = (next) => setSettings({ ...settings, holidays: next });
  const DAY_ORDER = [1, 2, 3, 4, 5, 6, 0]; // Mon → Sun
  const DAYS = { 0:'อา.', 1:'จ.', 2:'อ.', 3:'พ.', 4:'พฤ.', 5:'ศ.', 6:'ส.' };
  const DAYS_LONG = { 0:'อาทิตย์', 1:'จันทร์', 2:'อังคาร', 3:'พุธ', 4:'พฤหัสบดี', 5:'ศุกร์', 6:'เสาร์' };

  const toggleDay = (d) => {
    const set = new Set(settings.workDays);
    set.has(d) ? set.delete(d) : set.add(d);
    setSettings({ ...settings, workDays: [...set].sort() });
  };

  return (
    <div data-screen-label="Settings">
      <div className="row between mb-3">
        <div>
          <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-.02em' }}>ตั้งค่าระบบ</div>
          <div className="text-sm muted">วันทำงาน วันหยุด โควต้าลา และกฎต่างๆ</div>
        </div>
        <button className="btn btn-primary"><Icon name="check" size={14}/> บันทึก</button>
      </div>

      <div className="tabs">
        <button className={`tab ${tab === 'schedule' ? 'active' : ''}`} onClick={() => setTab('schedule')}>วันทำงาน</button>
        <button className={`tab ${tab === 'holidays' ? 'active' : ''}`} onClick={() => setTab('holidays')}>วันนักขัตฤกษ์</button>
        <button className={`tab ${tab === 'ot' ? 'active' : ''}`} onClick={() => setTab('ot')}>OT & กำลังคน</button>
        <button className={`tab ${tab === 'quota' ? 'active' : ''}`} onClick={() => setTab('quota')}>โควต้าลา</button>
        <button className={`tab ${tab === 'rules' ? 'active' : ''}`} onClick={() => setTab('rules')}>กฎการอนุมัติ</button>
      </div>

      {tab === 'schedule' && (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          <div className="card">
            <div className="card-header">
              <div>
                <div className="card-title">วันทำงานประจำสัปดาห์</div>
                <div className="card-sub">เลือกวันที่ถือเป็นวันทำงานปกติ</div>
              </div>
            </div>
            <div className="card-body">
              <div className="row" style={{ gap: 8, marginBottom: 16 }}>
                {DAY_ORDER.map((i) => {
                  const active = settings.workDays.includes(i);
                  return (
                    <button
                      key={i}
                      onClick={() => toggleDay(i)}
                      style={{
                        flex: 1,
                        padding: '14px 8px',
                        borderRadius: 8,
                        border: active ? '2px solid var(--brand-600)' : '1px solid var(--ink-200)',
                        background: active ? 'var(--brand-50)' : 'var(--paper)',
                        color: active ? 'var(--brand-700)' : (i === 0 ? 'var(--weekend)' : 'var(--ink-700)'),
                        fontWeight: 600,
                        fontSize: 13,
                      }}
                    >
                      <div>{DAYS[i]}</div>
                      <div style={{ fontSize: 10, marginTop: 2, opacity: .8 }}>{active ? 'ทำงาน' : 'หยุด'}</div>
                    </button>
                  );
                })}
              </div>
              <div style={{ padding: 14, background: 'var(--brand-50)', borderRadius: 8 }}>
                <div className="text-sm" style={{ color: 'var(--brand-800)', fontWeight: 500 }}>
                  สรุป: ทำงาน{DAY_ORDER.filter(d => settings.workDays.includes(d)).map(d => DAYS_LONG[d]).join(', ')} · หยุด{DAY_ORDER.filter(d => !settings.workDays.includes(d)).map(d => DAYS_LONG[d]).join(', ') || ' - '}
                </div>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card-header">
              <div>
                <div className="card-title">กฎพื้นฐาน</div>
                <div className="card-sub">ใช้กับทั้งระบบ</div>
              </div>
            </div>
            <div className="card-body">
              <div className="field">
                <label>ค่าเริ่มต้น: วันหยุดพิเศษ / เดือน (สำหรับพนักงานใหม่)</label>
                <select value={settings.specialOffPerMonth} onChange={e => setSettings({ ...settings, specialOffPerMonth: +e.target.value })}>
                  <option value={1}>1 วัน</option>
                  <option value={2}>2 วัน</option>
                  <option value={3}>3 วัน</option>
                  <option value={4}>4 วัน</option>
                </select>
                <div className="field-help">ปรับเป็นรายคนได้ในตารางด้านล่าง</div>
              </div>

              <div className="field">
                <label>วันที่อนุญาตให้ใช้หยุดพิเศษ</label>
                <div className="row" style={{ gap: 6, marginBottom: 4 }}>
                  {DAY_ORDER.map(i => {
                    const allowed = (settings.specialOffAllowedDays || [6]).includes(i);
                    const isWeeklyOff = !settings.workDays.includes(i);
                    return (
                      <button
                        key={i}
                        disabled={isWeeklyOff}
                        title={isWeeklyOff ? 'เป็นวันหยุดประจำสัปดาห์ — เลือกไม่ได้' : ''}
                        onClick={() => {
                          const cur = new Set(settings.specialOffAllowedDays || [6]);
                          cur.has(i) ? cur.delete(i) : cur.add(i);
                          setSettings({ ...settings, specialOffAllowedDays: [...cur].sort() });
                        }}
                        style={{
                          flex: 1,
                          padding: '8px 6px',
                          borderRadius: 7,
                          border: allowed ? '2px solid var(--special)' : '1px solid var(--ink-200)',
                          background: allowed ? 'var(--special-bg)' : (isWeeklyOff ? 'var(--ink-100)' : 'var(--paper)'),
                          color: allowed ? '#92400e' : (isWeeklyOff ? 'var(--ink-300)' : 'var(--ink-700)'),
                          fontWeight: 600,
                          fontSize: 12,
                          cursor: isWeeklyOff ? 'not-allowed' : 'pointer',
                        }}
                      >
                        {DAYS[i]}
                      </button>
                    );
                  })}
                </div>
                <div className="field-help">
                  พนักงานจะเลือกหยุดพิเศษได้เฉพาะวันที่เลือกไว้นี้ · ปัจจุบัน: {(settings.specialOffAllowedDays || [6]).filter(i => settings.workDays.includes(i)).map(i => DAYS_LONG[i]).join(', ') || '— ยังไม่ได้เลือกวันใด'}
                </div>
              </div>

              <div className="field">
                <label>จำนวนพนักงานขั้นต่ำในวันทำงาน</label>
                <input type="number" value={settings.minStaffPerDay} min={1} max={data.employees.length}
                  onChange={e => setSettings({ ...settings, minStaffPerDay: +e.target.value })}/>
                <div className="field-help">ระบบจะไม่ให้อนุมัติคำขอที่ทำให้คนทำงานต่ำกว่านี้</div>
              </div>
            </div>
          </div>
        </div>
      )}

      {tab === 'schedule' && (
        <div className="card mt-4">
          <div className="card-header">
            <div>
              <div className="card-title">วันหยุดพิเศษส่วนบุคคล — รายพนักงาน</div>
              <div className="card-sub">กำหนดได้ว่าพนักงานแต่ละคนเลือกวันหยุดพิเศษได้กี่วัน/เดือน · พนักงานจะเลือกวันเองในหน้าโปรไฟล์</div>
            </div>
            <div className="row" style={{ gap: 8 }}>
              <button className="btn btn-ghost btn-sm" onClick={() => {
                const next = { ...settings };
                next.perEmployeeSpecial = Object.fromEntries(data.employees.map(e => [e.id, settings.specialOffPerMonth]));
                setSettings(next);
              }}>
                <Icon name="refresh" size={13}/> ใช้ค่าเริ่มต้นกับทุกคน
              </button>
            </div>
          </div>
          <table className="t">
            <thead>
              <tr>
                <th>พนักงาน</th>
                <th>ตำแหน่ง</th>
                <th>แผนก</th>
                <th style={{ width: 200 }}>วันหยุดพิเศษ / เดือน</th>
                <th>ใช้ไปเดือนนี้</th>
              </tr>
            </thead>
            <tbody>
              {data.employees.map(e => {
                const current = settings.perEmployeeSpecial?.[e.id] ?? e.specialOffMonthly ?? settings.specialOffPerMonth;
                const usedThisMonth = data.specialOffs.filter(s => {
                  const d = window.APP_HELPERS.parseISO(s.date);
                  return s.empId === e.id && d.getMonth() === 4 && d.getFullYear() === 2026;
                }).length;
                return (
                  <tr key={e.id}>
                    <td>
                      <div className="row" style={{ gap: 8 }}>
                        <span className="avatar" style={{ background: e.color, width: 28, height: 28, fontSize: 10 }}>{e.avatar}</span>
                        <div>
                          <div style={{ fontWeight: 500 }}>{e.name}</div>
                          <div className="text-xs muted">{e.nameEn}</div>
                        </div>
                      </div>
                    </td>
                    <td className="text-sm">{e.role}</td>
                    <td><span className="chip">{e.dept}</span></td>
                    <td>
                      <div className="row" style={{ gap: 6 }}>
                        {[0, 1, 2, 3, 4].map(n => (
                          <button
                            key={n}
                            onClick={() => {
                              const map = { ...(settings.perEmployeeSpecial || {}) };
                              map[e.id] = n;
                              setSettings({ ...settings, perEmployeeSpecial: map });
                            }}
                            style={{
                              width: 32, height: 32,
                              borderRadius: 7,
                              border: current === n ? '2px solid var(--brand-600)' : '1px solid var(--ink-200)',
                              background: current === n ? 'var(--brand-50)' : 'var(--paper)',
                              color: current === n ? 'var(--brand-700)' : 'var(--ink-600)',
                              fontWeight: 600,
                              fontSize: 13,
                              fontFamily: 'var(--font-en)',
                            }}
                          >
                            {n}
                          </button>
                        ))}
                        <span className="text-xs muted" style={{ marginLeft: 4 }}>วัน/เดือน</span>
                      </div>
                    </td>
                    <td>
                      <div className="row" style={{ gap: 6 }}>
                        <strong className="num">{usedThisMonth}</strong>
                        <span className="text-xs muted">/ {current} วัน</span>
                        {usedThisMonth >= current && current > 0 && <span className="chip chip-special">ครบโควต้า</span>}
                        {current === 0 && <span className="chip">ไม่อนุญาต</span>}
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      {tab === 'holidays' && (
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">วันนักขัตฤกษ์ ปี {2026 + 543}</div>
              <div className="card-sub">{holidays.length} วัน · กำหนดเพิ่มหรือลบได้</div>
            </div>
            <button className="btn btn-primary btn-sm" onClick={() => setAddingHoliday(true)}>
              <Icon name="plus" size={13}/> เพิ่มวันหยุด
            </button>
          </div>
          <table className="t">
            <thead>
              <tr>
                <th style={{ width: 120 }}>วันที่</th>
                <th>วันสำคัญ</th>
                <th>ภาษาอังกฤษ</th>
                <th>ตรงกับ</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {[...holidays].sort((a,b) => a.date.localeCompare(b.date)).map(h => {
                const d = window.APP_HELPERS.parseISO(h.date);
                return (
                  <tr key={h.date + h.name}>
                    <td className="text-sm num">{window.APP_HELPERS.fmtThaiDate(h.date, {shortMonth:true})}</td>
                    <td>
                      <div className="row" style={{ gap: 8 }}>
                        <div className="type-icon hol" style={{ width: 24, height: 24 }}><Icon name="flag" size={12}/></div>
                        <strong>{h.name}</strong>
                      </div>
                    </td>
                    <td className="text-sm muted">{h.nameEn}</td>
                    <td className="text-sm">{['อาทิตย์','จันทร์','อังคาร','พุธ','พฤหัสบดี','ศุกร์','เสาร์'][d.getDay()]}</td>
                    <td>
                      <div className="row" style={{ gap: 2 }}>
                        <button className="icon-btn" style={{ width: 28, height: 28 }} onClick={() => setAddingHoliday({ edit: h })}><Icon name="edit" size={14}/></button>
                        <button className="icon-btn" style={{ width: 28, height: 28, color: 'var(--sick)' }} onClick={() => setConfirmDelete(h)}><Icon name="trash" size={14}/></button>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      {addingHoliday && (
        <HolidayModal
          edit={addingHoliday.edit}
          onClose={() => setAddingHoliday(false)}
          onSave={(h) => {
            if (addingHoliday.edit) {
              setHolidays(holidays.map(x => x.date === addingHoliday.edit.date && x.name === addingHoliday.edit.name ? h : x));
            } else {
              setHolidays([...holidays, h]);
            }
            setAddingHoliday(false);
          }}
        />
      )}

      {confirmDelete && (
        <ConfirmDeleteHoliday
          holiday={confirmDelete}
          onClose={() => setConfirmDelete(null)}
          onConfirm={() => {
            setHolidays(holidays.filter(x => !(x.date === confirmDelete.date && x.name === confirmDelete.name)));
            setConfirmDelete(null);
          }}
        />
      )}

      {tab === 'ot' && <OtStaffingTab data={data} settings={settings} setSettings={setSettings}/>}

      {tab === 'quota' && (
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">โควต้าวันลาประจำปี</div>
              <div className="card-sub">ใช้กับพนักงานทุกคน · ปรับเป็นรายบุคคลได้ในหน้าพนักงาน</div>
            </div>
          </div>
          <div className="card-body">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
              <div className="field">
                <label><Icon name="vacationV" size={12}/> ลาพักร้อน (วัน/ปี)</label>
                <input type="number" defaultValue={data.settings.leaveQuota.vacation}/>
              </div>
              <div className="field">
                <label><Icon name="coffee" size={12}/> ลากิจ (วัน/ปี)</label>
                <input type="number" defaultValue={data.settings.leaveQuota.personal}/>
              </div>
              <div className="field">
                <label><Icon name="pill" size={12}/> ลาป่วย (วัน/ปี)</label>
                <input type="number" defaultValue={data.settings.leaveQuota.sick}/>
              </div>
            </div>
          </div>
        </div>
      )}

      {tab === 'rules' && (
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">กฎการอนุมัติและ Workflow</div>
            </div>
          </div>
          <div className="card-body">
            {[
              { l: 'ขอลาล่วงหน้าอย่างน้อย', v: '3 วัน' },
              { l: 'ลาป่วยติดต่อกัน > 3 วัน ต้องแนบ', v: 'ใบรับรองแพทย์' },
              { l: 'พนักงานขั้นต่ำในวันทำงาน', v: `${data.settings.minStaffPerDay} คน` },
              { l: 'ผู้อนุมัติ Tier 1', v: 'Operations Lead' },
              { l: 'ผู้อนุมัติ Tier 2', v: 'Owner' },
            ].map((r, i) => (
              <div key={i} className="row between" style={{ padding: '12px 0', borderBottom: '1px solid var(--ink-100)' }}>
                <div className="text-sm">{r.l}</div>
                <strong className="text-sm">{r.v}</strong>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

window.SettingsPage = SettingsPage;

// ───── Holiday Add / Edit Modal ─────
const HolidayModal = ({ edit, onClose, onSave }) => {
  const [date, setDate] = React.useState(edit?.date || '2026-12-25');
  const [name, setName] = React.useState(edit?.name || '');
  const [nameEn, setNameEn] = React.useState(edit?.nameEn || '');

  const canSave = date && name.trim();

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-header">
          <div>
            <div className="modal-title">{edit ? 'แก้ไขวันหยุดนักขัตฤกษ์' : 'เพิ่มวันหยุดนักขัตฤกษ์'}</div>
            <div className="text-xs muted mt-2">วันหยุดนี้จะแสดงในปฏิทินสำหรับพนักงานทุกคน</div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x"/></button>
        </div>
        <div className="modal-body">
          <div className="field">
            <label>วันที่</label>
            <input type="date" value={date} onChange={e => setDate(e.target.value)}/>
            <div className="field-help">{date && window.APP_HELPERS.fmtThaiDate(date, { full: true })}</div>
          </div>
          <div className="field">
            <label>ชื่อวันสำคัญ (ไทย)</label>
            <input type="text" value={name} onChange={e => setName(e.target.value)} placeholder="เช่น วันคริสต์มาส, วันรัฐธรรมนูญ"/>
          </div>
          <div className="field">
            <label>ชื่อภาษาอังกฤษ (ถ้ามี)</label>
            <input type="text" value={nameEn} onChange={e => setNameEn(e.target.value)} placeholder="e.g. Christmas Day"/>
          </div>

          <div className="row" style={{ gap: 8, padding: 10, background: 'var(--brand-50)', borderRadius: 8 }}>
            <Icon name="info" size={14} style={{ color: 'var(--brand-700)' }}/>
            <div className="text-xs" style={{ color: 'var(--brand-800)' }}>
              วันนี้จะถือเป็นวันหยุดประจำของบริษัท · พนักงานที่มาทำงานจะนับเป็น OT อัตโนมัติ
            </div>
          </div>
        </div>
        <div className="modal-footer">
          <button className="btn btn-ghost" onClick={onClose}>ยกเลิก</button>
          <button className="btn btn-primary" disabled={!canSave} onClick={() => onSave({ date, name: name.trim(), nameEn: nameEn.trim() })}>
            <Icon name="check" size={14}/> {edit ? 'บันทึก' : 'เพิ่มวันหยุด'}
          </button>
        </div>
      </div>
    </div>
  );
};

// ───── Confirm delete holiday ─────
const ConfirmDeleteHoliday = ({ holiday, onClose, onConfirm }) => {
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 400 }}>
        <div className="modal-header">
          <div className="modal-title">ลบวันหยุด?</div>
          <button className="icon-btn" onClick={onClose}><Icon name="x"/></button>
        </div>
        <div className="modal-body">
          <div className="row" style={{ gap: 12, padding: 14, background: 'var(--sick-bg)', borderRadius: 8, marginBottom: 12 }}>
            <div className="type-icon" style={{ background: 'var(--sick)', color: 'white', width: 34, height: 34 }}>
              <Icon name="alert" size={16}/>
            </div>
            <div>
              <div style={{ fontWeight: 600, color: 'var(--sick)' }}>{holiday.name}</div>
              <div className="text-xs muted">{window.APP_HELPERS.fmtThaiDate(holiday.date, { full: true })}</div>
            </div>
          </div>
          <div className="text-sm muted">
            การลบวันหยุดนี้จะทำให้วันดังกล่าวกลับเป็นวันทำงานปกติ · พนักงานที่ขอ OT/หยุดในวันนี้ไว้แล้วจะไม่ถูกลบ
          </div>
        </div>
        <div className="modal-footer">
          <button className="btn btn-ghost" onClick={onClose}>ยกเลิก</button>
          <button className="btn btn-danger" onClick={onConfirm}>
            <Icon name="trash" size={14}/> ยืนยันลบ
          </button>
        </div>
      </div>
    </div>
  );
};

window.HolidayModal = HolidayModal;
window.ConfirmDeleteHoliday = ConfirmDeleteHoliday;

// ───── OT Staffing Tab ─────
const OtStaffingTab = ({ data, settings, setSettings }) => {
  const helpers = window.APP_HELPERS;
  const today = new Date(2026, 4, 22);

  // Find upcoming Sundays and holidays in current + next month
  const upcomingOffDays = React.useMemo(() => {
    const list = [];
    for (let i = -7; i < 60; i++) {
      const d = new Date(today.getTime() + i * 86400000);
      const isHol = helpers.isHoliday(d, data.holidays);
      const isSun = d.getDay() === 0;
      if (isSun || isHol) {
        list.push({
          date: helpers.fmtISO(d),
          d,
          label: isHol ? isHol.name : 'วันอาทิตย์',
          isHoliday: !!isHol,
        });
      }
    }
    return list;
  }, [data.holidays]);

  const [plans, setPlans] = React.useState(data.otPlans || {});
  React.useEffect(() => { setPlans(data.otPlans || {}); }, [data.otPlans]);

  const persistPlan = async (date, plan) => {
    try {
      await window.API.putOtPlan(date, {
        target: plan.target ?? (settings.otTargetDefault || 1),
        min: plan.min ?? (settings.otMinDefault || 1),
        note: plan.note || '',
      });
    } catch (e) { alert(e.message); }
  };

  const updatePlan = (date, key, val) => {
    const next = { ...plans };
    next[date] = { ...(next[date] || { target: settings.otTargetDefault || 1, min: settings.otMinDefault || 1, note: '' }), [key]: val };
    setPlans(next);
    persistPlan(date, next[date]);
  };

  const empMap = Object.fromEntries(data.employees.map(e => [e.id, e]));

  return (
    <>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 20 }}>
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">ค่ามาตรฐาน OT ต่อวันหยุด</div>
              <div className="card-sub">ใช้กับวันหยุดที่ยังไม่ได้ตั้งค่าเฉพาะ</div>
            </div>
          </div>
          <div className="card-body">
            <div className="field-row">
              <div className="field">
                <label><Icon name="sparkle" size={12}/> เป้าหมายคน OT</label>
                <input type="number" value={settings.otTargetDefault || 3} min={0} max={data.employees.length}
                  onChange={e => setSettings({ ...settings, otTargetDefault: +e.target.value })}/>
                <div className="field-help">จำนวนคนที่ต้องการให้มา OT ในวันหยุดทั่วไป</div>
              </div>
              <div className="field">
                <label><Icon name="alert" size={12}/> ขั้นต่ำคน OT</label>
                <input type="number" value={settings.otMinDefault || 2} min={0} max={data.employees.length}
                  onChange={e => setSettings({ ...settings, otMinDefault: +e.target.value })}/>
                <div className="field-help">ถ้าน้อยกว่านี้ ระบบจะเตือน Admin</div>
              </div>
            </div>
            <div className="row" style={{ background: 'var(--brand-50)', padding: 12, borderRadius: 8, gap: 10 }}>
              <Icon name="info" size={16} style={{ color: 'var(--brand-700)' }}/>
              <div className="text-sm" style={{ color: 'var(--brand-800)' }}>
                ค่ามาตรฐาน: ต้องการ <strong>{settings.otTargetDefault || 3} คน</strong> · ขั้นต่ำ <strong>{settings.otMinDefault || 2} คน</strong>
              </div>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">สรุปสถานะ OT 30 วันข้างหน้า</div>
            </div>
          </div>
          <div className="card-body">
            {(() => {
              let total = 0, low = 0, full = 0;
              upcomingOffDays.forEach(od => {
                const plan = plans[od.date] || { target: settings.otTargetDefault || 3, min: settings.otMinDefault || 2 };
                const confirmed = data.otRequests.filter(o => o.date === od.date && o.status === 'approved').length;
                total++;
                if (confirmed < plan.min) low++;
                if (confirmed >= plan.target) full++;
              });
              return (
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
                  <div style={{ padding: 12, background: 'var(--ink-50)', borderRadius: 8 }}>
                    <div className="text-xs muted">วันหยุดทั้งหมด</div>
                    <div style={{ fontSize: 22, fontWeight: 700, fontFamily: 'var(--font-en)' }}>{total}</div>
                  </div>
                  <div style={{ padding: 12, background: 'var(--sick-bg)', borderRadius: 8 }}>
                    <div className="text-xs" style={{ color: 'var(--sick)' }}>ต่ำกว่าขั้นต่ำ</div>
                    <div style={{ fontSize: 22, fontWeight: 700, fontFamily: 'var(--font-en)', color: 'var(--sick)' }}>{low}</div>
                  </div>
                  <div style={{ padding: 12, background: 'var(--swap-bg)', borderRadius: 8 }}>
                    <div className="text-xs" style={{ color: 'var(--swap)' }}>ครบเป้าหมาย</div>
                    <div style={{ fontSize: 22, fontWeight: 700, fontFamily: 'var(--font-en)', color: 'var(--swap)' }}>{full}</div>
                  </div>
                </div>
              );
            })()}
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-header">
          <div>
            <div className="card-title">แผน OT รายวันหยุด</div>
            <div className="card-sub">กำหนดเป้าหมายและขั้นต่ำของแต่ละวันหยุดได้แยกกัน</div>
          </div>
          <div className="legend">
            <span className="legend-item"><span className="legend-swatch" style={{background:'var(--swap)'}}/>ครบเป้าหมาย</span>
            <span className="legend-item"><span className="legend-swatch" style={{background:'var(--ot)'}}/>ผ่านขั้นต่ำ</span>
            <span className="legend-item"><span className="legend-swatch" style={{background:'var(--sick)'}}/>ต่ำกว่าขั้นต่ำ</span>
          </div>
        </div>
        <table className="t">
          <thead>
            <tr>
              <th>วันที่</th>
              <th>ประเภท</th>
              <th style={{ width: 120 }}>เป้าหมาย</th>
              <th style={{ width: 120 }}>ขั้นต่ำ</th>
              <th>คนที่ยืนยันแล้ว</th>
              <th>สถานะ</th>
              <th>หมายเหตุ</th>
            </tr>
          </thead>
          <tbody>
            {upcomingOffDays.slice(0, 14).map(od => {
              const plan = plans[od.date] || { target: settings.otTargetDefault || 3, min: settings.otMinDefault || 2, note: '' };
              const confirmedReqs = data.otRequests.filter(o => o.date === od.date && o.status === 'approved');
              const confirmed = confirmedReqs.length;
              const status = confirmed >= plan.target ? 'full' : (confirmed >= plan.min ? 'min' : 'low');
              return (
                <tr key={od.date}>
                  <td>
                    <div style={{ fontWeight: 600 }} className="num text-sm">{helpers.fmtThaiDate(od.date, { shortMonth: true })}</div>
                    <div className="text-xs muted">{['อา.','จ.','อ.','พ.','พฤ.','ศ.','ส.'][od.d.getDay()]}</div>
                  </td>
                  <td>
                    {od.isHoliday
                      ? <span className="chip chip-hol"><Icon name="flag" size={11}/>{od.label}</span>
                      : <span className="chip" style={{background:'var(--weekend-bg)',color:'var(--weekend)'}}><Icon name="moon" size={11}/>วันอาทิตย์</span>
                    }
                  </td>
                  <td>
                    <input type="number" value={plan.target} min={0} max={data.employees.length}
                      onChange={e => updatePlan(od.date, 'target', +e.target.value)}
                      style={{ width: 70, padding: '5px 8px', border: '1px solid var(--ink-200)', borderRadius: 6, fontFamily: 'var(--font-en)', textAlign: 'center' }}/>
                    <span className="text-xs muted" style={{ marginLeft: 6 }}>คน</span>
                  </td>
                  <td>
                    <input type="number" value={plan.min} min={0} max={plan.target}
                      onChange={e => updatePlan(od.date, 'min', +e.target.value)}
                      style={{ width: 70, padding: '5px 8px', border: '1px solid var(--ink-200)', borderRadius: 6, fontFamily: 'var(--font-en)', textAlign: 'center' }}/>
                    <span className="text-xs muted" style={{ marginLeft: 6 }}>คน</span>
                  </td>
                  <td>
                    <div className="row" style={{ gap: 6 }}>
                      <strong className="num">{confirmed}</strong>
                      <span className="text-xs muted">/ {plan.target}</span>
                      <div className="ava-stack">
                        {confirmedReqs.slice(0, 4).map(o => {
                          const e = empMap[o.empId];
                          return <span key={o.id} className="avatar" style={{ background: e?.color }}>{e?.avatar}</span>;
                        })}
                        {confirmedReqs.length > 4 && <span className="ava-more">+{confirmedReqs.length - 4}</span>}
                      </div>
                    </div>
                  </td>
                  <td>
                    {status === 'full' && <span className="chip chip-approved"><Icon name="check" size={11}/>ครบ</span>}
                    {status === 'min' && <span className="chip chip-ot"><Icon name="info" size={11}/>ผ่านขั้นต่ำ (ขาด {plan.target - confirmed})</span>}
                    {status === 'low' && <span className="chip chip-rejected"><Icon name="alert" size={11}/>ขาด {plan.min - confirmed} คน</span>}
                  </td>
                  <td style={{ minWidth: 180, maxWidth: 240 }}>
                    <input
                      type="text"
                      defaultValue={plan.note || ''}
                      placeholder="เช่น เตรียมโปร 6.6"
                      onBlur={e => { if (e.target.value !== (plan.note || '')) updatePlan(od.date, 'note', e.target.value); }}
                      onKeyDown={e => { if (e.key === 'Enter') e.target.blur(); }}
                      style={{ width: '100%', padding: '5px 8px', border: '1px solid var(--ink-200)', borderRadius: 6, fontSize: 12 }}
                    />
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
};

window.OtStaffingTab = OtStaffingTab;

// ───── OT Plan (per-day) Modal ─────
const OtPlanModal = ({ onClose, date, data, settings, setSettings, refresh }) => {
  const helpers = window.APP_HELPERS;
  const iso = helpers.fmtISO(date);
  const existing = (settings.otPlans || data.otPlans || {})[iso] || { target: settings.otTargetDefault || 3, min: settings.otMinDefault || 2, note: '' };
  const [target, setTarget] = React.useState(existing.target);
  const [min, setMin] = React.useState(existing.min);
  const [note, setNote] = React.useState(existing.note || '');

  const confirmed = data.otRequests.filter(o => o.date === iso && o.status === 'approved').length;
  const isHol = helpers.isHoliday(date, data.holidays);

  const [busy, setBusy] = React.useState(false);
  const save = async () => {
    setBusy(true);
    try {
      await window.API.putOtPlan(iso, { target, min, note });
      if (refresh) await refresh();
      onClose();
    } catch (e) { alert(e.message); setBusy(false); }
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-header">
          <div>
            <div className="modal-title">ปรับแผน OT ของวัน</div>
            <div className="text-xs muted mt-2">{helpers.fmtThaiDate(date, { full: true })} · {isHol ? isHol.name : 'วันอาทิตย์'}</div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x"/></button>
        </div>
        <div className="modal-body">
          <div className="field-row">
            <div className="field">
              <label><Icon name="sparkle" size={12}/> เป้าหมายคน OT</label>
              <input type="number" value={target} min={0} max={data.employees.length} onChange={e => { const v = +e.target.value; setTarget(v); if (min > v) setMin(v); }}/>
              <div className="field-help">จำนวนที่ต้องการให้มา OT</div>
            </div>
            <div className="field">
              <label><Icon name="alert" size={12}/> ขั้นต่ำคน OT</label>
              <input type="number" value={min} min={0} max={target} onChange={e => setMin(+e.target.value)}/>
              <div className="field-help">น้อยกว่านี้ระบบจะเตือน</div>
            </div>
          </div>

          <div className="row" style={{ background: 'var(--ot-bg)', padding: 12, borderRadius: 8, gap: 10, marginBottom: 14 }}>
            <Icon name="info" size={16} style={{ color: 'var(--ot)' }}/>
            <div className="text-sm" style={{ color: '#9a3412' }}>
              ตอนนี้ยืนยันแล้ว <strong>{confirmed} คน</strong> ·
              {confirmed >= target
                ? ' ครบตามเป้าหมาย ✓'
                : confirmed >= min
                  ? ` ผ่านขั้นต่ำ แต่ยังขาดอีก ${target - confirmed} คน`
                  : ` ยังขาดอีก ${min - confirmed} คน เพื่อถึงขั้นต่ำ`}
            </div>
          </div>

          <div className="field">
            <label>หมายเหตุ / เหตุผลที่ต้องการคนพิเศษ</label>
            <textarea value={note} onChange={e => setNote(e.target.value)} placeholder="เช่น แพ็คของออเดอร์ค้างส่ง, เตรียมโปร 6.6, นับสต็อก..."/>
          </div>

          <div className="text-xs muted">
            <Icon name="info" size={12}/> ระบบจะส่ง notification เชิญพนักงานสมัคร OT ในวันนี้
          </div>
        </div>
        <div className="modal-footer">
          <button className="btn btn-ghost" onClick={onClose} disabled={busy}>ยกเลิก</button>
          <button className="btn btn-primary" onClick={save} disabled={busy}>
            <Icon name="check" size={14}/> {busy ? 'กำลังบันทึก…' : 'บันทึกแผน'}
          </button>
        </div>
      </div>
    </div>
  );
};

window.OtPlanModal = OtPlanModal;