import { useState } from 'react'
import { Link, NavLink } from 'react-router-dom'
import { Menu, ShieldCheck, User, X } from 'lucide-react'
import { useAuth } from '../context/AuthContext'
import { usePolls } from '../context/PollContext'

const navClass = ({ isActive }) =>
  `rounded-full px-4 py-1.5 transition hover:bg-brand-100 hover:text-brand-900 ${
    isActive ? 'bg-brand-100 text-brand-900' : 'text-brand-700'
  }`

export default function Header() {
  const { user, logout } = useAuth()
  const { polls } = usePolls()
  const [open, setOpen] = useState(false)

  const featured = polls.find((p) => p.status === 'open') || polls[0]
  const castVoteHref = featured ? `/poll/${featured.id}` : '/dashboard'

  return (
    <header className="sticky top-0 z-50 border-b border-brand-200/70 bg-[#fcfbf8]/90 backdrop-blur-md">
      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
        <Link to="/" className="flex items-center gap-2 text-xl font-extrabold text-brand-900">
          <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-700 text-white shadow-sm ring-4 ring-brand-100">
            <ShieldCheck className="h-4.5 w-4.5" strokeWidth={2.5} />
          </span>
          <span className="brand-heading tracking-tight">Votetech</span>
          <span className="hidden rounded-full border border-brand-300 bg-brand-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-brand-600 sm:inline">
            Finals
          </span>
        </Link>

        <nav className="hidden items-center gap-1 md:flex">
          <NavLink to="/" className={navClass} end>
            Home
          </NavLink>
          <a href="/#finalists" className="rounded-full px-4 py-1.5 text-brand-700 transition hover:bg-brand-100 hover:text-brand-900">
            Finalists
          </a>
          <a href="/#how-it-works" className="rounded-full px-4 py-1.5 text-brand-700 transition hover:bg-brand-100 hover:text-brand-900">
            Voting Guide
          </a>
        </nav>

        <div className="flex items-center gap-3">
          <Link
            to={castVoteHref}
            className="hidden rounded-full bg-brand-800 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-900 sm:inline-flex"
          >
            Cast Vote
          </Link>

          {user ? (
            <button
              type="button"
              onClick={logout}
              title={`Signed in with ${user.provider} · Sign out`}
              className="relative flex h-9 w-9 items-center justify-center rounded-full bg-brand-100 text-brand-700 transition hover:bg-brand-200"
            >
              <User className="h-4 w-4" />
              <span className="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full bg-emerald-500 ring-2 ring-[#fcfbf8]" />
            </button>
          ) : (
            <Link
              to="/login"
              title="Sign in"
              className="flex h-9 w-9 items-center justify-center rounded-full bg-brand-100 text-brand-700 transition hover:bg-brand-200"
            >
              <User className="h-4 w-4" />
            </Link>
          )}

          <button
            type="button"
            className="rounded-lg p-2 text-brand-800 md:hidden"
            onClick={() => setOpen((v) => !v)}
            aria-label="Toggle menu"
          >
            {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
          </button>
        </div>
      </div>

      {open && (
        <div className="border-t border-brand-200 bg-[#fcfbf8] px-4 py-3 md:hidden">
          <Link to="/" onClick={() => setOpen(false)} className="block rounded-lg px-3 py-2.5 hover:bg-brand-100">
            Home
          </Link>
          <a href="/#finalists" onClick={() => setOpen(false)} className="block rounded-lg px-3 py-2.5 hover:bg-brand-100">
            Finalists
          </a>
          <a href="/#how-it-works" onClick={() => setOpen(false)} className="block rounded-lg px-3 py-2.5 hover:bg-brand-100">
            Voting Guide
          </a>
          <Link
            to={castVoteHref}
            onClick={() => setOpen(false)}
            className="mt-2 block rounded-lg bg-brand-800 px-3 py-2.5 text-center font-semibold text-white"
          >
            Cast Vote
          </Link>
          <div className="mt-3 border-t border-brand-200 pt-3">
            {user ? (
              <button
                type="button"
                onClick={() => {
                  logout()
                  setOpen(false)
                }}
                className="w-full rounded-lg bg-brand-100 px-3 py-2.5 text-left font-semibold"
              >
                Sign Out
              </button>
            ) : (
              <Link
                to="/login"
                onClick={() => setOpen(false)}
                className="block rounded-lg bg-brand-700 px-3 py-2.5 text-center font-semibold text-white"
              >
                Sign in
              </Link>
            )}
          </div>
        </div>
      )}
    </header>
  )
}
