OpenFlare/frontend/app/(main)/config-versions/components/cleanup-dialog.tsx

'use client';

import { useEffect } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { Loader2 } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';

import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

const cleanupSchema = z.object({
  keepCount: z.number().int().min(3, '最少保留 3 个历史快照'),
});

type CleanupFormValues = z.infer<typeof cleanupSchema>;

interface CleanupDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: (keepCount: number) => void;
  loading: boolean;
}

export function CleanupDialog({
  open,
  onOpenChange,
  onConfirm,
  loading,
}: CleanupDialogProps) {
  const form = useForm<CleanupFormValues>({
    resolver: zodResolver(cleanupSchema),
    defaultValues: { keepCount: 10 },
  });

  useEffect(() => {
    if (open) {
      form.reset({ keepCount: 10 });
    }
  }, [form, open]);

  const handleConfirm = form.handleSubmit((values) => {
    onConfirm(values.keepCount);
  });

  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>清理历史快照</AlertDialogTitle>
          <AlertDialogDescription>
            删除旧的历史快照配置，系统将始终保护当前已激活的版本不被删除。
          </AlertDialogDescription>
        </AlertDialogHeader>

        <div className='space-y-2'>
          <Label htmlFor='keepCount'>保留最近快照个数</Label>
          <Input
            id='keepCount'
            type='number'
            min={3}
            disabled={loading}
            {...form.register('keepCount', { valueAsNumber: true })}
          />
          <p className='text-xs text-muted-foreground'>
            默认为 10 个，最少需保留 3 个。
          </p>
          {form.formState.errors.keepCount ? (
            <p className='text-xs text-destructive'>
              {form.formState.errors.keepCount.message}
            </p>
          ) : null}
        </div>

        <AlertDialogFooter>
          <AlertDialogCancel disabled={loading}>取消</AlertDialogCancel>
          <Button
            variant='destructive'
            onClick={() => void handleConfirm()}
            disabled={loading}
          >
            {loading ? (
              <>
                <Loader2 className='size-4 animate-spin mr-1' />
                清理中...
              </>
            ) : (
              '确认清理'
            )}
          </Button>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}