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, TextArea, Checkbox } from '@/components/Field'
import { useCatalogList, useCatalogMutations } from '@/lib/useCatalog'

const URL = '/api/organization/employee-roles'

export interface RolePermissions {
  productsView: boolean; productsEdit: boolean; productsDelete: boolean
  productGroupsManage: boolean; priceTypesManage: boolean; unitsManage: boolean
  suppliesView: boolean; suppliesEdit: boolean; suppliesPost: boolean; suppliesDelete: boolean
  demandsView: boolean; demandsEdit: boolean; demandsPost: boolean
  retailSalesOperate: boolean; retailSalesRefund: boolean
  counterpartiesView: boolean; counterpartiesEdit: boolean; counterpartiesDelete: boolean
  stocksView: boolean; inventoryEdit: boolean; lossEdit: boolean; enterEdit: boolean
  reportsView: boolean; reportsFinanceView: boolean; reportsStockView: boolean
  orgSettingsManage: boolean; employeesManage: boolean; rolesManage: boolean
  storesManage: boolean; retailPointsManage: boolean; cashRegistersManage: boolean
  integrationsManage: boolean
}

export interface EmployeeRoleDto {
  id: string; name: string; description: string | null
  isSystem: boolean; sortOrder: number; permissions: RolePermissions
}

interface Form {
  id?: string
  name: string
  description: string
  isSystem: boolean
  permissions: RolePermissions
}

const blankPerms = (): RolePermissions => ({
  productsView: false, productsEdit: false, productsDelete: false,
  productGroupsManage: false, priceTypesManage: false, unitsManage: false,
  suppliesView: false, suppliesEdit: false, suppliesPost: false, suppliesDelete: false,
  demandsView: false, demandsEdit: false, demandsPost: false,
  retailSalesOperate: false, retailSalesRefund: false,
  counterpartiesView: false, counterpartiesEdit: false, counterpartiesDelete: false,
  stocksView: false, inventoryEdit: false, lossEdit: false, enterEdit: false,
  reportsView: false, reportsFinanceView: false, reportsStockView: false,
  orgSettingsManage: false, employeesManage: false, rolesManage: false,
  storesManage: false, retailPointsManage: false, cashRegistersManage: false,
  integrationsManage: false,
})

export const allPerms = (): RolePermissions => ({
  productsView: true, productsEdit: true, productsDelete: true,
  productGroupsManage: true, priceTypesManage: true, unitsManage: true,
  suppliesView: true, suppliesEdit: true, suppliesPost: true, suppliesDelete: true,
  demandsView: true, demandsEdit: true, demandsPost: true,
  retailSalesOperate: true, retailSalesRefund: true,
  counterpartiesView: true, counterpartiesEdit: true, counterpartiesDelete: true,
  stocksView: true, inventoryEdit: true, lossEdit: true, enterEdit: true,
  reportsView: true, reportsFinanceView: true, reportsStockView: true,
  orgSettingsManage: true, employeesManage: true, rolesManage: true,
  storesManage: true, retailPointsManage: true, cashRegistersManage: true,
  integrationsManage: true,
})

const blankForm = (): Form => ({ name: '', description: '', isSystem: false, permissions: blankPerms() })

export const PERM_GROUPS: { title: string; perms: { key: keyof RolePermissions; label: string }[] }[] = [
  { title: 'Каталог', perms: [
    { key: 'productsView', label: 'Просмотр товаров' },
    { key: 'productsEdit', label: 'Редактирование товаров' },
    { key: 'productsDelete', label: 'Удаление товаров' },
    { key: 'productGroupsManage', label: 'Управление группами' },
    { key: 'priceTypesManage', label: 'Управление типами цен' },
    { key: 'unitsManage', label: 'Единицы измерения' },
  ]},
  { title: 'Закупки', perms: [
    { key: 'suppliesView', label: 'Просмотр приёмок' },
    { key: 'suppliesEdit', label: 'Редактирование приёмок' },
    { key: 'suppliesPost', label: 'Проведение приёмок' },
    { key: 'suppliesDelete', label: 'Удаление приёмок' },
  ]},
  { title: 'Продажи', perms: [
    { key: 'demandsView', label: 'Просмотр отгрузок' },
    { key: 'demandsEdit', label: 'Редактирование отгрузок' },
    { key: 'demandsPost', label: 'Проведение отгрузок' },
    { key: 'retailSalesOperate', label: 'Работа на кассе' },
    { key: 'retailSalesRefund', label: 'Возвраты на кассе' },
  ]},
  { title: 'Контрагенты', perms: [
    { key: 'counterpartiesView', label: 'Просмотр' },
    { key: 'counterpartiesEdit', label: 'Редактирование' },
    { key: 'counterpartiesDelete', label: 'Удаление' },
  ]},
  { title: 'Склад / Остатки', perms: [
    { key: 'stocksView', label: 'Просмотр остатков' },
    { key: 'inventoryEdit', label: 'Инвентаризация' },
    { key: 'lossEdit', label: 'Списание' },
    { key: 'enterEdit', label: 'Оприходование' },
  ]},
  { title: 'Отчёты', perms: [
    { key: 'reportsView', label: 'Сводные отчёты' },
    { key: 'reportsFinanceView', label: 'Финансы / касса' },
    { key: 'reportsStockView', label: 'Остатки и обороты' },
  ]},
  { title: 'Настройки организации', perms: [
    { key: 'orgSettingsManage', label: 'Общие настройки' },
    { key: 'employeesManage', label: 'Сотрудники' },
    { key: 'rolesManage', label: 'Роли' },
    { key: 'storesManage', label: 'Склады' },
    { key: 'retailPointsManage', label: 'Кассы' },
    { key: 'cashRegistersManage', label: 'Кассовые аппараты (ККМ)' },
    { key: 'integrationsManage', label: 'Интеграции (МойСклад и т.п.)' },
  ]},
]

export function EmployeeRolesPage() {
  const { data, isLoading, page, setPage, search, setSearch, sortKey, sortOrder, setSort } = useCatalogList<EmployeeRoleDto>(URL)
  const { create, update, remove } = useCatalogMutations(URL, URL)
  const [form, setForm] = useState<Form | null>(null)
  // Шаг выбора шаблона: показывается ПЕРЕД редактированием матрицы при добавлении новой роли.
  const [pickTemplate, setPickTemplate] = useState(false)
  const [templateId, setTemplateId] = useState<string>('blank')

  const save = async () => {
    if (!form) return
    const payload = { name: form.name, description: form.description || null, permissions: form.permissions }
    if (form.id) await update.mutateAsync({ id: form.id, input: payload })
    else await create.mutateAsync(payload)
    setForm(null)
  }

  return (
    <>
      <ListPageShell
        title="Роли сотрудников"
        description="Системные роли — только просмотр прав. Кастомные роли — полный CRUD; можно создать на основе системной как шаблона."
        actions={
          <>
            <SearchBar value={search} onChange={setSearch} />
            <Button onClick={() => { setPickTemplate(true); setTemplateId('blank') }}>
              <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) => {
            // Системные роли — показываем форму с правами в read-only.
            // Все чекбоксы disabled, кнопка «Сохранить» скрыта (см. footer).
            setForm({
              id: r.id, name: r.name, description: r.description ?? '',
              isSystem: r.isSystem, permissions: { ...blankPerms(), ...r.permissions },
            })
          }}
          columns={[
            { header: 'Название', cell: (r) => (
              <div>
                <div className="font-medium">{r.name}</div>
                {r.description && <div className="text-xs text-slate-400">{r.description}</div>}
              </div>
            )},
            { header: 'Тип', width: '140px', cell: (r) => r.isSystem
              ? <span className="text-xs px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-800">Системная</span>
              : <span className="text-xs text-slate-500">Кастомная</span> },
            { header: 'Прав активно', width: '160px', className: 'text-right', cell: (r) => {
              const count = Object.values(r.permissions ?? {}).filter(Boolean).length
              return <span className="font-mono">{count} / {Object.keys(r.permissions ?? {}).length}</span>
            }},
          ]}
        />
      </ListPageShell>

      {/* Шаг выбора шаблона — открывается до основной модалки. */}
      <Modal
        open={pickTemplate}
        onClose={() => setPickTemplate(false)}
        title="Новая роль — выберите шаблон"
        footer={
          <>
            <Button variant="secondary" onClick={() => setPickTemplate(false)}>Отмена</Button>
            <Button onClick={() => {
              let perms = blankPerms()
              if (templateId === 'all') perms = allPerms()
              else if (templateId !== 'blank') {
                const src = data?.items.find((r) => r.id === templateId)
                if (src) perms = { ...blankPerms(), ...src.permissions }
              }
              setPickTemplate(false)
              setForm({ ...blankForm(), permissions: perms })
            }}>Продолжить</Button>
          </>
        }
      >
        <div className="space-y-2">
          <p className="text-sm text-slate-500 mb-3">
            Стартовый набор прав. После создания роли сможешь дополнительно настроить
            каждый пункт через матрицу прав.
          </p>
          <label className="flex items-start gap-2 p-2 rounded hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer">
            <input type="radio" name="tpl" checked={templateId === 'blank'} onChange={() => setTemplateId('blank')} className="mt-1" />
            <span><span className="font-medium">Пустой</span><br /><span className="text-xs text-slate-500">Все права отключены, нужно ставить галки самому.</span></span>
          </label>
          <label className="flex items-start gap-2 p-2 rounded hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer">
            <input type="radio" name="tpl" checked={templateId === 'all'} onChange={() => setTemplateId('all')} className="mt-1" />
            <span><span className="font-medium">Копия Администратора</span><br /><span className="text-xs text-slate-500">Все права включены — потом убери ненужные.</span></span>
          </label>
          {data?.items.map((r) => (
            <label key={r.id} className="flex items-start gap-2 p-2 rounded hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer">
              <input type="radio" name="tpl" checked={templateId === r.id} onChange={() => setTemplateId(r.id)} className="mt-1" />
              <span>
                <span className="font-medium">Копия «{r.name}»</span>
                {r.isSystem && <span className="ml-2 text-xs px-1.5 py-0.5 rounded bg-slate-100 dark:bg-slate-800">системная</span>}
                {r.description && <><br /><span className="text-xs text-slate-500">{r.description}</span></>}
              </span>
            </label>
          ))}
        </div>
      </Modal>

      <Modal
        open={!!form}
        onClose={() => setForm(null)}
        title={form?.id
          ? (form.isSystem ? `Системная роль «${form.name}» (только просмотр)` : `Редактировать роль «${form.name}»`)
          : 'Новая роль'}
        width="max-w-2xl"
        footer={
          <>
            {form?.id && !form.isSystem && (
              <Button variant="danger" size="sm" onClick={async () => {
                if (confirm('Удалить роль?')) {
                  await remove.mutateAsync(form.id!)
                  setForm(null)
                }
              }}>
                <Trash2 className="w-4 h-4" /> Удалить
              </Button>
            )}
            <Button variant="secondary" onClick={() => setForm(null)}>
              {form?.isSystem ? 'Закрыть' : 'Отмена'}
            </Button>
            {!form?.isSystem && (
              <Button onClick={save} disabled={!form?.name}>Сохранить</Button>
            )}
          </>
        }
      >
        {form && (
          <div className="space-y-4">
            <Field label="Название *">
              <TextInput value={form.name} disabled={form.isSystem}
                onChange={(e) => setForm({ ...form, name: e.target.value })} />
            </Field>
            <Field label="Описание">
              <TextArea rows={2} value={form.description} disabled={form.isSystem}
                onChange={(e) => setForm({ ...form, description: e.target.value })} />
            </Field>
            {form.isSystem && (
              <div className="rounded-md bg-slate-100 dark:bg-slate-800/60 border border-slate-200 dark:border-slate-700 px-3 py-2 text-xs text-slate-600 dark:text-slate-300">
                Системная роль. Просмотр прав только для справки. Чтобы изменить права — создайте кастомную роль на основе этого шаблона.
              </div>
            )}
            {form.id && !form.isSystem && (
              <div className="rounded-md bg-amber-50 border border-amber-200 dark:bg-amber-900/20 dark:border-amber-800 px-3 py-2 text-xs text-amber-800 dark:text-amber-200">
                ⚠️ Изменение прав применится ко ВСЕМ сотрудникам с этой ролью.
              </div>
            )}
            <div className="border-t border-slate-200 dark:border-slate-700 pt-3 space-y-4">
              <h3 className="text-sm font-semibold">Права</h3>
              {PERM_GROUPS.map((g) => (
                <div key={g.title}>
                  <div className="text-xs font-semibold uppercase tracking-wide text-slate-500 mb-2">{g.title}</div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-1.5">
                    {g.perms.map((p) => (
                      <Checkbox
                        key={p.key}
                        label={p.label}
                        checked={form.permissions[p.key]}
                        disabled={form.isSystem}
                        onChange={(v) => setForm({ ...form, permissions: { ...form.permissions, [p.key]: v } })}
                      />
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </Modal>
    </>
  )
}
