// @design-system: layout/ProfileBadge
'use client';

import { cn } from '@/lib/cn';
import { formatPhoneHintLabel } from '@/lib/phone.js';
import { useT } from '@/lib/i18n/react';
import { Icon } from '@/components/ui/icons/Icon';
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuDestructiveItem,
  DropdownMenuSeparator,
} from '@/components/ui/overlays/DropdownMenu';
import { useLogout } from '@/components/ui/primitives/LogoutButton/useLogout';

export interface ProfileBadgeProps {
  /** User display name from SSR session. undefined = guest or no name set. */
  userName?: string;
  /** Last 3 digits of phone — fallback label when no displayName. */
  phoneHint?: string;
  /** True when no session exists. */
  isGuest: boolean;
  /** True = show My Business link in menu. */
  isVendor?: boolean;
  /** True = show Admin Dashboard link in menu. */
  isAdmin?: boolean;
  /** True = show Affiliate Program link in menu. */
  isAffiliate?: boolean;
}

function AvatarCircle({ initial }: { initial?: string }) {
  return (
    <span
      aria-hidden="true"
      className={cn(
        'flex h-8 w-8 shrink-0 items-center justify-center rounded-full',
        'bg-brand-primary-100 text-brand-primary-700 text-sm font-semibold',
      )}
    >
      {initial ?? <Icon name="User" size="sm" />}
    </span>
  );
}

export function ProfileBadge({
  userName,
  phoneHint,
  isGuest,
  isVendor = false,
  isAdmin = false,
  isAffiliate = false,
}: ProfileBadgeProps) {
  const tNav = useT('nav');
  const tCommon = useT('common');
  const { logout, loading } = useLogout();

  const initial = !isGuest && userName ? Array.from(userName)[0] : undefined;
  const phoneLabel = phoneHint ? formatPhoneHintLabel(phoneHint) : undefined;
  const label = isGuest
    ? tNav('profile_menu_guest')
    : userName || phoneLabel || tNav('profile_menu_my_account');

  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        className={cn(
          'group flex items-center gap-2 rounded-full px-3 py-1.5',
          'text-text-primary text-sm font-medium',
          'hover:bg-surface-hover focus-visible:outline-brand-primary-600',
          'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
          'data-[state=open]:bg-surface-hover transition-colors',
        )}
        aria-label={label}
      >
        <AvatarCircle initial={initial} />
        <span className="max-w-32 truncate" data-user-displayname>
          {label}
        </span>
        <span className="shrink-0 transition-transform group-data-[state=open]:rotate-180">
          <Icon name="ChevronDown" size="sm" />
        </span>
      </DropdownMenuTrigger>

      <DropdownMenuContent align="end" sideOffset={8} className="min-w-52">
        {isGuest ? (
          <>
            <DropdownMenuItem asChild>
              <a
                href="/login"
                className="flex items-center gap-2 no-underline"
                onClick={(e) => {
                  e.preventDefault();
                  const path = window.location.pathname + window.location.search;
                  const target =
                    path && path !== '/login'
                      ? `/login?redirect=${encodeURIComponent(path)}`
                      : '/login';
                  window.location.href = target;
                }}
              >
                <Icon name="LogIn" size="sm" />
                {tCommon('login')}
              </a>
            </DropdownMenuItem>
            <DropdownMenuItem asChild>
              <a href="/register" className="flex items-center gap-2 no-underline">
                <Icon name="UserPlus" size="sm" />
                {tCommon('register')}
              </a>
            </DropdownMenuItem>
          </>
        ) : (
          <>
            <DropdownMenuItem asChild>
              <a href="/purchases" className="flex items-center gap-2 no-underline">
                <Icon name="ShoppingBag" size="sm" />
                {tNav('purchases')}
              </a>
            </DropdownMenuItem>
            <DropdownMenuItem asChild>
              <a href="/favorites" className="flex items-center gap-2 no-underline">
                <Icon name="Heart" size="sm" />
                {tNav('favorites')}
              </a>
            </DropdownMenuItem>
            <DropdownMenuItem asChild>
              <a href="/profile" className="flex items-center gap-2 no-underline">
                <Icon name="User" size="sm" />
                {tNav('profile')}
              </a>
            </DropdownMenuItem>
            <DropdownMenuItem asChild>
              <a href="/settings" className="flex items-center gap-2 no-underline">
                <Icon name="Settings" size="sm" />
                {tNav('settings')}
              </a>
            </DropdownMenuItem>
            <DropdownMenuItem asChild>
              <a href="/wishlist" className="flex items-center gap-2 no-underline">
                <Icon name="Heart" size="sm" />
                {tNav('wishlist')}
              </a>
            </DropdownMenuItem>
            <DropdownMenuItem asChild>
              <a href="/cases" className="flex items-center gap-2 no-underline">
                <Icon name="FileText" size="sm" />
                {tNav('cases')}
              </a>
            </DropdownMenuItem>
            <DropdownMenuItem asChild>
              <a href="/whats-left" className="flex items-center gap-2 no-underline">
                <Icon name="Clock" size="sm" />
                {tNav('whats_left')}
              </a>
            </DropdownMenuItem>
          </>
        )}

        {/* Visible to all users — guests accumulate localStorage history */}
        <DropdownMenuSeparator />
        <DropdownMenuItem asChild>
          <a href="/recently-viewed" className="flex items-center gap-2 no-underline">
            <Icon name="Clock" size="sm" />
            {tNav('recently_viewed')}
          </a>
        </DropdownMenuItem>

        {/* Auth-only: role links + logout. Language toggle lives in navbar (compact HE/EN). */}
        {!isGuest && (
          <>
            <DropdownMenuSeparator />
            {isVendor && (
              <DropdownMenuItem asChild>
                <a href="/vendor" className="flex items-center gap-2 no-underline">
                  <Icon name="Store" size="sm" />
                  {tCommon('vendor_badge')}
                </a>
              </DropdownMenuItem>
            )}
            {isAffiliate && !isAdmin && (
              <DropdownMenuItem asChild>
                <a href="/affiliate" className="flex items-center gap-2 no-underline">
                  <Icon name="Users" size="sm" />
                  {tNav('profile_menu_affiliate_dashboard')}
                </a>
              </DropdownMenuItem>
            )}
            {isAdmin && (
              <DropdownMenuItem asChild>
                <a href="/admin" data-astro-reload className="flex items-center gap-2 no-underline">
                  <Icon name="Settings" size="sm" />
                  {tNav('profile_menu_admin_dashboard')}
                </a>
              </DropdownMenuItem>
            )}
            {(isVendor || isAdmin || (isAffiliate && !isAdmin)) && <DropdownMenuSeparator />}
            <DropdownMenuDestructiveItem
              onClick={() => void logout()}
              disabled={loading}
              className="flex items-center gap-2"
            >
              <Icon name="LogOut" size="sm" />
              {tCommon('logout')}
            </DropdownMenuDestructiveItem>
          </>
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}