"use client";

import { useSession, signOut } from "next-auth/react";
import { useEditMode } from "@/context/EditModeContext";
import { useEffect } from "react";
import { Edit3, Eye, Settings2, LogOut } from "lucide-react";

export function AdminBar() {
  const { data: session, status } = useSession();
  const { editMode, toggleEditMode, setIsAdmin, openAdminPanel } = useEditMode();

  useEffect(() => {
    setIsAdmin(!!session);
  }, [session, setIsAdmin]);

  if (status === "loading" || !session) return null;

  const handleSignOut = async () => {
    await signOut({ callbackUrl: "/admin/login" });
  };

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 bg-[#0d1117] border-t border-white/10 shadow-2xl">
      <div className="flex items-center h-12 px-4 gap-3">

        {/* Brand */}
        <span className="text-white/30 text-[11px] font-mono hidden sm:block flex-shrink-0">ANED Admin</span>
        <span className="hidden sm:block text-white/10 text-xs">|</span>

        {/* Spacer */}
        <div className="flex-1" />

        {/* Right side controls */}
        <div className="flex items-center gap-2 flex-shrink-0">
          {/* Edit mode toggle */}
          <button
            onClick={toggleEditMode}
            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
              editMode
                ? "bg-[#E67E22] text-white hover:bg-[#d4691b]"
                : "bg-white/10 text-white/70 hover:bg-white/20 hover:text-white"
            }`}
          >
            {editMode ? <Eye size={12} /> : <Edit3 size={12} />}
            <span className="hidden sm:inline">{editMode ? "Quitter l'édition" : "Modifier le site"}</span>
          </button>

          {/* Manage panel */}
          <button
            onClick={openAdminPanel}
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium bg-[#4A7C59] hover:bg-[#3d6849] text-white transition-all"
          >
            <Settings2 size={12} />
            <span className="hidden sm:inline">Gérer le site</span>
          </button>

          {/* Logout */}
          <button
            onClick={handleSignOut}
            className="flex items-center gap-1.5 px-2 py-1.5 rounded-md text-xs text-white/40 hover:text-red-400 hover:bg-red-400/10 transition-all"
            title="Déconnexion"
          >
            <LogOut size={12} />
          </button>
        </div>
      </div>
    </div>
  );
}