OpenFlare/frontend/app/(main)/pages/components/deployment-upload-dialog.tsx

"use client"

import {useRef, useState} from "react"
import {useMutation, useQueryClient} from "@tanstack/react-query"
import {Loader2, UploadCloud} from "lucide-react"
import {toast} from "sonner"

import {Button} from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import {Input} from "@/components/ui/input"
import {Label} from "@/components/ui/label"
import {Progress} from "@/components/ui/progress"
import {PagesService} from "@/lib/services/openflare"
import {cn} from "@/lib/utils"

import {deploymentsQueryKey, formatBytes, projectQueryKey, projectsQueryKey} from "./pages-utils"

interface DeploymentUploadDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  projectId: number
}

export function DeploymentUploadDialog({
  open,
  onOpenChange,
  projectId,
}: DeploymentUploadDialogProps) {
  const queryClient = useQueryClient()
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [file, setFile] = useState<File | null>(null)
  const [isDragActive, setIsDragActive] = useState(false)
  const [uploadProgress, setUploadProgress] = useState<number | null>(null)

  const resetForm = () => {
    setFile(null)
    setIsDragActive(false)
    setUploadProgress(null)
    if (fileInputRef.current) fileInputRef.current.value = ""
  }

  const handleClose = (nextOpen: boolean) => {
    if (!nextOpen) resetForm()
    onOpenChange(nextOpen)
  }

  const uploadMutation = useMutation({
    mutationFn: () => {
      if (!file) throw new Error("请选择 zip 部署包")
      return PagesService.uploadDeployment(projectId, {
        file,
        onProgress: setUploadProgress,
      })
    },
    onSuccess: async () => {
      toast.success("部署包上传成功")
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: deploymentsQueryKey(projectId) }),
        queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) }),
        queryClient.invalidateQueries({ queryKey: projectsQueryKey }),
      ])
      handleClose(false)
    },
    onError: (error) => {
      toast.error(error instanceof Error ? error.message : "上传失败")
      setUploadProgress(null)
    },
  })

  const handleFileSelect = (selected: File | null) => {
    if (!selected) return
    if (!selected.name.toLowerCase().endsWith(".zip")) {
      toast.error("仅支持 zip 格式的文件")
      return
    }
    setFile(selected)
  }

  return (
    <Dialog open={open} onOpenChange={handleClose}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>上传部署包</DialogTitle>
          <DialogDescription>上传已构建的 zip 静态资源包，部署后可在列表中激活。</DialogDescription>
        </DialogHeader>

        <div
          className={cn(
            "rounded-lg border border-dashed p-8 text-center transition",
            isDragActive ? "border-primary bg-primary/5" : "bg-muted/20",
          )}
          onDragEnter={(e) => {
            e.preventDefault()
            setIsDragActive(true)
          }}
          onDragOver={(e) => e.preventDefault()}
          onDragLeave={(e) => {
            e.preventDefault()
            setIsDragActive(false)
          }}
          onDrop={(e) => {
            e.preventDefault()
            setIsDragActive(false)
            handleFileSelect(e.dataTransfer.files[0] ?? null)
          }}
        >
          <UploadCloud className="size-8 mx-auto text-muted-foreground" />
          <p className="mt-3 text-sm">拖拽 zip 文件到此处，或点击选择文件</p>
          <Button
            type="button"
            variant="outline"
            size="sm"
            className="mt-3"
            onClick={() => fileInputRef.current?.click()}
          >
            选择文件
          </Button>
          <input
            ref={fileInputRef}
            type="file"
            accept=".zip"
            className="hidden"
            onChange={(e) => handleFileSelect(e.target.files?.[0] ?? null)}
          />
        </div>

        {file ? (
          <div className="rounded-lg border border-dashed px-4 py-3 text-sm">
            <p className="font-medium">{file.name}</p>
            <p className="text-xs text-muted-foreground mt-1">{formatBytes(file.size)}</p>
          </div>
        ) : null}

        {uploadProgress !== null ? (
          <div className="space-y-1.5">
            <div className="flex justify-between text-xs text-muted-foreground">
              <span>{uploadProgress >= 100 ? "服务端处理中" : "上传进度"}</span>
              <span>{uploadProgress >= 100 ? "请稍候" : `${uploadProgress}%`}</span>
            </div>
            <Progress value={uploadProgress >= 100 ? 100 : uploadProgress} />
          </div>
        ) : null}

        <div className="space-y-1.5">
          <Label htmlFor="entryFile">入口文件</Label>
          <Input id="entryFile" defaultValue="index.html" disabled />
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => handleClose(false)}>
            取消
          </Button>
          <Button
            onClick={() => uploadMutation.mutate()}
            disabled={!file || uploadMutation.isPending}
          >
            {uploadMutation.isPending ? (
              <>
                <Loader2 className="size-4 animate-spin mr-1" />
                上传中...
              </>
            ) : (
              "上传并创建部署"
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}