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 { 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 (
    <>
      <QueryState
        data={items}
        isLoading={isLoading}
        isError={isError}
        error={error}
        empty={false}
        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}
            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>

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

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