'use client'
import Link from 'next/link'
import Image from 'next/image'
import { useRouter, usePathname } from 'next/navigation'
import { createClient } from '@/lib/supabase/client'
import { useEffect, useState } from 'react'
import { Menu, X } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { Perfil } from '@/types'

export function Navbar() {
  const router = useRouter()
  const pathname = usePathname()
  const supabase = createClient()
  const [perfil, setPerfil] = useState<Perfil | null>(null)
  const [scrolled, setScrolled] = useState(false)
  const [menuOpen, setMenuOpen] = useState(false)

  useEffect(() => {
    supabase.auth.getUser().then(({ data: { user } }) => {
      if (user) {
        supabase.from('perfiles').select('*').eq('id', user.id).single()
          .then(({ data }) => setPerfil(data))
      }
    })
  }, [])

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20)
    window.addEventListener('scroll', onScroll)
    return () => window.removeEventListener('scroll', onScroll)
  }, [])

  const handleLogout = async () => {
    await supabase.auth.signOut()
    setPerfil(null)
    router.push('/')
    router.refresh()
  }

  const linkClass = (href: string) => cn(
    'text-xs tracking-[0.2em] uppercase font-medium transition-colors duration-200',
    pathname === href ? 'text-[#C9A84C]' : 'text-[#888] hover:text-[#C9A84C]'
  )

  return (
    <nav className={cn(
      'fixed top-0 left-0 right-0 z-50 transition-all duration-300',
      scrolled
        ? 'bg-[#080808]/95 backdrop-blur-md border-b border-[#C9A84C]/10 py-3'
        : 'bg-transparent py-5'
    )}>
      <div className="max-w-6xl mx-auto px-6 flex items-center justify-between">

        {/* Logo */}
        <Link href="/" className="flex items-center gap-3">
          <Image src="/logo.png" alt="Barbería Lukakin" width={36} height={20} style={{ width: 36, height: 36, objectFit: 'cover' }} className="rounded-full ring-1 ring-[#C9A84C]/30" />
          <span className="font-display font-bold text-white hidden sm:block tracking-wide">
            Barbería <span className="text-[#C9A84C]">Lukakin</span>
          </span>
        </Link>

        {/* Links desktop */}
        <div className="hidden md:flex items-center gap-8">
          <Link href="/agendar" className={linkClass('/agendar')}>Reservar</Link>

          {perfil ? (
            <>
              <Link href="/mis-citas" className={linkClass('/mis-citas')}>Mis citas</Link>
              {perfil.rol === 'admin' && (
                <>
                      <Link href="/dashboard"  className={linkClass('/dashboard')}>Dashboard</Link>
                  <Link href="/citas"     className={linkClass('/citas')}>Citas</Link>
                  <Link href="/usuarios"  className={linkClass('/usuarios')}>Usuarios</Link>
                  <Link href="/servicios" className={linkClass('/servicios')}>Servicios</Link>
                  <Link href="/barberos"  className={linkClass('/barberos')}>Barberos</Link>
                </>
              )}
              <div className="flex items-center gap-4 pl-4 border-l border-[#C9A84C]/20">
                <span className="text-xs text-[#555] truncate max-w-[120px]">{perfil.nombre}</span>
                <button
                  onClick={handleLogout}
                  className="text-xs tracking-[0.2em] uppercase text-[#555] hover:text-[#C9A84C] transition-colors"
                >
                  Salir
                </button>
              </div>
            </>
          ) : (
            <div className="flex items-center gap-6 pl-4 border-l border-[#C9A84C]/20">
              <Link href="/login" className="text-xs tracking-[0.2em] uppercase text-[#888] hover:text-[#C9A84C] transition-colors">
                Ingresar
              </Link>
              <Link href="/registro">
                <button className="text-xs tracking-[0.2em] uppercase bg-[#C9A84C] hover:bg-[#E8C97A] text-black font-semibold px-5 py-2 transition-all duration-200 hover:shadow-[0_0_20px_rgba(201,168,76,0.3)]">
                  Registro
                </button>
              </Link>
            </div>
          )}
        </div>

        {/* Hamburger mobile */}
        <button
          className="md:hidden text-[#C9A84C]"
          onClick={() => setMenuOpen(!menuOpen)}
        >
          {menuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
        </button>
      </div>

      {/* Menú mobile */}
      {menuOpen && (
        <div className="md:hidden bg-[#080808] border-t border-[#C9A84C]/10 px-6 py-6 flex flex-col gap-5">
          <Link href="/agendar" className={linkClass('/agendar')} onClick={() => setMenuOpen(false)}>Reservar</Link>
          {perfil ? (
            <>
              <Link href="/mis-citas" className={linkClass('/mis-citas')} onClick={() => setMenuOpen(false)}>Mis citas</Link>
              {perfil.rol === 'admin' && (
                <>
                      <Link href="/dashboard"  className={linkClass('/dashboard')}  onClick={() => setMenuOpen(false)}>Dashboard</Link>
                  <Link href="/citas"     className={linkClass('/citas')}      onClick={() => setMenuOpen(false)}>Citas</Link>
                  <Link href="/usuarios"  className={linkClass('/usuarios')}   onClick={() => setMenuOpen(false)}>Usuarios</Link>
                  <Link href="/servicios" className={linkClass('/servicios')}  onClick={() => setMenuOpen(false)}>Servicios</Link>
                  <Link href="/barberos"  className={linkClass('/barberos')}   onClick={() => setMenuOpen(false)}>Barberos</Link>
                </>
              )}
              <button onClick={handleLogout} className="text-xs tracking-[0.2em] uppercase text-[#555] hover:text-[#C9A84C] text-left transition-colors">
                Salir
              </button>
            </>
          ) : (
            <>
              <Link href="/login" className={linkClass('/login')} onClick={() => setMenuOpen(false)}>Ingresar</Link>
              <Link href="/registro" className={linkClass('/registro')} onClick={() => setMenuOpen(false)}>Registro</Link>
            </>
          )}
        </div>
      )}
    </nav>
  )
}