import { Menu, BarChart3, Package, Settings, LogOut } from 'lucide-react';
import { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuthStore } from '@/store/auth';

export function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const { tenant, logout } = useAuthStore();
  const navigate = useNavigate();

  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  return (
    <>
      <header className="bg-white border-b px-4 py-3 flex items-center justify-between safe-top">
        <div className="flex items-center gap-3">
          <button
            className="p-2 hover:bg-gray-100 rounded-lg"
            onClick={() => setIsMenuOpen(true)}
          >
            <Menu className="w-6 h-6" />
          </button>
          <div>
            <h1 className="font-bold text-lg text-gray-900">POS Micro</h1>
            <p className="text-xs text-gray-500">{tenant?.businessName}</p>
          </div>
        </div>
      </header>

      {/* Mobile menu overlay */}
      {isMenuOpen && (
        <div className="fixed inset-0 z-50">
          <div
            className="absolute inset-0 bg-black/50"
            onClick={() => setIsMenuOpen(false)}
          />
          <nav className="absolute left-0 top-0 bottom-0 w-64 bg-white shadow-xl">
            <div className="p-4 border-b">
              <h2 className="font-bold text-lg">Menu</h2>
            </div>
            <div className="p-2">
              <NavLink
                to="/"
                icon={<BarChart3 className="w-5 h-5" />}
                label="Punto de Venta"
                onClick={() => setIsMenuOpen(false)}
              />
              <NavLink
                to="/reports"
                icon={<BarChart3 className="w-5 h-5" />}
                label="Reportes"
                onClick={() => setIsMenuOpen(false)}
              />
              <NavLink
                to="/products"
                icon={<Package className="w-5 h-5" />}
                label="Productos"
                onClick={() => setIsMenuOpen(false)}
              />
              <NavLink
                to="/settings"
                icon={<Settings className="w-5 h-5" />}
                label="Configuracion"
                onClick={() => setIsMenuOpen(false)}
              />
              <button
                className="w-full flex items-center gap-3 px-4 py-3 text-red-600 hover:bg-red-50 rounded-lg"
                onClick={handleLogout}
              >
                <LogOut className="w-5 h-5" />
                Cerrar sesion
              </button>
            </div>
          </nav>
        </div>
      )}
    </>
  );
}

interface NavLinkProps {
  to: string;
  icon: React.ReactNode;
  label: string;
  onClick: () => void;
}

function NavLink({ to, icon, label, onClick }: NavLinkProps) {
  return (
    <Link
      to={to}
      className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg"
      onClick={onClick}
    >
      {icon}
      {label}
    </Link>
  );
}
