import { useState, useEffect, useCallback } from 'react';
import { useSocket } from '../contexts/SocketContext.jsx';
import { useAuth } from '../contexts/AuthContext.jsx';
import { useToast } from '../contexts/ToastContext.jsx';
import { api } from '../utils/api.js';
import Sidebar from '../components/Sidebar.jsx';
import ChatWindow from '../components/ChatWindow.jsx';
import ProfileModal from '../components/ProfileModal.jsx';
import UserManagerPage from './UserManagerPage.jsx';
import GroupManagerPage from './GroupManagerPage.jsx';
import HostPanel from '../components/HostPanel.jsx';
import SettingsModal from '../components/SettingsModal.jsx';
import BrandingModal from '../components/BrandingModal.jsx';
import NewChatModal from '../components/NewChatModal.jsx';
import GlobalBar from '../components/GlobalBar.jsx';
import AboutModal from '../components/AboutModal.jsx';
import HelpModal from '../components/HelpModal.jsx';
import NavDrawer from '../components/NavDrawer.jsx';
import SchedulePage from '../components/SchedulePage.jsx';
import './Chat.css';

function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);
  for (let i = 0; i < rawData.length; ++i) outputArray[i] = rawData.charCodeAt(i);
  return outputArray;
}

export default function Chat() {
  const { socket } = useSocket();
  const { user } = useAuth();
  const toast = useToast();

  const [groups, setGroups] = useState({ publicGroups: [], privateGroups: [] });
  const [onlineUserIds, setOnlineUserIds] = useState(new Set());
  const [activeGroupId, setActiveGroupId] = useState(null);
  const [chatHasText, setChatHasText] = useState(false);
  const [notifications, setNotifications] = useState([]);
  const [unreadGroups, setUnreadGroups] = useState(new Map());
  const [modal, setModal] = useState(null); // 'profile' | 'users' | 'settings' | 'newchat' | 'help' | 'groupmanager'
  const [page, setPage] = useState('chat'); // 'chat' | 'schedule' | 'groupmessages'
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [features, setFeatures] = useState({ branding: false, groupManager: false, scheduleManager: false, appType: 'RosterChirp-Chat', teamToolManagers: [], isHostDomain: false });
  const [helpDismissed, setHelpDismissed] = useState(true); // true until status loaded
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
  const [showSidebar, setShowSidebar] = useState(true);

  // Check if help should be shown on login
  useEffect(() => {
    api.getHelpStatus()
      .then(({ dismissed }) => {
        setHelpDismissed(dismissed);
        if (!dismissed) setModal('help');
      })
      .catch(() => {});
  }, []);

  useEffect(() => {
    const handle = () => {
      const mobile = window.innerWidth < 768;
      setIsMobile(mobile);
      if (!mobile) setShowSidebar(true);
    };
    window.addEventListener('resize', handle);
    return () => window.removeEventListener('resize', handle);
  }, []);

  const loadGroups = useCallback(() => {
    api.getGroups().then(setGroups).catch(() => {});
  }, []);

  useEffect(() => { loadGroups(); }, [loadGroups]);

  // Load feature flags + current user's group memberships on mount
  const loadFeatures = useCallback(() => {
    api.getSettings().then(({ settings }) => {
      setFeatures(prev => ({
        ...prev,
        branding:             settings.feature_branding          === 'true',
        groupManager:         settings.feature_group_manager     === 'true',
        scheduleManager:      settings.feature_schedule_manager  === 'true',
        appType:              settings.app_type || 'RosterChirp-Chat',
        teamToolManagers: JSON.parse(settings.team_tool_managers || settings.team_group_managers || '[]'),
        isHostDomain:         settings.is_host_domain === 'true',
      }));
    }).catch(() => {});
    api.getMyUserGroups().then(({ userGroups }) => {
      setFeatures(prev => ({ ...prev, userGroupMemberships: (userGroups || []).map(g => g.id) }));
    }).catch(() => {});
  }, []);

  useEffect(() => {
    loadFeatures();
    window.addEventListener('rosterchirp:settings-changed', loadFeatures);
    return () => window.removeEventListener('rosterchirp:settings-changed', loadFeatures);
  }, [loadFeatures]);

  // Register / refresh FCM push subscription
  useEffect(() => {
    if (!('serviceWorker' in navigator)) return;

    const registerPush = async () => {
      try {
        if (Notification.permission === 'denied') return;

        // Fetch Firebase config from backend (returns 503 if FCM not configured)
        const configRes = await fetch('/api/push/firebase-config');
        if (!configRes.ok) return;
        const { apiKey, projectId, messagingSenderId, appId, vapidKey } = await configRes.json();

        // Dynamically import the Firebase SDK (tree-shaken, only loaded when needed)
        const { initializeApp, getApps } = await import('firebase/app');
        const { getMessaging, getToken } = await import('firebase/messaging');

        const firebaseApp = getApps().length
          ? getApps()[0]
          : initializeApp({ apiKey, projectId, messagingSenderId, appId });
        const firebaseMessaging = getMessaging(firebaseApp);

        const reg = await navigator.serviceWorker.ready;

        if (Notification.permission !== 'granted') {
          const granted = await Notification.requestPermission();
          if (granted !== 'granted') return;
        }

        // Do NOT call deleteToken() here. Deleting the token on every page load (or
        // every visibility-change) forces Chrome to create a new Web Push subscription
        // each time. During the brief window between delete and re-register the server
        // still holds the old (now invalid) token, so any in-flight message fails to
        // deliver. Passing serviceWorkerRegistration directly to getToken() is enough
        // for Firebase to return the existing valid token without needing a refresh.
        console.log('[Push] Requesting FCM token...');
        const fcmToken = await getToken(firebaseMessaging, {
          vapidKey,
          serviceWorkerRegistration: reg,
        });
        if (!fcmToken) {
          console.warn('[Push] getToken() returned null — notification permission may not be granted at OS level, or VAPID key is wrong');
          return;
        }
        console.log('[Push] FCM token obtained:', fcmToken.slice(0, 30) + '...');

        // Skip the server round-trip if this token is already registered.
        // Avoids a redundant DB write on every tab-focus / visibility change.
        const cachedToken = localStorage.getItem('rc_fcm_token');
        if (cachedToken === fcmToken) {
          console.log('[Push] Token unchanged — skipping subscribe');
          return;
        }

        const token = localStorage.getItem('tc_token') || sessionStorage.getItem('tc_token');
        const subRes = await fetch('/api/push/subscribe', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
          body: JSON.stringify({ fcmToken }),
        });
        if (!subRes.ok) {
          const err = await subRes.json().catch(() => ({}));
          console.warn('[Push] Subscribe failed:', err.error || subRes.status);
        } else {
          localStorage.setItem('rc_fcm_token', fcmToken);
          console.log('[Push] FCM subscription registered successfully');
        }
      } catch (e) {
        console.warn('[Push] FCM subscription failed:', e.message);
      }
    };

    registerPush();

    const handleVisibility = () => {
      if (document.visibilityState === 'visible') registerPush();
    };
    document.addEventListener('visibilitychange', handleVisibility);
    return () => document.removeEventListener('visibilitychange', handleVisibility);
  }, []);

  // When a message is deleted, update the sidebar preview immediately.
  // ChatWindow passes back the full post-delete messages array so we can derive
  // the new latest non-deleted message without an extra API call.
  const handleMessageDeleted = useCallback(({ groupId, messages: updatedMessages }) => {
    const latest = [...updatedMessages]
      .reverse()
      .find(m => !m.is_deleted);
    setGroups(prev => {
      const updateGroup = (g) => {
        if (g.id !== groupId) return g;
        return {
          ...g,
          last_message:         latest ? (latest.content || (latest.image_url ? '📷 Image' : '')) : null,
          last_message_at:      latest ? latest.created_at : null,
          last_message_user_id: latest ? latest.user_id    : null,
        };
      };
      return {
        publicGroups:  prev.publicGroups.map(updateGroup),
        privateGroups: prev.privateGroups.map(updateGroup),
      };
    });
  }, []);

  // Socket message events to update group previews
  useEffect(() => {
    if (!socket) return;

    const handleNewMsg = (msg) => {
      // Update group preview text
      setGroups(prev => {
        const updateGroup = (g) => g.id === msg.group_id
          ? { ...g, last_message: msg.content || (msg.image_url ? '📷 Image' : ''), last_message_at: msg.created_at, last_message_user_id: msg.user_id }
          : g;
        const updatedPrivate = prev.privateGroups.map(updateGroup)
          .sort((a, b) => {
            if (!a.last_message_at && !b.last_message_at) return 0;
            if (!a.last_message_at) return 1;
            if (!b.last_message_at) return -1;
            return new Date(b.last_message_at) - new Date(a.last_message_at);
          });
        return {
          publicGroups: prev.publicGroups.map(updateGroup),
          privateGroups: updatedPrivate,
        };
      });
      // Don't badge own messages
      if (msg.user_id === user?.id) return;
      // Bug C fix: count unread even in the active group when window is hidden/minimized
      const groupIsActive = msg.group_id === activeGroupId;
      const windowHidden = document.visibilityState === 'hidden';
      setUnreadGroups(prev => {
        if (groupIsActive && !windowHidden) return prev; // visible & active: no badge
        const next = new Map(prev);
        next.set(msg.group_id, (next.get(msg.group_id) || 0) + 1);
        return next;
      });
    };

    const handleNotification = (notif) => {
      if (notif.type === 'private_message') {
        // Badge is already handled by handleNewMsg via message:new socket event.
        // Nothing to do here for the socket path.
      } else if (notif.type === 'support') {
        // A support request was submitted — reload groups so Support group appears in sidebar
        loadGroups();
      } else {
        setNotifications(prev => [notif, ...prev]);
        toast(`${notif.fromUser?.display_name || notif.fromUser?.name || 'Someone'} mentioned you`, 'default', 4000);
      }
    };

    socket.on('message:new', handleNewMsg);
    socket.on('notification:new', handleNotification);

    // Group list real-time updates
    const handleGroupNew = ({ group }) => {
      // Join the socket room for this new group
      socket.emit('group:join-room', { groupId: group.id });
      // Reload the full group list so name/metadata is correct
      loadGroups();
    };
    const handleGroupDeleted = ({ groupId }) => {
      // Leave the socket room so we stop receiving events for this group
      socket.emit('group:leave-room', { groupId });
      setGroups(prev => ({
        publicGroups: prev.publicGroups.filter(g => g.id !== groupId),
        privateGroups: prev.privateGroups.filter(g => g.id !== groupId),
      }));
      setActiveGroupId(prev => {
        if (prev === groupId) {
          if (isMobile) setShowSidebar(true);
          return null;
        }
        return prev;
      });
      setUnreadGroups(prev => { const next = new Map(prev); next.delete(groupId); return next; });
    };
    const handleGroupUpdated = ({ group }) => {
      setGroups(prev => {
        const update = g => g.id === group.id ? { ...g, ...group } : g;
        return {
          publicGroups: prev.publicGroups.map(update),
          privateGroups: prev.privateGroups.map(update),
        };
      });
    };

    // Session displaced: another login on the same device type kicked us out
    const handleSessionDisplaced = ({ device: displacedDevice }) => {
      // Only act if it's our device slot that was taken over
      // (The server emits to user room so all sockets of this user receive it;
      //  our socket's device is embedded in the socket but we can't read it here,
      //  so we force logout unconditionally — the new session will reconnect cleanly)
      localStorage.removeItem('tc_token');
      sessionStorage.removeItem('tc_token');
      window.dispatchEvent(new CustomEvent('rosterchirp:session-displaced'));
    };

    // Online presence
    const handleUserOnline = ({ userId }) => setOnlineUserIds(prev => new Set([...prev, Number(userId)]));
    const handleUserOffline = ({ userId }) => setOnlineUserIds(prev => { const n = new Set(prev); n.delete(Number(userId)); return n; });
    const handleUsersOnline = ({ userIds }) => setOnlineUserIds(new Set((userIds || []).map(Number)));

    socket.on('user:online', handleUserOnline);
    socket.on('user:offline', handleUserOffline);
    socket.on('users:online', handleUsersOnline);
    // Request current online list on connect
    socket.emit('users:online');

    socket.on('group:new', handleGroupNew);
    socket.on('group:deleted', handleGroupDeleted);
    socket.on('group:updated', handleGroupUpdated);
    socket.on('session:displaced', handleSessionDisplaced);

    // Bug B fix: on reconnect, reload groups to catch any messages missed while offline
    const handleReconnect = () => { loadGroups(); };
    socket.on('connect', handleReconnect);

    // Bug B fix: also reload on visibility restore if socket is already connected
    const handleVisibility = () => {
      if (document.visibilityState === 'visible' && socket.connected) {
        loadGroups();
      }
    };
    document.addEventListener('visibilitychange', handleVisibility);

    return () => {
      socket.off('message:new', handleNewMsg);
      socket.off('notification:new', handleNotification);
      socket.off('group:new', handleGroupNew);
      socket.off('group:deleted', handleGroupDeleted);
      socket.off('group:updated', handleGroupUpdated);
      socket.off('user:online', handleUserOnline);
      socket.off('user:offline', handleUserOffline);
      socket.off('users:online', handleUsersOnline);
      socket.off('connect', handleReconnect);
      socket.off('session:displaced', handleSessionDisplaced);
      document.removeEventListener('visibilitychange', handleVisibility);
    };
  }, [socket, toast, activeGroupId, user, isMobile, loadGroups]);

  const selectGroup = (id) => {
    // Warn if there's unsaved text in the message input and the user is switching conversations
    if (chatHasText && id !== activeGroupId) {
      const ok = window.confirm('You have unsaved text in the message box.\n\nContinue to discard it and open the new conversation, or Cancel to stay.');
      if (!ok) return;
      setChatHasText(false);
    }
    setActiveGroupId(id);
    if (isMobile) {
      setShowSidebar(false);
      // Push a history entry so swipe-back returns to sidebar instead of exiting the app
      window.history.pushState({ rosterchirpChatOpen: true }, '');
    }
    // Clear notifications and unread count for this group
    setNotifications(prev => prev.filter(n => n.groupId !== id));
    setUnreadGroups(prev => { const next = new Map(prev); next.delete(id); return next; });
  };

  // Handle browser back gesture on mobile — return to sidebar instead of exiting
  useEffect(() => {
    const handlePopState = (e) => {
      if (isMobile && activeGroupId) {
        setShowSidebar(true);
        setActiveGroupId(null);
        // Push another entry so subsequent back gestures are also intercepted
        window.history.pushState({ rosterchirpChatOpen: true }, '');
      }
    };
    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, [isMobile, activeGroupId]);

  // Update page title AND PWA app badge with total unread count
  useEffect(() => {
    const totalUnread = [...unreadGroups.values()].reduce((a, b) => a + b, 0);
    // Strip any existing badge prefix to get the clean base title
    const base = document.title.replace(/^\(\d+\)\s*/, '');
    document.title = totalUnread > 0 ? `(${totalUnread}) ${base}` : base;
    // PWA app icon badge (Chrome/Edge desktop + Android, Safari 16.4+)
    if ('setAppBadge' in navigator) {
      if (totalUnread > 0) {
        navigator.setAppBadge(totalUnread).catch(() => {});
      } else {
        navigator.clearAppBadge().catch(() => {});
      }
    }
  }, [unreadGroups]);

  const activeGroup = [
    ...(groups.publicGroups || []),
    ...(groups.privateGroups || [])
  ].find(g => g.id === activeGroupId);

  const isToolManager = user?.role === 'admin' || user?.role === 'manager' || (features.teamToolManagers || []).some(gid => (features.userGroupMemberships || []).includes(gid));

  // Unread indicators for burger icon and nav drawer
  const allGroupsFlat = [...(groups.publicGroups || []), ...(groups.privateGroups || [])];
  const hasUnreadChat = allGroupsFlat.some(g =>
    (g.type === 'public' || !g.is_managed) && (unreadGroups.get(g.id) || 0) > 0
  );
  const hasUnreadGroupMessages = (groups.privateGroups || []).some(g =>
    g.is_managed && (unreadGroups.get(g.id) || 0) > 0
  );
  const hasAnyUnread = hasUnreadChat || hasUnreadGroupMessages;

  if (page === 'users') {
    return (
      <div className="chat-layout">
        <GlobalBar isMobile={isMobile} showSidebar={true} onBurger={() => setDrawerOpen(true)} hasUnread={hasAnyUnread} />
        <div className="chat-body" style={{ overflow: 'hidden' }}>
          <UserManagerPage isMobile={isMobile} onProfile={() => setModal('profile')} onHelp={() => setModal('help')} onAbout={() => setModal('about')} />
        </div>
        <NavDrawer
          open={drawerOpen} onClose={() => setDrawerOpen(false)}
          onMessages={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('chat'); }}
          onGroupMessages={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('groupmessages'); }}
          onSchedule={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('schedule'); }}
          onGroupManager={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('groups'); }}
          onBranding={() => { setDrawerOpen(false); setModal('branding'); }}
          onSettings={() => { setDrawerOpen(false); setModal('settings'); }}
          onUsers={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('users'); }}
          onHostPanel={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('hostpanel'); }}
          features={features} currentPage={page} isMobile={isMobile}
          unreadMessages={hasUnreadChat} unreadGroupMessages={hasUnreadGroupMessages} />
        {modal === 'profile'  && <ProfileModal onClose={() => setModal(null)} />}
        {modal === 'settings' && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
        {modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}
        {modal === 'help'     && <HelpModal onClose={() => setModal(null)} dismissed={helpDismissed} />}
        {modal === 'about'    && <AboutModal onClose={() => setModal(null)} />}
      </div>
    );
  }

  if (page === 'groups') {
    return (
      <div className="chat-layout">
        <GlobalBar isMobile={isMobile} showSidebar={true} onBurger={() => setDrawerOpen(true)} hasUnread={hasAnyUnread} />
        <div className="chat-body" style={{ overflow: 'hidden' }}>
          <GroupManagerPage isMobile={isMobile} onProfile={() => setModal('profile')} onHelp={() => setModal('help')} onAbout={() => setModal('about')} />
        </div>
        <NavDrawer
          open={drawerOpen} onClose={() => setDrawerOpen(false)}
          onMessages={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('chat'); }}
          onGroupMessages={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('groupmessages'); }}
          onSchedule={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('schedule'); }}
          onGroupManager={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('groups'); }}
          onBranding={() => { setDrawerOpen(false); setModal('branding'); }}
          onSettings={() => { setDrawerOpen(false); setModal('settings'); }}
          onUsers={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('users'); }}
          onHostPanel={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('hostpanel'); }}
          features={features} currentPage={page} isMobile={isMobile}
          unreadMessages={hasUnreadChat} unreadGroupMessages={hasUnreadGroupMessages} />
        {modal === 'profile'  && <ProfileModal onClose={() => setModal(null)} />}
        {modal === 'settings' && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
        {modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}
        {modal === 'help'     && <HelpModal onClose={() => setModal(null)} dismissed={helpDismissed} />}
        {modal === 'about'    && <AboutModal onClose={() => setModal(null)} />}
      </div>
    );
  }

  if (page === 'groupmessages') {
    return (
      <div className="chat-layout">
        <GlobalBar isMobile={isMobile} showSidebar={showSidebar} onBurger={() => setDrawerOpen(true)} hasUnread={hasAnyUnread} />
        <div className="chat-body">
          {(!isMobile || showSidebar) && (
            <Sidebar
              groups={groups}
              activeGroupId={activeGroupId}
              onSelectGroup={selectGroup}
              notifications={notifications}
              unreadGroups={unreadGroups}
              onNewChat={() => setModal('newchat')}
              onProfile={() => setModal('profile')}
              onUsers={() => { setActiveGroupId(null); setChatHasText(false); setPage('users'); }}
              onSettings={() => setModal('settings')}
              onBranding={() => setModal('branding')}
              onGroupManager={() => { setActiveGroupId(null); setChatHasText(false); setPage('groups'); }}
              features={features}
              onGroupsUpdated={loadGroups}
              isMobile={isMobile}
              onAbout={() => setModal('about')}
              onHelp={() => setModal('help')}
              onlineUserIds={onlineUserIds}
              groupMessagesMode={true} />
          )}
          {(!isMobile || !showSidebar) && (
            <ChatWindow
              group={activeGroup}
              onBack={isMobile ? () => { setShowSidebar(true); setActiveGroupId(null); } : null}
              onGroupUpdated={loadGroups}
              onDirectMessage={(g) => { loadGroups(); selectGroup(g.id); }}
              onMessageDeleted={handleMessageDeleted}
              onHasTextChange={setChatHasText}
              onlineUserIds={onlineUserIds} />
          )}
        </div>
        <NavDrawer
          open={drawerOpen} onClose={() => setDrawerOpen(false)}
          onMessages={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('chat'); }}
          onGroupMessages={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('groupmessages'); }}
          onSchedule={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('schedule'); }}
          onGroupManager={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('groups'); }}
          onBranding={() => { setDrawerOpen(false); setModal('branding'); }}
          onSettings={() => { setDrawerOpen(false); setModal('settings'); }}
          onUsers={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('users'); }}
          onHostPanel={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('hostpanel'); }}
          features={features} currentPage={page} isMobile={isMobile}
          unreadMessages={hasUnreadChat} unreadGroupMessages={hasUnreadGroupMessages} />
        {modal === 'profile'  && <ProfileModal onClose={() => setModal(null)} />}
        {modal === 'settings' && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
        {modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}
        {modal === 'help'     && <HelpModal onClose={() => setModal(null)} dismissed={helpDismissed} />}
        {modal === 'about'    && <AboutModal onClose={() => setModal(null)} />}
        {modal === 'newchat'  && <NewChatModal onClose={() => setModal(null)} onCreated={(g) => { loadGroups(); setModal(null); setActiveGroupId(g.id); setPage('chat'); }} />}
      </div>
    );
  }

  if (page === 'hostpanel') {
    return (
      <div className="chat-layout">
        <GlobalBar isMobile={isMobile} showSidebar={true} onBurger={() => setDrawerOpen(true)} hasUnread={hasAnyUnread} />
        <div className="chat-body" style={{ overflow: 'hidden' }}>
          <HostPanel onProfile={() => setModal('profile')} onHelp={() => setModal('help')} onAbout={() => setModal('about')} />
        </div>
        <NavDrawer
          open={drawerOpen}
          onClose={() => setDrawerOpen(false)}
          onMessages={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('chat'); }}
          onGroupMessages={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('groupmessages'); }}
          onSchedule={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('schedule'); }}
          onScheduleManager={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('schedule'); }}
          onGroupManager={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('groups'); }}
          onBranding={() => { setDrawerOpen(false); setModal('branding'); }}
          onSettings={() => { setDrawerOpen(false); setModal('settings'); }}
          onUsers={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('users'); }}
          onHostPanel={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('hostpanel'); }}
          features={features}
          currentPage={page}
          isMobile={isMobile}
          unreadMessages={hasUnreadChat} unreadGroupMessages={hasUnreadGroupMessages} />
        {modal === 'profile'  && <ProfileModal onClose={() => setModal(null)} />}
        {modal === 'settings' && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
        {modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}
        {modal === 'help'     && <HelpModal onClose={() => setModal(null)} dismissed={helpDismissed} />}
        {modal === 'about'    && <AboutModal onClose={() => setModal(null)} />}
      </div>
    );
  }

  if (page === 'schedule') {
    return (
      <div className="chat-layout">
        <GlobalBar isMobile={isMobile} showSidebar={true} onBurger={() => setDrawerOpen(true)} hasUnread={hasAnyUnread} />
        <div className="chat-body" style={{ overflow: 'hidden' }}>
          <SchedulePage
            isToolManager={isToolManager}
            isMobile={isMobile}
            features={features}
            onProfile={() => setModal('profile')}
            onHelp={() => setModal('help')}
            onAbout={() => setModal('about')} />
        </div>
        <NavDrawer
          open={drawerOpen}
          onClose={() => setDrawerOpen(false)}
          onMessages={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('chat'); }}
          onGroupMessages={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('groupmessages'); }}
          onSchedule={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('schedule'); }}
          onScheduleManager={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('schedule'); }}
          onGroupManager={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('groups'); }}
          onBranding={() => { setDrawerOpen(false); setModal('branding'); }}
          onSettings={() => { setDrawerOpen(false); setModal('settings'); }}
          onUsers={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('users'); }}
          onHostPanel={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('hostpanel'); }}
          features={features}
          currentPage={page}
          isMobile={isMobile}
          unreadMessages={hasUnreadChat} unreadGroupMessages={hasUnreadGroupMessages} />
        {modal === 'profile'      && <ProfileModal onClose={() => setModal(null)} />}
        {modal === 'settings'     && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
        {modal === 'branding'     && <BrandingModal onClose={() => setModal(null)} />}

        {modal === 'mobilegroupmanager' && (
          <div style={{ position:'fixed',inset:0,zIndex:200,background:'var(--background)' }}>
            <MobileGroupManager onClose={() => setModal(null)}/>
          </div>
        )}
        {modal === 'about'        && <AboutModal onClose={() => setModal(null)} />}
        {modal === 'help'         && <HelpModal onClose={() => setModal(null)} dismissed={helpDismissed} />}
      </div>
    );
  }

  return (
    <div className="chat-layout">
      {/* Global top bar — spans full width on desktop, visible on mobile sidebar view */}
      <GlobalBar isMobile={isMobile} showSidebar={showSidebar} onBurger={() => setDrawerOpen(true)} hasUnread={hasAnyUnread} />

      <div className="chat-body">
        {(!isMobile || showSidebar) && (
          <Sidebar
            groups={groups}
            activeGroupId={activeGroupId}
            onSelectGroup={selectGroup}
            notifications={notifications}
            unreadGroups={unreadGroups}
            onNewChat={() => setModal('newchat')}
            onProfile={() => setModal('profile')}
            onUsers={() => { setActiveGroupId(null); setChatHasText(false); setPage('users'); }}
            onSettings={() => setModal('settings')}
            onBranding={() => setModal('branding')}
            onGroupManager={() => { setActiveGroupId(null); setChatHasText(false); setPage('groups'); }}
            features={features}
            onGroupsUpdated={loadGroups}
            isMobile={isMobile}
            onAbout={() => setModal('about')}
            onHelp={() => setModal('help')}
            onlineUserIds={onlineUserIds}
            groupMessagesMode={false} />
        )}

        {(!isMobile || !showSidebar) && (
          <ChatWindow
            group={activeGroup}
            onBack={isMobile ? () => { setShowSidebar(true); setActiveGroupId(null); } : null}
            onGroupUpdated={loadGroups}
            onDirectMessage={(g) => { loadGroups(); selectGroup(g.id); }}
            onMessageDeleted={handleMessageDeleted}
            onHasTextChange={setChatHasText}
            onlineUserIds={onlineUserIds} />
        )}
      </div>

      <NavDrawer
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
        onMessages={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('chat'); }}
        onGroupMessages={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('groupmessages'); }}
        onSchedule={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('schedule'); }}
        onScheduleManager={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('schedule'); }}
        onGroupManager={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('groups'); }}
        onBranding={() => { setDrawerOpen(false); setModal('branding'); }}
        onSettings={() => { setDrawerOpen(false); setModal('settings'); }}
        onUsers={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('users'); }}
        onHostPanel={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('hostpanel'); }}
        features={features}
        currentPage={page}
        isMobile={isMobile}
        unreadMessages={hasUnreadChat} unreadGroupMessages={hasUnreadGroupMessages} />
      {modal === 'profile' && <ProfileModal onClose={() => setModal(null)} />}
      {modal === 'settings' && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
      {modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}

      {modal === 'newchat' && <NewChatModal onClose={() => setModal(null)} onCreated={(g) => { loadGroups(); setModal(null); setActiveGroupId(g.id); }} />}
      {modal === 'about' && <AboutModal onClose={() => setModal(null)} />}
      {modal === 'help' && <HelpModal onClose={() => setModal(null)} dismissed={helpDismissed} />}
    </div>
  );
}