OpenFlare/frontend/app/(main)/waf/components/ip-group-view-dialog.tsx

'use client';

import { Loader2, Trash2 } from 'lucide-react';
import { useMemo, useState } from 'react';

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { EmptyStateWithBorder } from '@/components/layout/empty';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import type { WAFIPGroup } from '@/lib/services/openflare';
import { formatDateTime } from '@/lib/utils';

import {
  getIPGroupViewEntries,
  ipGroupTypeLabels,
  type IPGroupViewEntry,
} from './helpers';

interface IPGroupViewDialogProps {
  open: boolean;
  group: WAFIPGroup | null;
  loading: boolean;
  removingIp: string | null;
  onOpenChange: (open: boolean) => void;
  onRemoveIp: (ip: string) => Promise<void>;
}

export function IPGroupViewDialog({
  open,
  group,
  loading,
  removingIp,
  onOpenChange,
  onRemoveIp,
}: IPGroupViewDialogProps) {
  const [deleteTarget, setDeleteTarget] = useState<IPGroupViewEntry | null>(
    null,
  );

  const entries = useMemo(
    () => (group ? getIPGroupViewEntries(group) : []),
    [group],
  );

  const showAutomaticMeta = group?.type === 'automatic';

  return (
    <>
      <Dialog
        open={open}
        onOpenChange={(nextOpen) => {
          onOpenChange(nextOpen);
          if (!nextOpen) {
            setDeleteTarget(null);
          }
        }}
      >
        <DialogContent className='max-w-3xl max-h-[90vh] overflow-y-auto'>
          <DialogHeader>
            <DialogTitle>
              {group ? `查看 ${group.name}` : '查看 IP 组'}
            </DialogTitle>
            <DialogDescription>
              {group
                ? `${ipGroupTypeLabels[group.type]} · 共 ${entries.length} 条 IP`
                : '查看当前 IP 组中的 IP 列表，并可移除不需要的条目。'}
            </DialogDescription>
          </DialogHeader>

          {loading ? (
            <div className='flex items-center justify-center gap-2 py-12 text-sm text-muted-foreground'>
              <Loader2 className='size-4 animate-spin' />
              加载 IP 列表...
            </div>
          ) : !group ? (
            <p className='py-8 text-center text-sm text-muted-foreground'>
              未选择 IP 组。
            </p>
          ) : entries.length === 0 ? (
            <EmptyStateWithBorder
              description={
                group.type === 'automatic'
                  ? '该自动规则暂未抓取任何 IP，可点击「立即执行」手动触发抓取。'
                  : '当前 IP 组暂无 IP 条目。'
              }
            />
          ) : (
            <div className='space-y-3'>
              {group.type === 'subscription' ? (
                <p className='text-xs text-muted-foreground'>
                  订阅类型在下次同步时可能重新拉取已删除的 IP。
                </p>
              ) : null}
              <div className='rounded-lg border border-dashed'>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>IP 地址</TableHead>
                      {showAutomaticMeta ? (
                        <>
                          <TableHead>抓取时间</TableHead>
                          <TableHead>封禁剩余</TableHead>
                        </>
                      ) : null}
                      <TableHead className='w-[80px] text-right'>
                        操作
                      </TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {entries.map((entry) => (
                      <TableRow key={entry.ip}>
                        <TableCell className='font-mono text-sm'>
                          {entry.ip}
                        </TableCell>
                        {showAutomaticMeta ? (
                          <>
                            <TableCell className='text-sm text-muted-foreground'>
                              {entry.capturedAt
                                ? formatDateTime(entry.capturedAt)
                                : '—'}
                            </TableCell>
                            <TableCell className='text-sm'>
                              {entry.banRemaining ?? '—'}
                            </TableCell>
                          </>
                        ) : null}
                        <TableCell className='text-right'>
                          <Button
                            type='button'
                            variant='ghost'
                            size='icon'
                            className='size-8 text-destructive hover:text-destructive'
                            disabled={removingIp === entry.ip}
                            onClick={() => setDeleteTarget(entry)}
                          >
                            {removingIp === entry.ip ? (
                              <Loader2 className='size-4 animate-spin' />
                            ) : (
                              <Trash2 className='size-4' />
                            )}
                            <span className='sr-only'>删除 {entry.ip}</span>
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </div>
          )}

          <DialogFooter>
            <Button
              type='button'
              variant='outline'
              onClick={() => onOpenChange(false)}
            >
              关闭
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <AlertDialog
        open={Boolean(deleteTarget)}
        onOpenChange={(nextOpen) => !nextOpen && setDeleteTarget(null)}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>确认删除 IP</AlertDialogTitle>
            <AlertDialogDescription>
              确认从 IP 组「{group?.name}」中移除 {deleteTarget?.ip} 吗？
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={Boolean(removingIp)}>
              取消
            </AlertDialogCancel>
            <AlertDialogAction
              className='bg-destructive text-white hover:bg-destructive/90'
              disabled={Boolean(removingIp)}
              onClick={async () => {
                if (!deleteTarget) return;
                await onRemoveIp(deleteTarget.ip);
                setDeleteTarget(null);
              }}
            >
              {removingIp ? '删除中...' : '确认删除'}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}