import React from 'react';
import { Loader2 } from 'lucide-react';
import type { LucideIcon } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

type ActionTone = 'primary' | 'secondary' | 'danger' | 'neutral';

export type FloatingAction = {
  key: string;
  label: string;
  icon: LucideIcon;
  onClick: () => void;
  tone?: ActionTone;
  disabled?: boolean;
  loading?: boolean;
  ariaLabel?: string;
};

export function FloatingActionBar({ actions, className }: { actions: FloatingAction[]; className?: string }): React.ReactElement | null {
  if (!actions.length) {
    return null;
  }

  const toneClasses: Record<ActionTone, string> = {
    primary: 'bg-primary text-primary-foreground shadow-primary/25 hover:bg-primary/90 focus-visible:ring-primary/70 border border-primary/20',
    secondary: 'bg-[var(--tenant-surface-strong)] text-[var(--tenant-foreground)] shadow-slate-300/60 hover:bg-[var(--tenant-surface)] focus-visible:ring-slate-200 border border-[var(--tenant-border-strong)]',
    neutral: 'bg-white/90 text-slate-900 shadow-slate-200/80 hover:bg-white focus-visible:ring-slate-200 border border-slate-200 dark:bg-slate-800/80 dark:text-white dark:border-slate-700',
    danger: 'bg-rose-500 text-white shadow-rose-300/50 hover:bg-rose-600 focus-visible:ring-rose-200 border border-rose-400/80',
  };

  return (
    <div
      className={cn(
        'pointer-events-none fixed inset-x-4 bottom-[calc(env(safe-area-inset-bottom,0px)+72px)] z-50 sm:inset-auto sm:right-6 sm:bottom-6',
        className
      )}
      style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
    >
      <div className="pointer-events-auto flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-end">
        {actions.map((action) => {
          const Icon = action.icon;
          const tone = action.tone ?? 'primary';

          return (
            <Button
              key={action.key}
              size="lg"
              className={cn(
                'group flex h-11 w-11 items-center justify-center gap-0 rounded-full p-0 text-sm font-semibold shadow-lg transition-all duration-150 focus-visible:ring-2 focus-visible:ring-offset-2 sm:h-auto sm:w-auto sm:gap-2 sm:px-4 sm:py-2',
                toneClasses[tone]
              )}
              onClick={action.onClick}
              disabled={action.disabled || action.loading}
              aria-label={action.ariaLabel ?? action.label}
            >
              {action.loading ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                <Icon className="h-4 w-4" />
              )}
              <span className="hidden sm:inline">{action.label}</span>
            </Button>
          );
        })}
      </div>
    </div>
  );
}