resolutionflow/frontend/src/components/layout/TopBar.tsx

import { useState, useRef, useEffect, useCallback } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { Search, Zap, LogOut, Shield, Settings } from 'lucide-react'
import { useAuthStore } from '@/store/authStore'
import { usePermissions } from '@/hooks/usePermissions'
import { BrandLogo } from '@/components/common/BrandLogo'
import { CommandPalette } from './CommandPalette'
import { QuickLaunch } from './QuickLaunch'
import { NotificationsPanel } from './NotificationsPanel'
import { cn } from '@/lib/utils'

export function TopBar() {
  const navigate = useNavigate()
  const { user, logout } = useAuthStore()
  const { effectiveRole, isSuperAdmin } = usePermissions()

  const [userMenuOpen, setUserMenuOpen] = useState(false)
  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false)
  const [quickLaunchOpen, setQuickLaunchOpen] = useState(false)
  const menuRef = useRef<HTMLDivElement>(null)

  const handleLogout = async () => {
    setUserMenuOpen(false)
    await logout()
    navigate('/login')
  }

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
        setUserMenuOpen(false)
      }
    }
    if (userMenuOpen) document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [userMenuOpen])

  // ⌘K / Ctrl+K global shortcut
  const handleGlobalKeyDown = useCallback((e: KeyboardEvent) => {
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
      e.preventDefault()
      setCommandPaletteOpen(prev => !prev)
    }
  }, [])

  useEffect(() => {
    document.addEventListener('keydown', handleGlobalKeyDown)
    return () => document.removeEventListener('keydown', handleGlobalKeyDown)
  }, [handleGlobalKeyDown])

  const initials = user?.name
    ? user.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
    : user?.email?.[0]?.toUpperCase() || '?'

  return (
    <>
      <header className="topbar flex items-center gap-4 border-b border-border bg-background px-4">
        {/* Logo area */}
        <Link
          to="/"
          className="flex items-center gap-2.5 pr-4 transition-all duration-200"
        >
          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-brand">
            <BrandLogo size="sm" className="h-4 w-4" />
          </div>
          <span className="text-sm font-heading font-bold tracking-tight whitespace-nowrap">
            <span className="text-foreground">Resolution</span>
            <span className="text-gradient-brand">Flow</span>
          </span>
        </Link>

        {/* Spacer - push search to center */}
        <div className="flex-1" />

        {/* Search trigger */}
        <button
          onClick={() => setCommandPaletteOpen(true)}
          className="relative w-full text-left"
          style={{ maxWidth: '480px' }}
        >
          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
          <div className="w-full rounded-lg border border-border bg-card py-2 pl-9 pr-14 text-[0.8125rem] text-muted-foreground cursor-pointer hover:border-primary/30 transition-colors">
            Search flows, sessions, tags…
          </div>
          <span className="absolute right-3 top-1/2 -translate-y-1/2 rounded border border-border bg-background px-1.5 py-0.5 font-label text-[0.625rem] text-muted-foreground">
            {navigator.platform?.toLowerCase().includes('mac') ? '⌘K' : 'Ctrl+K'}
          </span>
        </button>

        {/* Spacer - push actions to right */}
        <div className="flex-1" />

        {/* Action buttons */}
        <div className="flex items-center gap-1">
          <button
            onClick={() => setQuickLaunchOpen(true)}
            className="rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors"
            title="Quick Launch"
          >
            <Zap size={18} />
          </button>
          <NotificationsPanel />

          {/* User avatar & menu */}
          <div className="relative ml-2" ref={menuRef}>
            <button
              onClick={() => setUserMenuOpen(!userMenuOpen)}
              className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-brand text-xs font-heading font-bold text-white hover:opacity-90 transition-opacity"
              title={user?.name || user?.email || 'User'}
            >
              {initials}
            </button>

            {userMenuOpen && (
              <div className="absolute right-0 z-50 mt-2 w-56 rounded-lg border border-border bg-card p-1 shadow-xl animate-scale-in">
                <div className="border-b border-border px-3 py-2.5 mb-1">
                  <p className="text-sm font-medium text-foreground truncate">{user?.name || user?.email}</p>
                  {effectiveRole && effectiveRole !== 'engineer' && (
                    <span className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground">
                      <Shield size={10} />
                      {effectiveRole === 'super_admin' ? 'Super Admin' : effectiveRole === 'owner' ? 'Owner' : 'Viewer'}
                    </span>
                  )}
                </div>
                <Link
                  to="/account"
                  onClick={() => setUserMenuOpen(false)}
                  className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                >
                  <Settings size={14} />
                  Account
                </Link>
                {isSuperAdmin && (
                  <Link
                    to="/admin"
                    onClick={() => setUserMenuOpen(false)}
                    className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
                  >
                    <Shield size={14} />
                    Admin Panel
                  </Link>
                )}
                <div className="border-t border-border mt-1 pt-1">
                  <button
                    onClick={handleLogout}
                    className={cn(
                      'flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm',
                      'text-muted-foreground hover:bg-accent hover:text-foreground'
                    )}
                  >
                    <LogOut size={14} />
                    Logout
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      </header>

      {/* Command Palette */}
      <CommandPalette open={commandPaletteOpen} onClose={() => setCommandPaletteOpen(false)} />
      <QuickLaunch open={quickLaunchOpen} onClose={() => setQuickLaunchOpen(false)} />
    </>
  )
}