import { useState } from 'react'
import { Plus, Trash2, Lock } 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, Checkbox } from '@/components/Field'
import { useCatalogList, useCatalogMutations } from '@/lib/useCatalog'
import { useQueryClient } from '@tanstack/react-query'
import type { PriceType } from '@/lib/types'

const URL = '/api/catalog/price-types'

interface Form {
  id?: string
  name: string
  isRequired: boolean
  isSystem: boolean
  isRetail: boolean
  sortOrder: number
}
const blankForm: Form = { name: '', isRequired: false, isSystem: false, isRetail: false, sortOrder: 0 }

export function PriceTypesPage() {
  const { data, isLoading, page, setPage, search, setSearch, sortKey, sortOrder, setSort } = useCatalogList<PriceType>(URL)
  const { create, update, remove } = useCatalogMutations(URL, URL)
  const [form, setForm] = useState<Form | null>(null)
  const qc = useQueryClient()

  const save = async () => {
    if (!form) return
    const { id, isSystem: _omit, ...payload } = form
    void _omit
    if (id) await update.mutateAsync({ id, input: payload })
    else await create.mutateAsync(payload)
    // useCatalogMutations инвалидирует ['/api/catalog/price-types'] (List на этой
    // странице), но usePriceTypes-хук живёт под ключом 'lookup:price-types' —
    // явно тригерим перефетч чтобы карточка товара сразу увидела новый
    // IsRequired/IsRetail без перезагрузки страницы.
    await qc.invalidateQueries({ queryKey: ['lookup:price-types'] })
    setForm(null)
  }

  return (
    <>
      <ListPageShell
        title="Типы цен"
        description="Розничная, оптовая и другие ценовые группы."
        actions={
          <>
            <SearchBar value={search} onChange={setSearch} />
            <Button onClick={() => setForm(blankForm)}><Plus className="w-4 h-4" /> Добавить</Button>
          </>
        }
        footer={data && data.total > 0 && (
          <Pagination page={page} pageSize={data.pageSize} total={data.total} onPageChange={setPage} />
        )}
      >
        <DataTable
          rows={data?.items ?? []}
          isLoading={isLoading}
          rowKey={(r) => r.id}
          sortKey={sortKey}
          sortOrder={sortOrder}
          onSortChange={setSort}
          onRowClick={(r) => setForm({
            id: r.id, name: r.name,
            isRequired: r.isRequired, isSystem: r.isSystem,
            isRetail: r.isRetail, sortOrder: r.sortOrder,
          })}
          columns={[
            { header: 'Название', sortKey: 'name', cell: (r) => (
              <span className="flex items-center gap-1.5">
                {r.name}
                {r.isSystem && <Lock className="w-3.5 h-3.5 text-slate-400" />}
              </span>
            )},
            { header: 'Обязательно', width: '140px', sortKey: 'isRequired', cell: (r) => r.isRequired ? '✓' : '—' },
            { header: 'Порядок', width: '100px', className: 'text-right', cell: (r) => r.sortOrder },
          ]}
        />
      </ListPageShell>

      <Modal
        open={!!form}
        onClose={() => setForm(null)}
        title={form?.id ? 'Редактировать тип цены' : 'Новый тип цены'}
        footer={
          <>
            {form?.id && !form.isSystem && (
              <Button variant="danger" size="sm" onClick={async () => {
                if (confirm('Удалить тип цены?')) {
                  await remove.mutateAsync(form.id!)
                  await qc.invalidateQueries({ queryKey: ['lookup:price-types'] })
                  setForm(null)
                }
              }}>
                <Trash2 className="w-4 h-4" /> Удалить
              </Button>
            )}
            <Button variant="secondary" onClick={() => setForm(null)}>Отмена</Button>
            <Button onClick={save} disabled={!form?.name}>Сохранить</Button>
          </>
        }
      >
        {form && (
          <div className="space-y-3">
            {form.isSystem && (
              <p className="text-xs text-slate-500 bg-slate-50 dark:bg-slate-800/40 p-2 rounded border border-slate-200 dark:border-slate-700">
                Системная запись. Имя можно переименовать; флаг «Обязательно» зафиксирован, удаление запрещено.
              </p>
            )}
            <Field label="Название">
              <TextInput value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
            </Field>
            <Field label="Порядок сортировки">
              <TextInput type="number"
                value={form.sortOrder}
                onChange={(e) => setForm({ ...form, sortOrder: Number(e.target.value) })}
              />
            </Field>
            <Checkbox
              label="Обязательная (требуется заполнение у каждого товара)"
              checked={form.isRequired}
              disabled={form.isSystem}
              onChange={(v) => setForm({ ...form, isRequired: v })}
            />
            <Checkbox label="Используется на кассе" checked={form.isRetail} onChange={(v) => setForm({ ...form, isRetail: v })} />
          </div>
        )}
      </Modal>
    </>
  )
}
