ai-wpa/components/header.tsx

'use client'

import { useState, useEffect } from 'react'
import Image from 'next/image'
import Link from '@/components/ui/Link'
import {
  Menu,
  X,
  Server,
  Zap,
  Users,
  LogOut,
  Settings,
  MessageSquare,
  BookOpen,
  Search,
  Edit,
  Tag,
} from 'lucide-react'
import { Button } from '@/components/ui/button'
import { ThemeToggle } from '@/components/theme-toggle'
import { useAuth } from '@/contexts/AuthContext'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Logo } from '@/components/Logo'

export function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [isClient, setIsClient] = useState(false)
  const { user, logout, loading } = useAuth()

  // Ensure we only render auth-dependent content after hydration
  useEffect(() => {
    setIsClient(true)
  }, [])

  const navigation = [
    { name: 'Home', href: '/', icon: Server },
    { name: 'Services', href: '/services', icon: Zap },
    { name: 'Topics', href: '/topics', icon: BookOpen },
    { name: 'Tools', href: '/tools', icon: Users },
    { name: 'About', href: '/about', icon: Users },
    { name: 'Feedback', href: '/feedback', icon: MessageSquare },
  ]

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-gradient-glass backdrop-blur-lg border-b border-border/50">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <div className="flex items-center space-x-2">
            <Logo size={32} />
            <Link
              href="/"
              className="text-xl font-bold text-foreground font-heading tracking-tight"
            >
              SiliconPin
            </Link>
          </div>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-8">
            {navigation.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className="text-muted-foreground hover:text-primary transition-colors duration-300 font-medium tracking-tight"
              >
                {item.name}
              </Link>
            ))}
          </nav>

          {/* Actions */}
          <div className="flex items-center space-x-4">
            {/* Theme Toggle */}
            <div className="hidden md:flex">
              <ThemeToggle />
            </div>

            {/* Auth Section */}
            {!isClient || loading ? (
              // Show loading state during SSR and initial load
              <div className="hidden md:flex items-center space-x-2">
                <div className="w-16 h-9 bg-muted animate-pulse rounded"></div>
                <div className="w-20 h-9 bg-muted animate-pulse rounded"></div>
              </div>
            ) : user ? (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" className="flex items-center gap-2">
                    {user.avatar ? (
                      <Image
                        src={user.avatar}
                        alt={user.name}
                        width={24}
                        height={24}
                        className="w-6 h-6 rounded-full object-cover"
                      />
                    ) : (
                      <div className="w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs">
                        {user.name.charAt(0).toUpperCase()}
                      </div>
                    )}
                    {user.name}
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem asChild>
                    <Link href="/profile" className="flex items-center gap-2">
                      <Settings className="h-4 w-4" />
                      Profile
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/dashboard" className="flex items-center gap-2">
                      <Users className="h-4 w-4" />
                      Dashboard
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem asChild>
                    <Link href="/topics/new" className="flex items-center gap-2">
                      <Edit className="h-4 w-4" />
                      Create Topic
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/topics" className="flex items-center gap-2">
                      <Search className="h-4 w-4" />
                      Search Topics
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem onClick={() => logout()} className="text-red-600">
                    <LogOut className="h-4 w-4 mr-2" />
                    Sign Out
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            ) : (
              <div className="hidden md:flex items-center space-x-2">
                <Button variant="ghost" asChild>
                  <Link href="/auth">Login</Link>
                </Button>
                <Button variant="hero" size="sm" asChild>
                  <Link href="/auth">Get Started</Link>
                </Button>
              </div>
            )}

            {/* Mobile Menu Button */}
            <Button
              variant="ghost"
              size="icon"
              className="md:hidden"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
            >
              {isMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
            </Button>
          </div>
        </div>

        {/* Mobile Menu */}
        {isMenuOpen && (
          <div className="md:hidden py-4 border-t border-border/50">
            <nav className="flex flex-col space-y-4">
              {navigation.map((item) => {
                const Icon = item.icon
                return (
                  <Link
                    key={item.name}
                    href={item.href}
                    className="flex items-center space-x-3 text-muted-foreground hover:text-primary transition-colors duration-300 p-2 rounded-lg hover:bg-accent/50"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    <Icon className="w-4 h-4" />
                    <span>{item.name}</span>
                  </Link>
                )
              })}
              <div className="pt-4 border-t border-border/50 flex flex-col space-y-2">
                {!isClient || loading ? (
                  // Show loading state during SSR and initial load
                  <>
                    <div className="w-full h-9 bg-muted animate-pulse rounded"></div>
                    <div className="w-full h-9 bg-muted animate-pulse rounded"></div>
                  </>
                ) : user ? (
                  <>
                    <Button variant="ghost" className="justify-start" asChild>
                      <Link href="/profile">Profile</Link>
                    </Button>
                    <Button variant="ghost" className="justify-start" asChild>
                      <Link href="/dashboard">Dashboard</Link>
                    </Button>
                    <div className="border-t border-border/50 pt-2 mt-2">
                      <Button variant="ghost" className="justify-start" asChild>
                        <Link href="/topics/new" className="flex items-center gap-2">
                          <Edit className="h-4 w-4" />
                          Create Topic
                        </Link>
                      </Button>
                      <Button variant="ghost" className="justify-start" asChild>
                        <Link href="/topics" className="flex items-center gap-2">
                          <Search className="h-4 w-4" />
                          Search Topics
                        </Link>
                      </Button>
                    </div>
                    <Button
                      variant="ghost"
                      className="justify-start text-red-600"
                      onClick={() => logout()}
                    >
                      Sign Out
                    </Button>
                  </>
                ) : (
                  <>
                    <Button variant="ghost" className="justify-start" asChild>
                      <Link href="/auth">Login</Link>
                    </Button>
                    <Button variant="hero" size="sm" asChild>
                      <Link href="/auth">Get Started</Link>
                    </Button>
                  </>
                )}
              </div>
            </nav>
          </div>
        )}
      </div>
    </header>
  )
}