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

"use client"

import Link from "next/link"
import {useMemo, useState} from "react"
import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
import {useSearchParams} from "next/navigation"
import {ArrowLeft, ChevronDown, ChevronRight, FileText, Loader2, Trash2, Upload,} 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 {type PagesDeployment, PagesService} from "@/lib/services/openflare"
import {formatDateTime} from "@/lib/utils"

import {DeploymentUploadDialog} from "../components/deployment-upload-dialog"
import {ProjectEditorDialog} from "../components/project-editor-dialog"
import {
  deploymentFilesQueryKey,
  deploymentsQueryKey,
  formatBytes,
  projectQueryKey,
  projectsQueryKey,
} from "../components/pages-utils"

function DeploymentFilesPanel({
  projectId,
  deployment,
}: {
  projectId: number
  deployment: PagesDeployment
}) {
  const filesQuery = useQuery({
    queryKey: deploymentFilesQueryKey(projectId, deployment.id),
    queryFn: () => PagesService.listDeploymentFiles(projectId, deployment.id),
  })

  if (filesQuery.isLoading) {
    return <p className="px-4 py-3 text-xs text-muted-foreground">加载文件清单...</p>
  }

  if (filesQuery.isError) {
    return (
      <p className="px-4 py-3 text-xs text-destructive">
        {filesQuery.error instanceof Error ? filesQuery.error.message : "加载失败"}
      </p>
    )
  }

  const files = filesQuery.data ?? []
  if (files.length === 0) {
    return <p className="px-4 py-3 text-xs text-muted-foreground">暂无文件记录</p>
  }

  return (
    <div className="border-t border-dashed bg-muted/10">
      <Table>
        <TableHeader>
          <TableRow className="border-dashed hover:bg-transparent">
            <TableHead className="text-xs">路径</TableHead>
            <TableHead className="text-xs text-right">大小</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {files.map((file) => (
            <TableRow key={file.id} className="border-dashed">
              <TableCell className="text-xs font-mono">{file.path}</TableCell>
              <TableCell className="text-xs text-right text-muted-foreground">
                {formatBytes(file.size)}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}

export function PagesDetailPageClient() {
  const searchParams = useSearchParams()
  const queryClient = useQueryClient()
  const projectId = searchParams.get("id")?.trim() ?? ""
  const parsedProjectId = Number(projectId)

  const [editorOpen, setEditorOpen] = useState(false)
  const [uploadOpen, setUploadOpen] = useState(false)
  const [expandedDeploymentId, setExpandedDeploymentId] = useState<number | null>(null)
  const [deleteProjectOpen, setDeleteProjectOpen] = useState(false)
  const [pendingDeploymentAction, setPendingDeploymentAction] = useState<{
    type: "activate" | "delete"
    deployment: PagesDeployment
  } | null>(null)

  const enabled = projectId !== "" && Number.isFinite(parsedProjectId)

  const projectQuery = useQuery({
    queryKey: projectQueryKey(projectId),
    queryFn: () => PagesService.getProject(parsedProjectId),
    enabled,
  })

  const deploymentsQuery = useQuery({
    queryKey: deploymentsQueryKey(parsedProjectId),
    queryFn: () => PagesService.listDeployments(parsedProjectId),
    enabled,
  })

  const activateMutation = useMutation({
    mutationFn: (deploymentId: number) =>
      PagesService.activateDeployment(parsedProjectId, deploymentId),
    onSuccess: async () => {
      toast.success("部署已激活")
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: deploymentsQueryKey(parsedProjectId) }),
        queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) }),
        queryClient.invalidateQueries({ queryKey: projectsQueryKey }),
      ])
      setPendingDeploymentAction(null)
    },
    onError: (error) => {
      toast.error(error instanceof Error ? error.message : "激活失败")
    },
  })

  const deleteDeploymentMutation = useMutation({
    mutationFn: (deploymentId: number) =>
      PagesService.deleteDeployment(parsedProjectId, deploymentId),
    onSuccess: async () => {
      toast.success("部署已删除")
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: deploymentsQueryKey(parsedProjectId) }),
        queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) }),
        queryClient.invalidateQueries({ queryKey: projectsQueryKey }),
      ])
      setPendingDeploymentAction(null)
    },
    onError: (error) => {
      toast.error(error instanceof Error ? error.message : "删除失败")
    },
  })

  const deleteProjectMutation = useMutation({
    mutationFn: () => PagesService.deleteProject(parsedProjectId),
    onSuccess: async () => {
      toast.success("项目已删除")
      await queryClient.invalidateQueries({ queryKey: projectsQueryKey })
      window.location.href = "/pages"
    },
    onError: (error) => {
      toast.error(error instanceof Error ? error.message : "删除失败")
    },
  })

  const project = projectQuery.data
  const deployments = useMemo(() => deploymentsQuery.data ?? [], [deploymentsQuery.data])

  if (!enabled) {
    return (
      <div className="py-6 px-1">
        <EmptyStateWithBorder description="缺少有效的 Pages 项目 ID。" />
      </div>
    )
  }

  if (projectQuery.isLoading) {
    return (
      <div className="py-6 px-1">
        <LoadingStateWithBorder icon={FileText} description="加载项目详情..." />
      </div>
    )
  }

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

  if (!project) {
    return (
      <div className="py-6 px-1 space-y-4">
        <Button variant="ghost" size="sm" asChild>
          <Link href="/pages">
            <ArrowLeft className="size-4 mr-1" />
            返回列表
          </Link>
        </Button>
        <EmptyStateWithBorder description="Pages 项目不存在或已被删除。" />
      </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="/pages">
              <ArrowLeft className="size-4 mr-1" />
              返回列表
            </Link>
          </Button>
          <div className="flex items-center gap-2">
            <FileText className="size-5 text-primary" />
            <h1 className="text-2xl font-semibold tracking-tight">{project.name}</h1>
          </div>
          <p className="text-sm text-muted-foreground">
            {project.slug} · {project.deployment_count} 个部署
          </p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Button variant="outline" size="sm" onClick={() => setEditorOpen(true)}>
            编辑项目
          </Button>
          <Button size="sm" onClick={() => setUploadOpen(true)}>
            <Upload className="size-3.5 mr-1" />
            上传部署包
          </Button>
          <Button
            variant="destructive"
            size="sm"
            onClick={() => setDeleteProjectOpen(true)}
          >
            <Trash2 className="size-3.5 mr-1" />
            删除项目
          </Button>
        </div>
      </div>

      <div className="grid gap-3 sm:grid-cols-3">
        <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]">
            {project.enabled ? "已启用" : "已停用"}
          </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 font-semibold">
            {project.active_deployment
              ? `#${project.active_deployment.deployment_number}`
              : "暂无"}
          </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(project.updated_at)}</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">
            部署不可变；激活后发布配置，Agent 才会拉取并切换静态资源。
          </p>
        </div>

        {deploymentsQuery.isLoading ? (
          <LoadingStateWithBorder />
        ) : deployments.length === 0 ? (
          <EmptyStateWithBorder
            title="暂无部署"
            description="上传 zip 部署包后，可以在这里激活某个部署版本。"
          />
        ) : (
          <div className="divide-y divide-dashed">
            {deployments.map((deployment) => {
              const expanded = expandedDeploymentId === deployment.id
              return (
                <div key={deployment.id}>
                  <div className="flex flex-col gap-3 p-4 md:flex-row md:items-center md:justify-between">
                    <div className="flex items-start gap-2">
                      <Button
                        variant="ghost"
                        size="icon"
                        className="size-7 shrink-0"
                        onClick={() =>
                          setExpandedDeploymentId(expanded ? null : deployment.id)
                        }
                      >
                        {expanded ? (
                          <ChevronDown className="size-4" />
                        ) : (
                          <ChevronRight className="size-4" />
                        )}
                      </Button>
                      <div>
                        <div className="flex items-center gap-2">
                          <p className="text-sm font-medium">
                            #{deployment.deployment_number}
                          </p>
                          {deployment.status === "active" ? (
                            <Badge variant="outline" className="text-[10px]">
                              已激活
                            </Badge>
                          ) : null}
                        </div>
                        <p className="mt-1 text-xs text-muted-foreground">
                          {deployment.checksum.slice(0, 16)} · {deployment.file_count} files ·{" "}
                          {formatBytes(deployment.total_size)}
                        </p>
                        <p className="mt-1 text-xs text-muted-foreground">
                          创建于 {formatDateTime(deployment.created_at)}
                        </p>
                      </div>
                    </div>
                    <div className="flex gap-2 md:ml-9">
                      <Button
                        variant="outline"
                        size="sm"
                        disabled={
                          deployment.status === "active" || activateMutation.isPending
                        }
                        onClick={() =>
                          setPendingDeploymentAction({
                            type: "activate",
                            deployment,
                          })
                        }
                      >
                        激活
                      </Button>
                      <Button
                        variant="destructive"
                        size="sm"
                        disabled={
                          deployment.status === "active" ||
                          deleteDeploymentMutation.isPending
                        }
                        onClick={() =>
                          setPendingDeploymentAction({
                            type: "delete",
                            deployment,
                          })
                        }
                      >
                        删除
                      </Button>
                    </div>
                  </div>
                  {expanded ? (
                    <DeploymentFilesPanel
                      projectId={parsedProjectId}
                      deployment={deployment}
                    />
                  ) : null}
                </div>
              )
            })}
          </div>
        )}
      </div>

      <ProjectEditorDialog
        open={editorOpen}
        onOpenChange={setEditorOpen}
        project={project}
      />
      <DeploymentUploadDialog
        open={uploadOpen}
        onOpenChange={setUploadOpen}
        projectId={parsedProjectId}
      />

      <AlertDialog open={deleteProjectOpen} onOpenChange={setDeleteProjectOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>删除 Pages 项目</AlertDialogTitle>
            <AlertDialogDescription>
              确认删除项目 {project.name} 吗？此操作不可恢复。
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>取消</AlertDialogCancel>
            <AlertDialogAction
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
              onClick={() => deleteProjectMutation.mutate()}
            >
              {deleteProjectMutation.isPending ? (
                <Loader2 className="size-4 animate-spin" />
              ) : (
                "确认删除"
              )}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      <AlertDialog
        open={pendingDeploymentAction !== null}
        onOpenChange={(open) => {
          if (!open) setPendingDeploymentAction(null)
        }}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>
              {pendingDeploymentAction?.type === "activate" ? "激活部署" : "删除部署"}
            </AlertDialogTitle>
            <AlertDialogDescription>
              {pendingDeploymentAction?.type === "activate"
                ? `确认激活部署 #${pendingDeploymentAction.deployment.deployment_number} 吗？`
                : `确认删除部署 #${pendingDeploymentAction?.deployment.deployment_number} 吗？`}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>取消</AlertDialogCancel>
            <AlertDialogAction
              className={
                pendingDeploymentAction?.type === "delete"
                  ? "bg-destructive text-destructive-foreground hover:bg-destructive/90"
                  : undefined
              }
              onClick={() => {
                if (!pendingDeploymentAction) return
                if (pendingDeploymentAction.type === "activate") {
                  activateMutation.mutate(pendingDeploymentAction.deployment.id)
                } else {
                  deleteDeploymentMutation.mutate(pendingDeploymentAction.deployment.id)
                }
              }}
            >
              确认
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}