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

'use client';

import { zodResolver } from '@hookform/resolvers/zod';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { Loader2 } from 'lucide-react';

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 { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import type { TlsCertificateItem } from '@/lib/services/openflare';
import { TlsCertificateService } from '@/lib/services/openflare';

import {
  defaultManualImportValues,
  type ManualImportFormValues,
  manualImportSchema,
} from './schemas';
import { getErrorMessage, toManualPayload } from './website-utils';

const certificatesQueryKey = ['openflare', 'tls-certificates'];

interface CertificateEditorDialogProps {
  certificateId: number | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSaved?: (certificate: TlsCertificateItem) => void;
  onConvert?: (certificate: TlsCertificateItem) => void;
}

export function CertificateEditorDialog({
  certificateId,
  open,
  onOpenChange,
  onSaved,
  onConvert,
}: CertificateEditorDialogProps) {
  const queryClient = useQueryClient();
  const form = useForm<ManualImportFormValues>({
    resolver: zodResolver(manualImportSchema),
    defaultValues: defaultManualImportValues,
  });

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

  const updateMutation = useMutation({
    mutationFn: (values: ManualImportFormValues) =>
      TlsCertificateService.update(
        certificateId as number,
        toManualPayload(values),
      ),
    onSuccess: async (certificate) => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: certificatesQueryKey }),
      ]);
      onSaved?.(certificate);
      handleClose();
    },
  });

  useEffect(() => {
    if (!open || !certificateQuery.data) return;
    form.reset({
      name: certificateQuery.data.name,
      cert_pem: certificateQuery.data.cert_pem,
      key_pem: certificateQuery.data.key_pem,
      remark: certificateQuery.data.remark || '',
    });
  }, [certificateQuery.data, form, open]);

  const handleSubmit = form.handleSubmit((values) => {
    updateMutation.mutate(values);
  });

  const handleClose = () => {
    updateMutation.reset();
    form.reset(defaultManualImportValues);
    onOpenChange(false);
  };

  const canConvert =
    certificateQuery.data?.provider === 'upload' &&
    certificateQuery.data.apply_status !== 'applying';

  return (
    <Dialog open={open} onOpenChange={(next) => !next && handleClose()}>
      <DialogContent className='max-w-2xl max-h-[90vh] overflow-y-auto'>
        <DialogHeader>
          <DialogTitle>编辑证书</DialogTitle>
          <DialogDescription>
            可以修改证书名称、备注，以及重新上传 PEM 证书和私钥内容。
          </DialogDescription>
        </DialogHeader>

        {certificateQuery.isLoading ? (
          <LoadingStateWithBorder description='加载证书内容中...' />
        ) : certificateQuery.isError ? (
          <ErrorInline
            message={getErrorMessage(certificateQuery.error)}
            className='justify-center'
          />
        ) : !certificateQuery.data ? (
          <EmptyStateWithBorder description='证书不存在，可能已被删除。' />
        ) : (
          <form
            id='certificate-editor-form'
            className='space-y-4'
            onSubmit={handleSubmit}
          >
            {updateMutation.isError ? (
              <p className='text-sm text-destructive'>
                {getErrorMessage(updateMutation.error)}
              </p>
            ) : null}

            <div className='grid gap-4 md:grid-cols-2'>
              <div className='space-y-2'>
                <Label>证书名称</Label>
                <Input {...form.register('name')} />
              </div>
              <div className='space-y-2'>
                <Label>备注</Label>
                <Input {...form.register('remark')} />
              </div>
            </div>

            <div className='space-y-2'>
              <Label>证书 PEM</Label>
              <Textarea
                className='min-h-32 font-mono text-xs'
                {...form.register('cert_pem')}
              />
            </div>

            <div className='space-y-2'>
              <Label>私钥 PEM</Label>
              <Textarea
                className='min-h-32 font-mono text-xs'
                {...form.register('key_pem')}
              />
            </div>

            <DialogFooter className='sm:justify-between'>
              <div>
                {canConvert ? (
                  <Button
                    type='button'
                    variant='outline'
                    onClick={() => {
                      if (certificateQuery.data) {
                        onConvert?.(certificateQuery.data);
                      }
                    }}
                    disabled={updateMutation.isPending}
                  >
                    转换来源
                  </Button>
                ) : null}
              </div>
              <div className='flex gap-2'>
                <Button type='button' variant='outline' onClick={handleClose}>
                  取消
                </Button>
                <Button type='submit' disabled={updateMutation.isPending}>
                  {updateMutation.isPending ? (
                    <>
                      <Loader2 className='mr-1 size-3.5 animate-spin' />
                      保存中...
                    </>
                  ) : (
                    '保存证书'
                  )}
                </Button>
              </div>
            </DialogFooter>
          </form>
        )}
      </DialogContent>
    </Dialog>
  );
}