zapishis-client/apps/web/components/shared/action-panel.tsx

'use client';

import { Button } from '@repo/ui/components/ui/button';
import { Card } from '@repo/ui/components/ui/card';
import { Ban, Check, Lock, RotateCcw, Trash2, Undo, Unlock } from 'lucide-react';

type FloatingActionPanelProps = {
  readonly isLoading?: boolean;
  readonly isOpen?: boolean;
  readonly onCancel?: () => void;
  readonly onComplete?: () => void;
  readonly onConfirm?: () => void;
  readonly onDelete?: () => void;
  readonly onRepeat?: () => void;
  readonly onReturn?: () => void;
  readonly onToggle?: () => void;
};

export default function FloatingActionPanel({
  isLoading = false,
  isOpen,
  onCancel,
  onComplete,
  onConfirm,
  onDelete,
  onRepeat,
  onReturn,
  onToggle,
}: FloatingActionPanelProps) {
  // Если не переданы обработчики, скрываем панель
  if (!onCancel && !onConfirm && !onDelete && !onComplete && !onRepeat && !onToggle && !onReturn)
    return null;

  return (
    <Card className="fixed inset-x-4 bottom-4 z-50 rounded-3xl border-0 bg-background/95 p-4 shadow-2xl backdrop-blur-sm dark:bg-primary/5 md:bottom-6 md:left-auto md:right-6 md:p-6">
      <div className="flex flex-col items-center gap-2 sm:flex-row sm:gap-4">
        {/* Кнопка закрыть/открыть */}
        {onToggle && (
          <Button
            className={`
              w-full rounded-2xl text-sm transition-all duration-200 sm:w-auto
              ${
                isOpen
                  ? 'bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700'
                  : 'bg-gray-500 text-white hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-700'
              }
            `}
            disabled={isLoading}
            onClick={onToggle}
            size="sm"
          >
            {isOpen ? (
              <>
                <Lock className="mr-2 size-4" />
                <span>Закрыть</span>
              </>
            ) : (
              <>
                <Unlock className="mr-2 size-4" />
                <span>Открыть</span>
              </>
            )}
          </Button>
        )}

        {/* Кнопка повторить */}
        {onRepeat && (
          <Button
            className="w-full rounded-2xl bg-purple-500 text-sm text-white transition-all duration-200 hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700 sm:w-auto"
            disabled={isLoading}
            onClick={onRepeat}
            size="sm"
          >
            <RotateCcw className="mr-2 size-4" />
            <span>Повторить</span>
          </Button>
        )}

        {/* Кнопка выполнено */}
        {onComplete && (
          <Button
            className="w-full rounded-2xl bg-green-500 text-sm text-white transition-all duration-200 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 sm:w-auto"
            disabled={isLoading}
            onClick={onComplete}
            size="sm"
          >
            <Check className="mr-2 size-4" />
            <span>Завершить</span>
          </Button>
        )}

        {/* Кнопка удалить */}
        {onDelete && (
          <Button
            className="w-full rounded-2xl bg-orange-500 text-sm text-white transition-all duration-200 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 sm:w-auto"
            disabled={isLoading}
            onClick={onDelete}
            size="sm"
          >
            <Trash2 className="mr-2 size-4" />
            <span>Удалить</span>
          </Button>
        )}

        {/* Кнопка отменить */}
        {onCancel && (
          <Button
            className="w-full rounded-2xl bg-red-500 text-sm text-white transition-all duration-200 hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700 sm:w-auto"
            disabled={isLoading}
            onClick={onCancel}
            size="sm"
          >
            <Ban className="mr-2 size-4" />
            <span>Отменить</span>
          </Button>
        )}

        {/* Кнопка подтвердить */}
        {onConfirm && (
          <Button
            className="w-full rounded-2xl bg-green-600 text-sm text-white shadow-lg transition-all duration-200 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600 sm:w-auto"
            disabled={isLoading}
            onClick={onConfirm}
            size="sm"
          >
            <Check className="mr-2 size-4" />
            <span>Подтвердить</span>
          </Button>
        )}

        {/* Кнопка вернуть */}
        {onReturn && (
          <Button
            className="w-full rounded-2xl bg-blue-400 text-sm text-white transition-all duration-200 hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600 sm:w-auto"
            disabled={isLoading}
            onClick={onReturn}
            size="sm"
          >
            <Undo className="mr-2 size-4" />
            <span>Вернуть</span>
          </Button>
        )}
      </div>
    </Card>
  );
}