import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { Loader2, RefreshCw, ChevronDown } from "lucide-react";

interface RequestUpdateMenuProps {
  onUpdateDevice: () => void;
  onUpdateRoom: () => void;
  onUpdateAll: () => void;
  loading?: boolean;
}

export function RequestUpdateMenu({
  onUpdateDevice,
  onUpdateRoom,
  onUpdateAll,
  loading,
}: RequestUpdateMenuProps) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="outline"
          disabled={loading}
          className="group relative overflow-hidden border-2 border-gray-300 bg-white text-gray-800 font-medium px-6 py-2.5 rounded-lg transition-all duration-300 hover:border-gray-400 hover:bg-gray-50 hover:shadow-lg hover:shadow-gray-200/50 hover:-translate-y-0.5 disabled:opacity-70 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none"
        >
          <div className="flex items-center gap-2">
            {loading ? (
              <Loader2 className="h-4 w-4 animate-spin text-gray-600" />
            ) : (
              <RefreshCw className="h-4 w-4 text-gray-600 transition-transform duration-300 group-hover:rotate-180" />
            )}
            <span className="text-sm font-semibold">
              {loading ? "Đang gửi..." : "Cập nhật"}
            </span>
            <ChevronDown className="h-4 w-4 text-gray-600 transition-transform duration-200 group-data-[state=open]:rotate-180" />
          </div>

          <div className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-gray-100/30 to-transparent transition-transform duration-700 group-hover:translate-x-full" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-56">
        <DropdownMenuItem onClick={onUpdateDevice} disabled={loading}>
          <RefreshCw className="h-4 w-4 mr-2" />
          <span>Cập nhật thiết bị cụ thể</span>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={onUpdateRoom} disabled={loading}>
          <RefreshCw className="h-4 w-4 mr-2" />
          <span>Cập nhật theo phòng</span>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={onUpdateAll} disabled={loading}>
          <RefreshCw className="h-4 w-4 mr-2" />
          <span>Cập nhật tất cả thiết bị</span>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}