import { useState } from 'react'
import { Link } from 'react-router-dom'
import { useSettings } from '../../context/SettingsContext'
import { useAuth } from '../../context/AuthContext'
import { Search, Menu } from '../icons'
import SideMenu from './SideMenu'
import SearchOverlay from './SearchOverlay'

/** Fixed top navigation bar present on every page. */
export default function TopBar() {
  const { settings } = useSettings()
  const { user, isAuthenticated } = useAuth()
  const [menuOpen, setMenuOpen] = useState(false)
  const [searchOpen, setSearchOpen] = useState(false)

  const site = settings?.site || {}

  return (
    <>
      <header className="sticky top-0 z-40 border-b border-gray-200/70 bg-white/85 backdrop-blur-xl dark:border-gray-800/70 dark:bg-gray-950/85">
        <div className="mx-auto flex h-14 max-w-7xl items-center justify-between gap-3 px-3 sm:h-16 sm:px-4">
          {/* Logo + site name */}
          <Link to="/" className="group flex min-w-0 items-center gap-2.5">
            {site.logo ? (
              <img
                src={site.logo}
                alt=""
                className="h-9 w-9 rounded-xl object-cover shadow-md"
              />
            ) : (
              <span className="bg-brand-gradient flex h-9 w-9 items-center justify-center rounded-xl text-lg font-black text-white shadow-md shadow-[var(--brand)]/30 transition-transform duration-300 group-hover:scale-105">
                {(site.name || 'S')[0]}
              </span>
            )}
            <span className="truncate text-lg font-extrabold tracking-tight sm:text-xl">
              {site.name || 'StreamHub'}
            </span>
          </Link>

          <div className="flex items-center gap-1.5">
            <button
              onClick={() => setSearchOpen(true)}
              aria-label="Search"
              className="rounded-full p-2.5 text-gray-600 transition-all hover:bg-gray-100 hover:text-[var(--brand)] dark:text-gray-300 dark:hover:bg-gray-800"
            >
              <Search />
            </button>

            {/* Avatar shortcut when logged in */}
            {isAuthenticated && (
              <Link
                to="/profile"
                aria-label="Profile"
                className="hidden sm:block"
                title={user.name}
              >
                <span className="bg-brand-gradient flex h-8 w-8 items-center justify-center overflow-hidden rounded-full text-xs font-bold text-white ring-2 ring-white transition-transform hover:scale-105 dark:ring-gray-800">
                  {user.avatar ? (
                    <img src={user.avatar} alt="" className="h-full w-full object-cover" />
                  ) : (
                    user.name?.[0]?.toUpperCase()
                  )}
                </span>
              </Link>
            )}

            <button
              onClick={() => setMenuOpen(true)}
              aria-label="Menu"
              className="rounded-full p-2.5 text-gray-600 transition-all hover:bg-gray-100 hover:text-[var(--brand)] dark:text-gray-300 dark:hover:bg-gray-800"
            >
              <Menu />
            </button>
          </div>
        </div>
      </header>

      <SideMenu open={menuOpen} onClose={() => setMenuOpen(false)} />
      <SearchOverlay open={searchOpen} onClose={() => setSearchOpen(false)} />
    </>
  )
}
