/* ============================================================
   announce.jsx — shared announcement (ประชาสัมพันธ์) popup + editor.
   Stored in the Google Sheet "Config" tab (key=announcement) via
   Backend.configSet, so every user sees the same message on entry.
   ============================================================ */

/* popup shown to everyone on entering the app */
function AnnouncementPopup({ text, onClose, onDontShow, admin, onEdit }) {
  return (
    <>
      <div className="scrim" onClick={onClose} style={{ zIndex: 80 }} />
      <div className="modal" style={{ maxWidth: 460, maxHeight: '86vh', overflowY: 'auto', top: '8vh', transform: 'translate(-50%, 0)', zIndex: 81, textAlign: 'left' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
          <div className="modal-ic" style={{ margin: 0, flex: 'none' }}><I.bell size={24} /></div>
          <div>
            <div style={{ fontSize: 18, fontWeight: 700 }}>ประกาศ / ประชาสัมพันธ์</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>จากผู้ดูแลระบบเครื่องมือ</div>
          </div>
        </div>
        <div style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--ink)', whiteSpace: 'pre-wrap', wordBreak: 'break-word', background: 'var(--surface-2)', border: '1px solid var(--line)', borderRadius: 12, padding: '14px 16px' }}>
          {text}
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 16, flexWrap: 'wrap' }}>
          {admin && <button className="btn btn-sm" onClick={onEdit}><I.edit size={15} /> แก้ไขประกาศ</button>}
          <div style={{ flex: 1 }} />
          <button className="btn btn-sm" onClick={onDontShow}>ไม่แสดงอีก</button>
          <button className="btn btn-primary btn-sm" onClick={onClose}><I.check size={16} /> รับทราบ</button>
        </div>
      </div>
    </>
  );
}

/* admin editor for the announcement */
function AnnouncementEditor({ initialText, initialActive, onSave, onClose }) {
  const [text, setText] = useState(initialText || '');
  const [active, setActive] = useState(initialActive !== false);
  const [busy, setBusy] = useState(false);
  const save = async () => {
    setBusy(true);
    try { await onSave(text.trim(), active); } catch (e) { alert('บันทึกไม่สำเร็จ: ' + (e.message || e)); }
    setBusy(false);
  };
  return (
    <>
      <div className="scrim" onClick={onClose} style={{ zIndex: 82 }} />
      <div className="modal" style={{ maxWidth: 480, maxHeight: '88vh', overflowY: 'auto', top: '6vh', transform: 'translate(-50%, 0)', zIndex: 83, textAlign: 'left' }}>
        <div className="modal-ic"><I.bell size={24} /></div>
        <h3 style={{ margin: '0 0 4px', fontSize: 19, fontWeight: 600, textAlign: 'center' }}>จัดการประกาศ</h3>
        <p style={{ fontSize: 12.5, color: 'var(--ink-3)', textAlign: 'center', margin: '0 0 14px' }}>ข้อความนี้จะแสดงให้ทุกคนเห็นตอนเข้าใช้ระบบ</p>
        <label className="field-label">ข้อความประกาศ</label>
        <textarea className="input" value={text} onChange={e => setText(e.target.value)} rows={6}
          placeholder="เช่น แจ้งกำหนดสอบเทียบประจำปี / นัดประชุมคณะกรรมการเครื่องมือ …"
          style={{ width: '100%', resize: 'vertical', fontFamily: 'inherit', lineHeight: 1.6 }} />
        <label className="auth-check" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 12, fontSize: 13 }}>
          <input type="checkbox" checked={active} onChange={e => setActive(e.target.checked)} /> เปิดแสดงประกาศ (ติ๊กออก = ปิดชั่วคราว)
        </label>
        <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
          <button className="btn" style={{ flex: 1 }} onClick={onClose}>ยกเลิก</button>
          <button className="btn btn-primary" style={{ flex: 1 }} onClick={save} disabled={busy}>
            {busy ? <><I.refresh size={16} style={{ animation: 'spin 1s linear infinite' }} /> กำลังบันทึก…</> : <><I.check size={16} /> บันทึกประกาศ</>}
          </button>
        </div>
      </div>
    </>
  );
}

window.AnnouncementPopup = AnnouncementPopup;
window.AnnouncementEditor = AnnouncementEditor;