'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useStore } from '@/lib/store'
import { 
  Menu, 
  X, 
  TrendingUp, 
  Gavel,
  CreditCard,
  LayoutDashboard,
  Tag,
} from 'lucide-react'
import { useState, useEffect } from 'react'
import clsx from 'clsx'

/**
 * Public Header Component
 * 
 * Used for:
 * - Landing page (/)
 * - Public pages (pricing, about, contact, blog, etc.)
 * - Auth pages (login, register)
 * 
 * For logged-in users in the Command Center, use TerminalLayout instead.
 */
export function Header() {
  const pathname = usePathname()
  const { isAuthenticated, user, logout, subscription } = useStore()
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  // Close mobile menu on route change
  useEffect(() => {
    setMobileMenuOpen(false)
  }, [pathname])

  const tierName = subscription?.tier_name || subscription?.tier || 'Scout'

  // Public navigation - same for all visitors
  const publicNavItems = [
    { href: '/auctions', label: 'Auctions', icon: Gavel },
    { href: '/buy', label: 'Marketplace', icon: Tag },
    { href: '/tld-pricing', label: 'TLD Pricing', icon: TrendingUp },
    { href: '/pricing', label: 'Pricing', icon: CreditCard },
  ]

  const isActive = (href: string) => {
    if (href === '/') return pathname === '/'
    return pathname.startsWith(href)
  }

  // Check if we're on a Command Center page (should use Sidebar instead)
  const isCommandCenterPage = pathname.startsWith('/terminal') || pathname.startsWith('/admin')

  // If logged in and on Command Center page, don't render this header
  if (isAuthenticated && isCommandCenterPage) {
    return null
  }

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-xl border-b border-border-subtle">
      <div className="w-full px-4 sm:px-6 lg:px-8 h-16 sm:h-20 flex items-center justify-between">
        {/* Left side: Logo + Nav Links */}
        <div className="flex items-center gap-6 sm:gap-8 h-full">
          {/* Logo */}
          <Link 
            href="/" 
            className="flex items-center h-full hover:opacity-80 transition-opacity duration-300"
          >
            <span 
              className="text-[1.25rem] sm:text-[1.5rem] font-bold tracking-[0.15em] text-foreground"
              style={{ fontFamily: 'var(--font-display), Playfair Display, Georgia, serif' }}
            >
              POUNCE
            </span>
          </Link>

          {/* Main Nav Links (Desktop) */}
          <nav className="hidden md:flex items-center h-full gap-1">
            {publicNavItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className={clsx(
                  "flex items-center h-9 px-3 text-[0.8125rem] rounded-lg transition-all duration-200",
                  isActive(item.href)
                    ? "text-foreground bg-foreground/5 font-medium"
                    : "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
                )}
              >
                {item.label}
              </Link>
            ))}
          </nav>
        </div>

        {/* Right side */}
        <nav className="hidden sm:flex items-center h-full gap-2">
          {isAuthenticated ? (
            <>
              {/* Go to Command Center */}
              <Link
                href="/terminal/radar"
                className="flex items-center gap-2 h-9 px-4 text-[0.8125rem] bg-accent text-background 
                           rounded-lg font-medium hover:bg-accent-hover transition-all duration-200"
              >
                <LayoutDashboard className="w-4 h-4" />
                Command Center
              </Link>
            </>
          ) : (
            <>
              <Link
                href="/login"
                className="flex items-center h-9 px-4 text-[0.8125rem] text-foreground-muted hover:text-foreground 
                           hover:bg-foreground/5 rounded-lg transition-all duration-200"
              >
                Sign In
              </Link>
              <Link
                href="/register"
                className="flex items-center h-9 ml-1 px-5 text-[0.8125rem] bg-foreground text-background rounded-lg
                           font-medium hover:bg-foreground/90 transition-all duration-200"
              >
                Get Started
              </Link>
            </>
          )}
        </nav>

        {/* Mobile Menu Button */}
        <button
          className="sm:hidden p-2 text-foreground-muted hover:text-foreground transition-colors"
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
        >
          {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
        </button>
      </div>

      {/* Mobile Menu */}
      {mobileMenuOpen && (
        <div className="sm:hidden border-t border-border bg-background/95 backdrop-blur-xl">
          <nav className="px-4 py-4 space-y-1">
            {/* Main Nav */}
            {publicNavItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className={clsx(
                  "flex items-center gap-3 px-4 py-3 text-body-sm rounded-xl transition-all duration-200",
                  isActive(item.href)
                    ? "bg-foreground/10 text-foreground font-medium"
                    : "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
                )}
              >
                <item.icon className="w-5 h-5" />
                <span>{item.label}</span>
              </Link>
            ))}

            <div className="my-3 border-t border-border" />

            {isAuthenticated ? (
              <>
                <Link
                  href="/terminal/radar"
                  className="flex items-center gap-3 px-4 py-3 text-body-sm text-center bg-accent text-background 
                             rounded-xl font-medium hover:bg-accent-hover transition-all duration-200"
                >
                  <LayoutDashboard className="w-5 h-5" />
                  <span>Command Center</span>
                </Link>
              </>
            ) : (
              <>
                <Link
                  href="/login"
                  className="block px-4 py-3 text-body-sm text-foreground-muted 
                             hover:text-foreground hover:bg-foreground/5 rounded-xl transition-all duration-200"
                >
                  Sign In
                </Link>
                <Link
                  href="/register"
                  className="block px-4 py-3 text-body-sm text-center bg-foreground text-background 
                             rounded-xl font-medium hover:bg-foreground/90 transition-all duration-200"
                >
                  Get Started
                </Link>
              </>
            )}
          </nav>
        </div>
      )}
    </header>
  )
}