OpenFlare/frontend/app/(main)/websites/[zoneId]/page-client.tsx

'use client';

import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { ArrowLeft, Globe, Pencil, 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 { EmptyStateWithBorder } from '@/components/layout/empty';
import { LoadingStateWithBorder } from '@/components/layout/loading';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  ProxyRouteService,
  TlsCertificateService,
  ZoneService,
  zoneQueryKey,
} from '@/lib/services/openflare';

import { getErrorMessage } from '../components/website-utils';
import { ZoneCertificatesPanel } from './components/zone-certificates';
import { ZoneDomainsTable } from './components/zone-domains-table';
import { ZoneEditorDialog } from './components/zone-editor-dialog';
import { ZoneOverviewPanel } from './components/zone-overview';

const zoneTabs = ['overview', 'domains', 'certificates', 'settings'] as const;
export type ZonePageTab = (typeof zoneTabs)[number];

function getZonePageTab(value: string | null | undefined): ZonePageTab {
  return zoneTabs.includes(value as ZonePageTab)
    ? (value as ZonePageTab)
    : 'overview';
}

function getZoneIdFromPathname(pathname: string | null): number {
  const match = pathname?.match(/^\/websites\/([^/]+)$/);
  return Number(match?.[1]);
}

export function ZonePageClient() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);

  const router = useRouter();
  const pathname = usePathname();
  const zoneId = useMemo(() => getZoneIdFromPathname(pathname), [pathname]);
  const searchParams = useSearchParams();
  const queryClient = useQueryClient();
  const activeTab = useMemo(
    () => getZonePageTab(searchParams.get('tab')),
    [searchParams],
  );
  const [editZone, setEditZone] = useState(false);
  const [confirmDelete, setConfirmDelete] = useState(false);

  const setActiveTab = useCallback(
    (tab: string) => {
      const next = getZonePageTab(tab);
      const params = new URLSearchParams(searchParams.toString());
      if (next === 'overview') {
        params.delete('tab');
      } else {
        params.set('tab', next);
      }
      const query = params.toString();
      router.replace(query ? `${pathname}?${query}` : pathname, {
        scroll: false,
      });
    },
    [pathname, router, searchParams],
  );

  const overviewQuery = useQuery({
    queryKey: [...zoneQueryKey, zoneId],
    queryFn: () => ZoneService.getOverview(zoneId),
    enabled: Number.isInteger(zoneId) && zoneId > 0,
  });

  const certificatesQuery = useQuery({
    queryKey: ['openflare', 'tls-certificates'],
    queryFn: () => TlsCertificateService.list(),
    enabled: overviewQuery.isSuccess,
  });

  const routesQuery = useQuery({
    queryKey: ['openflare', 'proxy-routes'],
    queryFn: () => ProxyRouteService.list(),
    enabled: overviewQuery.isSuccess,
  });

  const deleteZone = useMutation({
    mutationFn: () => ZoneService.deleteById(zoneId),
    onSuccess: async () => {
      toast.success('Zone 已删除');
      await queryClient.invalidateQueries({ queryKey: zoneQueryKey });
      window.location.assign('/websites');
    },
    onError: (error) => toast.error(getErrorMessage(error)),
  });

  if (!mounted) {
    return (
      <div className='py-6 px-1'>
        <LoadingStateWithBorder
          icon={Globe}
          description='加载 Zone 详情中...'
        />
      </div>
    );
  }

  if (!Number.isInteger(zoneId) || zoneId <= 0) {
    return (
      <div className='py-6 px-1'>
        <EmptyStateWithBorder
          icon={Globe}
          description='无效的网站 ID，请从网站列表进入详情页。'
        />
      </div>
    );
  }

  if (overviewQuery.isLoading) {
    return (
      <div className='py-6 px-1'>
        <LoadingStateWithBorder
          icon={Globe}
          description='加载 Zone 详情中...'
        />
      </div>
    );
  }

  if (overviewQuery.isError || !overviewQuery.data) {
    return (
      <div className='space-y-4 py-6 px-1'>
        <Button
          variant='ghost'
          size='sm'
          className='h-8 gap-1.5 px-0 text-xs'
          onClick={() => router.back()}
        >
          <ArrowLeft className='size-3.5' />
          返回
        </Button>
        <EmptyStateWithBorder
          icon={Globe}
          description='网站不存在，可能已被删除或 ID 无效。'
        />
      </div>
    );
  }

  const overview = overviewQuery.data;
  const certificates = certificatesQuery.data ?? [];
  const routes = routesQuery.data ?? [];
  const boundCertCount = new Set(
    overview.domains
      .map((domain) => domain.cert_id)
      .filter((id): id is number => id != null),
  ).size;

  return (
    <div className='space-y-6 py-6 px-1'>
      <div className='space-y-4'>
        <Button
          variant='ghost'
          size='sm'
          className='h-8 gap-1.5 px-0 text-xs'
          onClick={() => router.back()}
        >
          <ArrowLeft className='size-3.5' />
          返回
        </Button>

        <div className='flex items-center gap-2'>
          <Globe className='size-5 text-primary' />
          <div>
            <h1 className='text-2xl font-semibold tracking-tight'>
              {overview.zone.domain}
            </h1>
            <p className='text-sm text-muted-foreground'>Zone 网站管理</p>
          </div>
        </div>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className='w-full'>
        <TabsList variant='line' className='mb-6 inline-flex w-fit gap-8'>
          <TabsTrigger
            value='overview'
            className='px-0 pb-2 text-xs font-semibold'
          >
            概览
          </TabsTrigger>
          <TabsTrigger
            value='domains'
            className='px-0 pb-2 text-xs font-semibold'
          >
            域名 ({overview.domains.length})
          </TabsTrigger>
          <TabsTrigger
            value='certificates'
            className='px-0 pb-2 text-xs font-semibold'
          >
            证书 ({boundCertCount})
          </TabsTrigger>
          <TabsTrigger
            value='settings'
            className='px-0 pb-2 text-xs font-semibold'
          >
            设置
          </TabsTrigger>
        </TabsList>

        <TabsContent value='overview'>
          <ZoneOverviewPanel overview={overview} zoneId={zoneId} />
        </TabsContent>
        <TabsContent value='domains'>
          <ZoneDomainsTable
            zoneId={zoneId}
            zoneRoot={overview.zone.domain}
            domains={overview.domains}
            certificates={certificates}
            routes={routes}
            routesLoading={routesQuery.isLoading}
            onChanged={() => overviewQuery.refetch()}
          />
        </TabsContent>
        <TabsContent value='certificates'>
          <ZoneCertificatesPanel
            domains={overview.domains}
            certificates={certificates}
          />
        </TabsContent>
        <TabsContent value='settings'>
          <div className='space-y-4'>
            <div className='rounded-lg border p-4'>
              <p className='text-sm font-semibold'>基本信息</p>
              <p className='mt-1 text-sm text-muted-foreground'>
                维护 Zone 的可注册根域。根域变更后，请确认其下域名仍归属该根域。
              </p>
              <div className='mt-3 grid gap-2 text-sm sm:grid-cols-2'>
                <div>
                  <p className='text-xs text-muted-foreground'>当前根域</p>
                  <p className='mt-1 font-mono text-[13px] font-medium'>
                    {overview.zone.domain}
                  </p>
                </div>
                <div>
                  <p className='text-xs text-muted-foreground'>域名数量</p>
                  <p className='mt-1 font-mono text-[13px] font-medium'>
                    {overview.domains.length}
                  </p>
                </div>
              </div>
              <Button
                variant='outline'
                size='sm'
                className='mt-4 h-7 text-xs'
                onClick={() => setEditZone(true)}
              >
                <Pencil className='mr-1 size-3.5' />
                编辑根域
              </Button>
            </div>

            <div className='rounded-lg border border-destructive/30 p-4'>
              <p className='text-sm font-semibold text-destructive'>危险操作</p>
              <p className='mt-1 text-sm text-muted-foreground'>
                删除 Zone 前须清空其下全部域名；删除后不可恢复。
              </p>
              <Button
                variant='destructive'
                size='sm'
                className='mt-4 h-7 text-xs'
                onClick={() => setConfirmDelete(true)}
              >
                <Trash2 className='mr-1 size-3.5' />
                删除 Zone
              </Button>
            </div>
          </div>
        </TabsContent>
      </Tabs>

      <ZoneEditorDialog
        open={editZone}
        onOpenChange={setEditZone}
        zone={overview.zone}
      />

      <AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>确认删除 Zone</AlertDialogTitle>
            <AlertDialogDescription>
              确认删除 {overview.zone.domain}{' '}
              吗？其下域名须先解绑路由后才能删除，此操作不可撤销。
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={deleteZone.isPending}>
              取消
            </AlertDialogCancel>
            <AlertDialogAction
              className='bg-destructive text-white hover:bg-destructive/90'
              disabled={deleteZone.isPending}
              onClick={(event) => {
                event.preventDefault();
                deleteZone.mutate();
              }}
            >
              {deleteZone.isPending ? '删除中…' : '确认删除'}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}