'use client';

/**
 * HeaderAuthButton Component
 * 
 * Interactive client island for header authentication triggers.
 * Renders standard "Log In" button when unauthenticated, and a premium Shadcn DropdownMenu
 * with Avatar when authenticated.
 */

import React from 'react';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/lib/stores/useAuthStore';
import type { User } from '@shinecode/api-client/types';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
} from '@/components/ui/dropdown-menu';
import { Calendar, Headphones, LogOut, LayoutDashboard } from 'lucide-react';

interface HeaderAuthButtonProps {
  loginText?: string;
  user?: User | null;
  locale?: string;
}

export function HeaderAuthButton({
  loginText = 'Log In',
  user: propUser,
  locale = 'en',
}: HeaderAuthButtonProps) {
  const router = useRouter();
  const { isAuthenticated, user: storeUser, openAuthModal, logout } = useAuthStore();
  const isAr = locale === 'ar';

  const currentUser = propUser !== undefined ? propUser : (isAuthenticated ? storeUser : null);

  if (currentUser) {
    const firstName = currentUser.first_name || '';
    const lastName = currentUser.last_name || '';
    const fullName = `${firstName} ${lastName}`.trim() || currentUser.username || currentUser.email || 'My Account';
    const initials = (firstName.charAt(0) + (lastName ? lastName.charAt(0) : '')).toUpperCase() || 'U';

    const userType = String(currentUser.user_type || 'user').toLowerCase();
    const isStaffOrProvider = ['provider', 'handyman', 'admin', 'demo_admin', 'agent'].includes(userType);

    const handleLogout = () => {
      logout();
      router.push(`/${locale}`);
    };

    return (
      <DropdownMenu>
        <DropdownMenuTrigger className="group rounded-full focus:outline-none">
          <Avatar size="md" className="cursor-pointer ring-2 ring-zinc-200 dark:ring-zinc-800 group-hover:ring-brand-500 transition-all duration-200 shadow-2xs">
            {currentUser.avatar && (
              <AvatarImage src={currentUser.avatar} alt={fullName} />
            )}
            <AvatarFallback className="bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-white font-bold text-xs">
              {initials}
            </AvatarFallback>
          </Avatar>
        </DropdownMenuTrigger>

        <DropdownMenuContent align="end" className="w-60 p-2">
          <DropdownMenuLabel className="pb-1.5 pt-1">
            <div className="font-extrabold text-sm text-zinc-900 dark:text-white truncate">
              {fullName}
            </div>
            <div className="flex items-center gap-1.5 mt-0.5">
              <span className="text-[11px] font-normal text-zinc-400 dark:text-zinc-500 truncate lowercase">
                {currentUser.email}
              </span>
              {isStaffOrProvider && (
                <span className="px-1.5 py-0.5 text-[10px] font-bold uppercase rounded bg-brand-50 text-brand-600 dark:bg-brand-950/60 dark:text-brand-400 border border-brand-200 dark:border-brand-800">
                  {currentUser.user_type}
                </span>
              )}
            </div>
          </DropdownMenuLabel>

          <DropdownMenuSeparator />

          {isStaffOrProvider ? (
            <DropdownMenuItem onClick={() => { window.location.href = '/home'; }}>
              <LayoutDashboard className="w-4 h-4 text-zinc-500 dark:text-zinc-400 shrink-0" />
              <span className="font-semibold">{isAr ? 'لوحة التحكم' : 'My Dashboard'}</span>
            </DropdownMenuItem>
          ) : (
            <DropdownMenuItem onClick={() => router.push(`/${locale}/dashboard`)}>
              <Calendar className="w-4 h-4 text-zinc-500 dark:text-zinc-400 shrink-0" />
              <span className="font-semibold">{isAr ? 'حجوزاتي' : 'My Bookings'}</span>
            </DropdownMenuItem>
          )}

          <DropdownMenuItem onClick={() => window.open('https://wa.me/971500000000', '_blank')}>
            <Headphones className="w-4 h-4 text-zinc-500 dark:text-zinc-400 shrink-0" />
            <span className="font-semibold">{isAr ? 'الدعم والمساعدة' : 'Support'}</span>
          </DropdownMenuItem>

          <DropdownMenuSeparator />

          <DropdownMenuItem destructive onClick={handleLogout}>
            <LogOut className="w-4 h-4 text-rose-600 dark:text-rose-400 shrink-0" />
            <span className="font-semibold">{isAr ? 'تسجيل الخروج' : 'Log Out'}</span>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    );
  }

  return (
    <button
      type="button"
      onClick={() => openAuthModal('login')}
      className="text-sm font-semibold text-slate-700 dark:text-zinc-300 hover:text-brand-500 dark:hover:text-brand-400 transition-colors px-3 py-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 cursor-pointer"
    >
      {loginText}
    </button>
  );
}

export default HeaderAuthButton;