EvoBGP/apps/web/src/components/analytics/dashboard-operations-flow-card.tsx

import { useMemo, useState } from 'react'

import { AnalyticsCardShell } from '@/components/analytics/analytics-card-shell'
import { AnalyticsSegmentControl } from '@/components/analytics/analytics-segment-control'
import { ChartDonutMetric } from '@/components/analytics/chart-donut-metric'
import { jobStatusBreakdown, moduleTypeBreakdown } from '@/lib/metrics'
import type { JobRow, ModuleRow } from '@/types/api'

type FlowMode = 'jobs' | 'modules'

export function DashboardOperationsFlowCard({
  jobs,
  modules,
  loading,
}: {
  jobs: JobRow[]
  modules: ModuleRow[]
  loading?: boolean
}) {
  const [mode, setMode] = useState<FlowMode>('jobs')

  const slices = useMemo(
    () => (mode === 'jobs' ? jobStatusBreakdown(jobs) : moduleTypeBreakdown(modules)),
    [mode, jobs, modules],
  )

  const total = slices.reduce((sum, slice) => sum + slice.count, 0)
  const centerLabel = mode === 'jobs' ? 'Задачи' : 'Модули'

  return (
    <AnalyticsCardShell
      title="Поток операций"
      description="Распределение фоновых задач и типов модулей"
      info="Donut строится по текущей выборке API (до 100 последних задач)."
      actions={
        <AnalyticsSegmentControl
          value={mode}
          onChange={setMode}
          options={[
            { value: 'jobs', label: 'Задачи' },
            { value: 'modules', label: 'Модули' },
          ]}
        />
      }
    >
      {loading ? (
        <div className="flex h-48 items-center justify-center text-sm text-muted-foreground">
          Загрузка…
        </div>
      ) : (
        <ChartDonutMetric
          slices={slices}
          centerLabel={centerLabel}
          centerValue={total}
        />
      )}
    </AnalyticsCardShell>
  )
}