"use client";

import { useState } from "react";
import { useSession, signOut } from "next-auth/react";
import { Menu, X, User, LogOut } from "lucide-react";
import Link from "next/link";
import SyncStatus from "@/components/offline/SyncStatus";

export default function MobileHeader() {
  const { data: session } = useSession();
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <header className="sticky top-0 left-0 right-0 bg-white border-b border-gray-200 z-40 md:hidden">
      <div className="flex items-center justify-between px-4 h-14">
        <div className="flex items-center gap-2">
          <button
            onClick={() => setMenuOpen(!menuOpen)}
            className="p-2 -ml-2"
            aria-label="Menú"
          >
            {menuOpen ? (
              <X className="w-6 h-6 text-gray-700" />
            ) : (
              <Menu className="w-6 h-6 text-gray-700" />
            )}
          </button>
          <h1 className="text-lg font-bold text-gray-900">APR Solo</h1>
        </div>

        {session?.user && (
          <div className="flex items-center gap-2">
            <SyncStatus compact />
            <div className="text-right">
              <p className="text-sm font-medium text-gray-900">{session.user.name}</p>
              <p className="text-xs text-gray-500 capitalize">{session.user.role}</p>
            </div>
            <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
              <User className="w-5 h-5 text-blue-600" />
            </div>
          </div>
        )}
      </div>

      {menuOpen && (
        <div className="absolute top-14 left-0 right-0 bg-white border-b border-gray-200 shadow-lg">
          <nav className="px-4 py-2">
            <Link
              href="/"
              className="block px-4 py-3 rounded-lg hover:bg-gray-100 text-gray-700"
              onClick={() => setMenuOpen(false)}
            >
              Inicio
            </Link>
            <Link
              href="/lecturas"
              className="block px-4 py-3 rounded-lg hover:bg-gray-100 text-gray-700"
              onClick={() => setMenuOpen(false)}
            >
              Lecturas
            </Link>
            <Link
              href="/cortes"
              className="block px-4 py-3 rounded-lg hover:bg-gray-100 text-gray-700"
              onClick={() => setMenuOpen(false)}
            >
              Cortes
            </Link>
            <Link
              href="/socios"
              className="block px-4 py-3 rounded-lg hover:bg-gray-100 text-gray-700"
              onClick={() => setMenuOpen(false)}
            >
              Socios
            </Link>
            {session?.user?.role === "admin" && (
              <Link
                href="/configuracion"
                className="block px-4 py-3 rounded-lg hover:bg-gray-100 text-gray-700"
                onClick={() => setMenuOpen(false)}
              >
                Configuración
              </Link>
            )}
            <div className="border-t border-gray-200 mt-2 pt-2">
              <button
                onClick={() => {
                  signOut({ callbackUrl: "/login" });
                  setMenuOpen(false);
                }}
                className="w-full flex items-center gap-2 px-4 py-3 rounded-lg hover:bg-gray-100 text-red-600"
              >
                <LogOut className="w-5 h-5" />
                <span>Cerrar Sesión</span>
              </button>
            </div>
          </nav>
        </div>
      )}
    </header>
  );
}