"use client";

import { useState } from "react";
import { isAdminUser, useAuthUser } from "@/lib/auth";
import { BUSINESS_URL, CUSTOMER_URL, customerLoginUrl } from "@/lib/site";

export function UserMenu() {
  const { user, ready, isLoggedIn, logout } = useAuthUser();
  const [open, setOpen] = useState(false);

  if (!ready) {
    return <div className="user-menu" aria-hidden />;
  }

  if (!isLoggedIn) {
    return (
      <a className="user-menu-icon" href={customerLoginUrl()} aria-label="Login">
        <UserGlyph />
      </a>
    );
  }

  const name = [user?.firstName, user?.lastName].filter(Boolean).join(" ") || "کاربر";

  return (
    <div className="user-menu">
      <button
        type="button"
        className="user-menu-trigger"
        aria-expanded={open}
        onClick={() => setOpen((value) => !value)}
      >
        <UserGlyph />
        <span>
          {name} عزیز
        </span>
      </button>
      {open ? (
        <div className="user-menu-dropdown" dir="rtl">
          <a href={`${CUSTOMER_URL}/profile`}>پروفایل من</a>
          {isAdminUser(user) ? <a href={BUSINESS_URL}>مدیریت وبسایت</a> : null}
          <button type="button" onClick={logout}>
            خروج
          </button>
        </div>
      ) : null}
    </div>
  );
}

function UserGlyph() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden>
      <circle cx="12" cy="8" r="3.25" stroke="currentColor" strokeWidth="2" />
      <path
        d="M5.2 19.2c.85-3.15 3.4-5 6.8-5s5.95 1.85 6.8 5"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
      />
    </svg>
  );
}