import { useMutation, useQueryClient } from '@tanstack/react-query'
import { ListPageShell } from '@/components/ListPageShell'
import { DataTable } from '@/components/DataTable'
import { Pagination } from '@/components/Pagination'
import { SearchBar } from '@/components/SearchBar'
import { useCatalogList } from '@/lib/useCatalog'
import { api } from '@/lib/api'
import { useIsSuperAdmin } from '@/lib/useMe'
import type { UnitOfMeasure } from '@/lib/types'
import { Link } from 'react-router-dom'

const URL = '/api/catalog/units-of-measure'

export function UnitsOfMeasurePage() {
  const isSuperAdmin = useIsSuperAdmin()
  const list = useCatalogList<UnitOfMeasure>(URL)
  const qc = useQueryClient()

  const enable = useMutation({
    mutationFn: async (id: string) => (await api.post(`${URL}/${id}/enable`)).data,
    onSuccess: () => qc.invalidateQueries({ queryKey: [URL] }),
  })
  const disable = useMutation({
    mutationFn: async (id: string) => (await api.delete(`${URL}/${id}/enable`)).data,
    onError: (err: unknown) => {
      type ErrShape = { response?: { data?: { error?: string; products?: string[] } } }
      const r = (err as ErrShape).response?.data
      const products = r?.products?.length ? `\n\nТовары: ${r.products.join(', ')}` : ''
      alert((r?.error ?? 'Не удалось отключить.') + products)
    },
    onSuccess: () => qc.invalidateQueries({ queryKey: [URL] }),
  })

  return (
    <ListPageShell
      title="Единицы измерения"
      description={
        isSuperAdmin
          ? 'Глобальный справочник ОКЕИ. Управление полным справочником — на странице платформы.'
          : 'Включите единицы, нужные вашей организации. Добавление новых единиц — у платформы.'
      }
      actions={
        <>
          <SearchBar value={list.search} onChange={list.setSearch} />
          {isSuperAdmin && (
            <Link
              to="/super-admin/units"
              className="inline-flex items-center gap-1 px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700"
            >Управление справочником</Link>
          )}
        </>
      }
      footer={list.data && list.data.total > 0 && (
        <Pagination page={list.page} pageSize={list.data.pageSize} total={list.data.total} onPageChange={list.setPage} />
      )}
    >
      <DataTable
        rows={list.data?.items ?? []}
        isLoading={list.isLoading}
        rowKey={(r) => r.id}
        sortKey={list.sortKey}
        sortOrder={list.sortOrder}
        onSortChange={list.setSort}
        columns={[
          // Колонку «Код» (ОКЕИ 796/166/...) не показываем org-юзеру: код нужен
          // только для интеграций (МойСклад/1С) и виден SuperAdmin'у на
          // /super-admin/units. Здесь админ орги выбирает по понятному имени.
          { header: 'Название', sortKey: 'name', cell: (r) => r.name },
          {
            header: 'Для орги',
            width: '120px',
            cell: (r) => (
              <button
                type="button"
                disabled={enable.isPending || disable.isPending}
                onClick={(e) => {
                  e.stopPropagation()
                  if (r.isEnabledForOrg) disable.mutate(r.id)
                  else enable.mutate(r.id)
                }}
                className={
                  r.isEnabledForOrg
                    ? 'px-2 py-1 text-xs rounded bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-300'
                    : 'px-2 py-1 text-xs rounded bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400'
                }
              >
                {r.isEnabledForOrg ? 'Включено' : 'Выключено'}
              </button>
            ),
          },
        ]}
      />
    </ListPageShell>
  )
}
