"use client";

import { ChevronDown, LayoutDashboard, LogOut, UserRound } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { useAuth } from "@/components/auth-provider";
import { BUSINESS_URL, CUSTOMER_URL } from "@/lib/meshkee";

export function UserMenu() {
  const { user, loading, isAdmin, logout } = useAuth();
  const [open, setOpen] = useState(false);
  const rootRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const close = (event: MouseEvent) => {
      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
    };
    document.addEventListener("mousedown", close);
    return () => document.removeEventListener("mousedown", close);
  }, []);

  if (loading || !user) {
    return (
      <a className="login-link" href={CUSTOMER_URL} aria-label="ورود به حساب کاربری">
        <UserRound />
      </a>
    );
  }

  const displayName = user.firstName || user.name || user.cellNumber || "کاربر";

  return (
    <div className="user-menu" ref={rootRef}>
      <button
        type="button"
        className="user-menu-trigger"
        onClick={() => setOpen((value) => !value)}
        aria-expanded={open}
      >
        <UserRound />
        <span>{displayName} عزیز</span>
        <ChevronDown className={open ? "rotated" : ""} />
      </button>

      {open && (
        <div className="user-dropdown">
          <a href={`${CUSTOMER_URL}/profile`}>
            <UserRound />
            پروفایل من
          </a>
          {isAdmin && (
            <a href={BUSINESS_URL}>
              <LayoutDashboard />
              مدیریت وب‌سایت
            </a>
          )}
          <button type="button" onClick={logout}>
            <LogOut />
            خروج
          </button>
        </div>
      )}
    </div>
  );
}