import { ElementDefinition } from '@/entity/element/model/interface'
import { CellsBadge } from '@/entity/element/ui/cellsBadge'
import { CellTarget } from '@/type/template'
import { FileText, Settings, Weight } from 'lucide-react'
import { useEffect, useState } from 'react'
import { Badge } from 'shared/ui/badge'
import { Button } from 'shared/ui/button'
import { Label } from 'shared/ui/label'
import { useStandards } from './hooks'
import { StandardsEditor } from './StandardsEditor'
import { StandardsPreview } from './StandardsPreview'
import { StandardsSelector } from './StandardsSelector'

export interface StandardsConfig {
  maxItems: number
  targetCells: CellTarget[]
  selectedStandards?: string[]
  name?: string
}

// Новый интерфейс для значения элемента эталонов
export interface StandardsValue {
  standardIds: string[]
  standardNames: string[] // пронумерованные protocol_name для записи в ячейки (1. Name, 2. Name)
}

export const standardsDefinition: ElementDefinition<
  StandardsConfig,
  StandardsValue
> = {
  type: 'standards',
  label: 'Выбор эталонов',
  icon: <Weight className="h-4 w-4" />,
  version: 1,
  defaultConfig: {
    maxItems: 7,
    targetCells: [],
    selectedStandards: [],
    name: '',
  },
  Editor: StandardsEditor,
  Preview: StandardsPreview,

  // Получение начальных значений из конфигурации
  getInitialValue: config => {
    return {
      standardIds: config.selectedStandards || [],
      standardNames: [], // Будет заполнено при рендере компонента
    }
  },

  Render: ({ config, value, onChange }) => {
    const [isStandardsDialogOpen, setIsStandardsDialogOpen] = useState(false)
    const [selectedStandardIds, setSelectedStandardIds] = useState<string[]>(
      // Инициализируем из value.standardIds, config.selectedStandards или пустого массива
      value?.standardIds || config.selectedStandards || []
    )

    // Получаем реальные данные эталонов
    const { data: standards = [] } = useStandards()

    // Синхронизируем selectedStandardIds с value и config
    useEffect(() => {
      const standardIds = value?.standardIds || config.selectedStandards || []
      setSelectedStandardIds(standardIds)
    }, [value?.standardIds, config.selectedStandards])

    // Получаем данные выбранных эталонов из реального API
    const selectedStandardsData = selectedStandardIds
      .map(id => standards.find(s => s.id === id))
      .filter(Boolean)

    // Обновляем standardNames при получении данных из API, если они еще не заполнены
    useEffect(() => {
      if (
        standards.length > 0 &&
        selectedStandardIds.length > 0 &&
        (!value?.standardNames || value.standardNames.length === 0) &&
        onChange
      ) {
        const standardNames = selectedStandardIds
          .map((id, index) => {
            const standard = standards.find(s => s.id === id)
            return standard?.protocol_name
              ? `${index + 1}. ${standard.protocol_name}`
              : ''
          })
          .filter(Boolean)

        if (standardNames.length > 0) {
          onChange({
            standardIds: selectedStandardIds,
            standardNames,
          })
        }
      }
    }, [standards, selectedStandardIds, value?.standardNames, onChange])

    return (
      <div className="relative space-y-2">
        {/* Бейдж ячеек */}
        <CellsBadge targetCells={config.targetCells} />

        {/* Блок с измерительными эталонами */}
        <div>
          <div className="mb-2 flex items-center justify-between">
            <Label className="text-sm font-medium">Эталоны</Label>
            <Button
              variant="outline"
              size="sm"
              onClick={() => setIsStandardsDialogOpen(true)}
              className="h-7 px-2"
            >
              <Settings className="mr-1 h-3 w-3" />
              Настроить
            </Button>
          </div>

          <div className="space-y-2">
            {selectedStandardsData.length > 0 ? (
              <div className="space-y-1">
                {selectedStandardsData.map(
                  (standard, index) =>
                    standard && (
                      <div
                        key={standard.id}
                        className="flex items-center gap-2 rounded-md bg-muted/30 p-2 text-sm"
                      >
                        <div className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-primary/10">
                          <span className="text-xs font-medium text-primary">
                            {index + 1}
                          </span>
                        </div>
                        <div className="min-w-0 flex-1">
                          <div className="truncate text-xs font-medium text-foreground">
                            {standard.name}
                          </div>
                          <div className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
                            <FileText className="h-2.5 w-2.5" />
                            <span className="hidden text-xs sm:inline">
                              {standard.registry_number}
                            </span>
                          </div>
                        </div>
                        <Badge
                          variant="secondary"
                          className="shrink-0 px-1.5 py-0.5 text-xs"
                        >
                          {standard.range}
                        </Badge>
                      </div>
                    )
                )}
              </div>
            ) : (
              <div className="rounded-md border border-dashed bg-muted/30 p-3 text-center text-sm text-muted-foreground">
                <Settings className="mx-auto mb-1 h-4 w-4 opacity-50" />
                Эталоны не выбраны
              </div>
            )}
          </div>
        </div>

        <StandardsSelector
          isOpen={isStandardsDialogOpen}
          onClose={() => setIsStandardsDialogOpen(false)}
          value={selectedStandardIds}
          onChange={standardIds => {
            setSelectedStandardIds(standardIds)

            // Получаем protocol_name эталонов для выбранных ID с нумерацией
            const standardNames = standardIds
              .map((id, index) => {
                const standard = standards.find(s => s.id === id)
                return standard?.protocol_name
                  ? `${index + 1}. ${standard.protocol_name}`
                  : ''
              })
              .filter(Boolean)

            // Сохраняем полную информацию: ID и protocol_name
            onChange?.({
              standardIds,
              standardNames,
            })
          }}
          maxItems={config.maxItems}
        />
      </div>
    )
  },
  mapToCells: cfg => {
    // Возвращаем ячейки из конфигурации
    return cfg.targetCells || []
  },
  mapToCellValues: (cfg, value) => {
    // Используем targetCells из конфигурации
    const cells = cfg.targetCells || []

    // value теперь содержит как ID, так и пронумерованные protocol_name эталонов
    const standardNames = value?.standardNames || []

    return cells.map((target, idx) => ({
      target,
      value: standardNames[idx] || '',
    }))
  },
}
