OpenFlare/frontend/components/common/user/file-manager.tsx

"use client"

import * as React from "react"
import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
import {
  ChevronLeft,
  ChevronRight,
  Download,
  FileArchive,
  FileAudio,
  FileImage,
  FileText,
  FileVideo,
  Globe,
  Loader2,
  Lock,
  Plus,
  Search,
  Trash2,
  Upload
} from "lucide-react"
import {toast} from "sonner"

import {Button} from "@/components/ui/button"
import {Input} from "@/components/ui/input"
import {Badge} from "@/components/ui/badge"
import {Card, CardContent} from "@/components/ui/card"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"

import {FileImagePreview} from "@/components/common/file-image-preview"
import services, {formatFileSize} from "@/lib/services"
import type {Upload as UploadRecord} from "@/lib/services/upload/types"

/* ─── 工具函数 ─────────────────────────────────────────── */

function getFileIcon(mimeType: string, className = "size-10") {
  if (mimeType.startsWith("image/")) return <FileImage className={`${className} text-blue-400`} />
  if (mimeType.startsWith("video/")) return <FileVideo className={`${className} text-purple-400`} />
  if (mimeType.startsWith("audio/")) return <FileAudio className={`${className} text-green-400`} />
  if (mimeType.includes("zip") || mimeType.includes("tar") || mimeType.includes("gzip"))
    return <FileArchive className={`${className} text-amber-400`} />
  return <FileText className={`${className} text-slate-400`} />
}

function formatDate(dateStr: string) {
  return new Date(dateStr).toLocaleString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  })
}

export function UserFileManager() {
  const queryClient = useQueryClient()
  const [keyword, setKeyword] = React.useState("")
  const [debouncedKeyword, setDebouncedKeyword] = React.useState("")
  const [page, setPage] = React.useState(1)
  const [uploading, setUploading] = React.useState(false)
  const [deleteTarget, setDeleteTarget] = React.useState<UploadRecord | null>(null)
  const [uploadAccessMode, setUploadAccessMode] = React.useState<number>(0) // 默认私有
  const fileInputRef = React.useRef<HTMLInputElement>(null)
  const pageSize = 12 // 每页 12 个卡片更均衡（3x4 或 4x3 布局）

  // 搜索防抖
  React.useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedKeyword(keyword)
      setPage(1)
    }, 400)
    return () => clearTimeout(timer)
  }, [keyword])

  // 我的文件列表查询
  const { data, isPending } = useQuery({
    queryKey: ["user-files", page, pageSize, debouncedKeyword],
    queryFn: () => services.upload.listMyUploads(page, pageSize, debouncedKeyword || undefined),
  })

  const files = data?.items ?? []
  const total = data?.total ?? 0
  const totalPages = Math.ceil(total / pageSize)

  // 上传文件 Mutation
  const uploadMutation = useMutation({
    mutationFn: async (file: File) => {
      return services.upload.uploadFile(file, "generic", undefined, uploadAccessMode)
    },
    onMutate: () => {
      setUploading(true)
    },
    onSuccess: () => {
      toast.success("文件上传成功")
      void queryClient.invalidateQueries({ queryKey: ["user-files"] })
    },
    onError: (err: Error) => {
      toast.error(err.message || "上传失败")
    },
    onSettled: () => {
      setUploading(false)
      if (fileInputRef.current) {
        fileInputRef.current.value = ""
      }
    }
  })

  // 删除文件 Mutation
  const deleteMutation = useMutation({
    mutationFn: (id: string) => services.upload.deleteMyFile(id),
    onSuccess: () => {
      toast.success("文件已成功删除")
      void queryClient.invalidateQueries({ queryKey: ["user-files"] })
      setDeleteTarget(null)
    },
    onError: (err: Error) => {
      toast.error(err.message || "删除失败")
    }
  })

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      uploadMutation.mutate(file)
    }
  }

  const triggerUploadClick = () => {
    fileInputRef.current?.click()
  }

  const handleDownload = (file: UploadRecord) => {
    const url = services.upload.getDownloadUrl(file.id)
    const a = document.createElement("a")
    a.href = url
    a.download = file.file_name
    a.click()
  }

  return (
    <div className="flex w-full flex-col gap-6">
      {/* 操作栏：搜索、权限选择、上传按钮 */}
      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4">
        <div className="relative flex-1 max-w-md">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
          <Input
            placeholder="搜索文件名..."
            value={keyword}
            onChange={(e) => setKeyword(e.target.value)}
            className="pl-9 h-9"
          />
        </div>

        <div className="flex items-center gap-3 self-end sm:self-auto">
          {/* 上传权限设置 */}
          <div className="flex items-center gap-1.5 border rounded-lg p-1 bg-muted/40 h-9 text-xs">
            <Button
              variant={uploadAccessMode === 0 ? "secondary" : "ghost"}
              size="sm"
              className="h-7 px-2.5 text-xs font-normal"
              onClick={() => setUploadAccessMode(0)}
            >
              <Lock className="mr-1 size-3 text-amber-500" />
              私有
            </Button>
            <Button
              variant={uploadAccessMode === 1 ? "secondary" : "ghost"}
              size="sm"
              className="h-7 px-2.5 text-xs font-normal"
              onClick={() => setUploadAccessMode(1)}
            >
              <Globe className="mr-1 size-3 text-sky-500" />
              公开
            </Button>
          </div>

          <input
            type="file"
            ref={fileInputRef}
            onChange={handleFileChange}
            className="hidden"
            disabled={uploading}
          />
          <Button
            onClick={triggerUploadClick}
            disabled={uploading}
            className="h-9 gap-1.5 text-xs font-medium"
          >
            {uploading ? (
              <Loader2 className="size-3.5 animate-spin" />
            ) : (
              <Plus className="size-3.5" />
            )}
            {uploading ? "正在上传..." : "上传文件"}
          </Button>
        </div>
      </div>

      {/* 文件展示区 */}
      {isPending ? (
        <div className="flex items-center justify-center py-24">
          <Loader2 className="size-8 animate-spin text-primary" />
        </div>
      ) : files.length === 0 ? (
        <Card className="border border-dashed py-16 flex flex-col items-center justify-center text-center">
          <CardContent className="flex flex-col items-center gap-4">
            <div className="p-4 bg-muted rounded-full text-muted-foreground/60">
              <Upload className="size-10" />
            </div>
            <div className="space-y-1">
              <h3 className="font-semibold text-sm">还没有上传文件</h3>
              <p className="text-xs text-muted-foreground max-w-xs">
                {debouncedKeyword ? "未搜索到匹配的文件" : "上传您的第一个文件，支持图片、视频、文档和压缩包等格式。"}
              </p>
            </div>
            {!debouncedKeyword && (
              <Button onClick={triggerUploadClick} disabled={uploading} size="sm" className="mt-2 text-xs">
                选择文件上传
              </Button>
            )}
          </CardContent>
        </Card>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {files.map((file) => (
            <Card
              key={file.id}
              className="group border border-border/40 hover:border-border/80 bg-card/60 hover:bg-card/95 transition-all duration-300 shadow-xs hover:shadow-md overflow-hidden relative flex flex-col h-full"
            >
              {/* 文件预览/图标区 */}
              <div className="h-36 bg-muted/30 border-b border-dashed relative flex items-center justify-center overflow-hidden p-2 group-hover:bg-muted/10 transition-colors">
                {file.mime_type.startsWith("image/") ? (
                  <FileImagePreview
                    fileId={file.id}
                    alt={file.file_name}
                    quality="medium"
                    className="max-h-full max-w-full object-contain rounded-md shadow-xs transition-transform duration-350 group-hover:scale-103"
                    fallbackClassName="min-h-full w-full rounded-md"
                  />
                ) : (
                  getFileIcon(file.mime_type)
                )}

                {/* 访问权限 Badge */}
                <div className="absolute top-2 right-2">
                  {file.access_mode === 0 ? (
                    <Badge variant="secondary" className="bg-amber-500/10 text-amber-600 dark:text-amber-400 text-[10px] gap-1 px-1.5 py-0 rounded-md border border-amber-500/20 font-normal">
                      <Lock className="size-2.5" />
                      私有
                    </Badge>
                  ) : (
                    <Badge variant="secondary" className="bg-sky-500/10 text-sky-600 dark:text-sky-400 text-[10px] gap-1 px-1.5 py-0 rounded-md border border-sky-500/20 font-normal">
                      <Globe className="size-2.5" />
                      公开
                    </Badge>
                  )}
                </div>
              </div>

              {/* 文件详情区 */}
              <CardContent className="p-4 flex-1 flex flex-col justify-between gap-3">
                <div className="space-y-1">
                  <h4 className="font-semibold text-xs text-foreground truncate select-all" title={file.file_name}>
                    {file.file_name}
                  </h4>
                  <div className="flex items-center justify-between text-[10px] text-muted-foreground font-mono">
                    <span>{formatFileSize(file.file_size)}</span>
                    <span className="truncate max-w-[120px]" title={file.mime_type}>{file.mime_type}</span>
                  </div>
                </div>

                <div className="flex items-center justify-between pt-1 border-t border-dashed">
                  <span className="text-[9px] text-muted-foreground/80">{formatDate(file.created_at)}</span>

                  <div className="flex items-center gap-1">
                    <Button
                      size="icon"
                      variant="ghost"
                      className="size-7 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground"
                      title="下载文件"
                      onClick={() => handleDownload(file)}
                    >
                      <Download className="size-3.5" />
                    </Button>
                    <Button
                      size="icon"
                      variant="ghost"
                      className="size-7 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive"
                      title="删除文件"
                      onClick={() => setDeleteTarget(file)}
                    >
                      <Trash2 className="size-3.5" />
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      {/* 分页 */}
      {totalPages > 1 && (
        <div className="flex items-center justify-center gap-2 pt-4">
          <Button
            size="sm"
            variant="outline"
            className="border-dashed text-xs h-8 px-3"
            disabled={page <= 1}
            onClick={() => setPage((p) => p - 1)}
          >
            <ChevronLeft className="mr-1 size-3.5" />
            上一页
          </Button>
          <span className="text-xs text-muted-foreground font-medium px-2">
            {page} / {totalPages}
          </span>
          <Button
            size="sm"
            variant="outline"
            className="border-dashed text-xs h-8 px-3"
            disabled={page >= totalPages}
            onClick={() => setPage((p) => p + 1)}
          >
            下一页
            <ChevronRight className="ml-1 size-3.5" />
          </Button>
        </div>
      )}

      {/* 删除确认 Dialog */}
      <AlertDialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
        <AlertDialogContent suppressHydrationWarning>
          <AlertDialogHeader>
            <AlertDialogTitle>确认删除文件</AlertDialogTitle>
            <AlertDialogDescription>
              确定要删除文件{" "}
              <span className="font-semibold text-foreground">「{deleteTarget?.file_name}」</span>{" "}
              吗？删除后此文件将无法恢复。
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={deleteMutation.isPending}>取消</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => deleteTarget && deleteMutation.mutate(deleteTarget.id)}
              disabled={deleteMutation.isPending}
              className="bg-destructive hover:bg-destructive/90 text-destructive-foreground"
            >
              {deleteMutation.isPending && <Loader2 className="mr-1.5 size-3.5 animate-spin" />}
              确认删除
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}