"use client";

import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { ChevronDown, UserIcon } from "./icons";
import { BUSINESS_PORTAL_URL, CUSTOMER_PORTAL_URL } from "@/lib/config";
import { displayName, isAdmin } from "@/lib/authUser";
import type { AuthUser } from "@/lib/types";

// Desktop header account control. Anonymous: a plain link to the customer
// portal's login/register. Signed in: "نام عزیز" + a dropdown with پروفایل
// من / خروج, plus مدیریت وبسایت when the session looks like an admin's.
export default function AccountMenu({ user }: { user: AuthUser | null }) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

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

  if (!user) {
    return (
      <Link
        href={CUSTOMER_PORTAL_URL}
        className="flex h-11 items-center gap-2 rounded-xl border border-line px-3 text-[13px] transition hover:border-brand hover:text-brand"
      >
        <UserIcon className="size-5" />
        <span className="hidden sm:inline">ورود | ثبت نام</span>
      </Link>
    );
  }

  return (
    <div ref={ref} className="relative h-11">
      <button
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
        className="flex h-11 items-center gap-2 rounded-xl border border-line px-3 text-[13px] text-ink transition hover:border-brand hover:text-brand"
      >
        <UserIcon className="size-5" />
        <span className="hidden max-w-[120px] truncate sm:inline">{displayName(user)}</span>
        <ChevronDown className={`size-4 transition ${open ? "rotate-180" : ""}`} />
      </button>

      {open && (
        <div className="absolute left-0 top-full z-50 mt-2 w-44 overflow-hidden rounded-xl border border-line bg-white py-1 shadow-xl">
          <Link
            href={`${CUSTOMER_PORTAL_URL}/profile`}
            className="block px-4 py-2.5 text-[13px] text-ink-soft transition hover:bg-surface hover:text-brand"
          >
            پروفایل من
          </Link>
          {isAdmin(user) && (
            <Link
              href={BUSINESS_PORTAL_URL}
              className="block px-4 py-2.5 text-[13px] text-ink-soft transition hover:bg-surface hover:text-brand"
            >
              مدیریت وبسایت
            </Link>
          )}
          <Link
            href={`${CUSTOMER_PORTAL_URL}/logout`}
            className="block px-4 py-2.5 text-[13px] text-ink-soft transition hover:bg-surface hover:text-brand"
          >
            خروج
          </Link>
        </div>
      )}
    </div>
  );
}