import React from 'react';
import { useTranslation } from 'react-i18next';
import { Moon, Sun, Menu } from 'lucide-react';
import { User } from '../types';
import UserProfileDropdown from './UserProfileDropdown';
import LanguageSelector from './LanguageSelector';
import NotificationDropdown from './NotificationDropdown';
import SandboxToggle from './SandboxToggle';
import HelpButton from './HelpButton';
import GlobalSearch from './GlobalSearch';
import { useSandbox } from '../contexts/SandboxContext';
import { useUserNotifications } from '../hooks/useUserNotifications';

interface TopBarProps {
  user: User;
  isDarkMode: boolean;
  toggleTheme: () => void;
  onMenuClick: () => void;
  onTicketClick?: (ticketId: string) => void;
}

const TopBar: React.FC<TopBarProps> = ({ user, isDarkMode, toggleTheme, onMenuClick, onTicketClick }) => {
  const { t } = useTranslation();
  const { isSandbox, sandboxEnabled, toggleSandbox, isToggling } = useSandbox();

  // Connect to user notifications WebSocket for real-time updates
  useUserNotifications({ enabled: !!user });

  return (
    <header className="flex items-center justify-between h-16 px-4 sm:px-8 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 transition-colors duration-200 shrink-0">
      <div className="flex items-center gap-4">
         <button
          onClick={onMenuClick}
          className="p-2 -ml-2 text-gray-500 rounded-md md:hidden hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand-500"
          aria-label="Open sidebar"
        >
          <Menu size={24} />
        </button>
        <GlobalSearch user={user} />
      </div>

      <div className="flex items-center gap-4">
        {/* Sandbox Mode Toggle */}
        <SandboxToggle
          isSandbox={isSandbox}
          sandboxEnabled={sandboxEnabled}
          onToggle={toggleSandbox}
          isToggling={isToggling}
        />

        <LanguageSelector />

        <button
          onClick={toggleTheme}
          className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
        >
          {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
        </button>

        <NotificationDropdown onTicketClick={onTicketClick} />

        <HelpButton />

        <UserProfileDropdown user={user} />
      </div>
    </header>
  );
};

export default TopBar;