import { useMemo, useState, type ReactNode } from 'react'
import { Globe } from 'lucide-react'

import { CategoryBadge } from '@/components/category-badge'
import { DataGridMonoCell, DataGridNameCell } from '@/components/data-grid-cell'
import { DirectoriesRowActions } from '@/components/directories/directories-row-actions'
import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
import type { FilterField, FilterQuery } from '@/components/reui/filters/filters-types'
import {
  ResourcePage,
  createSearchFilterField,
  createTextFilterQuery,
  type DataGridColumnDef,
} from '@/components/reui-kit'
import type { DohProfile } from '@/types/api'

const filterFields: FilterField[] = [
  createSearchFilterField('search', 'Поиск', 'Поиск DoH профилей…'),
]

export function DirectoriesDohGrid({
  items,
  isLoading = false,
  canWrite = false,
  onEdit,
  actions,
}: {
  items: DohProfile[]
  isLoading?: boolean
  canWrite?: boolean
  onEdit?: (row: DohProfile) => void
  actions?: ReactNode
}) {
  const [filterQuery, setFilterQuery] = useState<FilterQuery>(() =>
    createTextFilterQuery('search'),
  )

  const columns = useMemo<DataGridColumnDef<DohProfile>[]>(() => {
    const cols: DataGridColumnDef<DohProfile>[] = [
      {
        id: 'name',
        accessorFn: (row) => row.name ?? row.url,
        header: ({ column }) => <DataGridColumnHeader column={column} title="Название" />,
        cell: ({ row }) => (
          <DataGridNameCell
            icon={Globe}
            title={row.original.name ?? row.original.url}
            subtitle={row.original.name ? row.original.url : undefined}
          />
        ),
        meta: { headerTitle: 'Название' },
      },
      {
        accessorKey: 'url',
        header: ({ column }) => <DataGridColumnHeader column={column} title="URL" />,
        cell: ({ row }) => <DataGridMonoCell>{row.original.url}</DataGridMonoCell>,
        meta: { headerTitle: 'URL' },
      },
      {
        id: 'default',
        enableSorting: false,
        header: 'По умолчанию',
        cell: () => <CategoryBadge>—</CategoryBadge>,
        meta: { headerTitle: 'По умолчанию' },
      },
    ]

    if (canWrite && onEdit) {
      cols.push({
        id: 'actions',
        enableSorting: false,
        enableHiding: false,
        header: () => <span className="sr-only">Действия</span>,
        cell: ({ row }) => <DirectoriesRowActions onEdit={() => onEdit(row.original)} />,
        meta: { headerTitle: 'Действия' },
      })
    }

    return cols
  }, [canWrite, onEdit])

  return (
    <ResourcePage
      title="DoH профили"
      description="Резолверы DNS-over-HTTPS для доменных модулей"
      filterFields={filterFields}
      filterQuery={filterQuery}
      onFilterQueryChange={setFilterQuery}
      onClearFilters={() => setFilterQuery(createTextFilterQuery('search'))}
      getFilterFieldValue={(row) => `${row.name ?? ''} ${row.url}`}
      columns={columns}
      data={items}
      getRowId={(row) => row.id}
      isLoading={isLoading}
      primaryAction={actions}
      pinLastColumn={Boolean(canWrite && onEdit)}
      emptyState={{ title: 'Нет DoH профилей', action: actions }}
    />
  )
}