OpenFlare/frontend/app/(main)/certificates/page.tsx

'use client';

import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
import {useMemo, useState} from 'react';
import {FileKey, Plus, RefreshCw, Trash2} from 'lucide-react';
import {toast} from 'sonner';

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import {Button} from '@/components/ui/button';
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
import {EmptyStateWithBorder} from '@/components/layout/empty';
import {ErrorInline} from '@/components/layout/error';
import {LoadingStateWithBorder} from '@/components/layout/loading';
import type {TlsCertificateItem} from '@/lib/services/openflare';
import {TlsCertificateService} from '@/lib/services/openflare';
import {formatDateTime} from '@/lib/utils';

import {CertificateApplyDialog} from '../websites/components/certificate-apply-dialog';
import {CertificateDetailDialog} from '../websites/components/certificate-detail-dialog';
import {CertificateEditorDialog} from '../websites/components/certificate-editor-dialog';
import {CertificateImportDialog} from '../websites/components/certificate-import-dialog';
import {WebsiteStatusBadge} from '../websites/components/status-badge';
import {getCertificateStatus, getErrorMessage} from '../websites/components/website-utils';

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

type CertificateApplyMode = 'edit-acme' | 'convert-upload';

export default function CertificatesPage() {
  const queryClient = useQueryClient();
  const [importOpen, setImportOpen] = useState(false);
  const [applyOpen, setApplyOpen] = useState(false);
  const [detailOpen, setDetailOpen] = useState(false);
  const [editorOpen, setEditorOpen] = useState(false);
  const [deleteTarget, setDeleteTarget] = useState<TlsCertificateItem | null>(null);
  const [selectedCertificateId, setSelectedCertificateId] = useState<number | null>(null);
  const [applyCertificate, setApplyCertificate] = useState<TlsCertificateItem | null>(null);
  const [applyMode, setApplyMode] = useState<CertificateApplyMode>('edit-acme');

  const certificatesQuery = useQuery({
    queryKey: certificatesQueryKey,
    queryFn: () => TlsCertificateService.list(),
  });

  const deleteMutation = useMutation({
    mutationFn: (id: number) => TlsCertificateService.deleteById(id),
    onSuccess: async () => {
      toast.success('证书已删除');
      setDeleteTarget(null);
      await queryClient.invalidateQueries({queryKey: certificatesQueryKey});
    },
    onError: (error) => toast.error(getErrorMessage(error)),
  });

  const renewMutation = useMutation({
    mutationFn: (id: number) => TlsCertificateService.renew(id),
    onSuccess: async (cert) => {
      toast.success(`证书 ${cert.name} 续期任务已提交`);
      await queryClient.invalidateQueries({queryKey: certificatesQueryKey});
    },
    onError: (error) => toast.error(getErrorMessage(error)),
  });

  const certificates = useMemo(
    () => certificatesQuery.data ?? [],
    [certificatesQuery.data],
  );

  const handleOpenEditor = (certificate: TlsCertificateItem) => {
    if (certificate.provider === 'acme') {
      setApplyMode('edit-acme');
      setApplyCertificate(certificate);
      setApplyOpen(true);
    } else {
      setSelectedCertificateId(certificate.id);
      setEditorOpen(true);
    }
  };

  return (
    <div className="py-6 px-1 space-y-6">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex items-center gap-2">
          <FileKey className="size-5 text-primary" />
          <h1 className="text-2xl font-semibold tracking-tight">证书</h1>
        </div>
        <div className="flex flex-wrap gap-2">
          <Button
            variant="outline"
            size="sm"
            className="h-7 text-xs"
            onClick={() => void queryClient.invalidateQueries({queryKey: certificatesQueryKey})}
          >
            <RefreshCw className="size-3.5 mr-1" />
            刷新证书
          </Button>
          <Button
            variant="secondary"
            size="sm"
            className="h-7 text-xs"
            onClick={() => setImportOpen(true)}
          >
            导入证书
          </Button>
          <Button size="sm" className="h-7 text-xs" onClick={() => setApplyOpen(true)}>
            <Plus className="size-3.5 mr-1" />
            申请证书
          </Button>
        </div>
      </div>

      <Card className="border-dashed shadow-none">
        <CardHeader className="pb-3">
          <CardTitle className="text-base font-semibold">证书列表</CardTitle>
          <CardDescription>
            展示证书有效期、备注和状态，支持查看详情、编辑内容或删除证书。
          </CardDescription>
        </CardHeader>
        <CardContent>
          {certificatesQuery.isLoading ? (
            <LoadingStateWithBorder icon={FileKey} description="加载证书列表中..." />
          ) : certificatesQuery.isError ? (
            <div className="p-8 border border-dashed rounded-lg">
              <ErrorInline
                message={getErrorMessage(certificatesQuery.error)}
                onRetry={() => void certificatesQuery.refetch()}
                className="justify-center"
              />
            </div>
          ) : certificates.length === 0 ? (
            <EmptyStateWithBorder
              icon={FileKey}
              description="暂无证书，点击右上角「导入证书」或「申请证书」开始录入。"
            />
          ) : (
            <div className="space-y-3">
              {certificates.map((certificate) => {
                const status = getCertificateStatus(certificate);

                return (
                  <div
                    key={certificate.id}
                    className="rounded-lg border bg-card px-4 py-3"
                  >
                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                      <div className="space-y-2">
                        <div className="flex flex-wrap items-center gap-2">
                          <p className="text-sm font-semibold">{certificate.name}</p>
                          <WebsiteStatusBadge label={status.label} tone={status.tone} />
                        </div>
                        <div className="text-xs leading-5 text-muted-foreground space-y-0.5">
                          <p>生效：{formatDateTime(certificate.not_before)}</p>
                          <p>到期：{formatDateTime(certificate.not_after)}</p>
                          <p>
                            来源：
                            {certificate.provider === 'acme' ? 'ACME 申请' : '手动上传'}
                          </p>
                          {certificate.apply_status === 'applying' ? (
                            <p className="text-blue-600">
                              状态：
                              {certificate.provider === 'upload'
                                ? '转换申请中...'
                                : '申请中...'}
                            </p>
                          ) : null}
                          {certificate.apply_status === 'error' ? (
                            <p className="text-destructive">
                              状态：
                              {certificate.provider === 'upload' ? '转换失败' : '申请失败'}
                              （{certificate.apply_message}）
                            </p>
                          ) : null}
                          <p>备注：{certificate.remark || '暂无备注'}</p>
                        </div>
                      </div>

                      <div className="flex flex-wrap gap-1">
                        <Button
                          variant="outline"
                          size="sm"
                          className="h-7 text-xs"
                          onClick={() => {
                            setSelectedCertificateId(certificate.id);
                            setDetailOpen(true);
                          }}
                        >
                          查看
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          className="h-7 text-xs"
                          onClick={() => handleOpenEditor(certificate)}
                        >
                          编辑
                        </Button>
                        {certificate.provider === 'acme' ? (
                          <Button
                            variant="outline"
                            size="sm"
                            className="h-7 text-xs"
                            disabled={renewMutation.isPending}
                            onClick={() => renewMutation.mutate(certificate.id)}
                          >
                            续期
                          </Button>
                        ) : null}
                        <Button
                          variant="outline"
                          size="sm"
                          className="h-7 text-xs text-destructive"
                          onClick={() => setDeleteTarget(certificate)}
                        >
                          <Trash2 className="size-3" />
                        </Button>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </CardContent>
      </Card>

      <CertificateImportDialog
        open={importOpen}
        onOpenChange={setImportOpen}
        onImported={(certificate) =>
          toast.success(`证书 ${certificate.name} 已导入`)
        }
      />

      <CertificateApplyDialog
        open={applyOpen && !applyCertificate}
        onOpenChange={setApplyOpen}
        onApplied={(certificate) =>
          toast.success(`证书 ${certificate.name} 申请任务已提交`)
        }
      />

      {applyCertificate ? (
        <CertificateApplyDialog
          open={applyOpen}
          onOpenChange={(open) => {
            setApplyOpen(open);
            if (!open) setApplyCertificate(null);
          }}
          mode={applyMode}
          certificate={applyCertificate}
          onApplied={(certificate) => {
            setApplyCertificate(null);
            toast.success(
              applyMode === 'convert-upload'
                ? `证书 ${certificate.name} 转换申请已提交`
                : `证书 ${certificate.name} 配置已更新，重新申请中...`,
            );
          }}
        />
      ) : null}

      <CertificateDetailDialog
        certificateId={selectedCertificateId}
        open={detailOpen}
        onOpenChange={setDetailOpen}
        onEdit={() => {
          setDetailOpen(false);
          const item = certificates.find((c) => c.id === selectedCertificateId);
          if (item) handleOpenEditor(item);
        }}
        onDelete={() => {
          const item = certificates.find((c) => c.id === selectedCertificateId);
          if (item) {
            setDetailOpen(false);
            setDeleteTarget(item);
          }
        }}
        deleting={deleteMutation.isPending}
      />

      <CertificateEditorDialog
        certificateId={selectedCertificateId}
        open={editorOpen}
        onOpenChange={setEditorOpen}
        onSaved={(certificate) => toast.success(`证书 ${certificate.name} 已更新`)}
        onConvert={(certificate) => {
          setEditorOpen(false);
          setApplyMode('convert-upload');
          setApplyCertificate(certificate);
          setApplyOpen(true);
        }}
      />

      <AlertDialog
        open={deleteTarget !== null}
        onOpenChange={(open) => !open && setDeleteTarget(null)}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>确认删除证书</AlertDialogTitle>
            <AlertDialogDescription>
              确认删除证书 {deleteTarget?.name} 吗？
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>取消</AlertDialogCancel>
            <AlertDialogAction
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
              onClick={() => deleteTarget && deleteMutation.mutate(deleteTarget.id)}
            >
              删除
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}