'use client'

import Link from 'next/link'
import { useState } from 'react'
import { Moon, Sun, Menu, X } from 'lucide-react'
import { LinkButton } from '@/components/LinkButton'
import { UserMenu } from '@/components/UserMenu'
import { useTheme } from '@/components/ThemeProvider'

interface NavProps {
  did?: string
  handle?: string
  avatar?: string
}

const NAV_LINKS = [
  { href: '/block', label: 'New Block' },
  { href: '/list', label: 'List Editor' },
  { href: '/events', label: 'History' },
  { href: '/stats', label: 'Stats' },
]

export function Nav({ did, handle, avatar }: NavProps) {
  const isLoggedIn = !!did
  const { theme, toggle } = useTheme()
  const [menuOpen, setMenuOpen] = useState(false)

  return (
    <nav className="sticky top-0 z-50 bg-background/80 backdrop-blur-md border-b border-border">
      <div className="max-w-5xl mx-auto px-4 h-14 flex items-center justify-between">

        {/* Wordmark */}
        <Link
          href="/"
          className="font-display text-xl font-bold tracking-tight hover:opacity-80 transition-opacity"
        >
          Flock<span className="italic text-[var(--fo-ember)]">Off</span>
        </Link>

        {/* Right side */}
        <div className="flex items-center gap-3">

          {/* Desktop nav links — logged-in only */}
          {isLoggedIn && (
            <div className="hidden sm:flex items-center gap-5 mr-2">
              {NAV_LINKS.map(link => (
                <Link
                  key={link.href}
                  href={link.href}
                  className="text-sm font-medium text-[var(--fo-text2)] hover:text-foreground transition-colors"
                >
                  {link.label}
                </Link>
              ))}
            </div>
          )}

          {/* Theme toggle */}
          <button
            onClick={toggle}
            aria-label={theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
            className="h-9 w-9 flex items-center justify-center rounded-lg border border-border bg-card hover:bg-secondary transition-colors"
          >
            {theme === 'light' ? <Moon size={16} /> : <Sun size={16} />}
          </button>

          {/* Logged-in: avatar + mobile hamburger */}
          {isLoggedIn ? (
            <>
              <UserMenu handle={handle} avatar={avatar} />
              <button
                onClick={() => setMenuOpen(prev => !prev)}
                aria-label={menuOpen ? 'Close menu' : 'Open menu'}
                className="sm:hidden h-9 w-9 flex items-center justify-center rounded-lg border border-border bg-card hover:bg-secondary transition-colors"
              >
                {menuOpen ? <X size={16} /> : <Menu size={16} />}
              </button>
            </>
          ) : (
            <LinkButton href="/login" size="sm">Sign In</LinkButton>
          )}
        </div>
      </div>

      {/* Mobile nav drawer */}
      {isLoggedIn && menuOpen && (
        <div className="sm:hidden border-t border-border bg-background/95 backdrop-blur-md">
          {NAV_LINKS.map(link => (
            <Link
              key={link.href}
              href={link.href}
              onClick={() => setMenuOpen(false)}
              className="block px-4 py-3 text-sm font-medium text-[var(--fo-text2)] hover:text-foreground hover:bg-secondary/60 transition-colors"
            >
              {link.label}
            </Link>
          ))}
        </div>
      )}
    </nav>
  )
}