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, Select, PercentInput } from '@/components/Field'
import { useCatalogList, useCatalogMutations } from '@/lib/useCatalog'
import type { ProductGroup } from '@/lib/types'
import { useQueryClient } from '@tanstack/react-query'
import { api } from '@/lib/api'

const URL = '/api/catalog/product-groups'

interface Form { id?: string; name: string; parentId: string | null; sortOrder: number; markupPercent: number | null }
const blankForm: Form = { name: '', parentId: null, sortOrder: 0, markupPercent: null }

export function ProductGroupsPage() {
  const { data, isLoading, page, setPage, search, setSearch, sortKey, sortOrder, setSort } = useCatalogList<ProductGroup>(URL)
  const { create, update, remove } = useCatalogMutations(URL, URL)
  const [form, setForm] = useState<Form | null>(null)
  const qc = useQueryClient()
  // inline-сохранение наценки прямо из таблицы — без открытия модалки.
  const saveMarkup = async (g: ProductGroup, markupPercent: number | null) => {
    await api.put(`/api/catalog/product-groups/${g.id}`, {
      name: g.name,
      parentId: g.parentId,
      sortOrder: g.sortOrder,
      markupPercent,
    })
    await qc.invalidateQueries({ queryKey: [URL] })
  }

  const save = async () => {
    if (!form) return
    const { id, ...payload } = form
    if (id) await update.mutateAsync({ id, input: payload })
    else await create.mutateAsync(payload)
    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) => {
            if (r.organizationId === null) {
              alert('Эталонная группа. Изменения недоступны — управляются на уровне платформы.')
              return
            }
            setForm({ id: r.id, name: r.name, parentId: r.parentId, sortOrder: r.sortOrder, markupPercent: r.markupPercent })
          }}
          columns={[
            { header: 'Название', sortKey: 'name', cell: (r) => (
              <span>
                {r.name}
                {r.organizationId === null && (
                  <span className="ml-2 text-[10px] uppercase px-1.5 py-0.5 rounded bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300">Эталон</span>
                )}
              </span>
            )},
            { header: 'Путь', sortKey: 'path', cell: (r) => <span className="text-slate-500">{r.path}</span> },
            { header: 'Наценка', width: '140px', cell: (r) => (
              <div onClick={(e) => e.stopPropagation()}>
                <PercentInput
                  value={r.markupPercent}
                  onChange={(n) => { void saveMarkup(r, n) }}
                  placeholder="—"
                />
              </div>
            )},
            { header: 'Порядок', width: '100px', className: 'text-right', cell: (r) => r.sortOrder },
          ]}
        />
      </ListPageShell>

      <Modal
        open={!!form}
        onClose={() => setForm(null)}
        title={form?.id ? 'Редактировать группу' : 'Новая группа товаров'}
        footer={
          <>
            {form?.id && (
              <Button variant="danger" size="sm" onClick={async () => {
                if (confirm('Удалить группу? (должна быть пустой)')) {
                  try { await remove.mutateAsync(form.id!); setForm(null) }
                  catch (e) { alert((e as Error).message) }
                }
              }}>
                <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">
            <Field label="Название">
              <TextInput value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
            </Field>
            <Field label="Родительская группа">
              <Select
                value={form.parentId ?? ''}
                onChange={(e) => setForm({ ...form, parentId: e.target.value || null })}
              >
                <option value="">(верхний уровень)</option>
                {data?.items.filter((g) => g.id !== form.id).map((g) => (
                  <option key={g.id} value={g.id}>{g.path}</option>
                ))}
              </Select>
            </Field>
            <Field label="Порядок сортировки">
              <TextInput type="number"
                value={form.sortOrder}
                onChange={(e) => setForm({ ...form, sortOrder: Number(e.target.value) })}
              />
            </Field>
            <Field label="Наценка % (для авто-розничной по себестоимости)">
              <PercentInput
                value={form.markupPercent}
                onChange={(n) => setForm({ ...form, markupPercent: n })}
                placeholder="нет автонаценки"
              />
              <p className="text-xs text-slate-500 mt-1">
                При проведении приёмки розничная цена товара = ⌈Себестоимость × (1 + наценка/100)⌉.
                Пусто — автонаценка отключена.
              </p>
            </Field>
          </div>
        )}
      </Modal>
    </>
  )
}
