LokiStack/frontend/src/pages/storage/index.tsx

import { useEffect, memo, useCallback, useState } from 'react'
import { HardDrive, Plus } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { storageApi, deploymentApi } from '@/api'
import { PageContainer } from '@/components/PageContainer'
import { LoadingSpinner } from '@/components/LoadingSpinner'
import { EmptyState } from '@/components/EmptyState'
import { ErrorState } from '@/components/ErrorState'
import { PaginationBar } from '@/components/PaginationBar'
import { ConfirmDialog } from '@/components/ConfirmDialog'
import { toast } from 'sonner'
import { useListQuery } from '@/hooks/useListQuery'
import type { StorageConfig } from '@/types'
import { StorageCard } from './components/StorageCard'
import { StorageFormDialog } from './components/StorageFormDialog'

/**
 * 存储配置页 — 只做编排：数据走 useListQuery（取消+版本号），
 * 卡片/表单/删除确认为域内子组件。成功操作静默（列表刷新即反馈）。
 */
const StoragePage = memo(function StoragePage() {
  const query = useListQuery<StorageConfig>((params, signal) =>
    storageApi.list(params, { signal })
  )

  const [formOpen, setFormOpen] = useState(false)
  const [deleteTarget, setDeleteTarget] = useState<StorageConfig | null>(null)
  const [deleting, setDeleting] = useState(false)

  const [depRefCount, setDepRefCount] = useState(0)
  useEffect(() => {
    if (!deleteTarget) return
    deploymentApi
      .list({ page: 1, pageSize: 100 })
      .then((d) => setDepRefCount(d.list.filter((x) => x.storageConfigID === deleteTarget.id).length))
      .catch(() => setDepRefCount(0))
  }, [deleteTarget])

  const handleDelete = useCallback(async () => {
    const id = deleteTarget?.id
    if (!id) return
    setDeleting(true)
    try {
      await storageApi.remove(id)
      setDeleteTarget(null)
      query.refresh()
    } catch (err) {
      toast.error(err instanceof Error ? err.message : '删除存储配置失败')
    } finally {
      setDeleting(false)
    }
  }, [deleteTarget, query])

  // 设为默认存储（后端保证唯一默认：置新默认会取消旧默认）
  const handleSetDefault = useCallback(
    async (id: number) => {
      try {
        await storageApi.update(id, { isDefault: true })
        query.refresh()
      } catch (err) {
        toast.error(err instanceof Error ? err.message : '设置默认存储失败')
      }
    },
    [query]
  )

  return (
    <PageContainer
      title="存储配置"
      description="为 Loki 配置对象存储后端"
      action={
        <Button
          className="bg-primary hover:bg-primary/90"
          onClick={() => setFormOpen(true)}
        >
          <Plus className="w-4 h-4 mr-1" />
          添加存储
        </Button>
      }
    >
      {query.loading ? (
        <LoadingSpinner className="h-64" />
      ) : query.error ? (
        <ErrorState message={query.error} onRetry={query.refresh} />
      ) : query.list.length === 0 ? (
        <EmptyState
          icon={HardDrive}
          title="暂无存储配置"
          description="添加第一个 Loki 存储后端"
        />
      ) : (
        <>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {query.list.map((storage) => (
              <StorageCard
                key={storage.id}
                storage={storage}
                onSetDefault={handleSetDefault}
                onDelete={setDeleteTarget}
              />
            ))}
          </div>
          <PaginationBar
            page={query.page}
            pageSize={query.pageSize}
            total={query.total}
            onPageChange={query.setPage}
          />
        </>
      )}

      <StorageFormDialog
        open={formOpen}
        onOpenChange={setFormOpen}
        onCreated={query.reload}
      />

      <ConfirmDialog
        open={deleteTarget !== null}
        onOpenChange={(open) => {
          if (!open) setDeleteTarget(null)
        }}
        name={deleteTarget?.name}
        loading={deleting}
        description={
          depRefCount > 0
            ? `确定要删除「${deleteTarget?.name}」吗?警告:仍有 ${depRefCount} 个部署使用该存储,删除后这些部署的对象存储配置将失效。`
            : undefined
        }
        onConfirm={handleDelete}
      />
    </PageContainer>
  )
})

export default StoragePage