/* global React */
// ============================================
// Teacher view + Telegram settings + Settings
// ============================================

function TeacherTasksView() {
  const { docs, openDoc, role, currentUser } = useStore();
  // use the logged-in user as "me" (falls back to demo teacher t_02 only if no session)
  const myId = (currentUser && (currentUser.id || currentUser.userId)) || 't_02';
  const me = TEACHERS.find(t => t.id === myId)
    || (currentUser
      ? { name: currentUser.name, group: currentUser.group || ROLE_LABEL[currentUser.role] || 'บุคลากร', initial: currentUser.initial }
      : { name: 'ผู้ใช้', group: 'บุคลากร', initial: '?' });

  const myDocs = useMemo(() => docs.filter(d => (d.assignedTo || []).includes(myId)).sort((a, b) => {
    const order = { sent_to_teacher: 0, assigned: 1, archived: 2 };
    return (order[a.status] ?? 99) - (order[b.status] ?? 99);
  }), [docs, myId]);

  const counts = {
    active: myDocs.filter(d => d.status !== 'archived').length,
    done: myDocs.filter(d => d.status === 'archived').length,
  };

  return React.createElement('div', { className: 'page' },
    React.createElement('div', { className: 'page__head' },
      React.createElement('div', { className: 'page__title' },
        React.createElement('h1', null, `งานของฉัน — ${me.name}`),
        React.createElement('p', null, me.group, ' · ', `งานที่ค้าง ${counts.active} · เสร็จแล้ว ${counts.done}`),
      ),
    ),

    React.createElement('div', { className: 'stats-grid', style: { gridTemplateColumns: 'repeat(3, 1fr)' } },
      React.createElement(StatTile, { label: 'งานที่ค้าง', value: counts.active, sub: 'ต้องดำเนินการ', accent: 'accent', icon: 'bookOpen' }),
      React.createElement(StatTile, { label: 'ใกล้ครบกำหนด', value: myDocs.filter(d => d.dueDate && new Date(d.dueDate) > new Date() && new Date(d.dueDate) - new Date() < 7 * 86400000 && d.status !== 'archived').length, sub: '< 7 วันข้างหน้า', accent: 'amber', icon: 'clock' }),
      React.createElement(StatTile, { label: 'เสร็จสิ้น', value: counts.done, sub: 'ปีการศึกษานี้', icon: 'check' }),
    ),

    React.createElement('div', { className: 'card' },
      React.createElement('div', { className: 'card__head' },
        React.createElement('h3', null, 'รายการหนังสือที่ได้รับมอบหมาย'),
      ),
      React.createElement('div', null,
        myDocs.length === 0
          ? React.createElement('div', { style: { padding: 40, textAlign: 'center', color: 'var(--ink-3)' } }, 'ยังไม่มีงานที่ได้รับมอบหมาย')
          : myDocs.map(d => React.createElement('div', {
            key: d.id,
            onClick: () => openDoc(d.id, 'detail'),
            style: { padding: '16px 20px', borderBottom: '1px solid var(--line)', cursor: 'pointer', display: 'grid', gridTemplateColumns: '90px 1fr auto', gap: 14, alignItems: 'center' },
            onMouseEnter: e => e.currentTarget.style.background = 'var(--bg-soft)',
            onMouseLeave: e => e.currentTarget.style.background = 'transparent',
          },
            React.createElement('div', null,
              React.createElement('div', { className: 'mono', style: { fontWeight: 700, fontSize: 14, color: 'var(--ink)' } }, d.docNumber),
              React.createElement(UrgencyPill, { level: d.urgency }),
            ),
            React.createElement('div', null,
              React.createElement('div', { style: { fontSize: 14.5, fontWeight: 600, marginBottom: 3 } }, d.subject),
              React.createElement('div', { style: { fontSize: 12.5, color: 'var(--ink-3)' } }, 'จาก: ', d.fromShort),
              d.directorNote ? React.createElement('div', {
                style: { marginTop: 6, fontSize: 12.5, color: 'oklch(0.28 0.1 295)', background: 'var(--purple-soft)', padding: '6px 10px', borderRadius: 6, borderLeft: '3px solid oklch(0.38 0.13 295)' }
              },
                React.createElement('strong', null, 'เกษียณของ ผอ.: '), d.directorNote
              ) : null,
            ),
            React.createElement('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 } },
              React.createElement(StatusBadge, { status: d.status, short: true }),
              d.dueDate ? React.createElement('div', { style: { fontSize: 11.5, color: 'var(--ink-3)' } },
                'ครบ ', formatThaiDate(d.dueDate)
              ) : null,
              React.createElement(DueBadge, { dueDate: d.dueDate, status: d.status }),
            ),
          ))
      )
    )
  );
}

// ============================================
// Telegram Bot settings view
// ============================================
function TelegramView() {
  // recipients are the real users in the system (settings only — no live sending yet)
  const { sysUsers } = useStore();
  const [enabled, setEnabled] = useState(false);
  const [token, setToken] = useState('');
  const botName = '(ยังไม่ได้ตั้งค่า)';
  const [chatIds, setChatIds] = useState({});       // uid -> chat_id string
  const [eventsByUid, setEventsByUid] = useState({}); // uid -> [event keys]

  const defaultEvents = (role) => role === 'director' ? ['new_doc', 'urgent']
    : role === 'clerk' ? ['director_signed', 'assigned']
    : role === 'teacher' ? ['assigned', 'reminder'] : ['new_doc'];
  const getEvents = (u) => eventsByUid[u.id] || defaultEvents(u.role);
  const toggleEvent = (uid, ev, role) => setEventsByUid(prev => {
    const cur = prev[uid] || defaultEvents(role);
    return { ...prev, [uid]: cur.includes(ev) ? cur.filter(x => x !== ev) : [...cur, ev] };
  });

  const recipients = (sysUsers || []).filter(u => u.status !== 'suspended');
  const linkedCount = recipients.filter(u => (chatIds[u.id] || '').trim()).length;

  return React.createElement('div', { className: 'page', style: { maxWidth: 1100 } },
    React.createElement('div', { className: 'page__head' },
      React.createElement('div', { className: 'page__title' },
        React.createElement('h1', null, 'การแจ้งเตือนผ่าน Telegram'),
        React.createElement('p', null, 'ตั้งค่า Bot และผู้รับการแจ้งเตือนตามบทบาท — ส่งทันทีเมื่อสถานะหนังสือเปลี่ยน'),
      ),
      React.createElement('label', {
        style: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 13.5, fontWeight: 600 }
      },
        React.createElement('div', {
          onClick: () => setEnabled(e => !e),
          style: {
            width: 38, height: 22, borderRadius: 11,
            background: enabled ? 'var(--accent)' : 'var(--line-2)',
            position: 'relative', cursor: 'pointer', transition: 'background .15s',
          }
        },
          React.createElement('div', {
            style: {
              position: 'absolute',
              top: 2, left: enabled ? 18 : 2,
              width: 18, height: 18, borderRadius: '50%',
              background: 'white', transition: 'left .15s',
              boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
            }
          })
        ),
        enabled ? 'เปิดใช้งานแล้ว' : 'ปิดอยู่',
      ),
    ),

    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 } },

      // Left: bot config + subscribers
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },

        React.createElement('div', { className: 'card' },
          React.createElement('div', { className: 'card__head' },
            React.createElement('h3', null, 'Bot ของระบบ'),
            React.createElement('span', { className: 'badge pending_director' }, React.createElement('span', { className: 'dot' }), 'ยังไม่ได้ตั้งค่า'),
          ),
          React.createElement('div', { className: 'card__body' },
            React.createElement('div', { className: 'hint', style: { marginBottom: 12 } },
              'หน้านี้เป็นการตั้งค่าผู้รับการแจ้งเตือนล่วงหน้า — การส่งจริงผ่าน Telegram ยังไม่เปิดใช้งาน (ต้องเชื่อม Bot token + Edge Function ในขั้นถัดไป)'),
            React.createElement('div', { className: 'field-row' },
              React.createElement('label', null, 'Bot token (เก็บไว้ใช้ภายหลัง)'),
              React.createElement('input', {
                className: 'input mono', type: 'password', value: token,
                placeholder: 'วาง token จาก @BotFather',
                onChange: e => setToken(e.target.value),
              }),
            ),
          ),
        ),

        React.createElement('div', { className: 'card' },
          React.createElement('div', { className: 'card__head' },
            React.createElement('h3', null, 'ผู้รับการแจ้งเตือน'),
            React.createElement('span', { style: { fontSize: 11.5, color: 'var(--ink-3)' } }, `ตั้ง chat_id แล้ว ${linkedCount}/${recipients.length} คน`),
          ),
          React.createElement('div', null,
            recipients.length === 0
              ? React.createElement('div', { style: { padding: '18px 20px', fontSize: 13, color: 'var(--ink-3)' } }, 'ยังไม่มีผู้ใช้ในระบบ')
              : recipients.map(u => {
                const linked = (chatIds[u.id] || '').trim();
                const labels = {
                  new_doc: 'หนังสือใหม่', urgent: '🔥 ด่วนมาก', overdue: 'เลยกำหนด',
                  director_signed: 'ผอ. ลงนามแล้ว', assigned: 'ได้รับมอบหมาย', reminder: 'ใกล้ครบกำหนด',
                };
                const eventOptions = ['new_doc', 'urgent', 'director_signed', 'assigned', 'reminder', 'overdue'];
                return React.createElement('div', {
                  key: u.id,
                  style: { padding: '14px 20px', borderBottom: '1px solid var(--line)' },
                },
                  React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 } },
                    React.createElement('div', { style: { width: 36, height: 36, borderRadius: '50%', background: 'var(--accent)', color: 'white', display: 'grid', placeItems: 'center', fontSize: 13, fontWeight: 700 } }, u.initial || '?'),
                    React.createElement('div', { style: { flex: 1, lineHeight: 1.25 } },
                      React.createElement('div', { style: { fontSize: 14, fontWeight: 600 } }, u.name),
                      React.createElement('div', { style: { fontSize: 12, color: 'var(--ink-3)' } }, ROLE_LABEL[u.role] || u.role, ' · @', u.username || ''),
                    ),
                    React.createElement('span', { className: `badge ${linked ? 'sent_to_teacher' : 'pending_director'}` },
                      React.createElement('span', { className: 'dot' }), linked ? 'ตั้ง chat_id แล้ว' : 'ยังไม่ตั้ง'
                    ),
                  ),
                  React.createElement('div', { style: { paddingLeft: 48, marginBottom: 8 } },
                    React.createElement('input', {
                      className: 'input mono', style: { maxWidth: 260, fontSize: 12.5 },
                      placeholder: 'chat_id (เช่น 5829017453)',
                      value: chatIds[u.id] || '',
                      onChange: e => setChatIds(prev => ({ ...prev, [u.id]: e.target.value })),
                    }),
                  ),
                  React.createElement('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap', paddingLeft: 48 } },
                    eventOptions.map(ev => {
                      const on = getEvents(u).includes(ev);
                      return React.createElement('button', {
                        key: ev,
                        type: 'button',
                        onClick: () => toggleEvent(u.id, ev, u.role),
                        style: {
                          padding: '4px 10px', borderRadius: 999, fontSize: 11.5, fontWeight: 600,
                          border: '1px solid', cursor: 'pointer',
                          background: on ? 'var(--accent-soft)' : 'var(--surface)',
                          borderColor: on ? 'var(--accent)' : 'var(--line)',
                          color: on ? 'var(--accent-deep)' : 'var(--ink-3)',
                        }
                      },
                        on ? '✓ ' : '+ ',
                        labels[ev] || ev,
                      );
                    })
                  )
                );
              })
          )
        ),

        // Install steps
        React.createElement('div', { className: 'card' },
          React.createElement('div', { className: 'card__head' },
            React.createElement('h3', null, 'ขั้นตอนการติดตั้งสำหรับผู้ใช้ใหม่'),
          ),
          React.createElement('div', { className: 'card__body' },
            React.createElement('ol', { style: { paddingLeft: 20, margin: 0, lineHeight: 1.7, fontSize: 13.5 } },
              React.createElement('li', null, React.createElement('strong', null, 'ค้นหา Bot: '), 'ใน Telegram ค้นหา ', React.createElement('span', { className: 'mono', style: { background: 'var(--bg-soft)', padding: '1px 6px', borderRadius: 4 } }, botName)),
              React.createElement('li', null, React.createElement('strong', null, 'พิมพ์ /start: '), 'ในแชทกับ Bot เพื่อรับ chat_id'),
              React.createElement('li', null, React.createElement('strong', null, 'แจ้งธุรการ: '), 'ส่ง chat_id ให้ธุรการลงทะเบียน'),
              React.createElement('li', null, React.createElement('strong', null, 'รอรับการแจ้งเตือน: '), 'เมื่อมีหนังสือใหม่หรือได้รับมอบหมาย'),
            )
          )
        ),
      ),

      // Right: live previews
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
        React.createElement('div', { className: 'card' },
          React.createElement('div', { className: 'card__head' },
            React.createElement('h3', null, 'ตัวอย่างรูปแบบข้อความ'),
            React.createElement('span', { style: { fontSize: 11.5, color: 'var(--ink-3)' } }, 'ตัวอย่าง (ยังไม่ส่งจริง)'),
          ),
          React.createElement('div', { className: 'card__body', style: { padding: 14 } },
            // Director — urgent
            React.createElement('div', { style: { fontSize: 12, color: 'var(--ink-3)', marginBottom: 6, fontWeight: 600 } }, 'ส่งถึง ผอ. — หนังสือด่วน'),
            React.createElement('div', { className: 'tg-preview' },
              React.createElement('div', { className: 'tg-msg' },
                React.createElement('div', { className: 'head' }, '📄 หนังสือรับใหม่ — เลขที่ 68-042'),
                React.createElement('div', { className: 'row' },
                  React.createElement('span', { className: 'k' }, 'เรื่อง:'),
                  React.createElement('span', { className: 'v' }, 'การจัดสรรงบประมาณ...'),
                ),
                React.createElement('div', { className: 'row' },
                  React.createElement('span', { className: 'k' }, 'จาก:'),
                  React.createElement('span', { className: 'v' }, 'สพม.อุบลฯ'),
                ),
                React.createElement('div', { className: 'row' },
                  React.createElement('span', { className: 'k' }, 'วันที่รับ:'),
                  React.createElement('span', { className: 'v' }, '24 พ.ค. 2568'),
                ),
                React.createElement('div', { className: 'urg-tag' }, '🔥 ด่วนมาก'),
                React.createElement('div', { className: 'tg-buttons' },
                  React.createElement('div', { className: 'btn' }, '📖 เปิดอ่าน PDF'),
                  React.createElement('div', { className: 'btn' }, '✍ เกษียณ'),
                )
              ),
            ),
          ),
          React.createElement('div', { className: 'card__body', style: { padding: 14, paddingTop: 0 } },
            React.createElement('div', { style: { fontSize: 12, color: 'var(--ink-3)', marginBottom: 6, fontWeight: 600 } }, 'ส่งถึงครู — งานใหม่'),
            React.createElement('div', { className: 'tg-preview' },
              React.createElement('div', { className: 'tg-msg' },
                React.createElement('div', { className: 'head' }, '📋 ได้รับมอบหมายงานใหม่'),
                React.createElement('div', { className: 'row' },
                  React.createElement('span', { className: 'k' }, 'เลข:'),
                  React.createElement('span', { className: 'v' }, '68-042'),
                ),
                React.createElement('div', { className: 'row' },
                  React.createElement('span', { className: 'k' }, 'เรื่อง:'),
                  React.createElement('span', { className: 'v' }, 'การจัดสรรงบประมาณ...'),
                ),
                React.createElement('div', { className: 'row' },
                  React.createElement('span', { className: 'k' }, 'คำสั่ง ผอ.:'),
                  React.createElement('span', { className: 'v' }, 'ดำเนินการตามที่เกษียณ'),
                ),
                React.createElement('div', { className: 'row' },
                  React.createElement('span', { className: 'k' }, 'ครบ:'),
                  React.createElement('span', { className: 'v' }, '31 พ.ค. 2568'),
                ),
                React.createElement('div', { className: 'tg-buttons' },
                  React.createElement('div', { className: 'btn' }, '📥 ดาวน์โหลด PDF'),
                  React.createElement('div', { className: 'btn' }, '✓ รับทราบ'),
                )
              ),
            ),
          ),
        ),

        React.createElement('div', { className: 'card' },
          React.createElement('div', { className: 'card__head' },
            React.createElement('h3', null, 'สรุปการตั้งค่า'),
          ),
          React.createElement('div', { className: 'card__body' },
            React.createElement('div', { className: 'meta-list' },
              [
                ['ผู้รับทั้งหมด', `${recipients.length} คน`],
                ['ตั้ง chat_id แล้ว', `${linkedCount} คน`],
                ['สถานะการส่ง', enabled ? 'เปิดไว้ (รอเชื่อม Bot)' : 'ปิดอยู่'],
                ['Bot token', token ? 'บันทึกแล้ว (ยังไม่เชื่อม)' : 'ยังไม่ได้ตั้ง'],
              ].map(([k, v]) => React.createElement('div', { key: k, className: 'meta-row' },
                React.createElement('span', { className: 'k' }, k),
                React.createElement('span', { className: 'v tnum' }, v),
              ))
            ),
            React.createElement('div', { className: 'hint', style: { marginTop: 10 } },
              'ตัวเลขการส่งจริงจะปรากฏที่นี่หลังเชื่อม Telegram Bot แล้ว'),
          )
        )
      )
    )
  );
}

// ============================================
// Settings — editable (admin only)
// ============================================
function SettingsView() {
  const { settings, updateSettings, toast } = useStore();
  const [draft, setDraft] = useState(settings);

  // keep the local draft in sync if settings change elsewhere
  useEffect(() => { setDraft(settings); }, [settings]);

  const set = (key, val) => setDraft(d => ({ ...d, [key]: val }));
  const dirty = JSON.stringify(draft) !== JSON.stringify(settings);

  const save = (e) => {
    e.preventDefault();
    updateSettings(draft);
    toast('บันทึกการตั้งค่าเรียบร้อยแล้ว');
  };

  return React.createElement('div', { className: 'page', style: { maxWidth: 800 } },
    React.createElement('div', { className: 'page__head' },
      React.createElement('div', { className: 'page__title' },
        React.createElement('h1', null, 'การตั้งค่า'),
        React.createElement('p', null, 'ตั้งค่าทั่วไปของระบบสารบรรณ — แก้ไขแล้วกดบันทึก'),
      ),
    ),
    React.createElement('form', { className: 'card', onSubmit: save },
      React.createElement('div', { className: 'card__head' },
        React.createElement('h3', null, 'ข้อมูลทั่วไป'),
        dirty ? React.createElement('span', { style: { fontSize: 11.5, color: 'var(--amber-deep)', fontWeight: 600 } }, '● มีการแก้ไขที่ยังไม่บันทึก') : null,
      ),
      React.createElement('div', { className: 'card__body' },
        React.createElement('div', { className: 'form-grid' },
          React.createElement('div', { className: 'field-row col-2' },
            React.createElement('label', null, 'ชื่อโรงเรียน'),
            React.createElement('input', { className: 'input', value: draft.schoolName, onChange: e => set('schoolName', e.target.value) }),
          ),
          React.createElement('div', { className: 'field-row' },
            React.createElement('label', null, 'ปีการศึกษา'),
            React.createElement('input', { className: 'input', value: draft.academicYear, onChange: e => set('academicYear', e.target.value) }),
            React.createElement('span', { className: 'hint' }, 'ใช้แสดงบนหัวระบบและหน้าเข้าสู่ระบบ'),
          ),
          React.createElement('div', { className: 'field-row' },
            React.createElement('label', null, 'รูปแบบเลขรับ'),
            React.createElement('input', { className: 'input', value: draft.docNumberFormat, onChange: e => set('docNumberFormat', e.target.value) }),
          ),
          React.createElement('div', { className: 'field-row' },
            React.createElement('label', null, 'รูปแบบวันที่'),
            React.createElement('select', { className: 'input', value: draft.dateFormat, onChange: e => set('dateFormat', e.target.value) },
              React.createElement('option', { value: 'thai' }, 'ไทย (พ.ศ.)'),
              React.createElement('option', { value: 'inter' }, 'สากล (ค.ศ.)'),
            ),
          ),
          React.createElement('div', { className: 'field-row' },
            React.createElement('label', null, 'ภาษา'),
            React.createElement('select', { className: 'input', value: draft.language, onChange: e => set('language', e.target.value) },
              React.createElement('option', { value: 'th' }, 'ไทย'),
              React.createElement('option', { value: 'en' }, 'อังกฤษ'),
            ),
          ),
          React.createElement('div', { className: 'field-row col-2' },
            React.createElement('label', null, 'หน่วยงานต้นสังกัด'),
            React.createElement('input', { className: 'input', value: draft.parentAgency, onChange: e => set('parentAgency', e.target.value) }),
          ),
        ),
        React.createElement('div', { className: 'divider' }),
        React.createElement('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end' } },
          React.createElement('button', { type: 'button', className: 'btn', disabled: !dirty, onClick: () => setDraft(settings) },
            React.createElement(Icon, { name: 'refresh', size: 13 }), 'ยกเลิกการแก้ไข'),
          React.createElement('button', { type: 'submit', className: 'btn btn--primary', disabled: !dirty },
            React.createElement(Icon, { name: 'save', size: 14 }), 'บันทึกการตั้งค่า'),
        ),
      ),
    )
  );
}

// ============================================
// แจ้งประชุม/นัดหมาย — ประกาศกำหนดการให้บุคลากรทุกคนเห็น
// ============================================
function AnnouncementsView() {
  const { announcements, addAnnouncement, editAnnouncement, removeAnnouncement, role, toast } = useStore();
  const canEdit = role === 'clerk' || role === 'admin' || role === 'director';
  const [adding, setAdding] = useState(false);
  const [editId, setEditId] = useState(null);
  const [confirmId, setConfirmId] = useState(null);
  const [busy, setBusy] = useState(false);
  const [form, setForm] = useState({ title: '', meetingDate: '', meetingTime: '', location: '', details: '' });

  const todayStr = new Date().toISOString().slice(0, 10);
  const upcoming = useMemo(() =>
    [...announcements]
      .filter(a => !a.meetingDate || a.meetingDate >= todayStr)
      .sort((a, b) => (a.meetingDate || '9999').localeCompare(b.meetingDate || '9999')),
    [announcements, todayStr]);
  const past = useMemo(() =>
    [...announcements]
      .filter(a => a.meetingDate && a.meetingDate < todayStr)
      .sort((a, b) => (b.meetingDate || '').localeCompare(a.meetingDate || '')),
    [announcements, todayStr]);

  const openNew = () => { setEditId(null); setForm({ title: '', meetingDate: todayStr, meetingTime: '', location: '', details: '' }); setAdding(true); };
  const openEdit = (a) => { setEditId(a.id); setForm({ title: a.title || '', meetingDate: a.meetingDate || '', meetingTime: a.meetingTime || '', location: a.location || '', details: a.details || '' }); setAdding(true); };
  const cancel = () => { setAdding(false); setEditId(null); };

  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;
    if (!form.title.trim()) { toast('กรุณาใส่ชื่อเรื่อง', 'amber'); return; }
    setBusy(true);
    const payload = {
      title: form.title.trim(),
      meetingDate: form.meetingDate || null,
      meetingTime: form.meetingTime.trim() || null,
      location: form.location.trim() || null,
      details: form.details.trim() || null,
    };
    const res = editId ? await editAnnouncement(editId, payload) : await addAnnouncement(payload);
    setBusy(false);
    if (res && !res.ok) { toast(res.error || 'บันทึกไม่สำเร็จ', 'amber'); return; }
    toast(editId ? 'อัปเดตประกาศแล้ว' : 'เพิ่มประกาศใหม่แล้ว');
    cancel();
  };

  const doRemove = async () => {
    if (!confirmId) return;
    const res = await removeAnnouncement(confirmId);
    setConfirmId(null);
    if (res && !res.ok) toast(res.error || 'ลบไม่สำเร็จ', 'amber');
    else toast('ลบประกาศแล้ว', 'amber');
  };

  const card = (a) => React.createElement('div', { className: 'card', style: { marginBottom: 12 } },
    React.createElement('div', { className: 'card__body' },
      React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'flex-start' } },
        React.createElement('div', { style: { flex: 1, minWidth: 0 } },
          React.createElement('div', { style: { fontSize: 16, fontWeight: 700, marginBottom: 6 } }, a.title),
          React.createElement('div', { style: { display: 'flex', gap: 14, flexWrap: 'wrap', fontSize: 13, color: 'var(--ink-2)' } },
            a.meetingDate ? React.createElement('span', null,
              React.createElement(Icon, { name: 'clock', size: 13, style: { verticalAlign: 'middle', marginRight: 4 } }),
              formatThaiDate(a.meetingDate, { full: true }),
              a.meetingTime ? ' · ' + a.meetingTime + ' น.' : ''
            ) : null,
            a.location ? React.createElement('span', null, '📍 ', a.location) : null,
          ),
          a.details ? React.createElement('div', { style: { marginTop: 10, fontSize: 13.5, color: 'var(--ink)', whiteSpace: 'pre-wrap', lineHeight: 1.6 } }, a.details) : null,
          React.createElement('div', { style: { marginTop: 10, fontSize: 11, color: 'var(--ink-3)' } },
            'ประกาศโดย ', getUserById(a.createdBy).name, ' · ', a.createdAt ? formatThaiDate(a.createdAt, { withTime: true }) : '',
          ),
        ),
        canEdit ? React.createElement('div', { style: { display: 'flex', gap: 4, flexShrink: 0 } },
          React.createElement('button', { className: 'btn btn--ghost btn--sm', title: 'แก้ไข', onClick: () => openEdit(a) },
            React.createElement(Icon, { name: 'edit3', size: 13 })),
          React.createElement('button', { className: 'btn btn--ghost btn--sm', title: 'ลบ', style: { color: 'var(--red)' }, onClick: () => setConfirmId(a.id) },
            React.createElement(Icon, { name: 'trash', size: 13 })),
        ) : null,
      ),
    ),
  );

  return React.createElement('div', { className: 'page' },
    React.createElement('div', { className: 'page__head' },
      React.createElement('div', { className: 'page__title' },
        React.createElement('h1', null, 'แจ้งประชุม/นัดหมาย'),
        React.createElement('p', null, 'ประกาศกำหนดการ ประชุม นัดหมายของโรงเรียน — บุคลากรทุกคนเห็นได้'),
      ),
      canEdit && !adding ? React.createElement('button', { className: 'btn btn--primary btn--lg', onClick: openNew },
        React.createElement(Icon, { name: 'plus', size: 16 }), 'ประกาศใหม่') : null,
    ),

    adding ? React.createElement('form', { className: 'card', style: { marginBottom: 16 }, onSubmit: submit },
      React.createElement('div', { className: 'card__head' },
        React.createElement('h3', null, editId ? 'แก้ไขประกาศ' : 'ประกาศใหม่'),
      ),
      React.createElement('div', { className: 'card__body' },
        React.createElement('div', { className: 'form-grid' },
          React.createElement('div', { className: 'field-row col-2' },
            React.createElement('label', null, 'ชื่อเรื่อง ', React.createElement('span', { className: 'req' }, '*')),
            React.createElement('input', { className: 'input', value: form.title, placeholder: 'เช่น ประชุมประจำเดือน ครั้งที่ 6/2569', onChange: e => setForm(f => ({ ...f, title: e.target.value })) }),
          ),
          React.createElement('div', { className: 'field-row' },
            React.createElement('label', null, 'วันที่'),
            React.createElement('input', { type: 'date', className: 'input', value: form.meetingDate, onChange: e => setForm(f => ({ ...f, meetingDate: e.target.value })) }),
          ),
          React.createElement('div', { className: 'field-row' },
            React.createElement('label', null, 'เวลา'),
            React.createElement('input', { className: 'input', value: form.meetingTime, placeholder: 'เช่น 13:00 หรือ 13:00-15:00', onChange: e => setForm(f => ({ ...f, meetingTime: e.target.value })) }),
          ),
          React.createElement('div', { className: 'field-row col-2' },
            React.createElement('label', null, 'สถานที่'),
            React.createElement('input', { className: 'input', value: form.location, placeholder: 'เช่น ห้องประชุมโรงเรียน', onChange: e => setForm(f => ({ ...f, location: e.target.value })) }),
          ),
          React.createElement('div', { className: 'field-row col-2' },
            React.createElement('label', null, 'รายละเอียด / กำหนดการ'),
            React.createElement('textarea', { className: 'input', rows: 4, value: form.details, placeholder: 'วาระการประชุม / สิ่งที่ต้องเตรียม / ข้อมูลเพิ่มเติม', onChange: e => setForm(f => ({ ...f, details: e.target.value })) }),
          ),
          React.createElement('div', { className: 'field-row col-2', style: { justifyContent: 'flex-end', display: 'flex', gap: 8 } },
            React.createElement('button', { type: 'button', className: 'btn', onClick: cancel }, 'ยกเลิก'),
            React.createElement('button', { type: 'submit', className: 'btn btn--primary', disabled: busy },
              React.createElement(Icon, { name: 'check', size: 14 }), busy ? 'กำลังบันทึก…' : (editId ? 'บันทึกการแก้ไข' : 'เพิ่มประกาศ')),
          ),
        ),
      ),
    ) : null,

    React.createElement('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 8 } },
      `กำลังจะถึง / ปัจจุบัน (${upcoming.length})`),
    upcoming.length === 0
      ? React.createElement('div', { className: 'card', style: { padding: 32, textAlign: 'center', color: 'var(--ink-3)' } }, 'ยังไม่มีประกาศที่กำลังจะถึง')
      : upcoming.map(a => React.createElement('div', { key: a.id }, card(a))),

    past.length > 0 ? React.createElement('div', null,
      React.createElement('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '.06em', marginTop: 24, marginBottom: 8 } },
        `ผ่านมาแล้ว (${past.length})`),
      past.map(a => React.createElement('div', { key: 'past-' + a.id, style: { opacity: 0.65 } }, card(a))),
    ) : null,

    confirmId ? React.createElement('div', {
      style: { position: 'fixed', inset: 0, background: 'rgba(0,0,0,.35)', display: 'grid', placeItems: 'center', zIndex: 1000 },
      onClick: () => setConfirmId(null),
    },
      React.createElement('div', { className: 'card', style: { maxWidth: 420, width: '90%' }, onClick: e => e.stopPropagation() },
        React.createElement('div', { className: 'card__head' }, React.createElement('h3', null, 'ยืนยันการลบ')),
        React.createElement('div', { className: 'card__body' },
          React.createElement('p', { style: { margin: 0, lineHeight: 1.6, fontSize: 14 } }, 'ลบประกาศนี้? การลบนี้ถาวร'),
          React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 16 } },
            React.createElement('button', { className: 'btn', onClick: () => setConfirmId(null) }, 'ยกเลิก'),
            React.createElement('button', { className: 'btn btn--primary', style: { background: 'var(--red)', borderColor: 'var(--red)' }, onClick: doRemove },
              React.createElement(Icon, { name: 'trash', size: 14 }), 'ลบถาวร'),
          ),
        ),
      ),
    ) : null,
  );
}

Object.assign(window, { TeacherTasksView, TelegramView, SettingsView, AnnouncementsView });