"use client";

import Link from "next/link";
import { useEffect, useRef, useState } from "react";

import type { SessionUser } from "@/lib/session";
import { SubmitButton } from "@/components/common/SubmitButton";

type Props = {
  user: SessionUser;
  logoutAction: () => Promise<void> | void;
};

function getInitials(input: string): string {
  const parts = input
    .replace(/@.*$/, "")
    .split(/[.\s_-]+/)
    .filter(Boolean);
  if (parts.length === 0) return "A";
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
  return (parts[0][0] + parts[1][0]).toUpperCase();
}

/**
 * Avatar popover sa user info-om i logout dugmetom. Zamenjuje vidljivu
 * "email • role • dozvole" pločicu — sada je minimalan avatar krug u
 * topbar-u, klik otvara popover sa detaljima i logout-om.
 */
export function AdminUserMenu({ user, logoutAction }: Props) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement | null>(null);

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

  const initials = getInitials(user.name || user.email);

  return (
    <div ref={ref} className="relative">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
        aria-label="Korisnički meni"
        className="flex h-10 w-10 items-center justify-center rounded-full bg-foreground text-[0.78rem] font-bold text-white shadow-sm transition hover:opacity-90"
      >
        {initials}
      </button>

      {open && (
        <div className="absolute right-0 top-12 z-50 w-72 overflow-hidden rounded-2xl border border-border bg-white shadow-[0_24px_60px_rgba(12,24,40,0.18)]">
          <div className="border-b border-border px-4 py-4">
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-foreground text-[0.78rem] font-bold text-white">
                {initials}
              </div>
              <div className="min-w-0">
                <p className="truncate text-sm font-semibold text-foreground">
                  {user.name || user.email}
                </p>
                <p className="truncate text-xs text-muted-foreground">{user.email}</p>
              </div>
            </div>
            <div className="mt-3 flex flex-wrap gap-1.5">
              <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[0.68rem] font-bold text-primary">
                {user.role}
              </span>
              <span className="rounded-full bg-zinc-100 px-2 py-0.5 text-[0.68rem] font-semibold text-foreground">
                {user.permissions.length || "Sve"} dozvola
              </span>
            </div>
          </div>

          <div className="py-1">
            <Link
              href="/admin/korisnici"
              onClick={() => setOpen(false)}
              className="block px-4 py-2.5 text-sm text-foreground transition hover:bg-zinc-50"
            >
              Upravljaj timom
            </Link>
            <Link
              href="/admin/podesavanja"
              onClick={() => setOpen(false)}
              className="block px-4 py-2.5 text-sm text-foreground transition hover:bg-zinc-50"
            >
              Podešavanja portala
            </Link>
          </div>

          <div className="border-t border-border">
            <form action={logoutAction}>
              <SubmitButton
                className="block w-full px-4 py-3 text-left text-sm font-semibold text-rose-600 transition hover:bg-rose-50"
              >
                Odjava
              </SubmitButton>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}