import { createFileRoute } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import { PageHeader } from '@/ui'
import { DictionaryGraph } from '@/components/graph/DictionaryGraph'

/**
 * Граф связей справочников — d3-force network diagram.
 *
 * Render: SVG с force-directed layout. Nodes = справочники (color по bundle,
 * size по recordCount). Edges = incoming FK refs (через useDictionaryDependents
 * для каждого dict'а, параллельно).
 *
 * Interactions:
 *  - hover node → highlight node + connected edges + neighbors (dim others)
 *  - click node → navigate /dictionaries/$name
 *
 * Performance: 40+ nodes SVG OK. >200 — переключать на canvas.
 */
export const Route = createFileRoute('/graph')({
  component: GraphPage,
})

function GraphPage() {
  const { t } = useTranslation()
  return (
    <div className="flex flex-col gap-4">
      <PageHeader title={t('graph.title')} description={t('graph.description')} />
      <DictionaryGraph />
    </div>
  )
}