import { Link, useNavigate } from 'react-router-dom'
import { MapPin, ShoppingCart, User, LogOut, Menu, X } from 'lucide-react'
import { useApp } from '../../context/AppContext'
import { useState } from 'react'

export const Header = () => {
  const { user, cart, logout } = useApp()
  const navigate = useNavigate()
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  const handleLogout = () => {
    logout()
    navigate('/')
    setMobileMenuOpen(false)
  }

  return (
    <header className="sticky top-0 z-30 bg-white/70 backdrop-blur-lg border-b border-slate-200/50 shadow-sm shadow-slate-200/20">
      <div className="mx-auto flex h-16 sm:h-20 max-w-6xl items-center justify-between px-3 sm:px-6">
        <Link
          to="/"
          className="text-2xl font-black tracking-tighter text-slate-900 group flex items-center gap-2"
          onClick={() => setMobileMenuOpen(false)}
        >
          <div className="w-8 h-8 rounded-lg bg-indigo-600 flex items-center justify-center text-white shadow-lg shadow-indigo-200">
            <User size={18} fill="currentColor" />
          </div>
          <span className="group-hover:text-indigo-600 transition-colors uppercase italic font-black">Smart Agenda</span>
        </Link>

        {/* Desktop Navigation */}
        <nav className="hidden md:flex items-center gap-8">
          {user?.role !== 'barbearia' && (
            <>
              <Link
                to="/explorar"
                className="text-sm font-bold text-slate-600 hover:text-slate-900 transition-all flex items-center gap-2"
              >
                <MapPin size={16} className="text-indigo-500" />
                <span>Descobrir Barbearias</span>
              </Link>

              <Link
                to="/carrinho"
                className="relative text-slate-700 hover:text-slate-900 transition-all p-2 rounded-xl hover:bg-slate-50"
              >
                <ShoppingCart size={20} className="text-slate-700" />
                {cart.length > 0 && (
                  <span className="absolute -right-1 -top-1 rounded-full bg-slate-900 px-1.5 py-0.5 text-[10px] font-black text-indigo-400 shadow-md min-w-[18px] text-center">
                    {cart.length}
                  </span>
                )}
              </Link>
            </>
          )}

          <div className="h-6 w-px bg-slate-200 mx-1" />

          {user ? (
            <div className="flex items-center gap-4">
              <button
                onClick={() => navigate(user.role === 'barbearia' ? '/painel' : '/perfil')}
                className="flex items-center gap-3 bg-slate-50 hover:bg-slate-100 border border-slate-200/60 pl-3 pr-4 py-1.5 rounded-full transition-all group"
                type="button"
              >
                <div className="w-7 h-7 rounded-full bg-indigo-600 flex items-center justify-center text-white shadow-sm">
                  <User size={14} fill="currentColor" />
                </div>
                <span className="text-sm font-bold text-slate-700 group-hover:text-slate-900 max-w-[120px] truncate">{user.name}</span>
              </button>

              <button
                onClick={handleLogout}
                className="p-2 text-slate-400 hover:text-rose-600 hover:bg-rose-50 rounded-xl transition-all"
                title="Sair"
                type="button"
              >
                <LogOut size={18} />
              </button>
            </div>
          ) : (
            <div className="flex items-center gap-3">
              <Link
                to="/login"
                className="text-sm font-bold text-slate-600 hover:text-slate-900 px-4 py-2 transition-colors"
              >
                Login
              </Link>
              <Link
                to="/registo"
                className="inline-flex items-center justify-center rounded-xl bg-indigo-600 px-5 py-2 text-sm font-bold text-white shadow-lg shadow-indigo-100 hover:bg-indigo-700 transition-all font-black uppercase italic tracking-widest"
              >
                Criar Conta
              </Link>
            </div>
          )}
        </nav>

        {/* Mobile Menu Button */}
        <button
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          className="md:hidden p-2.5 bg-slate-50 border border-slate-200 rounded-xl text-slate-900 transition-all"
          type="button"
        >
          {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
        </button>
      </div>

      {/* Mobile Menu */}
      {mobileMenuOpen && (
        <div className="md:hidden border-t border-slate-100 bg-white shadow-2xl animate-in slide-in-from-top-4 duration-300">
          <nav className="px-6 py-6 space-y-4">
            {user?.role !== 'barbearia' && (
              <>
                <Link
                  to="/explorar"
                  onClick={() => setMobileMenuOpen(false)}
                  className="flex items-center gap-3 text-base font-black text-slate-700 hover:text-indigo-600 p-3 rounded-2xl bg-slate-50 transition-all uppercase italic"
                >
                  <MapPin size={18} className="text-indigo-600" />
                  Descobrir Barbearias
                </Link>

                <Link
                  to="/carrinho"
                  onClick={() => setMobileMenuOpen(false)}
                  className="flex items-center gap-3 text-base font-black text-slate-700 hover:text-indigo-600 p-3 rounded-2xl bg-slate-50 transition-all uppercase italic"
                >
                  <ShoppingCart size={18} className="text-indigo-600" />
                  Meu Carrinho
                  {cart.length > 0 && (
                    <span className="ml-auto rounded-full bg-slate-900 px-2 py-0.5 text-[10px] font-black text-indigo-400">
                      {cart.length}
                    </span>
                  )}
                </Link>
              </>
            )}

            <div className="h-px bg-slate-100 w-full" />

            {user ? (
              <>
                <button
                  onClick={() => {
                    navigate(user.role === 'barbearia' ? '/painel' : '/perfil')
                    setMobileMenuOpen(false)
                  }}
                  className="w-full flex items-center gap-3 text-base font-bold text-slate-700 p-3 rounded-2xl hover:bg-slate-50 transition-all text-left"
                  type="button"
                >
                  <User size={18} className="text-slate-400" />
                  {user.name}
                </button>

                <button
                  onClick={handleLogout}
                  className="w-full flex items-center gap-3 text-base font-bold text-rose-600 p-3 rounded-2xl hover:bg-rose-50 transition-all text-left"
                  type="button"
                >
                  <LogOut size={18} />
                  Sair da Conta
                </button>
              </>
            ) : (
              <div className="grid grid-cols-2 gap-3">
                 <Link
                  to="/login"
                  onClick={() => setMobileMenuOpen(false)}
                  className="flex items-center justify-center rounded-2xl border border-slate-200 bg-white py-3 text-sm font-bold text-slate-700"
                >
                  Entrar
                </Link>
                <Link
                  to="/registo"
                  onClick={() => setMobileMenuOpen(false)}
                  className="flex items-center justify-center rounded-2xl bg-slate-900 py-3 text-sm font-bold text-indigo-400 shadow-lg shadow-slate-200 font-black uppercase italic tracking-widest"
                >
                  Criar Conta
                </Link>
              </div>
            )}
          </nav>
        </div>
      )}
    </header>
  )
}
