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

import { useEffect, memo, useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
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 { t } = useTranslation('storage')
  const query = useListQuery<StorageConfig>((params, signal) =>
    storageApi.list(params, { signal })
  )

  const [formOpen, setFormOpen] = useState(false)
  const [deleteTarget, setDeleteTarget] = useState<StorageConfig | null>(null)
  const [editingTarget, setEditingTarget] = 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 : t('page.errDelete'))
    } finally {
      setDeleting(false)
    }
  }, [deleteTarget, query, t])

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

  return (
    <PageContainer
      title={t('page.title')}
      description={t('page.description')}
      action={
        <Button onClick={() => setFormOpen(true)}>
          <Plus className="w-4 h-4 mr-1" />
          {t('page.add')}
        </Button>
      }
    >
      {query.loading ? (
        <LoadingSpinner className="h-64" />
      ) : query.error ? (
        <ErrorState message={query.error} onRetry={query.refresh} />
      ) : query.list.length === 0 ? (
        <EmptyState
          icon={HardDrive}
          title={t('page.emptyTitle')}
          description={t('page.emptyDescription')}
        />
      ) : (
        <>
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
            {query.list.map((storage) => (
              <StorageCard
                key={storage.id}
                storage={storage}
                onSetDefault={handleSetDefault}
                onDelete={setDeleteTarget}
                onEdit={setEditingTarget}
              />
            ))}
          </div>
          <PaginationBar
            page={query.page}
            pageSize={query.pageSize}
            total={query.total}
            onPageChange={query.setPage}
          />
        </>
      )}

      <StorageFormDialog
        open={formOpen || editingTarget !== null}
        onOpenChange={(o) => {
          if (!o) {
            setFormOpen(false)
            setEditingTarget(null)
          }
        }}
        onCreated={() => (editingTarget ? query.refresh() : query.reload())}
        editing={editingTarget}
      />

      <ConfirmDialog
        open={deleteTarget !== null}
        onOpenChange={(open) => {
          if (!open) setDeleteTarget(null)
        }}
        name={deleteTarget?.name}
        loading={deleting}
        description={
          depRefCount > 0
            ? t('page.deleteWarning', { name: deleteTarget?.name, count: depRefCount })
            : undefined
        }
        onConfirm={handleDelete}
      />
    </PageContainer>
  )
})

export default StoragePage