EvoBGP/apps/web/src/components/access/access-api-keys-card.tsx

import { useState } from 'react'
import { Plus, RefreshCw } from 'lucide-react'

import { Button } from '@evobgp/ui/components/button'

import { AccessApiKeysGrid } from '@/components/access/access-api-keys-grid'
import { DataGridCard } from '@/components/data-grid-shell'
import { ApiKeyCreateDialog } from '@/components/access/api-key-create-dialog'
import { ApiKeyTokenDialog } from '@/components/access/api-key-token-dialog'
import { QueryState } from '@/components/query-state'
import { TableSkeleton } from '@/components/skeletons'
import { useRevokeApiKeyMutation, useRotateApiKeyMutation } from '@/queries/api-keys'
import type { ApiKey, ApiKeyCreated } from '@/types/api'

interface AccessApiKeysCardProps {
  items: ApiKey[]
  isLoading: boolean
  isError: boolean
  error: unknown
  onRetry: () => void
}

export function AccessApiKeysCard({
  items,
  isLoading,
  isError,
  error,
  onRetry,
}: AccessApiKeysCardProps) {
  const [createOpen, setCreateOpen] = useState(false)
  const [tokenDialogOpen, setTokenDialogOpen] = useState(false)
  const [revealedToken, setRevealedToken] = useState('')

  const revoke = useRevokeApiKeyMutation()
  const rotate = useRotateApiKeyMutation()

  function showToken(created: ApiKeyCreated) {
    setRevealedToken(created.token)
    setTokenDialogOpen(true)
  }

  function handleRotated(id: string) {
    rotate.mutate(id, {
      onSuccess: (created) => showToken(created),
    })
  }

  return (
    <>
      <DataGridCard
        title="API-ключи"
        description="Управление ключами tenant. Полный токен показывается только при создании и ротации."
        actions={
          <>
            <Button size="sm" variant="outline" type="button" onClick={onRetry} disabled={isLoading}>
              <RefreshCw className={isLoading ? 'animate-spin' : ''} />
              Обновить
            </Button>
            <Button size="sm" type="button" onClick={() => setCreateOpen(true)}>
              <Plus />
              Создать
            </Button>
          </>
        }
      >
        <QueryState
          data={items}
          isLoading={isLoading}
          isError={isError}
          error={error}
          empty={items.length === 0}
          emptyTitle="Нет ключей"
          emptyDescription="Создайте API-ключ для автоматизации или отдельного доступа."
          skeleton={<TableSkeleton rows={4} cols={6} />}
          onRetry={onRetry}
        >
          {(data) => (
            <AccessApiKeysGrid
              items={data}
              isLoading={isLoading}
              onRotate={handleRotated}
              onRevoke={(id) => revoke.mutate(id)}
              rotatePending={rotate.isPending}
              revokePending={revoke.isPending}
            />
          )}
        </QueryState>
      </DataGridCard>

      <ApiKeyCreateDialog
        open={createOpen}
        onOpenChange={setCreateOpen}
        onCreated={showToken}
      />

      <ApiKeyTokenDialog
        open={tokenDialogOpen}
        token={revealedToken}
        onOpenChange={setTokenDialogOpen}
      />
    </>
  )
}