import { Menu } from 'lucide-react';

import type { TopBarPage } from '@/business/top-bar/types';
import {
  TopBarCampusBadge,
  TopBarRoleBadge,
} from '@/components/top-bar/TopBarBadges';
import { TopBarNotifications } from '@/components/top-bar/TopBarNotifications';
import { TopBarProfileMenu } from '@/components/top-bar/TopBarProfileMenu';
import { TopBarSearch } from '@/components/top-bar/TopBarSearch';
import { Button } from '@/components/ui/button';

interface TopBarViewProps {
  readonly page: TopBarPage;
}

export function TopBarView({ page }: TopBarViewProps) {
  return (
    <header className="h-14 bg-slate-900/95 backdrop-blur-xl border-b border-slate-700/50 flex items-center justify-between px-4 md:px-6 relative z-20">
      <div className="flex items-center gap-3">
        <Button
          type="button"
          variant="ghost"
          size="icon"
          onClick={page.toggleSidebar}
          aria-label="Toggle sidebar"
          className="lg:hidden p-2 rounded-xl hover:bg-slate-800 text-slate-400"
        >
          <Menu size={20} />
        </Button>
        <TopBarSearch value={page.searchQuery} onChange={page.setSearchQuery} />
      </div>

      <div className="flex items-center gap-3">
        {page.signOutError && (
          <div className="hidden md:block rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-1.5 text-xs font-medium text-red-200">
            {page.signOutError}
          </div>
        )}

        <TopBarCampusBadge campusInfo={page.campusInfo} />
        <TopBarRoleBadge userRole={page.userRole} roleLabel={page.roleLabel} />
        <TopBarNotifications
          notifications={page.notifications}
          unreadCount={page.unreadCount}
          isOpen={page.showNotifications}
          onToggle={page.toggleNotifications}
          onClose={page.closeNotifications}
        />
        <TopBarProfileMenu
          userName={page.userName}
          initials={page.initials}
          campusInfo={page.campusInfo}
          campusLabel={page.campusLabel}
          profileRoleLabel={page.profileRoleLabel}
          isOpen={page.showProfileMenu}
          onToggle={page.toggleProfileMenu}
          onClose={page.closeProfileMenu}
          onSignOut={page.signOut}
        />
      </div>
    </header>
  );
}
