/* global React */
// ============================================
// Chrome: TopBar, Sidebar, NotificationPopover, ToastHost, Drawer host
// ============================================

const ROLE_BADGE = {
  admin:    { icon: 'shield',   text: 'ผู้ดูแลระบบ' },
  clerk:    { icon: 'fileText', text: 'ธุรการ' },
  director: { icon: 'pen',      text: 'ผู้อำนวยการ' },
  teacher:  { icon: 'user',     text: 'ครู' },
};

const ROLE_OPTIONS = [
  { id: 'admin',    icon: 'shield',   text: 'ผู้ดูแล', view: 'admin_overview' },
  { id: 'clerk',    icon: 'fileText', text: 'ธุรการ',  view: 'dashboard' },
  { id: 'director', icon: 'pen',      text: 'ผอ.',     view: 'dashboard' },
  { id: 'teacher',  icon: 'user',     text: 'ครู',     view: 'teacher_tasks' },
];

function TopBar() {
  const { role, setRole, notifPopOpen, setNotifPopOpen, notifications, setActiveView, logout, currentUser, settings, setMobileNavOpen } = useStore();
  const unreadCount = notifications.filter(n => n.unread).length;

  // Show the actual logged-in account (falls back to role persona if needed).
  const user = currentUser || USERS.u_clerk;
  const userRoleLabel = ROLE_LABEL[user.role] || user.roleTitle || '';
  const badge = ROLE_BADGE[role] || ROLE_BADGE.clerk;
  // Admin may view every role; everyone else is locked to their own.
  const canSwitch = currentUser && currentUser.role === 'admin';

  return React.createElement('div', { className: 'topbar' },
    React.createElement('button', {
      className: 'icon-btn menu-btn',
      onClick: () => setMobileNavOpen(o => !o),
      title: 'เมนู',
      'aria-label': 'เมนู',
    }, React.createElement(Icon, { name: 'menu', size: 20 })),
    React.createElement('div', { className: 'topbar__brand' },
      React.createElement('div', { className: 'brand-mark' }, React.createElement(Icon, { name: 'building', size: 18 })),
      React.createElement('div', { className: 'brand-text' },
        React.createElement('div', { className: 't1' }, 'ระบบสารบรรณ'),
        React.createElement('div', { className: 't2' }, `${settings.schoolName} • ปีการศึกษา ${settings.academicYear}`),
      ),
    ),

    React.createElement('div', { className: 'topbar__spacer' }),

    // Admin: full role switcher (preview every role). Others: locked indicator.
    canSwitch
      ? React.createElement('div', { className: 'role-switcher', title: 'ผู้ดูแลระบบ: ดูได้ทุกบทบาท' },
          ROLE_OPTIONS.map(opt => React.createElement('button', {
            key: opt.id,
            'aria-pressed': role === opt.id,
            onClick: () => { setRole(opt.id); setActiveView(opt.view); },
            title: `มุมมอง${opt.text}`,
          },
            React.createElement(Icon, { name: opt.icon, size: 14 }),
            React.createElement('span', { className: 'role-text' }, opt.text),
          ))
        )
      : React.createElement('div', { className: 'role-indicator', title: `เข้าสู่ระบบในบทบาท: ${badge.text}` },
          React.createElement(Icon, { name: badge.icon, size: 14 }),
          React.createElement('span', { className: 'role-text' }, badge.text),
        ),

    // notification bell
    React.createElement('button', {
      className: 'icon-btn',
      onClick: () => setNotifPopOpen(o => !o),
      title: 'การแจ้งเตือน',
    },
      React.createElement(Icon, { name: 'bell', size: 18 }),
      unreadCount > 0 && React.createElement('span', { className: 'dot' }),
    ),

    // user chip
    React.createElement('div', { className: 'user-chip' },
      React.createElement('div', { className: 'avatar' }, user.initial),
      React.createElement('div', { className: 'meta' },
        React.createElement('div', { className: 'name' }, user.name),
        React.createElement('div', { className: 'role' }, userRoleLabel),
      ),
    ),

    // logout
    React.createElement('button', {
      className: 'icon-btn',
      onClick: logout,
      title: 'ออกจากระบบ',
    },
      React.createElement(Icon, { name: 'logOut', size: 18 }),
    ),
  );
}

function Sidebar() {
  const { role, activeView, setActiveView, docs, sysUsers, currentUser, mobileNavOpen, setMobileNavOpen } = useStore();
  const myId = (currentUser && (currentUser.id || currentUser.userId)) || 't_02';
  // เปลี่ยนหน้า + ปิดเมนูมือถือ
  const go = (view) => { setActiveView(view); setMobileNavOpen(false); };

  const counts = useMemo(() => {
    const c = { total: docs.length, pending_director: 0, director_signed: 0, assigned: 0, sent_to_teacher: 0, archived: 0, urgent: 0 };
    docs.forEach(d => {
      c[d.status]++;
      if (isUrgent(d.urgency) && d.status !== 'archived') c.urgent++;
    });
    return c;
  }, [docs]);

  const adminNav = [
    { id: 'admin_overview', label: 'ภาพรวมระบบ', icon: 'home' },
    { id: 'admin_users', label: 'จัดการผู้ใช้งาน', icon: 'users', count: sysUsers ? sysUsers.length : 0 },
    { id: 'all_docs', label: 'หนังสือรับทั้งหมด', icon: 'layers', count: counts.total },
    { id: 'announcements', label: 'แจ้งประชุม/นัดหมาย', icon: 'bell' },
  ];

  const clerkNav = [
    { id: 'dashboard', label: 'หน้าหลัก', icon: 'home' },
    { id: 'teacher_tasks', label: 'งานของฉัน', icon: 'bookOpen', count: docs.filter(d => d.assignedTo && d.assignedTo.includes(myId)).length },
    { id: 'inbox', label: 'กล่องหนังสือรับ', icon: 'inbox', count: counts.total },
    { id: 'intake', label: 'ออกเลขรับใหม่', icon: 'plus' },
    { id: 'pending_send', label: 'รอส่งครู', icon: 'send', count: docs.filter(d => d.status === 'director_signed' || d.status === 'assigned').length },
    { id: 'archive', label: 'จัดเก็บแล้ว', icon: 'archive', count: counts.archived },
    { id: 'announcements', label: 'แจ้งประชุม/นัดหมาย', icon: 'bell' },
  ];

  const directorNav = [
    { id: 'dashboard', label: 'หน้าหลัก', icon: 'home' },
    { id: 'director_pending', label: 'รอเกษียณ', icon: 'pen', count: counts.pending_director, urgent: counts.urgent > 0 },
    { id: 'director_signed', label: 'ลงนามแล้ว', icon: 'check', count: counts.director_signed + counts.assigned + counts.sent_to_teacher },
    { id: 'all_docs', label: 'หนังสือรับทั้งหมด', icon: 'layers', count: counts.total },
    { id: 'announcements', label: 'แจ้งประชุม/นัดหมาย', icon: 'bell' },
  ];

  const teacherNav = [
    { id: 'teacher_tasks', label: 'งานของฉัน', icon: 'bookOpen', count: docs.filter(d => d.assignedTo && d.assignedTo.includes(myId)).length },
    { id: 'all_docs', label: 'หนังสือรับทั้งหมด', icon: 'layers' },
    { id: 'announcements', label: 'แจ้งประชุม/นัดหมาย', icon: 'bell' },
  ];

  const items = role === 'admin' ? adminNav : role === 'clerk' ? clerkNav : role === 'director' ? directorNav : teacherNav;

  const commonItems = [
    { id: 'telegram', label: 'ตั้งค่า Telegram', icon: 'telegram' },
    { id: 'change_password', label: 'เปลี่ยนรหัสผ่าน', icon: 'key' },
    // "การตั้งค่า" is admin-only; hidden for director / clerk / teacher
    ...(role === 'admin' ? [{ id: 'settings', label: 'การตั้งค่า', icon: 'settings' }] : []),
  ];

  const roleLabel = role === 'admin' ? 'ผู้ดูแลระบบ' : role === 'clerk' ? 'เจ้าหน้าที่ธุรการ' : role === 'director' ? 'ผู้อำนวยการ' : 'ครู / บุคลากร';

  return React.createElement(React.Fragment, null,
    // ฉากหลังทึบ (เฉพาะมือถือเมื่อเมนูเปิด) — แตะเพื่อปิด
    React.createElement('div', {
      className: `nav-scrim ${mobileNavOpen ? 'is-open' : ''}`,
      onClick: () => setMobileNavOpen(false),
    }),
    React.createElement('div', { className: `sidebar ${mobileNavOpen ? 'is-open' : ''}` },
      React.createElement('div', { className: 'side-label' }, roleLabel),
      items.map(item => React.createElement('button', {
        key: item.id,
        className: `side-item ${item.urgent ? 'urgent' : ''}`,
        'aria-current': activeView === item.id ? 'page' : null,
        onClick: () => go(item.id),
      },
        React.createElement(Icon, { name: item.icon, size: 17 }),
        React.createElement('span', { className: 'label-text' }, item.label),
        item.count != null && item.count > 0 ? React.createElement('span', { className: 'count' }, item.count) : null,
      )),

      React.createElement('div', { className: 'side-label', style: { marginTop: 16 } }, 'ระบบ'),
      commonItems.map(item => React.createElement('button', {
        key: item.id,
        className: 'side-item',
        'aria-current': activeView === item.id ? 'page' : null,
        onClick: () => go(item.id),
      },
        React.createElement(Icon, { name: item.icon, size: 17 }),
        React.createElement('span', { className: 'label-text' }, item.label),
      )),
    ),
  );
}

function NotifPopover() {
  const { notifPopOpen, setNotifPopOpen, notifications, markAllRead, openDoc, setActiveView } = useStore();
  if (!notifPopOpen) return null;

  const click = (n) => {
    if (n.docId) {
      openDoc(n.docId);
    } else {
      setActiveView('telegram');
    }
    setNotifPopOpen(false);
  };

  return React.createElement(React.Fragment, null,
    React.createElement('div', {
      style: { position: 'fixed', inset: 0, zIndex: 75 },
      onClick: () => setNotifPopOpen(false),
    }),
    React.createElement('div', { className: 'popover' },
      React.createElement('div', { className: 'popover__head' },
        React.createElement('h4', null, 'การแจ้งเตือน'),
        React.createElement('button', { className: 'btn btn--ghost btn--sm', onClick: markAllRead }, 'อ่านทั้งหมด'),
      ),
      React.createElement('div', { className: 'popover__list' },
        notifications.length === 0 ? React.createElement('div', { style: { padding: 24, textAlign: 'center', color: 'var(--ink-3)', fontSize: 13 } }, 'ไม่มีการแจ้งเตือน')
          : notifications.map(n => React.createElement('div', {
            key: n.id,
            className: `notif-item ${n.unread ? 'unread' : ''}`,
            onClick: () => click(n),
          },
            React.createElement('div', { className: 'ico' },
              React.createElement(Icon, {
                name: n.kind === 'new_doc' ? 'fileText' : n.kind === 'director_signed' ? 'pen' : 'check',
                size: 16,
              })
            ),
            React.createElement('div', { className: 'body' },
              React.createElement('div', { className: 'title' }, n.title, n.urgent ? React.createElement('span', { style: { marginLeft: 6, color: 'var(--amber-deep)' } }, '🔥 ด่วน') : null),
              React.createElement('div', { className: 'desc' }, n.desc),
              React.createElement('div', { className: 'when' }, relativeThai(n.at)),
            ),
            n.unread ? React.createElement('div', { className: 'unread-dot' }) : null,
          ))
      ),
    ),
  );
}

function ToastHost() {
  const { toasts } = useStore();
  return React.createElement('div', { className: 'toast-wrap' },
    toasts.map(t => React.createElement('div', { key: t.id, className: `toast ${t.kind}` },
      React.createElement(Icon, { name: t.kind === 'amber' ? 'alert' : 'check', size: 16 }),
      t.msg,
    ))
  );
}

Object.assign(window, { TopBar, Sidebar, NotifPopover, ToastHost });