OpenFlare/openflare_server/web/features/tls-certificates/components/tls-certificates-page.tsx

'use client';

import Link from 'next/link';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useMemo, useState } from 'react';

import { EmptyState } from '@/components/feedback/empty-state';
import { ErrorState } from '@/components/feedback/error-state';
import { InlineMessage } from '@/components/feedback/inline-message';
import { LoadingState } from '@/components/feedback/loading-state';
import { PageHeader } from '@/components/layout/page-header';
import { AppCard } from '@/components/ui/app-card';
import { StatusBadge } from '@/components/ui/status-badge';
import {
  deleteTlsCertificate,
  getTlsCertificates,
} from '@/features/tls-certificates/api/tls-certificates';
import type { TlsCertificateItem } from '@/features/tls-certificates/types';
import { CertificateDetailModal } from '@/features/websites/components/certificate-detail-modal';
import { CertificateEditorModal } from '@/features/websites/components/certificate-editor-modal';
import { CertificateImportModal } from '@/features/websites/components/certificate-import-modal';
import { getCertificateStatus, getErrorMessage } from '@/features/websites/utils';
import {
  DangerButton,
  PrimaryButton,
  SecondaryButton,
} from '@/features/shared/components/resource-primitives';
import { formatDateTime } from '@/lib/utils/date';

type FeedbackState = {
  tone: 'info' | 'success' | 'danger';
  message: string;
};

const certificatesQueryKey = ['tls-certificates', 'list'] as const;

export function TlsCertificatesPage() {
  const queryClient = useQueryClient();
  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
  const [isImportOpen, setIsImportOpen] = useState(false);
  const [selectedCertificateId, setSelectedCertificateId] = useState<
    number | null
  >(null);
  const [isDetailOpen, setIsDetailOpen] = useState(false);
  const [isEditorOpen, setIsEditorOpen] = useState(false);

  const certificatesQuery = useQuery({
    queryKey: certificatesQueryKey,
    queryFn: getTlsCertificates,
  });

  const deleteCertificateMutation = useMutation({
    mutationFn: deleteTlsCertificate,
    onSuccess: async () => {
      setFeedback({ tone: 'success', message: '证书已删除。' });
      await queryClient.invalidateQueries({ queryKey: ['tls-certificates'] });
    },
    onError: (error) => {
      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
    },
  });

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

  const handleDeleteCertificate = (certificate: TlsCertificateItem) => {
    if (!window.confirm(`确认删除证书 ${certificate.name} 吗？`)) {
      return;
    }

    setFeedback(null);
    deleteCertificateMutation.mutate(certificate.id);
  };

  const handleOpenCertificateDetail = (certificate: TlsCertificateItem) => {
    setSelectedCertificateId(certificate.id);
    setIsDetailOpen(true);
  };

  const handleOpenCertificateEditor = (certificate: TlsCertificateItem) => {
    setSelectedCertificateId(certificate.id);
    setIsEditorOpen(true);
  };

  return (
    <>
      <div className="space-y-6">
        <PageHeader
          title="证书"
          description="统一查看、导入、编辑和删除已添加的 TLS 证书。"
          action={
            <div className="flex flex-wrap gap-3">
              <Link
                href="/website"
                className="inline-flex min-h-[46px] items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
              >
                返回网站
              </Link>
              <SecondaryButton
                type="button"
                onClick={() =>
                  void queryClient.invalidateQueries({
                    queryKey: ['tls-certificates'],
                  })
                }
              >
                刷新证书
              </SecondaryButton>
              <PrimaryButton type="button" onClick={() => setIsImportOpen(true)}>
                添加证书
              </PrimaryButton>
            </div>
          }
        />

        {feedback ? (
          <InlineMessage tone={feedback.tone} message={feedback.message} />
        ) : null}

        <AppCard
          title="证书列表"
          description="展示证书有效期、备注和状态，支持直接查看详情、编辑内容或删除证书。"
        >
          {certificatesQuery.isLoading ? (
            <LoadingState />
          ) : certificatesQuery.isError ? (
            <ErrorState
              title="证书列表加载失败"
              description={getErrorMessage(certificatesQuery.error)}
            />
          ) : certificates.length === 0 ? (
            <EmptyState
              title="暂无证书"
              description="点击右上角“添加证书”开始录入。"
            />
          ) : (
            <div className="space-y-3">
              {certificates.map((certificate) => {
                const status = getCertificateStatus(certificate);

                return (
                  <div
                    key={certificate.id}
                    className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4"
                  >
                    <div className="flex items-start justify-between gap-4">
                      <div className="space-y-2">
                        <div className="flex flex-wrap items-center gap-2">
                          <p className="text-sm font-semibold text-[var(--foreground-primary)]">
                            {certificate.name}
                          </p>
                          <StatusBadge
                            label={status.label}
                            variant={status.variant}
                          />
                        </div>
                        <div className="text-xs leading-5 text-[var(--foreground-secondary)]">
                          <p>生效：{formatDateTime(certificate.not_before)}</p>
                          <p>到期：{formatDateTime(certificate.not_after)}</p>
                          <p>备注：{certificate.remark || '暂无备注'}</p>
                        </div>
                      </div>

                      <div className="flex flex-wrap gap-2">
                        <SecondaryButton
                          type="button"
                          onClick={() => handleOpenCertificateDetail(certificate)}
                          className="px-3 py-2 text-xs"
                        >
                          查看
                        </SecondaryButton>
                        <SecondaryButton
                          type="button"
                          onClick={() => handleOpenCertificateEditor(certificate)}
                          className="px-3 py-2 text-xs"
                        >
                          编辑
                        </SecondaryButton>
                        <DangerButton
                          type="button"
                          onClick={() => handleDeleteCertificate(certificate)}
                          disabled={deleteCertificateMutation.isPending}
                          className="px-3 py-2 text-xs"
                        >
                          删除
                        </DangerButton>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </AppCard>
      </div>

      {isImportOpen ? (
        <CertificateImportModal
          isOpen={isImportOpen}
          onClose={() => setIsImportOpen(false)}
          onImported={(certificate) => {
            setFeedback({
              tone: 'success',
              message: `证书 ${certificate.name} 已导入。`,
            });
          }}
        />
      ) : null}

      {isDetailOpen ? (
        <CertificateDetailModal
          certificateId={selectedCertificateId}
          isOpen={isDetailOpen}
          onClose={() => setIsDetailOpen(false)}
          onEdit={() => {
            setIsDetailOpen(false);
            setIsEditorOpen(true);
          }}
          onDelete={() => {
            const certificate = certificates.find(
              (item) => item.id === selectedCertificateId,
            );
            if (certificate) {
              setIsDetailOpen(false);
              handleDeleteCertificate(certificate);
            }
          }}
          deleting={deleteCertificateMutation.isPending}
        />
      ) : null}

      {isEditorOpen ? (
        <CertificateEditorModal
          certificateId={selectedCertificateId}
          isOpen={isEditorOpen}
          onClose={() => setIsEditorOpen(false)}
          onSaved={(certificate) => {
            setFeedback({
              tone: 'success',
              message: `证书 ${certificate.name} 已更新。`,
            });
          }}
        />
      ) : null}
    </>
  );
}