'use client';

import { useEffect, useRef, useState } from 'react';
import { LogOut, User } from 'lucide-react';
import type { AuthUser } from '@/lib/auth';

export function ShellUserMenu({
  user,
  onLogout,
  roleSubtitle,
}: {
  user: AuthUser | null;
  onLogout: () => void;
  roleSubtitle?: string;
}) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

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

  const initial = user?.name?.[0]?.toUpperCase() || 'K';

  return (
    <div className="relative" ref={ref}>
      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        className="flex items-center gap-2.5 rounded-full border border-slate-200/90 bg-white py-1 pl-1 pr-3 text-left text-slate-800 shadow-sm transition hover:border-slate-300 hover:bg-slate-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800/80"
      >
        <span className="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-shell-sidebar to-[#125e60] text-[12px] font-semibold text-white shadow-sm dark:from-shell-sidebar-dark dark:to-shell-sidebar">
          {initial}
        </span>
        <span className="hidden min-w-0 sm:block">
          <span className="block max-w-[120px] truncate text-left text-[13px] font-semibold leading-tight text-slate-900 dark:text-white">
            {user?.name || 'Kullanıcı'}
          </span>
          {roleSubtitle ? (
            <span className="block max-w-[120px] truncate text-left text-[11px] font-medium text-slate-500 dark:text-zinc-400">
              {roleSubtitle}
            </span>
          ) : null}
        </span>
        <svg
          className={`hidden h-4 w-4 shrink-0 text-slate-400 sm:block ${open ? 'rotate-180' : ''} transition-transform dark:text-zinc-500`}
          viewBox="0 0 18 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M4.3125 8.65625L9 13.3437L13.6875 8.65625" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </button>

      {open ? (
        <div className="absolute right-0 z-[100] mt-2 w-64 rounded-2xl border border-slate-200/90 bg-white p-2 shadow-theme-lg dark:border-zinc-700 dark:bg-zinc-950">
          <div className="border-b border-slate-100 px-2 pb-2.5 pt-1 dark:border-zinc-800">
            <p className="text-[13px] font-semibold text-slate-900 dark:text-white">{user?.name || 'Kullanıcı'}</p>
            {roleSubtitle ? <p className="mt-0.5 text-[11px] font-medium text-slate-500 dark:text-zinc-400">{roleSubtitle}</p> : null}
            <p className="mt-1 truncate text-xs text-slate-500 dark:text-zinc-400">{user?.email}</p>
          </div>
          <ul className="py-1.5">
            <li>
              <span className="flex items-center gap-2 rounded-xl px-3 py-2 text-[13px] text-slate-500 dark:text-zinc-400">
                <User className="h-4 w-4" strokeWidth={1.75} />
                Profil (yakında)
              </span>
            </li>
          </ul>
          <button
            type="button"
            onClick={() => {
              setOpen(false);
              onLogout();
            }}
            className="flex w-full items-center gap-2 rounded-xl px-3 py-2 text-[13px] font-medium text-slate-700 hover:bg-slate-50 dark:text-zinc-200 dark:hover:bg-zinc-900"
          >
            <LogOut className="h-4 w-4" strokeWidth={1.75} />
            Çıkış yap
          </button>
        </div>
      ) : null}
    </div>
  );
}