import { CategoryFieldsSelector } from '@/component/TemplateManager/CategoryFieldsSelector'
import GroupManager from '@/component/TemplateManager/GroupManager'
import { OrderSaveButton } from '@/component/TemplateManager/OrderSaveButton'
import {
  TemplateFilterSidebar,
  TemplateFilters,
} from '@/component/TemplateManager/TemplateFilterSidebar'
import { TemplateGroup } from '@/component/TemplateManager/TemplateGroup'
import {
  GroupProvider,
  useGroupContext,
} from '@/entity/group/model/GroupContext'
import {
  apiTemplateWithAttributesToTemplate,
  getTemplateWithAttributesApi,
} from '@/entity/template/api/templateApiService'
import { useCategoryContext } from '@/entity/template/model/CategoryContext'
import { useTemplateContext } from '@/entity/template/model/TemplateContext'
import { useTemplateOrderState } from '@/hook/useTemplateOrderState'
import {
  generateInitialOrder,
  groupTemplatesByGroup,
} from '@/lib/template-order'
import { Group, Template, TemplateAttributeDetail } from '@/type/template'
import TemplateCard from '@/widget/template/ui/TemplateCard'
import {
  DndContext,
  DragEndEvent,
  DragOverEvent,
  DragOverlay,
  DragStartEvent,
  KeyboardSensor,
  PointerSensor,
  closestCenter,
  useSensor,
  useSensors,
} from '@dnd-kit/core'
import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable'
import clsx from 'clsx'
import {
  CheckSquare,
  Copy,
  Edit3,
  Plus,
  Square,
  Tag,
  Trash2,
  Type,
  X,
  LogOut,
} from 'lucide-react'
import { useCallback, useMemo, useState } from 'react'
import { isAuthenticated, logout } from '@/feature/auth/authService'
import { Button } from 'shared/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from 'shared/ui/card'
import { Checkbox } from 'shared/ui/checkbox'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from 'shared/ui/dialog'
import { Input } from 'shared/ui/input'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from 'shared/ui/select'
import { Separator } from 'shared/ui/separator'
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from 'shared/ui/sidebar'

interface AttributeValue {
  attributeId: string
  value: string | null
}

// Тип для CategoryFieldsSelector
interface CategoryAttributeValue {
  attributeId: string
  value: string | number
}

// Адаптеры для преобразования типов
const toCategoryAttributeValues = (
  values: AttributeValue[]
): CategoryAttributeValue[] => {
  return values.map(v => ({
    attributeId: v.attributeId,
    value: v.value || '',
  }))
}

const fromCategoryAttributeValues = (
  values: CategoryAttributeValue[]
): AttributeValue[] => {
  return values.map(v => ({
    attributeId: v.attributeId,
    value: v.value?.toString() || null,
  }))
}

// Компактный селектор атрибутов
interface CompactCategoryFieldsSelectorProps {
  selectedValues: CategoryAttributeValue[]
  onValuesChange: (values: CategoryAttributeValue[]) => void
  isLoading?: boolean
}

const CompactCategoryFieldsSelector: React.FC<
  CompactCategoryFieldsSelectorProps
> = ({ selectedValues, onValuesChange, isLoading = false }) => {
  if (isLoading) {
    return (
      <div className="py-4 text-center text-sm text-muted-foreground">
        Загрузка атрибутов...
      </div>
    )
  }

  return (
    <div className="space-y-3">
      <CategoryFieldsSelector
        selectedValues={selectedValues}
        onValuesChange={onValuesChange}
        compact={true} // Передаем флаг для компактного отображения
      />
    </div>
  )
}

// Общий компонент формы шаблона
interface TemplateFormProps {
  title: string
  description: string
  icon: React.ReactNode
  iconColor: string
  name: string
  onNameChange: (value: string) => void
  templateDescription: string
  onDescriptionChange: (value: string) => void
  attributeValues: AttributeValue[]
  onAttributeValuesChange: (values: AttributeValue[]) => void
  attributesLoading: boolean
  onSubmit: () => void | Promise<void>
  onCancel: () => void
  submitText: string
  submitIcon: React.ReactNode
  isSubmitDisabled: boolean
  nameLabel?: string
  descriptionLabel?: string
  selectedGroupId?: string | null
  onGroupChange?: (groupId: string | null) => void
  showGroupSelector?: boolean
  groups?: Group[]
  // Опции копирования
  showCopyOptions?: boolean
  copyFirstSheetEmpty?: boolean
  onCopyFirstSheetEmptyChange?: (value: boolean) => void
}

const TemplateForm: React.FC<TemplateFormProps> = ({
  title,
  description,
  icon,
  iconColor,
  name,
  onNameChange,
  templateDescription,
  onDescriptionChange,
  attributeValues,
  onAttributeValuesChange,
  attributesLoading,
  onSubmit,
  onCancel,
  submitText,
  submitIcon,
  isSubmitDisabled,
  nameLabel = 'Название шаблона',
  descriptionLabel = 'Описание',
  selectedGroupId,
  onGroupChange,
  showGroupSelector = false,
  groups = [],
  showCopyOptions = false,
  copyFirstSheetEmpty = false,
  onCopyFirstSheetEmptyChange,
}) => {
  return (
    <>
      <DialogHeader className="pb-4">
        <DialogTitle className="flex items-center gap-2 text-lg">
          {icon}
          {title}
        </DialogTitle>
        <DialogDescription>{description}</DialogDescription>
      </DialogHeader>

      <div className="max-h-[50vh] space-y-4 overflow-y-auto pr-2">
        {/* Основные настройки */}
        <Card>
          <CardHeader className="pb-3">
            <div className="flex items-center gap-2">
              <Type className={`h-4 w-4 ${iconColor}`} />
              <CardTitle className="text-sm">{nameLabel}</CardTitle>
            </div>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Input
                placeholder={`Введите ${nameLabel.toLowerCase()}`}
                value={name}
                onChange={e => onNameChange(e.target.value)}
                className="h-9"
              />
            </div>

            {/* Селектор группы */}
            {showGroupSelector && onGroupChange && (
              <div className="space-y-2">
                <label className="text-sm font-medium text-muted-foreground">
                  Группа
                </label>
                <Select
                  value={selectedGroupId || 'no-group'}
                  onValueChange={value =>
                    onGroupChange(value === 'no-group' ? null : value)
                  }
                >
                  <SelectTrigger className="h-9">
                    <SelectValue placeholder="Выберите группу" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="no-group">
                      <div className="flex items-center gap-2">
                        <div className="h-2 w-2 rounded-full bg-muted-foreground/40" />
                        <span className="text-muted-foreground">
                          Без группы
                        </span>
                      </div>
                    </SelectItem>
                    {groups.map(group => (
                      <SelectItem key={group.id} value={group.id}>
                        <div className="flex items-center gap-2">
                          <div className="h-2 w-2 rounded-full bg-primary" />
                          <span>{group.name}</span>
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            )}
          </CardContent>
        </Card>

        {/* Атрибуты */}
        <Card>
          <CardHeader className="pb-3">
            <div className="flex items-center gap-2">
              <Tag className="h-4 w-4 text-purple-600" />
              <CardTitle className="text-sm">Атрибуты шаблона</CardTitle>
            </div>
          </CardHeader>
          <CardContent>
            <CompactCategoryFieldsSelector
              selectedValues={toCategoryAttributeValues(attributeValues)}
              onValuesChange={values =>
                onAttributeValuesChange(fromCategoryAttributeValues(values))
              }
              isLoading={attributesLoading}
            />
          </CardContent>
        </Card>

        {/* Опции копирования */}
        {showCopyOptions && (
          <Card>
            <CardHeader className="pb-3">
              <div className="flex items-center gap-2">
                <Copy className="h-4 w-4 text-blue-600" />
                <CardTitle className="text-sm">Опции копирования</CardTitle>
              </div>
            </CardHeader>
            <CardContent>
              <div className="flex items-center space-x-3">
                <Checkbox
                  id="copy-first-sheet-empty"
                  checked={copyFirstSheetEmpty}
                  onCheckedChange={checked =>
                    onCopyFirstSheetEmptyChange?.(checked === true)
                  }
                />
                <label
                  htmlFor="copy-first-sheet-empty"
                  className="cursor-pointer text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                >
                  Не копировать левый лист
                </label>
              </div>
              <p className="mt-2 text-xs text-muted-foreground">
                При включении этой опции левый лист шаблона будет пустым в копии
              </p>
            </CardContent>
          </Card>
        )}
      </div>

      <Separator className="my-4" />
      <div className="flex items-center justify-between pt-2">
        <div className="text-sm text-muted-foreground">
          {!name.trim() && (
            <span className="text-amber-600">
              Заполните {nameLabel.toLowerCase()}
            </span>
          )}
        </div>
        <div className="flex gap-3">
          <DialogClose asChild>
            <Button variant="outline">Отмена</Button>
          </DialogClose>
          <Button
            onClick={() => {
              const result = onSubmit()
              if (result instanceof Promise) {
                result.catch(error => {
                  console.error('Ошибка при выполнении операции:', error)
                })
              }
            }}
            disabled={isSubmitDisabled}
            className="min-w-[130px]"
          >
            {submitIcon}
            {submitText}
          </Button>
        </div>
      </div>
    </>
  )
}

const TemplatesPageContent = () => {
  const {
    templates,
    deleteTemplate,
    addTemplate,
    copyTemplate,
    updateTemplate,
    updateTemplateOrder,
    moveTemplateToGroup,
  } = useTemplateContext()
  const { groups, updateGroup, deleteGroup } = useGroupContext()
  const { isLoading: attributesLoading } = useCategoryContext()

  const [selected, setSelected] = useState<Set<string>>(new Set())
  const [selectionMode, setSelectionMode] = useState(false)
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [isCopyDialogOpen, setIsCopyDialogOpen] = useState(false)
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
  const [templateToCopy, setTemplateToCopy] = useState<string | null>(null)
  const [templateToEdit, setTemplateToEdit] = useState<string | null>(null)
  const [newName, setNewName] = useState('')
  const [newDescription, setNewDescription] = useState('')
  const [newAttributeValues, setNewAttributeValues] = useState<
    AttributeValue[]
  >([])
  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null) // Добавляем состояние для выбранной группы
  const [copyName, setCopyName] = useState('')
  const [copyDescription, setCopyDescription] = useState('')
  const [copyAttributeValues, setCopyAttributeValues] = useState<
    AttributeValue[]
  >([])
  const [copyFirstSheetEmpty, setCopyFirstSheetEmpty] = useState(false)
  const [copySelectedGroupId, setCopySelectedGroupId] = useState<string | null>(
    null
  )
  const [editName, setEditName] = useState('')
  const [editDescription, setEditDescription] = useState('')
  const [editAttributeValues, setEditAttributeValues] = useState<
    AttributeValue[]
  >([])
  const [templateAttributesLoading, setTemplateAttributesLoading] =
    useState(false)
  const [editingGroupId, setEditingGroupId] = useState<string | null>(null)
  const [filters, setFilters] = useState<TemplateFilters>({
    name: '',
    description: '',
    attributes: {},
  })

  // Состояние для управления порядком шаблонов
  const orderState = useTemplateOrderState(templates, groups)
  const templatesWithChanges = orderState.getTemplatesWithChanges()

  // Состояние для drag and drop
  const [activeId, setActiveId] = useState<string | null>(null)

  // Настройка сенсоров для @dnd-kit
  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 8, // Небольшое расстояние для активации перетаскивания
      },
    }),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  )

  const toggleSelect = useCallback((id: string) => {
    setSelected(prev => {
      const next = new Set(prev)
      next.has(id) ? next.delete(id) : next.add(id)
      return next
    })
  }, [])

  // Функция для загрузки атрибутов шаблона
  const loadTemplateAttributes = async (templateId: string) => {
    try {
      setTemplateAttributesLoading(true)
      const { template } = await getTemplateWithAttributesApi(templateId)
      if (template) {
        const templateWithAttrs = apiTemplateWithAttributesToTemplate(template)
        const attributeValues: AttributeValue[] =
          templateWithAttrs.attributes.map(attr => ({
            attributeId: attr.attribute_id,
            value: attr.value,
          }))
        return attributeValues
      }
      return []
    } catch (error) {
      console.error('Ошибка при загрузке атрибутов шаблона:', error)
      return []
    } finally {
      setTemplateAttributesLoading(false)
    }
  }

  const removeSelected = () => {
    selected.forEach(deleteTemplate)
    setSelected(new Set())
    setSelectionMode(false)
  }

  const handleCreate = async () => {
    if (newName.trim()) {
      try {
        // Генерируем order для нового шаблона (в конец группы)
        const newOrder = generateInitialOrder(
          templatesWithChanges,
          selectedGroupId
        )

        console.log('Creating new template with order:', {
          selectedGroupId,
          newOrder,
        })

        // Создаем шаблон с атрибутами, группой и order
        await addTemplate(
          {
            name: newName,
            elements: [],
            description: newDescription,
            mergedCells: [],
            group_id: selectedGroupId, // Добавляем выбранную группу
            order: newOrder, // Добавляем order!
          },
          newAttributeValues.length > 0 ? newAttributeValues : undefined
        )

        setNewName('')
        setNewDescription('')
        setNewAttributeValues([])
        setSelectedGroupId(null) // Сбрасываем выбранную группу
        setIsDialogOpen(false)
      } catch (error) {
        console.error('Ошибка при создании шаблона:', error)
      }
    }
  }

  const handleCopy = (templateId: string) => {
    const template = templates.find(t => t.id === templateId)
    if (template) {
      setTemplateToCopy(templateId)
      setCopyName(`${template.name} (копия)`)
      setCopyDescription(template.description || '')
      setCopyFirstSheetEmpty(false) // Сбрасываем галочку при открытии диалога
      setCopySelectedGroupId(template.group_id || null) // Устанавливаем группу оригинала

      // Загружаем атрибуты шаблона
      loadTemplateAttributes(templateId).then(attributes => {
        setCopyAttributeValues(attributes)
      })

      setIsCopyDialogOpen(true)
    }
  }

  const handleCopyConfirm = async () => {
    if (templateToCopy && copyName.trim()) {
      try {
        await copyTemplate(
          templateToCopy,
          copyName,
          copyDescription,
          copyAttributeValues,
          copySelectedGroupId, // Передаем выбранную группу
          copyFirstSheetEmpty
        )
        setCopyName('')
        setCopyDescription('')
        setCopyAttributeValues([])
        setCopyFirstSheetEmpty(false)
        setCopySelectedGroupId(null)
        setTemplateToCopy(null)
        setIsCopyDialogOpen(false)
      } catch (error) {
        console.error('Ошибка при копировании шаблона:', error)
      }
    }
  }

  const handleEdit = (templateId: string) => {
    const template = templates.find(t => t.id === templateId)
    if (template) {
      setTemplateToEdit(templateId)
      setEditName(template.name)
      setEditDescription(template.description || '')

      // Загружаем атрибуты шаблона
      loadTemplateAttributes(templateId).then(attributes => {
        setEditAttributeValues(attributes)
      })

      setIsEditDialogOpen(true)
    }
  }

  const handleEditConfirm = async () => {
    if (templateToEdit && editName.trim()) {
      try {
        const template = templates.find(t => t.id === templateToEdit)
        if (template) {
          const updatedTemplate = {
            ...template,
            name: editName,
            description: editDescription,
          }
          await updateTemplate(updatedTemplate, editAttributeValues)
          setEditName('')
          setEditDescription('')
          setEditAttributeValues([])
          setTemplateToEdit(null)
          setIsEditDialogOpen(false)
        }
      } catch (error) {
        console.error('Ошибка при редактировании шаблона:', error)
      }
    }
  }

  const handleDelete = (templateId: string) => {
    if (confirm('Вы уверены, что хотите удалить этот шаблон?')) {
      deleteTemplate(templateId)
    }
  }

  const handleEditGroup = (groupId: string) => {
    setEditingGroupId(groupId)
  }

  const handleDeleteGroup = (groupId: string) => {
    if (confirm('Вы уверены, что хотите удалить эту группу?')) {
      deleteGroup(groupId)
    }
  }

  const handleCreateTemplate = (groupId?: string) => {
    // Устанавливаем группу для нового шаблона
    setSelectedGroupId(groupId || null)
    setIsDialogOpen(true)
  }

  const toggleSelectionMode = () => {
    setSelectionMode(v => {
      if (v) setSelected(new Set())
      return !v
    })
  }

  // Обработчики drag and drop для @dnd-kit
  const handleDragStart = useCallback((event: DragStartEvent) => {
    setActiveId(event.active.id as string)
  }, [])

  const handleDragEnd = useCallback(
    (event: DragEndEvent) => {
      const { active, over } = event
      setActiveId(null)

      if (!over || active.id === over.id) {
        return
      }

      const activeTemplate = templatesWithChanges.find(t => t.id === active.id)
      if (!activeTemplate) return

      // Определяем, куда был сброшен элемент
      const overId = over.id as string

      console.log('🚀 DRAG END START:', {
        activeId: active.id,
        overId: overId,
        activeTemplate: {
          id: activeTemplate.id,
          name: activeTemplate.name,
          group_id: activeTemplate.group_id,
          order: activeTemplate.order,
        },
      })

      // Проверяем, это drop на left/right зону карточки или на группу
      if (overId.startsWith('drop-left-') || overId.startsWith('drop-right-')) {
        // Определяем позицию (left/right) и ID карточки
        const isLeftDrop = overId.startsWith('drop-left-')
        const targetTemplateId = overId.replace(
          isLeftDrop ? 'drop-left-' : 'drop-right-',
          ''
        )
        const overTemplate = templatesWithChanges.find(
          t => t.id === targetTemplateId
        )

        if (!overTemplate) return

        const sourceGroupId = activeTemplate.group_id
        const targetGroupId = overTemplate.group_id

        console.log('🎯 Drop on card edge:', {
          position: isLeftDrop ? 'left' : 'right',
          targetTemplateId,
          sourceGroupId,
          targetGroupId,
        })

        if ((sourceGroupId || null) === (targetGroupId || null)) {
          // Перетаскивание внутри одной группы
          const groupTemplates = templatesWithChanges
            .filter(t => (t.group_id || null) === (sourceGroupId || null))
            .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))

          const activeIndex = groupTemplates.findIndex(t => t.id === active.id)
          const targetIndex = groupTemplates.findIndex(
            t => t.id === targetTemplateId
          )

          if (activeIndex !== targetIndex) {
            // Определяем позицию вставки: слева (перед) или справа (после)
            const insertIndex = isLeftDrop ? targetIndex : targetIndex + 1
            const reorderedTemplates = arrayMove(
              groupTemplates,
              activeIndex,
              insertIndex
            )

            // Пересчитываем order для всех элементов в группе
            reorderedTemplates.forEach((template, index) => {
              const newOrder = (index + 1) * 1000
              if (template.order !== newOrder) {
                orderState.applyOrderChange(
                  template.id,
                  newOrder,
                  sourceGroupId
                )
              }
            })

            console.log('🔄 Reordering within group:', {
              groupId: sourceGroupId,
              activeIndex,
              targetIndex,
              insertIndex,
              position: isLeftDrop ? 'before' : 'after',
            })
          }
        } else {
          // Перетаскивание между разными группами
          const targetGroupTemplates = templatesWithChanges
            .filter(t => (t.group_id || null) === (targetGroupId || null))
            .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))

          const targetIndex = targetGroupTemplates.findIndex(
            t => t.id === targetTemplateId
          )

          let newOrder: number

          if (isLeftDrop) {
            // Вставка перед целевой карточкой (слева)
            if (targetIndex === 0) {
              // Перед первой карточкой
              const firstOrder = targetGroupTemplates[0]?.order ?? 1000
              newOrder = firstOrder > 1000 ? firstOrder / 2 : firstOrder - 500
            } else {
              // Между карточками
              const prevOrder =
                targetGroupTemplates[targetIndex - 1]?.order ?? 0
              const currentOrder =
                targetGroupTemplates[targetIndex]?.order ?? 1000
              newOrder = (prevOrder + currentOrder) / 2
            }
          } else {
            // Вставка после целевой карточки (справа)
            const currentOrder =
              targetGroupTemplates[targetIndex]?.order ?? 1000
            const nextOrder =
              targetGroupTemplates[targetIndex + 1]?.order ??
              currentOrder + 2000
            newOrder = (currentOrder + nextOrder) / 2
          }

          console.log('🔀 Moving between groups with edge positioning:', {
            sourceGroupId,
            targetGroupId,
            targetTemplateId,
            position: isLeftDrop ? 'before' : 'after',
            newOrder,
          })

          orderState.applyOrderChange(
            active.id as string,
            newOrder,
            targetGroupId
          )
        }
      } else {
        // Сброс на пустую группу
        const isOverGroup =
          groups.some(g => g.id === overId) || overId === 'ungrouped'

        if (isOverGroup) {
          const targetGroupId = overId === 'ungrouped' ? null : overId
          const newOrder = generateInitialOrder(
            templatesWithChanges,
            targetGroupId
          )

          console.log('🗂️ Moving to empty group:', {
            targetGroupId,
            newOrder,
          })

          orderState.applyOrderChange(
            active.id as string,
            newOrder,
            targetGroupId
          )
        }
      }
    },
    [templatesWithChanges, orderState, groups]
  )

  const handleDragOver = useCallback((event: DragOverEvent) => {
    // Можно добавить дополнительную логику если нужно
  }, [])

  // Проверяем есть ли активные фильтры
  const hasActiveFilters = useMemo(() => {
    return !!(
      filters.name ||
      filters.description ||
      Object.keys(filters.attributes).length > 0
    )
  }, [filters])

  // Фильтрация шаблонов
  const filteredTemplates = useMemo(() => {
    return templatesWithChanges.filter(template => {
      // Фильтр по названию
      if (
        filters.name &&
        !template.name.toLowerCase().includes(filters.name.toLowerCase())
      ) {
        return false
      }

      // Фильтр по описанию
      if (
        filters.description &&
        (!template.description ||
          !template.description
            .toLowerCase()
            .includes(filters.description.toLowerCase()))
      ) {
        return false
      }

      // Фильтрация по атрибутам
      if (Object.keys(filters.attributes).length > 0) {
        // Проверяем есть ли атрибуты у шаблона
        const templateWithAttrs = template as Template & {
          attributes?: TemplateAttributeDetail[]
        }
        if (!templateWithAttrs.attributes) {
          return false
        }

        // Проверяем соответствуют ли атрибуты фильтрам
        for (const [attributeId, filterValue] of Object.entries(
          filters.attributes
        )) {
          if (!filterValue) continue // пропускаем пустые фильтры

          const templateAttribute = templateWithAttrs.attributes.find(
            (attr: TemplateAttributeDetail) => attr.attribute_id === attributeId
          )

          if (!templateAttribute || !templateAttribute.value) {
            return false // атрибут не найден или пустой
          }

          // Проверяем содержится ли значение фильтра в значении атрибута
          if (
            !templateAttribute.value
              .toLowerCase()
              .includes(filterValue.toLowerCase())
          ) {
            return false
          }
        }
      }

      return true
    })
  }, [templatesWithChanges, filters])

  // Группировка шаблонов по группам с правильной сортировкой
  const groupedTemplates = useMemo(() => {
    console.log(
      '🗂️ Grouping templates, input:',
      filteredTemplates.map(t => ({
        id: t.id,
        name: t.name,
        group_id: t.group_id,
        order: t.order,
      }))
    )

    const grouped = groupTemplatesByGroup(filteredTemplates)

    console.log(
      '🗂️ Grouped templates (before sorting):',
      Object.fromEntries(
        Object.entries(grouped).map(([key, templates]) => [
          key,
          templates.map(t => ({ id: t.id, name: t.name, order: t.order })),
        ])
      )
    )

    // Сортируем шаблоны в каждой группе по порядку
    const sortedGrouped: typeof grouped = {}

    Object.keys(grouped).forEach(groupKey => {
      sortedGrouped[groupKey] = grouped[groupKey].sort((a, b) => {
        // Правильная обработка null/undefined порядков
        const orderA = a.order ?? 999999
        const orderB = b.order ?? 999999
        return orderA - orderB
      })
    })

    console.log(
      '🗂️ Grouped templates (after sorting):',
      Object.fromEntries(
        Object.entries(sortedGrouped).map(([key, templates]) => [
          key,
          templates.map(t => ({ id: t.id, name: t.name, order: t.order })),
        ])
      )
    )

    return sortedGrouped
  }, [filteredTemplates])

  // Статистика фильтрации с учетом групп
  const filterStats = useMemo(() => {
    if (!hasActiveFilters) {
      return null
    }

    const totalTemplates = templatesWithChanges.length
    const filteredCount = filteredTemplates.length
    const filteredGroups = new Set(
      filteredTemplates.map(t => t.group_id || null)
    )
    const totalGroups = new Set(
      templatesWithChanges.map(t => t.group_id || null)
    )

    return {
      totalTemplates,
      filteredTemplates: filteredCount,
      totalGroups: totalGroups.size,
      groupsWithResults: filteredGroups.size,
      emptyGroups: totalGroups.size - filteredGroups.size,
    }
  }, [hasActiveFilters, templatesWithChanges, filteredTemplates])

  // Сортированные группы
  const sortedGroups = useMemo(() => {
    return [...groups].sort((a, b) => a.order - b.order)
  }, [groups])

  return (
    <SidebarProvider defaultOpen={true}>
      <TemplateFilterSidebar
        templates={templates}
        filters={filters}
        onFiltersChange={setFilters}
      />
      <SidebarInset>
        <header className="flex items-center gap-2 border-b px-4 py-2">
          <SidebarTrigger />
          <Separator orientation="vertical" className="mr-2 h-4" />
          <h1 className="text-lg font-semibold">Карточки протоколов</h1>

          <div className="ml-auto flex items-center gap-2">
            {isAuthenticated() && (
              <Button
                size="sm"
                variant="ghost"
                onClick={() => {
                  logout()
                  window.location.reload()
                }}
                title="Выйти из режима администратора"
              >
                <LogOut className="mr-1 h-4 w-4" />
                Выйти
              </Button>
            )}
            {/* Кнопка сохранения порядка */}
            <OrderSaveButton
              hasUnsavedChanges={orderState.hasUnsavedChanges}
              isSaving={orderState.isSaving}
              lastSaveError={orderState.lastSaveError}
              onSave={() =>
                orderState.saveOrderChanges(
                  updateTemplateOrder,
                  moveTemplateToGroup
                )
              }
              onClearError={orderState.clearError}
              changedCount={orderState.changedCount}
            />
            {selectionMode && (
              <>
                <span className="text-sm text-muted-foreground">
                  Выбрано: {selected.size}
                </span>
                <Button
                  size="sm"
                  onClick={removeSelected}
                  disabled={selected.size === 0}
                  variant="destructive"
                >
                  <Trash2 className="mr-1 h-4 w-4" />
                  Удалить
                </Button>
                <Button
                  size="sm"
                  variant="outline"
                  onClick={toggleSelectionMode}
                >
                  Отмена
                </Button>
              </>
            )}

            {!selectionMode && (
              <>
                <GroupManager
                  editingGroupId={editingGroupId}
                  onEditingGroupChange={setEditingGroupId}
                />

                <Button
                  size="sm"
                  variant="outline"
                  onClick={toggleSelectionMode}
                  disabled={templates.length === 0}
                >
                  {selected.size === templates.length ? (
                    <Square className="mr-1 h-4 w-4" />
                  ) : (
                    <CheckSquare className="mr-1 h-4 w-4" />
                  )}
                  Выбрать
                </Button>

                {/* Диалог создания шаблона (перемещен в каждую группу) */}
                <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
                  <DialogContent className="max-h-[90vh] max-w-2xl overflow-hidden">
                    <TemplateForm
                      title="Создать новый шаблон"
                      description="Заполните основную информацию о шаблоне протокола"
                      icon={<Plus className="h-5 w-5 text-blue-600" />}
                      iconColor="text-blue-600"
                      name={newName}
                      onNameChange={setNewName}
                      templateDescription={newDescription}
                      onDescriptionChange={setNewDescription}
                      attributeValues={newAttributeValues}
                      onAttributeValuesChange={setNewAttributeValues}
                      attributesLoading={attributesLoading}
                      onSubmit={handleCreate}
                      onCancel={() => setIsDialogOpen(false)}
                      submitText="Создать"
                      submitIcon={<Plus className="mr-2 h-4 w-4" />}
                      isSubmitDisabled={!newName.trim()}
                      selectedGroupId={selectedGroupId}
                      onGroupChange={setSelectedGroupId}
                      showGroupSelector={true}
                      groups={groups}
                    />
                  </DialogContent>
                </Dialog>

                {/* Диалог копирования */}
                <Dialog
                  open={isCopyDialogOpen}
                  onOpenChange={setIsCopyDialogOpen}
                >
                  <DialogContent className="max-h-[90vh] max-w-2xl overflow-hidden">
                    <TemplateForm
                      title="Копировать шаблон"
                      description="Укажите название и описание для копии шаблона"
                      icon={<Copy className="h-5 w-5 text-green-600" />}
                      iconColor="text-green-600"
                      name={copyName}
                      onNameChange={setCopyName}
                      templateDescription={copyDescription}
                      onDescriptionChange={setCopyDescription}
                      attributeValues={copyAttributeValues}
                      onAttributeValuesChange={setCopyAttributeValues}
                      attributesLoading={attributesLoading}
                      onSubmit={handleCopyConfirm}
                      onCancel={() => setIsCopyDialogOpen(false)}
                      submitText="Копировать"
                      submitIcon={<Copy className="mr-2 h-4 w-4" />}
                      isSubmitDisabled={!copyName.trim()}
                      nameLabel="Название копии"
                      descriptionLabel="Описание копии"
                      selectedGroupId={copySelectedGroupId}
                      onGroupChange={setCopySelectedGroupId}
                      showGroupSelector={true}
                      groups={groups}
                      showCopyOptions={true}
                      copyFirstSheetEmpty={copyFirstSheetEmpty}
                      onCopyFirstSheetEmptyChange={setCopyFirstSheetEmpty}
                    />
                  </DialogContent>
                </Dialog>

                {/* Диалог редактирования */}
                <Dialog
                  open={isEditDialogOpen}
                  onOpenChange={setIsEditDialogOpen}
                >
                  <DialogContent className="max-h-[90vh] max-w-2xl overflow-hidden">
                    <TemplateForm
                      title="Редактировать шаблон"
                      description="Измените основную информацию о шаблоне"
                      icon={<Edit3 className="h-5 w-5 text-orange-600" />}
                      iconColor="text-orange-600"
                      name={editName}
                      onNameChange={setEditName}
                      templateDescription={editDescription}
                      onDescriptionChange={setEditDescription}
                      attributeValues={editAttributeValues}
                      onAttributeValuesChange={setEditAttributeValues}
                      attributesLoading={attributesLoading}
                      onSubmit={handleEditConfirm}
                      onCancel={() => setIsEditDialogOpen(false)}
                      submitText="Сохранить"
                      submitIcon={<Edit3 className="mr-2 h-4 w-4" />}
                      isSubmitDisabled={!editName.trim()}
                    />
                  </DialogContent>
                </Dialog>
              </>
            )}
          </div>
        </header>

        <main className="flex-1 p-6">
          {/* Статистика фильтрации */}
          {filterStats && (
            <div className="mb-4 rounded-lg bg-muted/50 p-3">
              <div className="text-sm text-muted-foreground">
                <div className="flex flex-wrap items-center justify-between gap-2">
                  <div>
                    Показано{' '}
                    <span className="font-medium text-foreground">
                      {filterStats.filteredTemplates}
                    </span>{' '}
                    из {filterStats.totalTemplates} шаблонов
                  </div>
                  <div className="flex items-center gap-4 text-xs">
                    <span>
                      Групп с результатами:{' '}
                      <span className="font-medium text-foreground">
                        {filterStats.groupsWithResults}
                      </span>
                    </span>
                    {filterStats.emptyGroups > 0 && (
                      <span className="text-amber-600">
                        Пустых групп: {filterStats.emptyGroups}
                      </span>
                    )}
                  </div>
                </div>
                {Object.keys(filters.attributes).length > 0 && (
                  <div className="mt-1 text-xs">
                    Активных фильтров по атрибутам:{' '}
                    {Object.keys(filters.attributes).length}
                  </div>
                )}
              </div>
            </div>
          )}

          {/* DndContext для @dnd-kit */}
          <DndContext
            sensors={sensors}
            collisionDetection={closestCenter}
            onDragStart={handleDragStart}
            onDragEnd={handleDragEnd}
            onDragOver={handleDragOver}
          >
            {/* Отображение групп шаблонов */}
            <div
              className={clsx(
                'transition-opacity duration-200',
                activeId && 'opacity-90'
              )}
            >
              {/* Все группы - показываем все группы при фильтрации для сохранения контекста */}
              {sortedGroups.map(group => {
                const groupTemplates = groupedTemplates[group.id] || []
                const showGroup =
                  !hasActiveFilters ||
                  groupTemplates.length > 0 ||
                  hasActiveFilters

                if (!showGroup) return null

                return (
                  <TemplateGroup
                    key={group.id}
                    group={group}
                    templates={groupTemplates}
                    selectionMode={selectionMode}
                    selectedTemplates={selected}
                    onToggleSelect={toggleSelect}
                    onCopy={handleCopy}
                    onEdit={handleEdit}
                    onDelete={handleDelete}
                    onEditGroup={handleEditGroup}
                    onDeleteGroup={handleDeleteGroup}
                    activeFilters={filters.attributes}
                    isExpanded={orderState.getGroupExpanded(group.id)}
                    onToggleExpanded={() =>
                      orderState.toggleGroupExpanded(group.id)
                    }
                    onCreateTemplate={handleCreateTemplate}
                    showEmptyState={
                      hasActiveFilters && groupTemplates.length === 0
                    }
                  />
                )
              })}

              {/* Группа "Без группы" - показываем всегда */}
              <TemplateGroup
                group={null}
                templates={groupedTemplates.ungrouped || []}
                selectionMode={selectionMode}
                selectedTemplates={selected}
                onToggleSelect={toggleSelect}
                onCopy={handleCopy}
                onEdit={handleEdit}
                onDelete={handleDelete}
                activeFilters={filters.attributes}
                isExpanded={orderState.getGroupExpanded(null)}
                onToggleExpanded={() => orderState.toggleGroupExpanded(null)}
                onCreateTemplate={handleCreateTemplate}
                showEmptyState={
                  hasActiveFilters &&
                  (!groupedTemplates.ungrouped ||
                    groupedTemplates.ungrouped.length === 0)
                }
              />

              {/* Если нет групп и нет шаблонов вообще, показываем кнопку создания */}
              {sortedGroups.length === 0 &&
                templatesWithChanges.length === 0 && (
                  <div className="flex flex-col items-center justify-center py-12 text-center">
                    <div className="mb-6 text-muted-foreground">
                      <p className="text-lg font-medium">
                        Нет групп и шаблонов
                      </p>
                      <p className="text-sm">
                        Создайте группу или шаблон для начала работы
                      </p>
                    </div>
                    <div className="flex gap-3">
                      <Button
                        onClick={() => handleCreateTemplate()}
                        className="gap-2"
                      >
                        <Plus className="h-4 w-4" />
                        Создать шаблон
                      </Button>
                    </div>
                  </div>
                )}
            </div>

            {/* DragOverlay для красивого перетаскивания */}
            <DragOverlay>
              {activeId ? (
                <div
                  className={clsx(
                    'transform transition-transform duration-200',
                    'rotate-2 scale-105 opacity-90',
                    'shadow-2xl drop-shadow-2xl',
                    'pointer-events-none z-[9999]'
                  )}
                >
                  <div
                    className={clsx(
                      'overflow-hidden rounded-lg',
                      'border-0 bg-background',
                      // Полностью убираем все borders из вложенных элементов
                      '[&_*]:!border-0 [&_*]:!border-transparent [&_*]:!ring-0',
                      // Добавляем собственную тень и border
                      'shadow-primary/10 ring-2 ring-primary/20'
                    )}
                  >
                    <TemplateCard
                      template={
                        templatesWithChanges.find(t => t.id === activeId)!
                      }
                      selectionMode={false}
                      isSelected={false}
                      activeFilters={filters.attributes}
                    />
                  </div>
                </div>
              ) : null}
            </DragOverlay>
          </DndContext>

          {filteredTemplates.length === 0 &&
            templates.length > 0 &&
            hasActiveFilters && (
              <div className="flex flex-col items-center justify-center py-12 text-center">
                <div className="mb-6 text-muted-foreground">
                  <p className="text-lg font-medium">Шаблоны не найдены</p>
                  <p className="text-sm">
                    Ни один шаблон не соответствует заданным фильтрам
                  </p>
                </div>
                <Button
                  variant="outline"
                  onClick={() =>
                    setFilters({ name: '', description: '', attributes: {} })
                  }
                  className="gap-2"
                >
                  <X className="h-4 w-4" />
                  Сбросить все фильтры
                </Button>
              </div>
            )}
        </main>
      </SidebarInset>
    </SidebarProvider>
  )
}

// Основной экспортируемый компонент с провайдерами
export const TemplatesOverviewPage = () => {
  return (
    <GroupProvider>
      <TemplatesPageContent />
    </GroupProvider>
  )
}

export default TemplatesOverviewPage
