OpenFlare/openflare-server/frontend/app/(main)/admin/database/components/cache-manager.tsx

"use client"

import * as React from "react"
import {useCallback, useEffect, useState} from "react"
import {toast} from "sonner"
import {HardDrive, RefreshCw, Trash2} from "lucide-react"

import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
import {Button} from "@/components/ui/button"
import {Skeleton} from "@/components/ui/skeleton"
import {Label} from "@/components/ui/label"
import {Input} from "@/components/ui/input"
import {Switch} from "@/components/ui/switch"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import type {CacheStatus} from "@/lib/services/admin"
import services from "@/lib/services"

/**
 * 格式化字节大小
 */
const formatBytes = (bytes: number) => {
  if (bytes === 0) return "0 Bytes"
  const k = 1024
  const sizes = ["Bytes", "KB", "MB", "GB", "TB"]
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
}

/**
 * 格式化数字，每3位加逗号
 */
const formatNumber = (num: number | string) => {
  if (num === undefined || num === null) return "0"
  return num.toString().replace(/\B(?=(\d{3})+(?!\B))/g, ",")
}

interface CacheManagerProps {
  refreshTrigger: number
}

export function CacheManager({ refreshTrigger }: CacheManagerProps) {
  const [cacheStatus, setCacheStatus] = useState<CacheStatus | null>(null)
  const [loadingCache, setLoadingCache] = useState<boolean>(true)
  const [savingConfig, setSavingConfig] = useState<boolean>(false)
  const [clearingCache, setClearingCache] = useState<boolean>(false)
  const [showClearConfirm, setShowClearConfirm] = useState<boolean>(false)

  // 策略配置表单状态
  const [maxSizeMB, setMaxSizeMB] = useState<string>("100")
  const [ttlMinutes, setTtlMinutes] = useState<string>("60")
  const [lruEnabled, setLruEnabled] = useState<boolean>(true)

  // 获取磁盘缓存状态
  const fetchCacheStatus = useCallback(async (isSilent = false) => {
    if (!isSilent) setLoadingCache(true)
    try {
      const data = await services.adminCache.getCacheStatus()
      setCacheStatus(data)
      setMaxSizeMB(data.max_size_mb.toString())
      setTtlMinutes(data.ttl_minutes.toString())
      setLruEnabled(data.lru_enabled)
    } catch (err) {
      toast.error("获取磁盘缓存状态失败", {
        description: err instanceof Error ? err.message : "未知错误",
      })
    } finally {
      setLoadingCache(false)
    }
  }, [])

  // 保存配置
  const handleSaveConfig = async (e: React.FormEvent) => {
    e.preventDefault()
    const size = parseInt(maxSizeMB, 10)
    const ttl = parseInt(ttlMinutes, 10)
    if (isNaN(size) || size < 1) {
      toast.error("保存失败", { description: "最大容量限制必须是大于等于 1 的整数" })
      return
    }
    if (isNaN(ttl) || ttl < 0) {
      toast.error("保存失败", { description: "默认过期时间必须是大于等于 0 的整数" })
      return
    }
    setSavingConfig(true)
    try {
      await services.adminCache.updateCacheConfig({
        max_size_mb: size,
        ttl_minutes: ttl,
        lru_enabled: lruEnabled,
      })
      toast.success("保存成功", { description: "磁盘缓存策略已热更新" })
      await fetchCacheStatus(true)
    } catch (err) {
      toast.error("保存配置失败", {
        description: err instanceof Error ? err.message : "未知错误",
      })
    } finally {
      setSavingConfig(false)
    }
  }

  // 清空磁盘缓存数据
  const handleClearCache = async () => {
    setClearingCache(true)
    try {
      await services.adminCache.clearCache()
      toast.success("清空成功", { description: "缓存数据已全部清除" })
      setShowClearConfirm(false)
      await fetchCacheStatus(true)
    } catch (err) {
      toast.error("清空缓存失败", {
        description: err instanceof Error ? err.message : "未知错误",
      })
    } finally {
      setClearingCache(false)
    }
  }

  // 初始化拉取
  useEffect(() => {
    fetchCacheStatus()
  }, [fetchCacheStatus])

  // 当外部刷新触发器改变时自动刷新
  useEffect(() => {
    fetchCacheStatus(true)
  }, [refreshTrigger, fetchCacheStatus])

  return (
    <Card className="border-border/40 bg-card/50 backdrop-blur-sm shadow-sm">
      <CardHeader className="pb-3 border-b border-dashed flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div className="space-y-0.5">
          <div className="flex items-center gap-2">
            <HardDrive className="size-4 text-primary animate-pulse" />
            <CardTitle className="text-sm font-semibold">缓存管理</CardTitle>
          </div>
          <CardDescription className="text-[11px]">管理和监控系统级磁盘缓存的资源占用、生命周期及淘汰策略</CardDescription>
        </div>

        <Button
          size="sm"
          variant="secondary"
          className="h-8 gap-1.5 text-xs self-start md:self-auto"
          onClick={() => fetchCacheStatus(true)}
          disabled={loadingCache}
        >
          <RefreshCw className={`size-3 ${loadingCache ? "animate-spin" : ""}`} />
          刷新状态
        </Button>
      </CardHeader>
      <CardContent className="pt-4">
        {loadingCache && !cacheStatus ? (
          <div className="space-y-3 py-6">
            <Skeleton className="h-6 w-full" />
            <Skeleton className="h-10 w-full" />
            <Skeleton className="h-10 w-full" />
          </div>
        ) : cacheStatus ? (
          <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
            {/* 左边：状态区 (2/5 cols) */}
            <div className="lg:col-span-2 space-y-4">
              <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">运行状态</h4>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {/* 已占空间 */}
                <div className="p-4 rounded-xl border border-border/40 bg-background/30 backdrop-blur-xs hover:border-primary/20 transition-all duration-300">
                  <p className="text-[10px] text-muted-foreground font-medium mb-1">已用空间</p>
                  <p className="text-xl font-bold tracking-tight text-foreground">
                    {formatBytes(cacheStatus.total_size)}
                  </p>
                </div>
                {/* Key数量 */}
                <div className="p-4 rounded-xl border border-border/40 bg-background/30 backdrop-blur-xs hover:border-primary/20 transition-all duration-300">
                  <p className="text-[10px] text-muted-foreground font-medium mb-1">缓存键数量</p>
                  <p className="text-xl font-bold tracking-tight text-foreground">
                    {formatNumber(cacheStatus.keys_count)} <span className="text-xs text-muted-foreground font-normal">个文件</span>
                  </p>
                </div>
              </div>

              {/* 存储路径 */}
              <div className="p-4 rounded-xl border border-border/40 bg-background/30 backdrop-blur-xs hover:border-primary/20 transition-all duration-300">
                <p className="text-[10px] text-muted-foreground font-medium mb-1.5">缓存基准目录</p>
                <code className="text-xs font-mono bg-muted/60 px-2 py-1 rounded-md block truncate" title={cacheStatus.base_path}>
                  {cacheStatus.base_path}
                </code>
              </div>
              <Button
                variant="secondary"
                size="sm"
                className="h-8 text-xs font-medium w-full"
                onClick={() => setShowClearConfirm(true)}
              >
                立即清空缓存
              </Button>
            </div>

            {/* 右边：配置区 (3/5 cols) */}
            <div className="lg:col-span-3 border-t lg:border-t-0 lg:border-l border-border/40 pt-6 lg:pt-0 lg:pl-6 space-y-4">
              <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">策略配置</h4>
              <form onSubmit={handleSaveConfig} className="space-y-4">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div className="space-y-1.5">
                    <Label htmlFor="maxSizeMB" className="text-xs font-medium">最大容量限制 (MB)</Label>
                    <Input
                      id="maxSizeMB"
                      type="number"
                      min="1"
                      value={maxSizeMB}
                      onChange={(e) => setMaxSizeMB(e.target.value)}
                      className="h-8 text-xs bg-background/50 border-border/40"
                      placeholder="例如 100"
                      required
                    />
                    <p className="text-[9px] text-muted-foreground">当总大小超出该值时，自动触发淘汰算法</p>
                  </div>

                  <div className="space-y-1.5">
                    <Label htmlFor="ttlMinutes" className="text-xs font-medium">生存时间限制 (分钟)</Label>
                    <Input
                      id="ttlMinutes"
                      type="number"
                      min="0"
                      value={ttlMinutes}
                      onChange={(e) => setTtlMinutes(e.target.value)}
                      className="h-8 text-xs bg-background/50 border-border/40"
                      placeholder="例如 60，0 表示永不过期"
                      required
                    />
                    <p className="text-[9px] text-muted-foreground">缓存项的最长存活时间，超期后将失效被清理</p>
                  </div>
                </div>

                <div className="flex items-start justify-between p-4 rounded-xl border border-border/40 bg-background/20">
                  <div className="space-y-1 pr-4">
                    <Label htmlFor="lruEnabled" className="text-xs font-semibold block cursor-pointer">
                      启用 LRU 淘汰机制
                    </Label>
                    <span className="text-[10px] text-muted-foreground block">
                      在到达最大容量限制时，自动移除最久未被访问的缓存项。关闭该功能仅清理过期项。
                    </span>
                  </div>
                  <Switch
                    id="lruEnabled"
                    checked={lruEnabled}
                    onCheckedChange={setLruEnabled}
                  />
                </div>

                <div className="flex justify-end pt-2">
                  <Button
                    type="submit"
                    disabled={savingConfig}
                    className="h-8 text-xs px-4"
                  >
                    {savingConfig ? "正在保存..." : "保存设置"}
                  </Button>
                </div>
              </form>
            </div>
          </div>
        ) : (
          <div className="flex flex-col items-center justify-center py-10 text-muted-foreground">
            <HardDrive className="size-8 opacity-45 mb-2" />
            <span className="text-xs">未加载到缓存状态信息</span>
          </div>
        )}
      </CardContent>

      {/* 清除缓存确认对话框 */}
      <Dialog open={showClearConfirm} onOpenChange={setShowClearConfirm}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle className="text-sm font-semibold flex items-center gap-2 text-destructive">
              <Trash2 className="size-4" />
              确认清空所有缓存？
            </DialogTitle>
            <DialogDescription className="text-xs text-muted-foreground pt-1">
              该操作将彻底清空磁盘目录下的全部缓存文件（包含临时解压、处理后的图片及各种块文件），重置键数量统计为 0。此操作不可撤销，且可能导致用户拉取资源时出现一过性的响应变慢。
            </DialogDescription>
          </DialogHeader>
          <DialogFooter className="flex gap-2 justify-end mt-4">
            <Button
              variant="outline"
              size="sm"
              className="h-8 text-xs"
              onClick={() => setShowClearConfirm(false)}
              disabled={clearingCache}
            >
              取消
            </Button>
            <Button
              variant="destructive"
              size="sm"
              className="h-8 text-xs"
              onClick={handleClearCache}
              disabled={clearingCache}
            >
              {clearingCache ? "清理中..." : "确认清空"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Card>
  )
}