"use client";

import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { ChevronDown, User as UserIcon, Settings, LogOut } from "lucide-react";
import { useAuthStore } from "@/store/auth";
import ConfirmDialog from "@/components/admin/ui/ConfirmDialog";
import styles from "./UserMenu.module.css";

export default function UserMenu() {
  const router = useRouter();
  const user = useAuthStore((state) => state.user);
  const deconnecte = useAuthStore((state) => state.deconnecte);
  const [ouvert, setOuvert] = useState(false);
  const [confirmDeconnexion, setConfirmDeconnexion] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
        setOuvert(false);
      }
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, []);

  const initiales = user?.nom
    ? user.nom
        .split(" ")
        .slice(0, 2)
        .map((mot) => mot[0])
        .join("")
        .toUpperCase()
    : "?";

  const allerA = (chemin: string) => {
    setOuvert(false);
    router.push(chemin);
  };

  const handleDeconnexion = () => {
    deconnecte();
    router.push("/auth/connexion");
  };

  return (
    <div className={styles.container} ref={containerRef}>
      <button type="button" className={styles.trigger} onClick={() => setOuvert((v) => !v)}>
        <span className={styles.avatar}>{initiales}</span>
        <span className={styles.infos}>
          <span className={styles.nom}>{user?.nom ?? "Administrateur"}</span>
          <span className={styles.role}>{user?.type ?? "ADMIN"}</span>
        </span>
        <ChevronDown size={16} className={`${styles.chevron} ${ouvert ? styles.chevronOuvert : ""}`} />
      </button>

      {ouvert && (
        <div className={styles.dropdown}>
          <button type="button" className={styles.item} onClick={() => allerA("/admin/profil")}>
            <UserIcon size={16} />
            <span>Mon profil</span>
          </button>
          <button type="button" className={styles.item} onClick={() => allerA("/admin/infos-utiles")}>
            <Settings size={16} />
            <span>Paramètres</span>
          </button>
          <div className={styles.divider} />
          <button
            type="button"
            className={`${styles.item} ${styles.itemDanger}`}
            onClick={() => {
              setOuvert(false);
              setConfirmDeconnexion(true);
            }}
          >
            <LogOut size={16} />
            <span>Déconnexion</span>
          </button>
        </div>
      )}

      <ConfirmDialog
        open={confirmDeconnexion}
        title="Se déconnecter ?"
        description="Vous devrez vous reconnecter pour accéder à l'espace admin."
        confirmLabel="Déconnexion"
        danger
        onConfirm={handleDeconnexion}
        onCancel={() => setConfirmDeconnexion(false)}
      />
    </div>
  );
}