'use client'

import Link from 'next/link'
import { useSession } from 'next-auth/react'
import { Search, Bell, Settings, User, LogOut } from 'lucide-react'
import { signOut } from 'next-auth/react'

export function PortalHeader() {
  const { data: session } = useSession()

  return (
    <header className="sticky top-0 z-50 w-full border-b border-gray-800 bg-gray-900/95 backdrop-blur supports-[backdrop-filter]:bg-gray-900/60">
      <div className="container flex h-16 items-center">
        <Link href="/" className="mr-6 flex items-center space-x-2">
          <span className="text-xl font-bold bg-gradient-to-r from-orange-500 to-yellow-500 bg-clip-text text-transparent">
            Nexus Console
          </span>
        </Link>
        
        {/* Search Bar - Enterprise-class search-first UX */}
        <div className="flex flex-1 items-center justify-center max-w-2xl mx-8">
          <div className="relative w-full">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
            <input
              type="search"
              placeholder="Search resources, settings, docs..."
              className="w-full rounded-md border border-gray-700 bg-gray-800 py-2 pl-10 pr-4 text-sm text-white placeholder-gray-400 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500"
            />
          </div>
        </div>

        <nav className="flex items-center space-x-4">
          <button className="relative p-2 text-gray-400 hover:text-white transition-colors">
            <Bell className="h-5 w-5" />
            <span className="absolute top-1 right-1 h-2 w-2 rounded-full bg-orange-500" />
          </button>
          
          <Link
            href="/settings"
            className="p-2 text-gray-400 hover:text-white transition-colors"
          >
            <Settings className="h-5 w-5" />
          </Link>

          <div className="flex items-center space-x-2 border-l border-gray-700 pl-4">
            <div className="flex items-center space-x-2">
              <div className="h-8 w-8 rounded-full bg-gradient-to-br from-orange-500 to-yellow-500 flex items-center justify-center">
                <User className="h-4 w-4 text-white" />
              </div>
              <div className="hidden md:block text-sm">
                <div className="text-white font-medium">
                  {session?.user?.name || session?.user?.email || 'User'}
                </div>
                <div className="text-xs text-gray-400">
                  {session?.user?.role || 'Admin'}
                </div>
              </div>
            </div>
            <button
              onClick={() => signOut()}
              className="p-2 text-gray-400 hover:text-white transition-colors"
              title="Sign out"
            >
              <LogOut className="h-5 w-5" />
            </button>
          </div>
        </nav>
      </div>
    </header>
  )
}

