// Swap / OT page

const SwapOtPage = ({ data, openModal, role, currentUser, refresh }) => {
  const [tab, setTab] = React.useState('swap');
  const [editingSwap, setEditingSwap] = React.useState(null);
  const [cancellingSwap, setCancellingSwap] = React.useState(null);
  const [editingSpecial, setEditingSpecial] = React.useState(null);
  const [cancellingSpecial, setCancellingSpecial] = React.useState(null);
  const empMap = Object.fromEntries(data.employees.map(e => [e.id, e]));
  const helpers = window.APP_HELPERS;

  const decideSwap = async (id, status) => {
    try { await window.API.updateSwap(id, { status }); if (refresh) await refresh(); }
    catch (e) { alert(e.message); }
  };
  const decideOT = async (id, status) => {
    try { await window.API.updateOT(id, { status }); if (refresh) await refresh(); }
    catch (e) { alert(e.message); }
  };

  let swaps = role === 'employee' ? data.swapRequests.filter(s => s.empId === currentUser.id) : data.swapRequests;
  let ots = role === 'employee' ? data.otRequests.filter(o => o.empId === currentUser.id) : data.otRequests;
  let specials = role === 'employee' ? data.specialOffs.filter(s => s.empId === currentUser.id) : data.specialOffs;

  return (
    <div data-screen-label="Swap & OT">
      <div className="row between mb-3">
        <div>
          <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-.02em' }}>OT & สลับวันหยุด</div>
          <div className="text-sm muted">ทำงาน OT วันอาทิตย์ / นักขัตฤกษ์ และสลับวันหยุดเป็นวันทำงาน</div>
        </div>
        <div className="row" style={{ gap: 8 }}>
          <button className="btn btn-ghost" onClick={() => openModal({ type: 'ot-form' })}>
            <Icon name="sparkle" size={14}/> ขอทำ OT
          </button>
          <button className="btn btn-primary" onClick={() => openModal({ type: 'swap-form' })}>
            <Icon name="swap" size={14}/> ขอสลับวันหยุด
          </button>
        </div>
      </div>

      <div className="tabs">
        <button className={`tab ${tab === 'swap' ? 'active' : ''}`} onClick={() => setTab('swap')}>
          สลับวันหยุด <span className="chip chip-pending" style={{ marginLeft: 6 }}>{swaps.filter(s => s.status === 'pending').length}</span>
        </button>
        <button className={`tab ${tab === 'ot' ? 'active' : ''}`} onClick={() => setTab('ot')}>
          ทำงาน OT <span className="chip chip-pending" style={{ marginLeft: 6 }}>{ots.filter(o => o.status === 'pending').length}</span>
        </button>
        <button className={`tab ${tab === 'special' ? 'active' : ''}`} onClick={() => setTab('special')}>
          วันหยุดพิเศษ <span className="chip chip-special" style={{ marginLeft: 6 }}>{specials.length}</span>
        </button>
      </div>

      {tab === 'swap' && (
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">คำขอสลับวันหยุด</div>
              <div className="card-sub">วันหยุด (อาทิตย์/นักขัตฤกษ์) ⇄ วันทำงานปกติ · ต้องเหลือพนักงานอย่างน้อย {data.settings.minStaffPerDay} คน/วัน</div>
            </div>
          </div>
          <table className="t">
            <thead>
              <tr>
                <th>พนักงาน</th>
                <th>มาทำงานในวัน</th>
                <th>หยุดชดเชยวัน</th>
                <th>ตรวจสอบ</th>
                <th>เหตุผล</th>
                <th>สถานะ</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {swaps.map(s => {
                const emp = empMap[s.empId];
                const offDate = helpers.parseISO(s.swapOffDate);
                const headOnOff = window.getHeadcount(offDate, data);
                const okay = headOnOff.working - 1 >= data.settings.minStaffPerDay; // would they go below if approved
                return (
                  <tr key={s.id}>
                    <td>
                      <div className="row" style={{ gap: 8 }}>
                        <span className="avatar" style={{ background: emp.color, width: 26, height: 26, fontSize: 10 }}>{emp.avatar}</span>
                        <div style={{ fontWeight: 500 }}>{emp.name}</div>
                      </div>
                    </td>
                    <td>
                      <span className="chip chip-swap"><Icon name="sparkle" size={11}/>{helpers.fmtThaiDate(s.swapWorkDate, { full: true })}</span>
                    </td>
                    <td>
                      <span className="chip chip-special"><Icon name="sun" size={11}/>{helpers.fmtThaiDate(s.swapOffDate, { full: true })}</span>
                    </td>
                    <td>
                      {okay ? (
                        <span className="chip chip-approved"><Icon name="check" size={11}/>คนพอ ({headOnOff.working - 1})</span>
                      ) : (
                        <span className="chip chip-rejected"><Icon name="alert" size={11}/>คนไม่พอ</span>
                      )}
                    </td>
                    <td className="text-sm muted">{s.reason}</td>
                    <td>
                      <span className={`chip chip-${s.status === 'approved' ? 'approved' : 'pending'}`}>
                        <span className="chip-dot"/>{s.status === 'approved' ? 'อนุมัติ' : 'รออนุมัติ'}
                      </span>
                    </td>
                    <td>
                      {s.status === 'pending' && role === 'admin' ? (
                        <div className="row" style={{ gap: 2 }}>
                          <button className="icon-btn" disabled={!okay} style={{ width: 28, height: 28, color: okay ? 'var(--swap)' : 'var(--ink-300)' }} title="อนุมัติ" onClick={() => decideSwap(s.id, 'approved')}><Icon name="check" size={14}/></button>
                          <button className="icon-btn" style={{ width: 28, height: 28, color: 'var(--sick)' }} title="ปฏิเสธ" onClick={() => decideSwap(s.id, 'rejected')}><Icon name="x" size={14}/></button>
                        </div>
                      ) : (
                        <div className="row" style={{ gap: 2 }}>
                          {((role === 'employee' && s.empId === currentUser.id) || role === 'admin') && (
                            <button className="icon-btn" style={{ width: 28, height: 28, color: 'var(--brand-600)' }} title="แก้ไขวันหยุดชดเชย" onClick={() => setEditingSwap(s)}>
                              <Icon name="edit" size={14}/>
                            </button>
                          )}
                          {(role === 'admin' && s.status === 'approved') && (
                            <button className="icon-btn" style={{ width: 28, height: 28, color: 'var(--sick)' }} title="ยกเลิกคำขอ" onClick={() => setCancellingSwap(s)}>
                              <Icon name="x" size={14}/>
                            </button>
                          )}
                          <button className="icon-btn" style={{ width: 28, height: 28 }}><Icon name="eye" size={14}/></button>
                        </div>
                      )}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      {tab === 'ot' && (
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">คำขอ OT</div>
              <div className="card-sub">ทำงานในวันหยุดประจำสัปดาห์ หรือวันนักขัตฤกษ์</div>
            </div>
          </div>
          <table className="t">
            <thead>
              <tr>
                <th>พนักงาน</th>
                <th>วันที่</th>
                <th>ประเภทวัน</th>
                <th className="num">ชั่วโมง</th>
                <th>เหตุผล</th>
                <th>สถานะ</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {ots.map(o => {
                const emp = empMap[o.empId];
                const d = helpers.parseISO(o.date);
                const hol = helpers.isHoliday(d, data.holidays);
                return (
                  <tr key={o.id}>
                    <td>
                      <div className="row" style={{ gap: 8 }}>
                        <span className="avatar" style={{ background: emp.color, width: 26, height: 26, fontSize: 10 }}>{emp.avatar}</span>
                        <div style={{ fontWeight: 500 }}>{emp.name}</div>
                      </div>
                    </td>
                    <td className="text-sm">{helpers.fmtThaiDate(o.date, { full: true })}</td>
                    <td>
                      {hol ? <span className="chip chip-hol"><Icon name="flag" size={11}/>{hol.name}</span>
                      : <span className="chip" style={{background:'var(--weekend-bg)',color:'var(--weekend)'}}><Icon name="moon" size={11}/>วันอาทิตย์</span>}
                    </td>
                    <td className="num">{o.hours}</td>
                    <td className="text-sm muted">{o.reason}</td>
                    <td>
                      <span className={`chip chip-${o.status === 'approved' ? 'approved' : 'pending'}`}>
                        <span className="chip-dot"/>{o.status === 'approved' ? 'อนุมัติ' : 'รออนุมัติ'}
                      </span>
                    </td>
                    <td>
                      {o.status === 'pending' && role === 'admin' ? (
                        <div className="row" style={{ gap: 2 }}>
                          <button className="icon-btn" style={{ width: 28, height: 28, color: 'var(--swap)' }} title="อนุมัติ" onClick={() => decideOT(o.id, 'approved')}><Icon name="check" size={14}/></button>
                          <button className="icon-btn" style={{ width: 28, height: 28, color: 'var(--sick)' }} title="ปฏิเสธ" onClick={() => decideOT(o.id, 'rejected')}><Icon name="x" size={14}/></button>
                        </div>
                      ) : (
                        <button className="icon-btn" style={{ width: 28, height: 28 }}><Icon name="eye" size={14}/></button>
                      )}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      {tab === 'special' && (
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">วันหยุดพิเศษ {role === 'admin' ? 'ทั้งหมด' : 'ของฉัน'}</div>
              <div className="card-sub">
                {role === 'admin'
                  ? `วันหยุดพิเศษส่วนตัวของพนักงาน · แก้ไขหรือยกเลิกได้ตลอด`
                  : `วันหยุดพิเศษที่คุณเลือกไว้ · เปลี่ยนหรือยกเลิกได้ก่อนถึงวันจริง`
                }
              </div>
            </div>
            <button className="btn btn-primary btn-sm" onClick={() => openModal({ type: 'special-form' })}>
              <Icon name="plus" size={13}/> เลือกวันใหม่
            </button>
          </div>
          <table className="t">
            <thead>
              <tr>
                {role === 'admin' && <th>พนักงาน</th>}
                <th>วันที่</th>
                <th>วัน</th>
                <th>หมายเหตุ</th>
                <th>สถานะ</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {[...specials].sort((a,b) => a.date.localeCompare(b.date)).map(s => {
                const emp = empMap[s.empId];
                const d = helpers.parseISO(s.date);
                const today = new Date(2026, 4, 22);
                const past = d < today;
                return (
                  <tr key={s.id}>
                    {role === 'admin' && (
                      <td>
                        <div className="row" style={{ gap: 8 }}>
                          <span className="avatar" style={{ background: emp?.color, width: 26, height: 26, fontSize: 10 }}>{emp?.avatar}</span>
                          <div>
                            <div style={{ fontWeight: 500 }}>{emp?.name}</div>
                            <div className="text-xs muted">{emp?.role}</div>
                          </div>
                        </div>
                      </td>
                    )}
                    <td className="text-sm num">{helpers.fmtThaiDate(s.date, { shortMonth: true })}</td>
                    <td className="text-sm">{['อาทิตย์','จันทร์','อังคาร','พุธ','พฤหัสบดี','ศุกร์','เสาร์'][d.getDay()]}</td>
                    <td className="text-sm muted">{s.note || <span style={{ opacity: .5 }}>—</span>}</td>
                    <td>
                      {past
                        ? <span className="chip"><span className="chip-dot"/>ผ่านไปแล้ว</span>
                        : <span className="chip chip-special"><Icon name="star" size={11}/>กำลังจะมาถึง</span>
                      }
                    </td>
                    <td>
                      {!past && (
                        <div className="row" style={{ gap: 2 }}>
                          <button className="icon-btn" style={{ width: 28, height: 28, color: 'var(--brand-600)' }} title="แก้ไขวันที่" onClick={() => setEditingSpecial(s)}>
                            <Icon name="edit" size={14}/>
                          </button>
                          <button className="icon-btn" style={{ width: 28, height: 28, color: 'var(--sick)' }} title="ยกเลิก" onClick={() => setCancellingSpecial(s)}>
                            <Icon name="trash" size={14}/>
                          </button>
                        </div>
                      )}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
          {specials.length === 0 && <div className="empty">ยังไม่มีวันหยุดพิเศษ</div>}
        </div>
      )}

      {editingSwap && (
        <EditSwapOffModal swap={editingSwap} onClose={() => setEditingSwap(null)} data={data} refresh={refresh}/>
      )}

      {cancellingSwap && (
        <CancelSwapModal swap={cancellingSwap} emp={empMap[cancellingSwap.empId]} onClose={() => setCancellingSwap(null)} refresh={refresh}/>
      )}

      {editingSpecial && (
        <EditSpecialModal special={editingSpecial} emp={empMap[editingSpecial.empId]} onClose={() => setEditingSpecial(null)} data={data} refresh={refresh}/>
      )}

      {cancellingSpecial && (
        <CancelSpecialModal special={cancellingSpecial} emp={empMap[cancellingSpecial.empId]} onClose={() => setCancellingSpecial(null)} refresh={refresh}/>
      )}
    </div>
  );
};

// ───── Edit Swap-Off Date Modal ─────
const EditSwapOffModal = ({ swap, onClose, data, refresh }) => {
  const helpers = window.APP_HELPERS;
  const [offDate, setOffDate] = React.useState(swap.swapOffDate);
  const [busy, setBusy] = React.useState(false);
  const save = async () => {
    setBusy(true);
    try { await window.API.updateSwap(swap.id, { swapOffDate: offDate }); if (refresh) await refresh(); onClose(); }
    catch (e) { alert(e.message); setBusy(false); }
  };

  const od = helpers.parseISO(offDate);
  const isWorkDay = data.settings.workDays.includes(od.getDay()) && !helpers.isHoliday(od, data.holidays);
  const head = window.getHeadcount(od, data);
  const headOk = head.working - 1 >= data.settings.minStaffPerDay;
  const canSave = isWorkDay && headOk;

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-header">
          <div>
            <div className="modal-title">แก้ไขวันหยุดชดเชย</div>
            <div className="text-xs muted mt-2">คำขอสลับวัน #{swap.id}</div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x"/></button>
        </div>
        <div className="modal-body">
          <div className="row" style={{ gap: 12, marginBottom: 16, padding: 12, background: 'var(--ink-50)', borderRadius: 8 }}>
            <div className="flex-1">
              <div className="text-xs muted">มาทำงานในวันหยุด</div>
              <div style={{ fontWeight: 600, fontSize: 14, marginTop: 2 }} className="num">
                <Icon name="sparkle" size={13} style={{ color: 'var(--ot)' }}/> {helpers.fmtThaiDate(swap.swapWorkDate, { full: true })}
              </div>
              <div className="text-xs muted mt-2">ไม่สามารถเปลี่ยนแปลงได้</div>
            </div>
            <Icon name="arrowRight" size={20} style={{ color: 'var(--ink-300)' }}/>
            <div className="flex-1">
              <div className="text-xs muted">หยุดชดเชยเดิม</div>
              <div style={{ fontWeight: 600, fontSize: 14, marginTop: 2 }} className="num">
                <Icon name="star" size={13} style={{ color: 'var(--special)' }}/> {helpers.fmtThaiDate(swap.swapOffDate, { shortMonth: true })}
              </div>
              <div className="text-xs muted mt-2">เปลี่ยนได้</div>
            </div>
          </div>

          <div className="field">
            <label>หยุดชดเชยวันใหม่ (วันทำงานปกติ)</label>
            <input type="date" value={offDate} onChange={e => setOffDate(e.target.value)}/>
            <div className="field-help">{helpers.fmtThaiDate(offDate, { full: true })}</div>
          </div>

          <div className="row" style={{
            background: canSave ? 'var(--swap-bg)' : 'var(--sick-bg)',
            padding: 12, borderRadius: 8, gap: 10, marginBottom: 14
          }}>
            <Icon name={canSave ? 'check' : 'alert'} size={16} style={{ color: canSave ? 'var(--swap)' : 'var(--sick)' }}/>
            <div className="text-sm" style={{ color: canSave ? 'var(--swap)' : 'var(--sick)' }}>
              {!isWorkDay
                ? 'ต้องเป็นวันทำงานปกติเท่านั้น'
                : !headOk
                  ? `วันนี้จะเหลือพนักงานต่ำกว่าขั้นต่ำ ${data.settings.minStaffPerDay} คน — เปลี่ยนวันอื่น`
                  : <>วันนั้นจะเหลือ <strong>{head.working - 1} คน</strong> เข้างาน ✓</>
              }
            </div>
          </div>

          {swap.status === 'approved' && (
            <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)' }}>
                คำขอนี้ถูกอนุมัติแล้ว · เมื่อแก้ไขวันหยุดชดเชยจะส่งให้ Admin ตรวจสอบอีกครั้ง
              </div>
            </div>
          )}
        </div>
        <div className="modal-footer">
          <button className="btn btn-ghost" onClick={onClose} disabled={busy}>ยกเลิก</button>
          <button className="btn btn-primary" disabled={!canSave || offDate === swap.swapOffDate || busy} onClick={save}>
            <Icon name="check" size={14}/> {busy ? 'กำลังบันทึก…' : 'บันทึกการเปลี่ยนแปลง'}
          </button>
        </div>
      </div>
    </div>
  );
};

window.EditSwapOffModal = EditSwapOffModal;

// ───── Cancel Swap Modal (admin) ─────
const CancelSwapModal = ({ swap, emp, onClose, refresh }) => {
  const helpers = window.APP_HELPERS;
  const [reason, setReason] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const doCancel = async () => {
    setBusy(true);
    try { await window.API.updateSwap(swap.id, { status: 'cancelled' }); 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()} style={{ maxWidth: 460 }}>
        <div className="modal-header">
          <div>
            <div className="modal-title">ยกเลิกคำขอสลับวันหยุด?</div>
            <div className="text-xs muted mt-2">คำขอ #{swap.id}</div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x"/></button>
        </div>
        <div className="modal-body">
          <div className="row" style={{ gap: 10, padding: 12, background: 'var(--sick-bg)', borderRadius: 8, marginBottom: 14 }}>
            <span className="avatar" style={{ background: emp?.color, width: 32, height: 32, fontSize: 11 }}>{emp?.avatar}</span>
            <div>
              <div style={{ fontWeight: 600 }}>{emp?.name}</div>
              <div className="text-xs muted">{emp?.role}</div>
            </div>
          </div>

          <div className="row" style={{ gap: 12, marginBottom: 14, padding: 12, background: 'var(--ink-50)', borderRadius: 8 }}>
            <div className="flex-1">
              <div className="text-xs muted">มาทำงานในวันหยุด</div>
              <div style={{ fontWeight: 600, fontSize: 13, marginTop: 2 }} className="num">
                <Icon name="sparkle" size={12} style={{ color: 'var(--ot)' }}/> {helpers.fmtThaiDate(swap.swapWorkDate, { shortMonth: true })}
              </div>
            </div>
            <Icon name="arrowRight" size={16} style={{ color: 'var(--ink-300)', alignSelf: 'center' }}/>
            <div className="flex-1">
              <div className="text-xs muted">หยุดชดเชย</div>
              <div style={{ fontWeight: 600, fontSize: 13, marginTop: 2 }} className="num">
                <Icon name="star" size={12} style={{ color: 'var(--special)' }}/> {helpers.fmtThaiDate(swap.swapOffDate, { shortMonth: true })}
              </div>
            </div>
          </div>

          <div className="field">
            <label>เหตุผลในการยกเลิก</label>
            <textarea value={reason} onChange={e => setReason(e.target.value)} placeholder="เช่น เปลี่ยนแผนงาน, ไม่มีงานต้องมาทำในวันนั้น, พนักงานขอถอนคำขอ..." style={{ minHeight: 80 }}/>
          </div>

          <div className="row" style={{ gap: 8, padding: 10, background: '#fef3c7', borderRadius: 8 }}>
            <Icon name="alert" size={14} style={{ color: '#92400e' }}/>
            <div className="text-xs" style={{ color: '#92400e' }}>
              พนักงานจะได้รับการแจ้งเตือนทันที · วันทำงานและวันหยุดในปฏิทินจะกลับเป็นค่าเดิม
            </div>
          </div>
        </div>
        <div className="modal-footer">
          <button className="btn btn-ghost" onClick={onClose} disabled={busy}>ปิด</button>
          <button className="btn btn-danger" onClick={doCancel} disabled={busy}>
            <Icon name="x" size={14}/> {busy ? 'กำลังยกเลิก…' : 'ยืนยันยกเลิกคำขอ'}
          </button>
        </div>
      </div>
    </div>
  );
};

window.CancelSwapModal = CancelSwapModal;

// ───── Edit Special Off Modal ─────
const EditSpecialModal = ({ special, emp, onClose, data, refresh }) => {
  const helpers = window.APP_HELPERS;
  const [date, setDate] = React.useState(special.date);
  const [note, setNote] = React.useState(special.note || '');
  const [busy, setBusy] = React.useState(false);
  const save = async () => {
    setBusy(true);
    try { await window.API.updateSpecialOff(special.id, { date, note }); if (refresh) await refresh(); onClose(); }
    catch (e) { alert(e.message); setBusy(false); }
  };

  const allowedDays = data.settings.specialOffAllowedDays || [6];
  const d = helpers.parseISO(date);
  const isHol = helpers.isHoliday(d, data.holidays);
  const isWorkDay = data.settings.workDays.includes(d.getDay()) && !isHol;
  const isAllowedDay = allowedDays.includes(d.getDay());
  const DAYS_LONG = ['อาทิตย์','จันทร์','อังคาร','พุธ','พฤหัสบดี','ศุกร์','เสาร์'];

  const head = window.getHeadcount(d, data);
  // Don't count this special-off itself when checking — pretend it's not there
  const headOk = head.working - (special.date === date ? 0 : 1) >= data.settings.minStaffPerDay;
  const canSave = isWorkDay && isAllowedDay && headOk;
  const changed = (date !== special.date || note !== (special.note || ''));

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-header">
          <div>
            <div className="modal-title">แก้ไขวันหยุดพิเศษ</div>
            <div className="text-xs muted mt-2">{emp?.name} · เดิม {helpers.fmtThaiDate(special.date, { full: true })}</div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x"/></button>
        </div>
        <div className="modal-body">
          <div className="row" style={{ background: 'var(--special-bg)', padding: 12, borderRadius: 8, gap: 10, marginBottom: 16 }}>
            <Icon name="star" size={16} style={{ color: 'var(--special)' }}/>
            <div className="text-sm" style={{ color: '#92400e' }}>
              อนุญาตเฉพาะวัน<strong>{allowedDays.map(i => DAYS_LONG[i]).join(', ')}</strong>
            </div>
          </div>

          <div className="field">
            <label>เปลี่ยนวันที่</label>
            <input type="date" value={date} onChange={e => setDate(e.target.value)}/>
            <div className="field-help">{helpers.fmtThaiDate(date, { full: true })}</div>
          </div>

          <div className="day-section-title">ตรวจสอบเงื่อนไข</div>
          <ConditionRow ok={isAllowedDay} label={isAllowedDay ? `เป็นวัน${DAYS_LONG[d.getDay()]} ✓` : `วัน${DAYS_LONG[d.getDay()]}ไม่อยู่ในวันที่อนุญาต`}/>
          <ConditionRow ok={isWorkDay} label={isWorkDay ? 'เป็นวันทำงานปกติ ✓' : 'ไม่ใช่วันทำงานปกติ'}/>
          <ConditionRow ok={headOk} label={headOk ? `จะเหลือพนักงานเข้างาน ${head.working - (special.date === date ? 0 : 1)} คน ✓` : `จะเหลือพนักงานต่ำกว่า ${data.settings.minStaffPerDay} คน`}/>

          <div className="field mt-4">
            <label>หมายเหตุ</label>
            <textarea value={note} onChange={e => setNote(e.target.value)} placeholder="เช่น วันเกิด, ธุระส่วนตัว..."/>
          </div>
        </div>
        <div className="modal-footer">
          <button className="btn btn-ghost" onClick={onClose} disabled={busy}>ยกเลิก</button>
          <button className="btn btn-primary" disabled={!canSave || !changed || busy} onClick={save}>
            <Icon name="check" size={14}/> {busy ? 'กำลังบันทึก…' : 'บันทึกการแก้ไข'}
          </button>
        </div>
      </div>
    </div>
  );
};

// ───── Cancel Special Off Modal ─────
const CancelSpecialModal = ({ special, emp, onClose, refresh }) => {
  const helpers = window.APP_HELPERS;
  const [busy, setBusy] = React.useState(false);
  const doDelete = async () => {
    setBusy(true);
    try { await window.API.deleteSpecialOff(special.id); 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()} style={{ maxWidth: 420 }}>
        <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: 14 }}>
            <div className="type-icon special" style={{ width: 34, height: 34 }}>
              <Icon name="star" size={16}/>
            </div>
            <div>
              <div style={{ fontWeight: 600 }}>{emp?.name}</div>
              <div className="text-xs muted">{helpers.fmtThaiDate(special.date, { full: true })}</div>
              {special.note && <div className="text-xs muted mt-2">หมายเหตุ: {special.note}</div>}
            </div>
          </div>

          <div className="text-sm muted">
            วันที่นี้จะกลับเป็นวันทำงานปกติ · จะคืนโควต้าวันหยุดพิเศษให้ {emp?.name?.split(' ')[0]} ในเดือนนั้น
          </div>
        </div>
        <div className="modal-footer">
          <button className="btn btn-ghost" onClick={onClose} disabled={busy}>ปิด</button>
          <button className="btn btn-danger" onClick={doDelete} disabled={busy}>
            <Icon name="trash" size={14}/> {busy ? 'กำลังยกเลิก…' : 'ยืนยันยกเลิก'}
          </button>
        </div>
      </div>
    </div>
  );
};

// ConditionRow helper (re-used from my-space)
const ConditionRow = ({ ok, label }) => (
  <div className="row" style={{ padding: '7px 10px', gap: 10, borderRadius: 7, background: ok ? 'var(--swap-bg)' : 'var(--sick-bg)', marginBottom: 6 }}>
    <Icon name={ok ? 'check' : 'alert'} size={14} style={{ color: ok ? 'var(--swap)' : 'var(--sick)' }}/>
    <span className="text-sm" style={{ color: ok ? 'var(--swap)' : 'var(--sick)' }}>{label}</span>
  </div>
);

window.EditSpecialModal = EditSpecialModal;
window.CancelSpecialModal = CancelSpecialModal;

// ───── Swap Modal ─────
const SwapModal = ({ onClose, currentUser, data, refresh }) => {
  const [workDate, setWorkDate] = React.useState('2026-05-31');
  const [offDate, setOffDate] = React.useState('2026-06-02');
  const [reason, setReason] = React.useState('');
  const [busy, setBusy] = React.useState(false);

  const wd = window.APP_HELPERS.parseISO(workDate);
  const od = window.APP_HELPERS.parseISO(offDate);
  const headOff = window.getHeadcount(od, data);
  const okay = headOff.working - 1 >= data.settings.minStaffPerDay;

  const submit = async () => {
    setBusy(true);
    try {
      await window.API.createSwap({ swapWorkDate: workDate, swapOffDate: offDate, reason });
      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">ขอสลับวันหยุด</div>
            <div className="text-xs muted mt-2">{currentUser.name} · {currentUser.role}</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>มาทำงานในวันหยุด</label>
              <input type="date" value={workDate} onChange={e => setWorkDate(e.target.value)}/>
              <div className="field-help">อาทิตย์ หรือนักขัตฤกษ์</div>
            </div>
            <div className="field">
              <label>หยุดชดเชยในวันทำงาน</label>
              <input type="date" value={offDate} onChange={e => setOffDate(e.target.value)}/>
              <div className="field-help">จันทร์ – เสาร์</div>
            </div>
          </div>

          <div className="row" style={{ background: okay ? 'var(--swap-bg)' : 'var(--sick-bg)', padding: 12, borderRadius: 8, gap: 10, marginBottom: 14 }}>
            <Icon name={okay ? "check" : "alert"} size={16} style={{ color: okay ? 'var(--swap)' : 'var(--sick)' }}/>
            <div className="text-sm" style={{ color: okay ? 'var(--swap)' : 'var(--sick)' }}>
              {okay
                ? <>วันนั้นจะเหลือพนักงาน <strong>{headOff.working - 1} คน</strong> เข้างาน (ขั้นต่ำ {data.settings.minStaffPerDay} คน) ✓</>
                : <>ไม่สามารถสลับได้ — จะเหลือพนักงานเข้างานต่ำกว่าขั้นต่ำ {data.settings.minStaffPerDay} คน</>
              }
            </div>
          </div>

          <div className="field">
            <label>เหตุผล</label>
            <textarea value={reason} onChange={e => setReason(e.target.value)} placeholder="เช่น มาช่วยแพ็คของวันโปร, แลกหยุดไปงานแต่ง..."/>
          </div>
        </div>
        <div className="modal-footer">
          <button className="btn btn-ghost" onClick={onClose} disabled={busy}>ยกเลิก</button>
          <button className="btn btn-primary" disabled={!okay || busy} onClick={submit}>{busy ? 'กำลังส่ง…' : 'ส่งคำขอ'}</button>
        </div>
      </div>
    </div>
  );
};

// ───── OT Modal ─────
const OtModal = ({ onClose, currentUser, data, refresh }) => {
  const [date, setDate] = React.useState('2026-05-31');
  const [hours, setHours] = React.useState(8);
  const [reason, setReason] = React.useState('');
  const [busy, setBusy] = React.useState(false);

  const d = window.APP_HELPERS.parseISO(date);
  const isHoliday = window.APP_HELPERS.isHoliday(d, data.holidays);
  const isSunday = d.getDay() === 0;
  const isValid = isHoliday || isSunday;

  const submit = async () => {
    setBusy(true);
    try {
      await window.API.createOT({ date, hours, reason });
      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">{currentUser.name} · {currentUser.role}</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>วันที่ทำงาน OT</label>
              <input type="date" value={date} onChange={e => setDate(e.target.value)}/>
              <div className="field-help">อาทิตย์ / นักขัตฤกษ์เท่านั้น</div>
            </div>
            <div className="field">
              <label>จำนวนชั่วโมง</label>
              <input type="number" value={hours} min={1} max={12} onChange={e => setHours(+e.target.value)}/>
            </div>
          </div>

          <div className="row" style={{ background: isValid ? 'var(--ot-bg)' : 'var(--sick-bg)', padding: 12, borderRadius: 8, gap: 10, marginBottom: 14 }}>
            <Icon name={isValid ? "info" : "alert"} size={16} style={{ color: isValid ? 'var(--ot)' : 'var(--sick)' }}/>
            <div className="text-sm" style={{ color: isValid ? 'var(--ot)' : 'var(--sick)' }}>
              {isValid
                ? <>รวม <strong>{hours} ชั่วโมง</strong> · {isHoliday ? `${isHoliday.name}` : 'วันอาทิตย์'}</>
                : <>วันนี้เป็นวันทำงานปกติ — ขอ OT ไม่ได้</>
              }
            </div>
          </div>

          <div className="field">
            <label>เหตุผล / งานที่ต้องทำ</label>
            <textarea value={reason} onChange={e => setReason(e.target.value)} placeholder="เช่น แพ็คของออเดอร์ค้างส่ง, รับโทรลูกค้าโปร 6.6..."/>
          </div>
        </div>
        <div className="modal-footer">
          <button className="btn btn-ghost" onClick={onClose} disabled={busy}>ยกเลิก</button>
          <button className="btn btn-primary" disabled={!isValid || busy} onClick={submit}>{busy ? 'กำลังส่ง…' : 'ส่งคำขอ'}</button>
        </div>
      </div>
    </div>
  );
};

window.SwapOtPage = SwapOtPage;
window.SwapModal = SwapModal;
window.OtModal = OtModal;