import { Group, Template } from '@/type/template'
import TemplateCard from '@/widget/template/ui/TemplateCard'
import { useDraggable, useDroppable } from '@dnd-kit/core'
import clsx from 'clsx'
import {
  ChevronDown,
  ChevronRight,
  Edit3,
  FolderClosed,
  FolderOpen,
  MoreVertical,
  Plus,
} from 'lucide-react'
import { useCallback, useState } from 'react'
import { Badge } from 'shared/ui/badge'
import { Button } from 'shared/ui/button'
import { Popover, PopoverContent, PopoverTrigger } from 'shared/ui/popover'

interface DraggableTemplateCardProps {
  template: Template
  index: number
  selectionMode: boolean
  isSelected: boolean
  onToggleSelect: (id: string) => void
  onCopy: (templateId: string) => void
  onEdit: (templateId: string) => void
  onDelete: (templateId: string) => void
  activeFilters: Record<string, string>
}

// Компонент для drop зоны (полоска)
interface DropZoneProps {
  id: string
  position: 'left' | 'right'
  isVisible?: boolean
  isDragActive?: boolean
}

const DropZone: React.FC<DropZoneProps> = ({
  id,
  position,
  isVisible = true,
  isDragActive = false,
}) => {
  const { setNodeRef, isOver } = useDroppable({
    id,
  })

  if (!isVisible) return null

  return (
    <div
      ref={setNodeRef}
      className={clsx(
        'absolute bottom-0 top-0 z-10 w-3',
        position === 'left' ? '-left-3' : '-right-3',
        'transition-all duration-200 ease-in-out',
        // Базовое состояние - полностью прозрачная зона
        'bg-transparent',
        // При drag over показываем активную зону
        isOver && 'bg-primary/5'
      )}
    >
      {/* Активный индикатор только при drag over */}
      {isOver && (
        <div className="absolute inset-0 flex items-center justify-center">
          <div
            className={clsx(
              'h-full w-1 rounded-full bg-primary shadow-sm',
              'duration-200 animate-in fade-in',
              // Добавляем тонкий border для лучшей видимости
              'ring-1 ring-primary/20'
            )}
          >
            {/* Индикатор направления вставки */}
            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
              <div
                className={clsx(
                  'h-2 w-2 rounded-full bg-primary',
                  'border border-background shadow-sm',
                  'animate-pulse'
                )}
              />
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

// Обновленный компонент карточки только с draggable
const DraggableDroppableTemplateCard: React.FC<DraggableTemplateCardProps> = ({
  template,
  index,
  selectionMode,
  isSelected,
  onToggleSelect,
  onCopy,
  onEdit,
  onDelete,
  activeFilters,
}) => {
  // Только для перетаскивания
  const {
    attributes: dragAttributes,
    listeners: dragListeners,
    setNodeRef: setDragRef,
    transform: dragTransform,
    isDragging,
  } = useDraggable({
    id: template.id,
    disabled: selectionMode,
  })

  const style = {
    transform: dragTransform
      ? `translate3d(${dragTransform.x}px, ${dragTransform.y}px, 0)`
      : undefined,
    zIndex: isDragging ? 1000 : 'auto',
    opacity: isDragging ? 0.5 : 1,
  }

  return (
    <div className="relative">
      {/* Drop зона слева */}
      <DropZone id={`drop-left-${template.id}`} position="left" />

      {/* Основная карточка */}
      <div
        ref={setDragRef}
        style={style}
        {...dragAttributes}
        {...dragListeners}
        className={clsx(
          'relative cursor-grab transition-shadow duration-200 active:cursor-grabbing',
          isDragging && 'shadow-xl'
        )}
      >
        <TemplateCard
          template={template}
          selectionMode={selectionMode}
          isSelected={isSelected}
          onToggleSelect={onToggleSelect}
          onCopy={onCopy}
          onEdit={onEdit}
          onDelete={onDelete}
          activeFilters={activeFilters}
        />
      </div>

      {/* Drop зона справа */}
      <DropZone id={`drop-right-${template.id}`} position="right" />
    </div>
  )
}

// Оставляем старый компонент для совместимости
const DraggableTemplateCard = DraggableDroppableTemplateCard

// Компонент для droppable зоны группы
interface DroppableGroupProps {
  groupId: string
  templates: Template[]
  selectionMode: boolean
  selectedTemplates: Set<string>
  onToggleSelect: (id: string) => void
  onCopy: (templateId: string) => void
  onEdit: (templateId: string) => void
  onDelete: (templateId: string) => void
  activeFilters: Record<string, string>
}

const DroppableGroup: React.FC<DroppableGroupProps> = ({
  groupId,
  templates,
  selectionMode,
  selectedTemplates,
  onToggleSelect,
  onCopy,
  onEdit,
  onDelete,
  activeFilters,
}) => {
  const { setNodeRef, isOver } = useDroppable({
    id: groupId,
  })

  return (
    <div
      ref={setNodeRef}
      className={clsx(
        'relative transition-colors duration-200',
        templates.length === 0
          ? 'flex min-h-[120px] items-center justify-center'
          : 'grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6',
        isOver && templates.length === 0 && 'rounded-lg bg-primary/5'
      )}
    >
      {templates.length > 0 ? (
        templates.map((template, index) => (
          <DraggableTemplateCard
            key={template.id}
            template={template}
            index={index}
            selectionMode={selectionMode}
            isSelected={selectedTemplates.has(template.id)}
            onToggleSelect={onToggleSelect}
            onCopy={onCopy}
            onEdit={onEdit}
            onDelete={onDelete}
            activeFilters={activeFilters}
          />
        ))
      ) : (
        /* Минималистичный placeholder для пустой группы */
        <div
          className={clsx(
            'flex items-center justify-center rounded-lg py-12 text-center transition-all duration-300',
            'border border-dashed border-muted-foreground/15',
            isOver
              ? 'scale-[1.02] border-primary/50 bg-primary/5'
              : 'hover:border-muted-foreground/25 hover:bg-muted/20'
          )}
        >
          {isOver ? (
            <div
              className={clsx(
                'flex items-center gap-3 rounded-md px-6 py-3',
                'bg-background/90 backdrop-blur-sm',
                'border border-primary/30 shadow-lg',
                'font-medium text-primary'
              )}
            >
              <div className="h-2 w-2 animate-pulse rounded-full bg-primary" />
              Отпустите чтобы добавить в группу
            </div>
          ) : (
            <div className="text-muted-foreground/60">
              <p className="text-sm font-medium">Перетащите карточку сюда</p>
            </div>
          )}
        </div>
      )}
    </div>
  )
}

interface TemplateGroupProps {
  group: Group | null // null для группы "Без группы"
  templates: Template[]
  selectionMode: boolean
  selectedTemplates: Set<string>
  onToggleSelect: (id: string) => void
  onCopy: (templateId: string) => void
  onEdit: (templateId: string) => void
  onDelete: (templateId: string) => void
  onEditGroup?: (groupId: string) => void
  onDeleteGroup?: (groupId: string) => void
  activeFilters: Record<string, string>
  onCreateTemplate?: (groupId?: string) => void
  isExpanded?: boolean
  onToggleExpanded?: () => void
  showEmptyState?: boolean // Показывать ли пустое состояние при фильтрации
}

export const TemplateGroup: React.FC<TemplateGroupProps> = ({
  group,
  templates,
  selectionMode,
  selectedTemplates,
  onToggleSelect,
  onCopy,
  onEdit,
  onDelete,
  onEditGroup,
  onDeleteGroup,
  activeFilters,
  onCreateTemplate,
  isExpanded: externalIsExpanded,
  onToggleExpanded,
  showEmptyState = false,
}) => {
  const [internalIsExpanded, setInternalIsExpanded] = useState(true)

  // Используем внешнее состояние если передано, иначе внутреннее
  const isExpanded =
    externalIsExpanded !== undefined ? externalIsExpanded : internalIsExpanded

  // Отладка: логируем получение шаблонов в группе
  console.log(`🏗️ TemplateGroup render for "${group?.name || 'Без группы'}":`, {
    groupId: group?.id || 'ungrouped',
    templatesCount: templates.length,
    templates: templates.map(t => ({
      id: t.id,
      name: t.name,
      order: t.order,
      group_id: t.group_id,
    })),
  })

  const toggleExpanded = useCallback(() => {
    if (onToggleExpanded) {
      onToggleExpanded()
    } else {
      setInternalIsExpanded(prev => !prev)
    }
  }, [onToggleExpanded])

  const handleEditGroup = useCallback(() => {
    if (group && onEditGroup) {
      onEditGroup(group.id)
    }
  }, [group, onEditGroup])

  const handleDeleteGroup = useCallback(() => {
    if (group && onDeleteGroup) {
      onDeleteGroup(group.id)
    }
  }, [group, onDeleteGroup])

  const handleCreateTemplate = useCallback(() => {
    if (onCreateTemplate) {
      onCreateTemplate(group?.id)
    }
  }, [group, onCreateTemplate])

  // Показываем все группы, включая пустую группу "Без группы"

  const groupName = group?.name || 'Без группы'
  const canManageGroup = group !== null
  const groupId = group?.id || 'ungrouped'

  return (
    <div
      className={clsx(
        'transition-all duration-200',
        isExpanded ? 'mb-6' : 'mb-0'
      )}
    >
      {/* Заголовок группы */}
      <div
        className={clsx(
          'flex min-h-[40px] items-center justify-between p-2',
          isExpanded ? 'mb-3' : 'mb-0'
        )}
      >
        <div className="flex flex-1 items-center gap-2">
          <Button
            variant="ghost"
            size="sm"
            className="h-6 w-6 flex-shrink-0 p-0"
            onClick={toggleExpanded}
          >
            {isExpanded ? (
              <ChevronDown className="h-4 w-4" />
            ) : (
              <ChevronRight className="h-4 w-4" />
            )}
          </Button>

          {isExpanded ? (
            <FolderOpen className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
          ) : (
            <FolderClosed className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
          )}

          <h3 className="text-lg font-semibold">{groupName}</h3>

          <Badge
            variant="secondary"
            className={clsx(
              'ml-2 text-xs',
              showEmptyState &&
                templates.length === 0 &&
                'border-amber-200 bg-amber-100 text-amber-800'
            )}
          >
            {templates.length}
            {showEmptyState && templates.length === 0 && ' (отфильтровано)'}
          </Badge>
        </div>

        <div className="flex items-center gap-2">
          {canManageGroup && (
            <Popover>
              <PopoverTrigger asChild>
                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                  <MoreVertical className="h-4 w-4" />
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-48 p-1" align="end">
                <div className="space-y-1">
                  <Button
                    variant="ghost"
                    size="sm"
                    className="w-full justify-start"
                    onClick={handleEditGroup}
                  >
                    <Edit3 className="mr-2 h-4 w-4" />
                    Редактировать группу
                  </Button>
                  {templates.length === 0 && (
                    <Button
                      variant="ghost"
                      size="sm"
                      className="w-full justify-start text-destructive hover:text-destructive"
                      onClick={handleDeleteGroup}
                    >
                      Удалить группу
                    </Button>
                  )}
                </div>
              </PopoverContent>
            </Popover>
          )}

          {/* Кнопка создания шаблона - outline стиль */}
          <Button
            variant="outline"
            size="sm"
            onClick={handleCreateTemplate}
            className="h-8 px-3"
          >
            <Plus className="mr-1 h-4 w-4" />
            Создать
          </Button>
        </div>
      </div>

      {/* Карточки шаблонов */}
      {isExpanded && (
        <>
          {showEmptyState && templates.length === 0 ? (
            <div className="py-10 text-center">
              <div className="space-y-3">
                <div className="text-muted-foreground/60">
                  <p className="text-sm font-medium">Нет результатов</p>
                  <p className="text-xs">Попробуйте изменить фильтры</p>
                </div>
              </div>
            </div>
          ) : (
            <DroppableGroup
              groupId={groupId}
              templates={templates}
              selectionMode={selectionMode}
              selectedTemplates={selectedTemplates}
              onToggleSelect={onToggleSelect}
              onCopy={onCopy}
              onEdit={onEdit}
              onDelete={onDelete}
              activeFilters={activeFilters}
            />
          )}
        </>
      )}
    </div>
  )
}
