OpenFlare/frontend/app/(main)/access-logs/components/cleanup-dialog.tsx

'use client';

import { useState } from 'react';
import { Loader2 } from 'lucide-react';

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';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

const CLEANUP_PRESETS = [3, 7, 30];

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

export function CleanupDialog({
  open,
  onOpenChange,
  onConfirm,
  loading,
}: CleanupDialogProps) {
  const [mode, setMode] = useState<string>('7');
  const [customDays, setCustomDays] = useState('14');
  const [error, setError] = useState<string | null>(null);

  const handleConfirm = () => {
    const retentionDays =
      mode === 'custom'
        ? Number.parseInt(customDays, 10)
        : Number.parseInt(mode, 10);

    if (!Number.isFinite(retentionDays) || retentionDays < 1) {
      setError('保留天数必须大于 0');
      return;
    }

    setError(null);
    onConfirm(retentionDays);
  };

  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>清理访问日志</AlertDialogTitle>
          <AlertDialogDescription>
            删除早于指定保留天数的访问日志记录，操作不可恢复。
          </AlertDialogDescription>
        </AlertDialogHeader>

        <div className='space-y-3'>
          <div className='space-y-1.5'>
            <Label>保留策略</Label>
            <Select value={mode} onValueChange={setMode}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {CLEANUP_PRESETS.map((days) => (
                  <SelectItem key={days} value={String(days)}>
                    保留最近 {days} 天
                  </SelectItem>
                ))}
                <SelectItem value='custom'>自定义天数</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {mode === 'custom' ? (
            <div className='space-y-1.5'>
              <Label htmlFor='customDays'>自定义保留天数</Label>
              <Input
                id='customDays'
                type='number'
                min={1}
                value={customDays}
                onChange={(e) => setCustomDays(e.target.value)}
                disabled={loading}
              />
            </div>
          ) : null}

          {error ? <p className='text-xs text-destructive'>{error}</p> : null}
        </div>

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