import { useState } from 'react';
import { NavLink } from 'react-router-dom';
import { useAuthStore } from '../../stores/authStore';
import TickerSearch from './TickerSearch';

const navItems = [
  { to: '/', label: 'Overview', end: true },
  { to: '/market', label: 'Market', end: false },
  { to: '/signals', label: 'Signals', end: false },
  { to: '/regime', label: 'Regime', end: false },
];

export default function MobileNav() {
  const [open, setOpen] = useState(false);
  const { role, username, logout } = useAuthStore();

  return (
    <div className="lg:hidden">
      <div className="flex items-center justify-between px-4 py-3 glass rounded-none border-x-0 border-t-0">
        <div className="flex items-center gap-2">
          <span className="relative flex h-2 w-2">
            <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 animate-signal-pulse" />
            <span className="relative inline-flex h-2 w-2 rounded-full bg-blue-400/60" />
          </span>
          <h1 className="font-display text-lg font-bold tracking-tight text-gradient">Signal</h1>
        </div>
        <button
          onClick={() => setOpen((v) => !v)}
          className="p-2 text-gray-400 hover:text-gray-200 transition-colors duration-200"
          aria-label="Toggle menu"
        >
          {open ? (
            <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          ) : (
            <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          )}
        </button>
      </div>

      <div
        className={`overflow-hidden transition-all duration-300 ease-out glass rounded-none border-x-0 border-t-0 ${
          open ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0 border-b-0'
        }`}
      >
        <nav className="px-3 py-2 space-y-1">
          <div className="pb-2">
            <TickerSearch onNavigate={() => setOpen(false)} />
          </div>
          {navItems.map(({ to, label, end }) => (
            <NavLink
              key={to}
              to={to}
              end={end}
              onClick={() => setOpen(false)}
              className={({ isActive }) =>
                `block px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
                  isActive
                    ? 'bg-blue-400/[0.08] text-blue-300'
                    : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200'
                }`
              }
            >
              {label}
            </NavLink>
          ))}
          {role === 'admin' && (
            <NavLink
              to="/admin"
              onClick={() => setOpen(false)}
              className={({ isActive }) =>
                `block px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
                  isActive
                    ? 'bg-blue-400/[0.08] text-blue-300'
                    : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200'
                }`
              }
            >
              Admin
            </NavLink>
          )}
        </nav>
        <div className="px-4 py-3 border-t border-white/[0.06]">
          {username && (
            <p className="text-xs text-gray-500 mb-2 truncate">{username}</p>
          )}
          <button
            onClick={() => { logout(); setOpen(false); }}
            className="w-full text-left px-3 py-2 text-sm text-gray-400 hover:text-gray-200 hover:bg-white/[0.04] rounded-lg transition-all duration-200"
          >
            Logout
          </button>
        </div>
      </div>
    </div>
  );
}