import { useState } from 'react'
import { Plus, Trash2 } from 'lucide-react'
import { ListPageShell } from '@/components/ListPageShell'
import { DataTable } from '@/components/DataTable'
import { Pagination } from '@/components/Pagination'
import { SearchBar } from '@/components/SearchBar'
import { Button } from '@/components/Button'
import { Modal } from '@/components/Modal'
import { Field, TextInput } from '@/components/Field'
import { useCatalogList, useCatalogMutations } from '@/lib/useCatalog'
import type { UnitOfMeasure } from '@/lib/types'

const URL = '/api/super-admin/units-of-measure'

interface Form {
  id?: string
  code: string
  name: string
}

const blank: Form = { code: '', name: '' }

export function SuperAdminUnitsOfMeasurePage() {
  const list = useCatalogList<UnitOfMeasure>(URL)
  const { create, update, remove } = useCatalogMutations(URL, URL)
  const [form, setForm] = useState<Form | null>(null)
  const [submitError, setSubmitError] = useState<string | null>(null)

  const save = async () => {
    if (!form) return
    setSubmitError(null)
    const { id, ...payload } = form
    try {
      if (id) await update.mutateAsync({ id, input: payload })
      else await create.mutateAsync(payload)
      setForm(null)
    } catch (e: unknown) {
      type ErrShape = { response?: { data?: { error?: string } } }
      const err = (e as ErrShape).response?.data?.error
      setSubmitError(err ?? 'Не удалось сохранить.')
    }
  }

  const onDelete = async () => {
    if (!form?.id) return
    if (!confirm('Деактивировать единицу? Если на неё ссылаются товары или орги — операция не пройдёт.')) return
    try {
      await remove.mutateAsync(form.id)
      setForm(null)
    } catch (e: unknown) {
      type ErrShape = { response?: { data?: { error?: string; organizations?: string[]; productCount?: number } } }
      const r = (e as ErrShape).response?.data
      const orgs = r?.organizations?.length ? `\n\nОрганизации: ${r.organizations.join(', ')}` : ''
      alert((r?.error ?? 'Не удалось удалить.') + orgs)
    }
  }

  return (
    <>
      <ListPageShell
        title="Единицы измерения (платформа)"
        description="Глобальный справочник. Орги включают нужные единицы у себя в каталоге."
        actions={
          <>
            <SearchBar value={list.search} onChange={list.setSearch} />
            <Button onClick={() => { setSubmitError(null); setForm(blank) }}><Plus className="w-4 h-4" /> Добавить</Button>
          </>
        }
        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}
          onRowClick={(r) => {
            setSubmitError(null)
            setForm({ id: r.id, code: r.code, name: r.name })
          }}
          columns={[
            { header: 'Код', width: '90px', sortKey: 'code', cell: (r) => <span className="font-mono">{r.code}</span> },
            { header: 'Название', sortKey: 'name', cell: (r) => r.name },
            {
              header: 'Статус',
              width: '110px',
              cell: (r) => r.isActive
                ? <span className="text-xs text-green-700 dark:text-green-300">Активна</span>
                : <span className="text-xs text-gray-500">Деактивирована</span>,
            },
          ]}
        />
      </ListPageShell>

      <Modal
        open={!!form}
        onClose={() => setForm(null)}
        title={form?.id ? 'Редактировать единицу' : 'Новая единица измерения'}
        footer={
          <>
            {form?.id && (
              <Button variant="danger" size="sm" onClick={onDelete}>
                <Trash2 className="w-4 h-4" /> Деактивировать
              </Button>
            )}
            <Button variant="secondary" onClick={() => setForm(null)}>Отмена</Button>
            <Button onClick={save} disabled={!form?.code || !form?.name}>Сохранить</Button>
          </>
        }
      >
        {form && (
          <div className="space-y-3">
            <Field label="Код ОКЕИ">
              <TextInput value={form.code} onChange={(e) => setForm({ ...form, code: e.target.value })} />
            </Field>
            <Field label="Название">
              <TextInput value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
            </Field>
            {submitError && (
              <p className="text-sm text-red-600 dark:text-red-400">{submitError}</p>
            )}
          </div>
        )}
      </Modal>
    </>
  )
}
