OpenFlare/frontend/app/(main)/origins/detail/page-client.tsx

'use client';

import Link from 'next/link';
import { useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useSearchParams } from 'next/navigation';
import { ArrowLeft, MapPin, Trash2 } from 'lucide-react';
import { toast } from 'sonner';

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { EmptyStateWithBorder } from '@/components/layout/empty';
import { ErrorInline } from '@/components/layout/error';
import { LoadingStateWithBorder } from '@/components/layout/loading';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { OriginService } from '@/lib/services/openflare';
import { formatDateTime } from '@/lib/utils';

import { OriginEditorDialog } from '../components/origin-editor-dialog';

export function OriginDetailPageClient() {
  const searchParams = useSearchParams();
  const queryClient = useQueryClient();
  const originId = searchParams.get('id')?.trim() ?? '';
  const parsedId = Number(originId);
  const enabled = originId !== '' && Number.isFinite(parsedId);

  const [editorOpen, setEditorOpen] = useState(false);
  const [deleteOpen, setDeleteOpen] = useState(false);

  const originQuery = useQuery({
    queryKey: ['openflare', 'origins', originId],
    queryFn: () => OriginService.getById(parsedId),
    enabled,
  });

  const deleteMutation = useMutation({
    mutationFn: () => OriginService.deleteById(parsedId),
    onSuccess: async () => {
      toast.success('源站已删除');
      await queryClient.invalidateQueries({
        queryKey: ['openflare', 'origins'],
      });
      window.location.href = '/origins';
    },
    onError: (error) => {
      toast.error(error instanceof Error ? error.message : '删除失败');
    },
  });

  const origin = originQuery.data;

  if (!enabled) {
    return (
      <div className='py-6 px-1'>
        <EmptyStateWithBorder description='缺少有效的源站 ID。' />
      </div>
    );
  }

  if (originQuery.isLoading) {
    return (
      <div className='py-6 px-1'>
        <LoadingStateWithBorder icon={MapPin} description='加载源站详情...' />
      </div>
    );
  }

  if (originQuery.isError) {
    return (
      <div className='py-6 px-1'>
        <ErrorInline
          message={
            originQuery.error instanceof Error
              ? originQuery.error.message
              : '加载失败'
          }
          onRetry={() => void originQuery.refetch()}
        />
      </div>
    );
  }

  if (!origin) {
    return (
      <div className='py-6 px-1 space-y-4'>
        <Button variant='ghost' size='sm' asChild>
          <Link href='/origins'>
            <ArrowLeft className='size-4 mr-1' />
            返回列表
          </Link>
        </Button>
        <EmptyStateWithBorder description='源站不存在或已被删除。' />
      </div>
    );
  }

  return (
    <div className='py-6 px-1 space-y-6'>
      <div className='flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between'>
        <div className='space-y-2'>
          <Button variant='ghost' size='sm' className='h-8 px-2 -ml-2' asChild>
            <Link href='/origins'>
              <ArrowLeft className='size-4 mr-1' />
              返回列表
            </Link>
          </Button>
          <div className='flex items-center gap-2'>
            <MapPin className='size-5 text-primary' />
            <h1 className='text-2xl font-semibold tracking-tight'>
              {origin.name}
            </h1>
          </div>
          <p className='text-sm text-muted-foreground'>{origin.address}</p>
        </div>
        <div className='flex gap-2'>
          <Button
            variant='outline'
            size='sm'
            onClick={() => setEditorOpen(true)}
          >
            编辑源站
          </Button>
          <Button
            variant='destructive'
            size='sm'
            onClick={() => setDeleteOpen(true)}
          >
            <Trash2 className='size-3.5 mr-1' />
            删除源站
          </Button>
        </div>
      </div>

      <div className='grid gap-3 sm:grid-cols-2 xl:grid-cols-4'>
        <div className='rounded-lg border border-dashed px-4 py-3'>
          <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
            绑定规则
          </p>
          <Badge variant='outline' className='mt-2 text-[10px]'>
            {origin.route_count} 条规则
          </Badge>
        </div>
        <div className='rounded-lg border border-dashed px-4 py-3'>
          <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
            创建时间
          </p>
          <p className='mt-2 text-sm'>{formatDateTime(origin.created_at)}</p>
        </div>
        <div className='rounded-lg border border-dashed px-4 py-3'>
          <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
            更新时间
          </p>
          <p className='mt-2 text-sm'>{formatDateTime(origin.updated_at)}</p>
        </div>
        <div className='rounded-lg border border-dashed px-4 py-3 sm:col-span-2 xl:col-span-1'>
          <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
            备注
          </p>
          <p className='mt-2 text-sm text-muted-foreground'>
            {origin.remark || '暂无备注'}
          </p>
        </div>
      </div>

      <div className='border border-dashed rounded-lg overflow-hidden bg-background'>
        <div className='px-4 py-3 border-b border-dashed'>
          <h2 className='text-sm font-semibold'>关联规则</h2>
          <p className='text-xs text-muted-foreground mt-1'>
            展示当前源站作为主源站绑定的规则。
          </p>
        </div>
        {origin.routes.length === 0 ? (
          <EmptyStateWithBorder
            title='暂无关联规则'
            description='当前源站还没有被任何规则引用。'
          />
        ) : (
          <Table>
            <TableHeader className='bg-muted/40'>
              <TableRow className='border-dashed hover:bg-transparent'>
                <TableHead className='text-xs font-semibold'>域名</TableHead>
                <TableHead className='text-xs font-semibold'>
                  源站地址
                </TableHead>
                <TableHead className='text-xs font-semibold'>状态</TableHead>
                <TableHead className='text-xs font-semibold'>
                  更新时间
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {origin.routes.map((route) => (
                <TableRow key={route.id} className='border-dashed'>
                  <TableCell className='text-xs font-medium'>
                    {route.domain}
                  </TableCell>
                  <TableCell className='text-xs text-muted-foreground'>
                    {route.origin_url}
                  </TableCell>
                  <TableCell>
                    <Badge variant='outline' className='text-[10px]'>
                      {route.enabled ? '启用' : '停用'}
                    </Badge>
                  </TableCell>
                  <TableCell className='text-xs text-muted-foreground'>
                    {formatDateTime(route.updated_at)}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
      </div>

      <OriginEditorDialog
        open={editorOpen}
        onOpenChange={setEditorOpen}
        origin={origin}
        onSaved={() => void originQuery.refetch()}
      />

      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>删除源站</AlertDialogTitle>
            <AlertDialogDescription>
              确认删除源站 {origin.name} 吗？
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>取消</AlertDialogCancel>
            <AlertDialogAction
              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
              onClick={() => deleteMutation.mutate()}
            >
              确认删除
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}