OpenFlare/frontend/app/(main)/websites/components/certificate-detail-dialog.tsx

'use client';

import { useQuery } from '@tanstack/react-query';
import { Copy, Loader2 } from 'lucide-react';
import { toast } from 'sonner';

import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { EmptyStateWithBorder } from '@/components/layout/empty';
import { ErrorInline } from '@/components/layout/error';
import { LoadingStateWithBorder } from '@/components/layout/loading';
import { TlsCertificateService } from '@/lib/services/openflare';
import { formatDateTime } from '@/lib/utils';

import { WebsiteStatusBadge } from './status-badge';
import { getCertificateStatus, getErrorMessage } from './website-utils';

interface CertificateDetailDialogProps {
  certificateId: number | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onEdit: () => void;
  onDelete: () => void;
  deleting?: boolean;
}

export function CertificateDetailDialog({
  certificateId,
  open,
  onOpenChange,
  onEdit,
  onDelete,
  deleting = false,
}: CertificateDetailDialogProps) {
  const certificateQuery = useQuery({
    queryKey: ['openflare', 'tls-certificates', 'detail', certificateId],
    queryFn: () => TlsCertificateService.getById(certificateId as number),
    enabled: open && certificateId !== null,
  });

  const contentQuery = useQuery({
    queryKey: ['openflare', 'tls-certificates', 'content', certificateId],
    queryFn: () => TlsCertificateService.getContent(certificateId as number),
    enabled: open && certificateId !== null,
  });

  const certificate = certificateQuery.data;
  const content = contentQuery.data;
  const status = certificate ? getCertificateStatus(certificate) : null;
  const loading = certificateQuery.isLoading || contentQuery.isLoading;
  const hasError = certificateQuery.isError || contentQuery.isError;

  const handleCopy = async (value: string, message: string) => {
    try {
      await navigator.clipboard.writeText(value);
      toast.success(message);
    } catch (error) {
      toast.error(getErrorMessage(error));
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className='max-w-3xl max-h-[90vh] overflow-y-auto'>
        <DialogHeader>
          <DialogTitle>证书详情</DialogTitle>
          <DialogDescription>
            查看证书元信息、备注以及当前保存的 PEM 内容。
          </DialogDescription>
        </DialogHeader>

        {loading ? (
          <LoadingStateWithBorder description='加载证书详情中...' />
        ) : hasError ? (
          <ErrorInline
            message={getErrorMessage(
              certificateQuery.error ?? contentQuery.error,
            )}
            className='justify-center'
          />
        ) : !certificate || !content ? (
          <EmptyStateWithBorder description='证书不存在，可能已被删除。' />
        ) : (
          <div className='space-y-4'>
            <div className='grid gap-3 md:grid-cols-2'>
              <div className='rounded-lg border p-3'>
                <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
                  证书名称
                </p>
                <p className='mt-1 text-sm'>{certificate.name}</p>
              </div>
              <div className='rounded-lg border p-3'>
                <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
                  状态
                </p>
                <div className='mt-1'>
                  {status ? (
                    <WebsiteStatusBadge
                      label={status.label}
                      tone={status.tone}
                    />
                  ) : null}
                </div>
              </div>
              <div className='rounded-lg border p-3'>
                <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
                  生效时间
                </p>
                <p className='mt-1 text-sm'>
                  {formatDateTime(certificate.not_before)}
                </p>
              </div>
              <div className='rounded-lg border p-3'>
                <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
                  到期时间
                </p>
                <p className='mt-1 text-sm'>
                  {formatDateTime(certificate.not_after)}
                </p>
              </div>
            </div>

            <div className='rounded-lg border p-3'>
              <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
                备注
              </p>
              <p className='mt-1 text-sm'>{certificate.remark || '暂无备注'}</p>
            </div>

            <div className='space-y-3'>
              <div>
                <div className='mb-2 flex items-center justify-between'>
                  <p className='text-sm font-medium'>证书 PEM</p>
                  <Button
                    type='button'
                    variant='outline'
                    size='sm'
                    className='h-7 text-xs'
                    onClick={() =>
                      void handleCopy(content.cert_pem, '证书 PEM 已复制')
                    }
                  >
                    <Copy className='mr-1 size-3' />
                    复制
                  </Button>
                </div>
                <pre className='max-h-48 overflow-auto rounded-lg border bg-muted/40 p-3 text-xs break-all whitespace-pre-wrap'>
                  {content.cert_pem}
                </pre>
              </div>
              <div>
                <div className='mb-2 flex items-center justify-between'>
                  <p className='text-sm font-medium'>私钥 PEM</p>
                  <Button
                    type='button'
                    variant='outline'
                    size='sm'
                    className='h-7 text-xs'
                    onClick={() =>
                      void handleCopy(content.key_pem, '私钥 PEM 已复制')
                    }
                  >
                    <Copy className='mr-1 size-3' />
                    复制
                  </Button>
                </div>
                <pre className='max-h-48 overflow-auto rounded-lg border bg-muted/40 p-3 text-xs break-all whitespace-pre-wrap'>
                  {content.key_pem}
                </pre>
              </div>
            </div>
          </div>
        )}

        <DialogFooter>
          <Button
            type='button'
            variant='outline'
            onClick={() => onOpenChange(false)}
          >
            关闭
          </Button>
          <Button type='button' onClick={onEdit} disabled={!certificate}>
            编辑证书
          </Button>
          <Button
            type='button'
            variant='destructive'
            onClick={onDelete}
            disabled={!certificate || deleting}
          >
            {deleting ? (
              <>
                <Loader2 className='mr-1 size-3.5 animate-spin' />
                删除中...
              </>
            ) : (
              '删除证书'
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}