import React from "react";
import { Link } from "react-router-dom";
import { Heart } from "lucide-react";
import { useAuth } from "../hooks/useAuth";
import { ProfileSelector } from "./ProfileSelector";
import { i18n } from "../i18n";
import Logo from "./images/logo.PNG";

const Header: React.FC = () => {
  const { role, isAuthenticated } = useAuth();

  // Debug log
  console.log(
    "[Header] Role atual:",
    role,
    "isAuthenticated:",
    isAuthenticated
  );

  return (
    <header className="bg-white shadow-lg border-b border-gray-200 sticky top-0 z-[9998]">
      {/* Skip to content link for accessibility */}
      <a
        href="#main-content"
        className="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:px-4 focus:py-2 focus:bg-blue-600 focus:text-white focus:outline-none"
      >
        {i18n.t("common.skipToContent")}
      </a>

      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <Link
            to="/"
            className="flex items-center space-x-3 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-lg"
          >
            <img
              src={Logo}
              alt={i18n.t("header.logo")}
              className="h-12 w-12 rounded-lg object-contain shadow-sm"
            />
            <div>
              <h1 className="text-lg font-bold text-gray-900">
                {i18n.t("header.logo")}
              </h1>
              <p className="text-xs text-gray-500">
                {i18n.t("header.subtitle")}
              </p>
            </div>
          </Link>

          {/* Desktop Navigation - Centralizado */}
          <nav
            className="hidden md:flex items-center justify-center space-x-2 absolute left-1/2 transform -translate-x-1/2 z-[9998]"
            aria-label="Navegação principal"
          >
            <Link
              to="/"
              className="flex items-center space-x-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors text-gray-600 hover:text-blue-600 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
            >
              <Heart className="w-4 h-4" aria-hidden="true" />
              <span>{i18n.t("header.home")}</span>
            </Link>

            {/* Admin Links - Mostrar todos os painéis */}
            {isAuthenticated && (role === "admin" || role === "gestor") && (
              <>
                <Link
                  to="/admin"
                  className="flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-purple-600 hover:text-purple-700 hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
                >
                  <span>Admin</span>
                </Link>
                <Link
                  to="/painel-medico"
                  className="flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-blue-600 hover:text-blue-700 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                >
                  <span>Médico</span>
                </Link>
                <Link
                  to="/painel-secretaria"
                  className="flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-green-600 hover:text-green-700 hover:bg-green-50 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
                >
                  <span>Secretária</span>
                </Link>
                <Link
                  to="/acompanhamento"
                  className="flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-indigo-600 hover:text-indigo-700 hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                >
                  <span>Paciente</span>
                </Link>
              </>
            )}

            {/* Profile Selector */}
            <ProfileSelector />
          </nav>

          {/* Mobile menu button */}
          <div className="md:hidden">
            <button
              className="text-gray-600 hover:text-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded p-2"
              aria-label="Menu de navegação"
            >
              <svg
                className="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M4 6h16M4 12h16M4 18h16"
                />
              </svg>
            </button>
          </div>
        </div>

        {/* Mobile Navigation */}
        <div className="md:hidden border-t border-gray-200 py-3">
          <div className="flex flex-col space-y-2">
            <Link
              to="/"
              className="flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-gray-600 hover:text-blue-600 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <Heart className="w-4 h-4" aria-hidden="true" />
              <span>{i18n.t("header.home")}</span>
            </Link>

            {/* Admin Links Mobile - Mostrar todos os painéis */}
            {isAuthenticated && (role === "admin" || role === "gestor") && (
              <>
                <Link
                  to="/admin"
                  className="flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-purple-600 hover:text-purple-700 hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-purple-500"
                >
                  <span>🟣 Admin</span>
                </Link>
                <Link
                  to="/painel-medico"
                  className="flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-blue-600 hover:text-blue-700 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                  <span>👨‍⚕️ Médico</span>
                </Link>
                <Link
                  to="/painel-secretaria"
                  className="flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-green-600 hover:text-green-700 hover:bg-green-50 focus:outline-none focus:ring-2 focus:ring-green-500"
                >
                  <span>👩‍💼 Secretária</span>
                </Link>
                <Link
                  to="/acompanhamento"
                  className="flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-indigo-600 hover:text-indigo-700 hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                >
                  <span>🧑‍🦱 Paciente</span>
                </Link>
              </>
            )}

            <div className="px-3 py-2">
              <ProfileSelector />
            </div>
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;
