EvoBGP/apps/web/src/components/operations/operations-jobs-card.tsx

import { useState } from 'react'
import { LayoutGrid, Table2 } from 'lucide-react'

import { OperationsJobsGrid } from '@/components/operations/operations-jobs-grid'
import { OperationsJobsKanban } from '@/components/operations/operations-jobs-kanban'
import { QueryState } from '@/components/query-state'
import { ToggleGroup, ToggleGroupItem } from '@evobgp/ui/components/toggle-group'
import type { JobRow } from '@/types/api'
import type { QueryClient } from '@tanstack/react-query'

/**
 * Jobs ResourcePage + optional Kanban board (не замена грида).
 * @see https://reui.io/preview/base/data-grid-filtering-2
 * @see https://reui.io/docs/components/base/kanban
 */
export function OperationsJobsCard({
  jobs,
  nameById,
  qc,
  isLoading,
  isError,
  error,
  onRetry,
}: {
  jobs: JobRow[]
  nameById: Map<string, string>
  qc: QueryClient
  isLoading: boolean
  isError: boolean
  error: unknown
  onRetry: () => void
}) {
  const [view, setView] = useState<'table' | 'board'>('table')

  return (
    <div className="flex flex-col gap-3">
      <div className="flex justify-end">
        <ToggleGroup
          multiple={false}
          value={[view]}
          onValueChange={(values) => {
            const next = values[0]
            if (next === 'table' || next === 'board') setView(next)
          }}
          variant="outline"
          size="sm"
          aria-label="Вид задач"
          className="w-fit"
        >
          <ToggleGroupItem value="table" aria-label="Таблица">
            <Table2 className="size-4" />
            Таблица
          </ToggleGroupItem>
          <ToggleGroupItem value="board" aria-label="Доска">
            <LayoutGrid className="size-4" />
            Доска
          </ToggleGroupItem>
        </ToggleGroup>
      </div>
      <QueryState
        data={jobs}
        isLoading={isLoading}
        isError={isError}
        error={error}
        empty={false}
        onRetry={onRetry}
      >
        {(items) =>
          view === 'board' ? (
            <OperationsJobsKanban items={items} nameById={nameById} />
          ) : (
            <OperationsJobsGrid
              items={items}
              nameById={nameById}
              qc={qc}
              isLoading={isLoading && items.length > 0}
            />
          )
        }
      </QueryState>
    </div>
  )
}