"use client"

import * as React from "react"
import { Plus, TrendingUp, Wallet, Receipt } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

interface FABAction {
  icon: React.ReactNode
  label: string
  onClick: () => void
  variant?: "default" | "outline" | "secondary"
}

interface FloatingActionButtonProps {
  actions: FABAction[]
  className?: string
}

export function FloatingActionButton({ actions, className }: FloatingActionButtonProps) {
  const [isOpen, setIsOpen] = React.useState(false)

  const toggleMenu = () => setIsOpen(!isOpen)

  const handleActionClick = (action: FABAction) => {
    action.onClick()
    setIsOpen(false)
  }

  return (
    <>
      {/* Backdrop Overlay */}
      {isOpen && (
        <div 
          className="fixed inset-0 bg-black/40 backdrop-blur-xs z-40 animate-in fade-in duration-200"
          onClick={() => setIsOpen(false)}
        />
      )}

      {/* FAB Container */}
      <div className={cn("fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3", className)}>
        {/* Main FAB Button - Always at bottom */}
        <Button
          size="lg"
          onClick={toggleMenu}
          className={cn(
            "h-16 w-16 rounded-full shadow-2xl hover:scale-110 transition-all duration-200 order-last",
            isOpen && "rotate-45"
          )}
        >
          <Plus className="h-6 w-6" />
        </Button>

        {/* Action Menu - Above main button */}
        {isOpen && (
          <div className="flex flex-col gap-3 animate-in fade-in slide-in-from-bottom-2 duration-200">
            {actions.map((action, index) => (
              <div key={index} className="flex items-center gap-3 justify-end">
                {/* Label */}
                <span className="bg-background border shadow-lg rounded-lg px-3 py-2 text-sm font-medium whitespace-nowrap">
                  {action.label}
                </span>
                {/* Action Button */}
                <Button
                  size="lg"
                  variant={action.variant || "secondary"}
                  onClick={() => handleActionClick(action)}
                  className="h-14 w-14 rounded-full shadow-lg hover:scale-110 transition-transform px-0"
                >
                  {action.icon}
                </Button>
              </div>
            ))}
          </div>
        )}
      </div>
    </>
  )
}

// Export icons for convenience
export { TrendingUp as FABTrendingUpIcon, Wallet as FABWalletIcon, Receipt as FABReceiptIcon }