/* global React, window, Icon */
const { useState: useHolState, useEffect: useHolEffect } = React;

// วันหยุด — Thai public holidays (auto-seeded) + manual entries.
function HolidayPage({ role }) {
  const thisYear = new Date().getFullYear();
  const [year, setYear] = useHolState(thisYear);
  const [list, setList] = useHolState([]);
  const [adding, setAdding] = useHolState(false);
  const [newDate, setNewDate] = useHolState('');
  const [newName, setNewName] = useHolState('');
  const canEdit = role === 'admin' || role === 'hr';

  const load = async () => {
    const r = await fetch(`/api/holidays?year=${year}`, { credentials: 'include' });
    if (r.ok) setList(await r.json());
  };
  useHolEffect(() => { load(); }, [year]);

  const add = async () => {
    if (!newDate || !newName.trim()) { window.appToast('กรุณาใส่วันที่ + ชื่อ', { tone: 'error' }); return; }
    const r = await fetch('/api/holidays', { method: 'POST', credentials: 'include',
      headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ date: newDate, name: newName.trim() }) });
    if (r.ok) { window.appToast('เพิ่มวันหยุดแล้ว', { tone: 'success' }); setAdding(false); setNewDate(''); setNewName(''); load(); }
  };

  const del = async (h) => {
    const ok = await window.appConfirm({ title: `ลบ "${h.name}"?`, message: h.date, danger: true, confirmText: 'ลบ' });
    if (!ok) return;
    await fetch(`/api/holidays/${h.date}`, { method: 'DELETE', credentials: 'include' });
    window.appToast('ลบแล้ว', { tone: 'success' }); load();
  };

  const fmtThai = (d) => new Date(d + 'T00:00:00').toLocaleDateString('th-TH', { weekday: 'short', day: 'numeric', month: 'long' });

  return (
    <div data-screen-label="Holiday">
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 12, marginBottom: 16, flexWrap: 'wrap' }}>
        <div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, margin: 0 }}>วันหยุด / Holidays</h1>
          <div style={{ fontSize: 12.5, color: 'var(--ink-4)', marginTop: 4 }}>ปฏิทินวันหยุดราชการไทย (อัตโนมัติ) + เพิ่มวันหยุดบริษัทเอง</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <select className="gv-select" value={year} onChange={(e) => setYear(Number(e.target.value))} style={{ maxWidth: 120, width: 'auto' }}>
            {[thisYear - 1, thisYear, thisYear + 1].map((y) => <option key={y} value={y}>{y + 543}</option>)}
          </select>
          {canEdit && (
            <button className="gv-btn ok sm" onClick={() => setAdding(!adding)}>
              <Icon name="plus" size={13}/> เพิ่มวันหยุด
            </button>
          )}
        </div>
      </div>

      {adding && (
        <div className="gv-card" style={{ marginBottom: 14 }}>
          <div className="gv-card-b">
            <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end', flexWrap: 'wrap' }}>
              <div className="gv-field" style={{ width: 180, marginBottom: 0 }}>
                <label>วันที่</label>
                <input className="gv-input" type="date" value={newDate} onChange={(e) => setNewDate(e.target.value)}/>
              </div>
              <div className="gv-field" style={{ flex: 1, minWidth: 180, marginBottom: 0 }}>
                <label>ชื่อวันหยุด</label>
                <input className="gv-input" value={newName} onChange={(e) => setNewName(e.target.value)} placeholder="เช่น วันหยุดบริษัท"/>
              </div>
              <button className="gv-btn ok" onClick={add}>บันทึก</button>
              <button className="gv-btn no" onClick={() => setAdding(false)}>ยกเลิก</button>
            </div>
          </div>
        </div>
      )}

      <div className="gv-card">
        <div style={{ overflowX: 'auto' }}>
          <table className="gv-tbl">
            <thead><tr><th>วันที่</th><th>ชื่อวันหยุด</th><th>ที่มา</th><th></th></tr></thead>
            <tbody>
              {list.length === 0 ? (
                <tr><td colSpan={4}><div className="gv-empty">ไม่มีวันหยุดในปีนี้</div></td></tr>
              ) : list.map((h) => (
                <tr key={h.date}>
                  <td className="tnum" style={{ fontSize: 13 }}>{h.date}<div style={{ fontSize: 11.5, color: 'var(--ink-4)', marginTop: 2 }}>{fmtThai(h.date)}</div></td>
                  <td style={{ fontWeight: 500 }}>{h.name}</td>
                  <td>
                    <span className={`gv-chip ${h.source === 'auto' ? 'c-gray' : 'c-blue'}`}>
                      {h.source === 'auto' ? 'ราชการ' : 'เพิ่มเอง'}
                    </span>
                  </td>
                  <td style={{ textAlign: 'right' }}>
                    {canEdit && (
                      <button className="gv-btn danger sm" style={{ padding: '6px 9px' }} onClick={() => del(h)} title="ลบ">
                        <Icon name="trash" size={14}/>
                      </button>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

window.HolidayPage = HolidayPage;