/* global React, window */
const { useState: useAnnState, useEffect: useAnnEffect } = React;

const ANN_CATS = [
  { key:'general', label:'ทั่วไป',  icon:'✅', tint:'var(--gv-blue-soft)' },
  { key:'hr',      label:'งานบุคคล', icon:'🗓️', tint:'var(--gv-primary-soft)' },
  { key:'holiday', label:'วันหยุด',  icon:'📌', tint:'var(--gv-coral-soft)' },
  { key:'urgent',  label:'ด่วน',     icon:'📢', tint:'var(--gv-coral-soft)' },
];
const catOf = (k) => ANN_CATS.find((c) => c.key === k) || ANN_CATS[0];

function AnnouncePage({ role }) {
  const canManage = role === 'admin' || role === 'hr';
  const [list, setList] = useAnnState([]);
  const [loading, setLoading] = useAnnState(true);
  const [editing, setEditing] = useAnnState(null); // null | {} | {id,...}

  const load = () => {
    setLoading(true);
    fetch(canManage ? '/api/announcements/all' : '/api/announcements', { credentials:'include' })
      .then((r) => r.ok ? r.json() : [])
      .then((d) => { setList(Array.isArray(d) ? d : []); setLoading(false); })
      .catch(() => setLoading(false));
  };
  useAnnEffect(load, []);

  const save = async (a) => {
    const method = a.id ? 'PUT' : 'POST';
    const url = a.id ? `/api/announcements/${a.id}` : '/api/announcements';
    const r = await fetch(url, { method, credentials:'include', headers:{ 'Content-Type':'application/json' },
      body: JSON.stringify({ title:a.title, body:a.body, category:a.category, pinned:a.pinned ? 1 : 0, is_active:a.is_active === 0 ? 0 : 1 }) });
    if (r.ok) { setEditing(null); load(); }
    else { const e = await r.json().catch(() => ({})); alert(e.error || 'บันทึกไม่สำเร็จ'); }
  };
  const del = async (id) => {
    if (!window.confirm('ลบประกาศนี้?')) return;
    const r = await fetch(`/api/announcements/${id}`, { method:'DELETE', credentials:'include' });
    if (r.ok) load();
  };

  return (
    <div data-screen-label="Announcements">
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16, flexWrap:'wrap', gap:10 }}>
        <div>
          <div style={{ fontSize:18, fontWeight:700 }}>ประกาศจากหน่วยงาน</div>
          <div style={{ fontSize:13, color:'var(--gv-soft)' }}>ข่าวสาร ประกาศ และแจ้งเตือนถึงพนักงานทุกท่าน</div>
        </div>
        {canManage && <button className="gv-btn ok" onClick={() => setEditing({ category:'general', pinned:0, is_active:1 })}>＋ เขียนประกาศใหม่</button>}
      </div>

      {loading ? <div className="gv-empty">กำลังโหลด…</div>
        : list.length === 0 ? <div className="gv-card"><div className="gv-card-b"><div className="gv-empty">ยังไม่มีประกาศ</div></div></div>
        : <div className="gv-stack">
            {list.map((a) => {
              const c = catOf(a.category);
              const inactive = a.is_active === 0;
              return (
                <div className="gv-card" key={a.id} style={{ opacity: inactive ? 0.6 : 1 }}>
                  <div className="gv-card-b" style={{ display:'flex', gap:14 }}>
                    <div className="gv-ann" style={{ padding:0, border:0, flex:1 }}>
                      <div className="pin" style={{ background:c.tint }}>{c.icon}</div>
                      <div style={{ flex:1 }}>
                        <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap' }}>
                          <span className="ti" style={{ fontSize:15.5 }}>{a.pinned ? '📌 ' : ''}{a.title}</span>
                          <span className="gv-chip c-green" style={{ fontSize:11 }}>{c.label}</span>
                          {inactive && <span className="gv-chip c-gray" style={{ fontSize:11 }}>ปิดการแสดง</span>}
                        </div>
                        {a.body && <div className="tx" style={{ marginTop:6, fontSize:13.5, lineHeight:1.55 }}>{a.body}</div>}
                        <div className="dt" style={{ marginTop:8 }}>{(a.created_at || '').slice(0, 16).replace('T', ' ')}{a.created_by ? ` · โดย ${a.created_by}` : ''}</div>
                      </div>
                    </div>
                    {canManage && (
                      <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                        <button className="gv-btn no sm" onClick={() => setEditing({ ...a, pinned: !!a.pinned })}>แก้ไข</button>
                        <button className="gv-btn danger sm" onClick={() => del(a.id)}>ลบ</button>
                      </div>
                    )}
                  </div>
                </div>
              );
            })}
          </div>}

      {editing && <AnnEditor value={editing} onCancel={() => setEditing(null)} onSave={save}/>}
    </div>
  );
}

function AnnEditor({ value, onCancel, onSave }) {
  const [a, setA] = useAnnState(value);
  const set = (k, v) => setA((p) => ({ ...p, [k]: v }));
  const upd = a.id != null;
  return (
    <div style={{ position:'fixed', inset:0, background:'rgba(30,28,22,.4)', display:'grid', placeItems:'center', zIndex:200, padding:20 }} onClick={onCancel}>
      <div className="gv-card" style={{ width:'min(560px,100%)', maxHeight:'90vh', overflow:'auto' }} onClick={(e) => e.stopPropagation()}>
        <div className="gv-card-h"><b>{upd ? 'แก้ไขประกาศ' : 'เขียนประกาศใหม่'}</b></div>
        <div className="gv-card-b">
          <div className="gv-field"><label>หัวข้อ</label>
            <input className="gv-input" value={a.title || ''} onChange={(e) => set('title', e.target.value)} placeholder="เช่น หยุดชดเชยวันเฉลิมพระชนมพรรษา"/></div>
          <div className="gv-field"><label>รายละเอียด</label>
            <textarea className="gv-textarea" rows={5} value={a.body || ''} onChange={(e) => set('body', e.target.value)} placeholder="เนื้อหาประกาศ…"/></div>
          <div style={{ display:'flex', gap:14, flexWrap:'wrap' }}>
            <div className="gv-field" style={{ flex:1, minWidth:160 }}><label>หมวดหมู่</label>
              <select className="gv-select" value={a.category || 'general'} onChange={(e) => set('category', e.target.value)}>
                {ANN_CATS.map((c) => <option key={c.key} value={c.key}>{c.icon} {c.label}</option>)}
              </select></div>
            <div className="gv-field" style={{ width:150 }}><label>การแสดงผล</label>
              <select className="gv-select" value={a.is_active === 0 ? '0' : '1'} onChange={(e) => set('is_active', Number(e.target.value))}>
                <option value="1">แสดง</option><option value="0">ซ่อน</option>
              </select></div>
          </div>
          <label style={{ display:'flex', alignItems:'center', gap:8, fontSize:13.5, cursor:'pointer', marginTop:4 }}>
            <input type="checkbox" checked={!!a.pinned} onChange={(e) => set('pinned', e.target.checked)}/> ปักหมุดไว้ด้านบน (📌)
          </label>
          <div style={{ display:'flex', justifyContent:'flex-end', gap:8, marginTop:20 }}>
            <button className="gv-btn no" onClick={onCancel}>ยกเลิก</button>
            <button className="gv-btn ok" onClick={() => a.title && a.title.trim() ? onSave(a) : alert('กรุณากรอกหัวข้อ')}>{upd ? 'บันทึก' : 'เผยแพร่'}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.AnnouncePage = AnnouncePage;