import { UserButton as ClerkUserButton } from '@clerk/clerk-react';
import { useAuth } from '@/contexts/AuthContext';
import { LayoutDashboard, UserCog, Settings, User, LogOut } from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Link } from 'react-router-dom';
import { useClerkAvailability } from '@/contexts/ClerkAvailabilityContext';

export function UserButton() {
  const { profile, signOut } = useAuth();
  const { isClerkAvailable } = useClerkAvailability();

  if (!isClerkAvailable) {
    if (!profile) {
      return (
        <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-muted-foreground border-2 border-border">
          <User className="w-5 h-5" />
        </div>
      );
    }

    return (
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary border-2 border-primary/20 hover:border-primary/50 transition-colors">
            {profile.full_name?.charAt(0) || profile.username?.charAt(0) || <User className="w-5 h-5" />}
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-56">
          <DropdownMenuLabel>
            <div className="flex flex-col space-y-1">
              <p className="text-sm font-medium leading-none">{profile.full_name || profile.username}</p>
              <p className="text-xs leading-none text-muted-foreground">@{profile.username} (Demo)</p>
            </div>
          </DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem asChild>
            <Link to="/profile" className="flex items-center gap-2 cursor-pointer">
              <User className="w-4 h-4" />
              <span>Hesap Yönetimi</span>
            </Link>
          </DropdownMenuItem>
          <DropdownMenuItem asChild>
            <Link to="/dashboard" className="flex items-center gap-2 cursor-pointer">
              <LayoutDashboard className="w-4 h-4" />
              <span>Kontrol Paneli</span>
            </Link>
          </DropdownMenuItem>
          {profile?.role === 'provider' && (
            <DropdownMenuItem asChild>
              <Link to="/provider/dashboard" className="flex items-center gap-2 cursor-pointer">
                <UserCog className="w-4 h-4" />
                <span>Sağlayıcı Paneli</span>
              </Link>
            </DropdownMenuItem>
          )}
          {profile?.role === 'admin' && (
            <DropdownMenuItem asChild>
              <Link to="/admin" className="flex items-center gap-2 cursor-pointer">
                <Settings className="w-4 h-4" />
                <span>Admin Paneli</span>
              </Link>
            </DropdownMenuItem>
          )}
          <DropdownMenuSeparator />
          <DropdownMenuItem onClick={() => signOut()} className="flex items-center gap-2 text-destructive focus:text-destructive cursor-pointer">
            <LogOut className="w-4 h-4" />
            <span>Çıkış Yap (Demo)</span>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    );
  }

  return (
    <ClerkUserButton 
      appearance={{
        elements: {
          avatarBox: 'w-10 h-10 border-2 border-primary/20 hover:border-primary/50 transition-colors',
          userButtonPopoverCard: 'shadow-lg border border-border',
          userButtonPopoverActionButton: 'hover:bg-muted transition-colors'
        }
      }}
      afterSignOutUrl="/"
      userProfileMode="modal"
    >
      <ClerkUserButton.MenuItems>
        <ClerkUserButton.Link
          label="Kontrol Paneli"
          labelIcon={<LayoutDashboard className="w-4 h-4" />}
          href="/dashboard"
        />
        {profile?.role === 'provider' && (
          <ClerkUserButton.Link
            label="Sağlayıcı Paneli"
            labelIcon={<UserCog className="w-4 h-4" />}
            href="/provider/dashboard"
          />
        )}
        {profile?.role === 'admin' && (
          <ClerkUserButton.Link
            label="Admin Paneli"
            labelIcon={<Settings className="w-4 h-4" />}
            href="/admin"
          />
        )}
      </ClerkUserButton.MenuItems>
    </ClerkUserButton>
  );
}
