'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import Logo from './Logo'
import { logout } from '@/app/actions/auth'

const items = [
  { href: '/panel', label: 'Eventos', icon: '◫', exact: true },
  { href: '/panel/pagos', label: 'Cobros', icon: '◎' },
  { href: '/panel/marca', label: 'Marca', icon: '◇' },
  { href: '/panel/referidos', label: 'Referidos', icon: '✦' },
]

export default function PanelNav({ orgName, email, isAdmin = false }: { orgName: string; email: string; isAdmin?: boolean }) {
  const path = usePathname()
  const active = (href: string, exact?: boolean) =>
    exact ? path === href || path.startsWith('/panel/eventos') : path.startsWith(href)

  return (
    <>
      <aside className="fixed inset-y-0 left-0 z-20 hidden w-60 flex-col border-r border-gray-100 bg-white md:flex">
        <div className="border-b border-gray-100 px-5 py-5">
          <Logo />
          <p className="mt-2 truncate text-xs text-gray-400">{orgName}</p>
        </div>
        <nav className="flex-1 space-y-1 p-3">
          {items.map(i => (
            <Link key={i.href} href={i.href}
              className={`flex items-center gap-3 rounded-control px-3 py-2.5 text-sm transition ${
                active(i.href, i.exact) ? 'bg-ink-950 font-semibold text-white' : 'text-gray-500 hover:bg-gray-100 hover:text-gray-900'}`}>
              <span className="w-4 text-center">{i.icon}</span>{i.label}
            </Link>
          ))}
        </nav>
        {isAdmin && (
          <div className="px-3 pb-2">
            <Link href="/admin" className="flex items-center gap-3 rounded-control border border-dashed border-gray-200 px-3 py-2.5 text-sm text-gray-500 hover:bg-gray-50">
              <span className="w-4 text-center">⚙</span>Plataforma
            </Link>
          </div>
        )}
        <div className="border-t border-gray-100 p-3">
          <p className="truncate px-3 pb-2 text-xs text-gray-400">{email}</p>
          <form action={logout}><button className="btn-ghost w-full justify-start px-3 py-2">Cerrar sesión</button></form>
        </div>
      </aside>

      <nav className="safe-bottom fixed inset-x-0 bottom-0 z-30 flex border-t border-gray-100 bg-white/95 backdrop-blur md:hidden">
        {items.map(i => (
          <Link key={i.href} href={i.href}
            className={`flex flex-1 flex-col items-center gap-1 py-2.5 text-[11px] ${active(i.href, i.exact) ? 'font-semibold text-gray-900' : 'text-gray-400'}`}>
            <span className="text-lg leading-none">{i.icon}</span>{i.label}
          </Link>
        ))}
        <form action={logout} className="flex flex-1">
          <button className="flex flex-1 flex-col items-center gap-1 py-2.5 text-[11px] text-gray-400">
            <span className="text-lg leading-none">⏻</span>Salir
          </button>
        </form>
      </nav>
    </>
  )
}