dev_arc_aws/src/components/TopBar.tsx

import { useState, useRef, useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { Search, Bell, ChevronDown, User, Palette, LogOut, Shield, HelpCircle } from 'lucide-react'
import { useAuth } from '../lib/AuthContext'

const pageTitles: Record<string, string> = {
  '/': 'Glance',
  '/infrastructure': 'Infrastructure',
  '/booknest': 'BookNest',
  '/terminal': 'Terminal',
  '/settings': 'Settings',
}

const pageSubtitles: Record<string, string> = {
  '/booknest': 'Your Digital Library',
}

export default function TopBar() {
  const { logout, user } = useAuth()
  const [userMenuOpen, setUserMenuOpen] = useState(false)
  const menuRef = useRef<HTMLDivElement>(null)
  const location = useLocation()
  const title = pageTitles[location.pathname] ?? 'Glance'
  const subtitle = pageSubtitles[location.pathname]

  const displayName = user?.display_name || user?.username || ''
  const initials = displayName
    .split(/\s+/)
    .map((p) => p[0])
    .join('')
    .slice(0, 2)
    .toUpperCase()

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

  return (
    <header className="flex items-center px-6 sticky top-0 z-40" style={{ height: subtitle ? '72px' : '56px' }}>
      {/* Page Title — pushed away from sidebar edge */}
      <div style={{ marginLeft: '20px' }}>
        <h1
          className="font-bold uppercase tracking-wide"
          style={{ color: '#C8A434', fontSize: subtitle ? '28px' : '18px' }}
        >
          {title}
        </h1>
        {subtitle && (
          <p className="text-[13px]" style={{ color: '#A8A6A0', marginTop: '2px' }}>
            {subtitle}
          </p>
        )}
      </div>

      {/* Center section — Search bar */}
      <div className="flex-1 flex justify-center">
        <div className="relative">
          <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: '#7A7D85' }} />
          <input
            type="text"
            placeholder="Search resources..."
            className="w-[300px] h-8 rounded-full border border-border text-[12px] text-text-primary placeholder:text-text-secondary focus:outline-none focus:border-gold transition-colors"
            style={{ paddingLeft: '36px', paddingRight: '16px', backgroundColor: 'rgba(255,255,255,0.04)', backdropFilter: 'blur(6px)' }}
          />
        </div>
      </div>

      {/* Right section — Bell + Avatar, moved toward center (away from window edge) */}
      <div className="flex items-center gap-4" style={{ marginRight: '40px' }}>

        {/* Notifications */}
        <button className="relative p-1.5 text-text-secondary hover:text-gold transition-colors bg-transparent border-none cursor-pointer">
          <Bell size={17} />
        </button>

        {/* User Avatar + Dropdown */}
        <div className="relative" ref={menuRef}>
          <button
            onClick={() => setUserMenuOpen(!userMenuOpen)}
            className="flex items-center gap-2 bg-transparent border-none cursor-pointer p-0"
          >
            <div className="w-9 h-9 rounded-full border-2 border-gold bg-card flex items-center justify-center text-gold font-bold text-[12px] shadow-[0_0_8px_rgba(200,164,52,0.4)] overflow-hidden">
              {user?.avatar_data_url ? (
                <img src={user.avatar_data_url} alt={displayName} className="w-full h-full object-cover" />
              ) : (
                initials
              )}
            </div>
            <div className="flex flex-col text-left">
              <span className="text-[12px] text-text-primary font-medium leading-tight">{displayName}</span>
              <span className="text-[9px] text-text-secondary leading-tight">Administrator</span>
            </div>
            <ChevronDown size={12} className={`text-text-secondary transition-transform duration-200 ${userMenuOpen ? 'rotate-180' : ''}`} />
          </button>

          {userMenuOpen && (
            <div className="absolute right-0 top-full mt-2 w-48 bg-card border border-border rounded-xl overflow-hidden shadow-lg z-50">
              <div className="p-3 border-b border-border">
                <p className="text-[12px] text-text-primary font-medium">{displayName}</p>
                <p className="text-[10px] text-text-secondary">{user?.email || user?.username}</p>
              </div>
              <div className="py-1">
                <a href="#" className="flex items-center gap-2.5 px-3 py-2 text-[12px] text-text-secondary hover:text-text-primary hover:bg-page transition-colors no-underline">
                  <User size={14} />
                  <span>Profile</span>
                </a>
                <a href="#" className="flex items-center gap-2.5 px-3 py-2 text-[12px] text-text-secondary hover:text-text-primary hover:bg-page transition-colors no-underline">
                  <Palette size={14} />
                  <span>Appearance</span>
                </a>
                <a href="#" className="flex items-center gap-2.5 px-3 py-2 text-[12px] text-text-secondary hover:text-text-primary hover:bg-page transition-colors no-underline">
                  <Shield size={14} />
                  <span>Security</span>
                </a>
                <a href="#" className="flex items-center gap-2.5 px-3 py-2 text-[12px] text-text-secondary hover:text-text-primary hover:bg-page transition-colors no-underline">
                  <HelpCircle size={14} />
                  <span>Help & Support</span>
                </a>
              </div>
              <div className="border-t border-border py-1">
                <button
                  onClick={logout}
                  className="flex w-full items-center gap-2.5 px-3 py-2 text-[12px] text-danger hover:bg-page transition-colors cursor-pointer border-none bg-transparent text-left"
                >
                  <LogOut size={14} />
                  <span>Sign Out</span>
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </header>
  )
}