/* global React, window, Icon */
const { useState: useShiftState, useEffect: useShiftEffect } = React;

const WEEKDAYS = [
  { v: '1', label: 'จ' }, { v: '2', label: 'อ' }, { v: '3', label: 'พ' },
  { v: '4', label: 'พฤ' }, { v: '5', label: 'ศ' }, { v: '6', label: 'ส' }, { v: '0', label: 'อา' },
];

// ตารางกะ — define working windows. The shift-engine uses start/end + grace to
// decide late, end + ot_threshold for OT, and workdays for "off" days.
function ShiftPage({ role }) {
  const [shifts, setShifts] = useShiftState(window.SHIFTS || []);
  const [editing, setEditing] = useShiftState(null);
  const canEdit = role === 'admin' || role === 'hr';

  const reload = async () => {
    const r = await fetch('/api/shifts', { credentials: 'include' });
    if (r.ok) { const d = await r.json(); setShifts(d); window.SHIFTS = d; }
  };
  useShiftEffect(() => { reload(); }, []);

  return (
    <div data-screen-label="Shift">
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 12, marginBottom: 16 }}>
        <div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, margin: 0 }}>ตารางกะ / Shifts</h1>
          <div style={{ fontSize: 12.5, color: 'var(--ink-4)', marginTop: 4 }}>กำหนดเวลาเข้า-ออก · ช่วงผ่อนผัน (grace) · เกณฑ์ OT · วันทำงาน</div>
        </div>
        {canEdit && (
          <button className="gv-btn ok sm" onClick={() => setEditing({})}>
            <Icon name="plus" size={13}/> เพิ่มกะ
          </button>
        )}
      </div>

      <div className="gv-card">
        <div style={{ overflowX: 'auto' }}>
          <table className="gv-tbl">
            <thead>
              <tr><th>ชื่อกะ</th><th>เข้า</th><th>ออก</th><th>ผ่อนผัน</th><th>OT หลัง</th><th>พัก</th><th>วันทำงาน</th><th></th></tr>
            </thead>
            <tbody>
              {shifts.length === 0 ? (
                <tr><td colSpan={8}><div className="gv-empty">ยังไม่มีกะ</div></td></tr>
              ) : shifts.map((s) => (
                <tr key={s.id}>
                  <td style={{ fontWeight: 600 }}>{s.name}{s.description && <div style={{ fontSize: 11.5, color: 'var(--ink-4)', fontWeight: 400, marginTop: 2 }}>{s.description}</div>}</td>
                  <td className="tnum">{s.start_time}</td>
                  <td className="tnum">{s.end_time}</td>
                  <td className="tnum">{s.grace_min} น.</td>
                  <td className="tnum">{s.ot_threshold_min} น.</td>
                  <td className="tnum">{s.break_min ? `${s.break_min} น.` : '–'}</td>
                  <td>
                    <div style={{ display: 'flex', gap: 3 }}>
                      {WEEKDAYS.map((w) => {
                        const on = (s.workdays || '').split(',').map(x => x.trim()).includes(w.v);
                        return (
                          <span key={w.v} style={{
                            width: 22, height: 22, borderRadius: 7, fontSize: 9.5, fontWeight: 700,
                            display: 'grid', placeItems: 'center',
                            background: on ? 'var(--mint-soft)' : 'var(--surface-2)',
                            color: on ? 'var(--mint-ink)' : 'var(--ink-4)',
                          }}>{w.label}</span>
                        );
                      })}
                    </div>
                  </td>
                  <td style={{ textAlign: 'right' }}>
                    {canEdit && (
                      <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
                        <button className="gv-btn ghost sm" style={{ padding: '6px 9px' }} onClick={() => setEditing(s)} title="แก้ไข"><Icon name="edit" size={14}/></button>
                        <button className="gv-btn danger sm" style={{ padding: '6px 9px' }}
                          onClick={async () => {
                            const ok = await window.appConfirm({ title: `ลบกะ "${s.name}"?`, danger: true, confirmText: 'ลบ' });
                            if (!ok) return;
                            await fetch(`/api/shifts/${s.id}`, { method: 'DELETE', credentials: 'include' });
                            window.appToast('ลบกะแล้ว', { tone: 'success' }); reload();
                          }} title="ลบ"><Icon name="trash" size={14}/></button>
                      </div>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {editing && <ShiftModal shift={editing} onClose={() => setEditing(null)} onSaved={() => { setEditing(null); reload(); }}/>}
    </div>
  );
}

function ShiftModal({ shift, onClose, onSaved }) {
  const isNew = !shift.id;
  const [name, setName] = useShiftState(shift.name || '');
  const [start, setStart] = useShiftState(shift.start_time || '08:30');
  const [end, setEnd] = useShiftState(shift.end_time || '17:30');
  const [grace, setGrace] = useShiftState(shift.grace_min ?? 10);
  const [ot, setOt] = useShiftState(shift.ot_threshold_min ?? 30);
  const [days, setDays] = useShiftState(new Set((shift.workdays || '1,2,3,4,5').split(',').map(x => x.trim())));
  const [brk, setBrk] = useShiftState(shift.break_min ?? 0);
  const [desc, setDesc] = useShiftState(shift.description || '');
  const [busy, setBusy] = useShiftState(false);
  const [err, setErr] = useShiftState('');

  const toggleDay = (v) => {
    setDays((prev) => { const n = new Set(prev); n.has(v) ? n.delete(v) : n.add(v); return n; });
  };

  const save = async () => {
    if (!name.trim()) { setErr('กรุณาใส่ชื่อกะ'); return; }
    setBusy(true); setErr('');
    try {
      const body = {
        name: name.trim(), start_time: start, end_time: end,
        grace_min: Number(grace), ot_threshold_min: Number(ot), break_min: Number(brk),
        workdays: ['0','1','2','3','4','5','6'].filter(d => days.has(d)).join(','),
        description: desc.trim(),
      };
      const url = isNew ? '/api/shifts' : `/api/shifts/${shift.id}`;
      const r = await fetch(url, { method: isNew ? 'POST' : 'PUT', credentials: 'include',
        headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
      const d = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error(d.error || `error ${r.status}`);
      window.appToast(isNew ? 'เพิ่มกะแล้ว' : 'บันทึกแล้ว', { tone: 'success' });
      onSaved();
    } catch (e) { setErr(e.message); } finally { setBusy(false); }
  };

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(15,23,42,.45)', display: 'grid', placeItems: 'center', padding: 20 }}>
      <div className="gv-card" onClick={(e) => e.stopPropagation()} style={{ width: 'min(520px,100%)', maxHeight: '90vh', overflow: 'auto' }}>
        <div className="gv-card-h"><b>{isNew ? 'เพิ่มกะ' : 'แก้ไขกะ'}</b></div>
        <div className="gv-card-b">
          <div className="gv-field">
            <label>ชื่อกะ *</label>
            <input className="gv-input" value={name} autoFocus onChange={(e) => setName(e.target.value)} placeholder="เช่น กะปกติ"/>
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <div className="gv-field" style={{ flex: 1 }}>
              <label>เวลาเข้า</label>
              <input className="gv-input" type="time" value={start} onChange={(e) => setStart(e.target.value)}/>
            </div>
            <div className="gv-field" style={{ flex: 1 }}>
              <label>เวลาออก</label>
              <input className="gv-input" type="time" value={end} onChange={(e) => setEnd(e.target.value)}/>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <div className="gv-field" style={{ flex: 1 }}>
              <label>ผ่อนผัน (นาที)</label>
              <input className="gv-input" type="number" value={grace} onChange={(e) => setGrace(e.target.value)}/>
              <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 4 }}>มาช้าไม่เกินนี้ = ไม่นับสาย</div>
            </div>
            <div className="gv-field" style={{ flex: 1 }}>
              <label>OT หลังเลิกงาน (นาที)</label>
              <input className="gv-input" type="number" value={ot} onChange={(e) => setOt(e.target.value)}/>
              <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 4 }}>อยู่เกินเวลาออก + นี้ = เริ่มนับ OT</div>
            </div>
          </div>
          <div className="gv-field">
            <label>หักพัก/พักเที่ยง (นาที)</label>
            <input className="gv-input" type="number" value={brk} onChange={(e) => setBrk(e.target.value)}/>
            <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 4 }}>หักออกจากชั่วโมงทำงานสุทธิ (เช่น 60 = พักเที่ยง 1 ชม.)</div>
          </div>
          <div className="gv-field">
            <label>วันทำงาน</label>
            <div style={{ display: 'flex', gap: 6 }}>
              {WEEKDAYS.map((w) => (
                <button key={w.v} type="button" onClick={() => toggleDay(w.v)}
                  className={`gv-btn ${days.has(w.v) ? 'dark' : 'no'} sm`}
                  style={{ width: 42, padding: '8px 0', justifyContent: 'center' }}>{w.label}</button>
              ))}
            </div>
          </div>
          <div className="gv-field">
            <label>คำอธิบาย</label>
            <input className="gv-input" value={desc} onChange={(e) => setDesc(e.target.value)}/>
          </div>
          {err && <div style={{ padding: '10px 14px', borderRadius: 10, background: 'var(--coral-soft)', color: 'var(--coral-ink)', fontSize: 12.5, fontWeight: 600 }}>{err}</div>}
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 4 }}>
            <button className="gv-btn no" onClick={onClose} disabled={busy}>ยกเลิก</button>
            <button className="gv-btn ok" onClick={save} disabled={busy}>{busy ? 'กำลังบันทึก…' : 'บันทึก'}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ShiftPage = ShiftPage;