import CsvImporter from "./CsvImporter";
import { useNavigate } from "react-router-dom";

export default function Header({ onRefresh, onOpenScanner }) {
  const navigate = useNavigate();

  const handleLogout = () => {
    localStorage.clear();
    navigate("/login");
  };

  const handleUser = () => {
    const savedUser = localStorage.getItem("user");
    return savedUser ? JSON.parse(savedUser) : {};
  };

  const user = handleUser();

  return (
    <header className="w-full border-b border-slate-800 bg-slate-950/60 backdrop-blur-xl sticky top-0 z-50">
      <div className="max-w-[1440px] mx-auto px-4 md:px-8 h-16 md:h-20 flex justify-between items-center">
        <div className="flex flex-col">
          <h1 className="text-lg md:text-xl font-black text-white tracking-tighter">
            VIPLIGHT <span className="text-blue-500">MRP</span>
          </h1>
        </div>

        <div className="flex items-center gap-3">
          <div className="hidden md:block">
            <CsvImporter onImported={onRefresh} />
          </div>
          <button
            onClick={() => navigate("/add")}
            className="hidden md:flex h-10 px-6 bg-emerald-600 hover:bg-emerald-500 text-white rounded-xl font-bold text-xs items-center gap-2"
          >
            <span>+</span> НОВАЯ ПАНЕЛЬ
          </button>
          <button
            onClick={onOpenScanner}
            className="h-9 px-4 md:h-10 md:px-6 bg-blue-600 hover:bg-blue-500 text-white rounded-lg md:rounded-xl font-bold text-xs flex items-center gap-2"
          >
            <span>📷</span> СКАНЕР
          </button>

          {/* Блок пользователя */}
          <div
            onClick={() => navigate("/profile")}
            className="flex items-center gap-4 border-l border-slate-800 pl-6"
          >
            <div className="text-right hidden sm:block">
              <p className="text-sm font-bold text-white leading-tight">
                {user.first_name} {user.last_name}
              </p>
              <p className="text-[10px] text-slate-400 font-medium uppercase tracking-widest mt-0.5">
                {user.department} <span className="text-slate-600 mx-1">|</span>{" "}
                {user.role}
              </p>
            </div>

            <div className="relative group">
              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-black text-sm border-2 border-slate-800 cursor-pointer hover:border-blue-400 transition-all">
                {user.first_name.charAt(0).toUpperCase()}
              </div>

              {/* Меню при наведении */}
              <div className="absolute right-0 mt-2 w-48 py-2 bg-slate-900 border border-slate-800 rounded-xl shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all">
                <div className="px-4 py-2 border-b border-slate-800 sm:hidden">
                  <p className="text-xs text-white font-bold">
                    {user.first_name}
                  </p>
                  <p className="text-[10px] text-slate-500">{user.role}</p>
                </div>
                <button
                  onClick={handleLogout}
                  className="w-full text-left px-4 py-2 text-xs text-red-400 hover:bg-red-500/10"
                >
                  Выйти из системы
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}