import { CellTarget } from '@/type/template'
import { Building2, Calendar } from 'lucide-react'
import { Badge } from 'shared/ui/badge'
import { Label } from 'shared/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from 'shared/ui/select'
import { useLaboratories, useLaboratoryConditions } from './hooks'
import { ConditionMapping, VerificationConditionsConfig } from './types'

interface VerificationConditionsEditorProps {
  config: VerificationConditionsConfig & { targetCells?: CellTarget[] }
  onChange: (config: VerificationConditionsConfig) => void
}

export function VerificationConditionsEditor({
  config,
  onChange,
}: VerificationConditionsEditorProps) {
  const { data: laboratories = [], isLoading } = useLaboratories()
  const { data: labData } = useLaboratoryConditions(config.selectedLaboratoryId)

  const updateConfig = (updates: Partial<VerificationConditionsConfig>) => {
    onChange({ ...config, ...updates })
  }

  // Получить доступные целевые ячейки из конфигурации
  const getAvailableTargetCells = () => {
    return config.targetCells || []
  }

  // Обновить маппинг для конкретного условия (включая дату поверки)
  const updateConditionMapping = (
    conditionId: string,
    conditionName: string,
    targetCellKey?: string // формат: "sheet:cell", например "L:A1"
  ) => {
    const currentMappings = config.conditionMappings || []
    let updatedMappings = [...currentMappings]

    // Удаляем существующий маппинг для этого условия
    updatedMappings = updatedMappings.filter(
      mapping => mapping.conditionKey !== conditionId
    )

    // Если выбрана ячейка, добавляем новый маппинг
    if (targetCellKey) {
      const [sheet, cell] = targetCellKey.split(':')
      const targetCells = getAvailableTargetCells()
      const targetIndex = targetCells.findIndex(
        tc => tc.sheet === sheet && tc.cell === cell
      )

      if (targetIndex !== -1) {
        const newMapping: ConditionMapping = {
          conditionKey: conditionId,
          conditionName: conditionName,
          cellIndex: targetIndex, // используем индекс в массиве targetCells
        }
        updatedMappings.push(newMapping)
      }
    }

    updateConfig({ conditionMappings: updatedMappings })
  }

  // Получить выбранную ячейку для условия
  const getSelectedTargetCell = (conditionId: string): string | undefined => {
    const mapping = (config.conditionMappings || []).find(
      mapping => mapping.conditionKey === conditionId
    )
    if (!mapping) return undefined

    const targetCells = getAvailableTargetCells()
    const targetCell = targetCells[mapping.cellIndex]
    return targetCell ? `${targetCell.sheet}:${targetCell.cell}` : undefined
  }

  // Получить занятые ячейки (исключая текущее условие)
  const getOccupiedTargetCells = (excludeConditionId?: string): string[] => {
    const targetCells = getAvailableTargetCells()
    return (config.conditionMappings || [])
      .filter(mapping => mapping.conditionKey !== excludeConditionId)
      .map(mapping => {
        const targetCell = targetCells[mapping.cellIndex]
        return targetCell ? `${targetCell.sheet}:${targetCell.cell}` : ''
      })
      .filter(Boolean)
  }

  const targetCells = getAvailableTargetCells()

  // Создаем список всех условий включая дату поверки
  const allConditions = [
    // Дата поверки как первый элемент
    {
      id: 'verification_date',
      name: 'Дата поверки',
      unit: '',
      isDate: true,
    },
    // Условия из лаборатории
    ...(labData?.conditionTypes || []).map(ct => ({
      id: ct.id,
      name: ct.name,
      unit: ct.unit,
      isDate: false,
    })),
  ]

  return (
    <div className="space-y-4">
      {/* Компактный выбор лаборатории */}
      <div className="flex items-center gap-3">
        <div className="flex items-center gap-2">
          <Building2 className="h-4 w-4 text-blue-600" />
          <Label className="text-sm font-medium">Лаборатория</Label>
        </div>
        <div className="flex-1">
          <Select
            value={config.selectedLaboratoryId || ''}
            onValueChange={value =>
              updateConfig({
                selectedLaboratoryId: value || undefined,
              })
            }
            disabled={isLoading}
          >
            <SelectTrigger className="h-8 text-sm">
              <SelectValue
                placeholder={isLoading ? 'Загрузка...' : 'Выберите лабораторию'}
              />
            </SelectTrigger>
            <SelectContent>
              {laboratories.map(lab => (
                <SelectItem key={lab.id} value={lab.id}>
                  {lab.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      {/* Маппинг условий (включая дату поверки) */}
      {targetCells.length > 0 && (
        <div className="space-y-3">
          <Label className="text-sm font-medium text-gray-700">
            Маппинг условий и даты поверки
          </Label>
          <div className="space-y-2">
            {allConditions.map(condition => {
              const selectedCell = getSelectedTargetCell(condition.id)
              const occupiedCells = getOccupiedTargetCells(condition.id)

              return (
                <div
                  key={condition.id}
                  className="flex items-center justify-between gap-3 rounded-md border border-gray-200 bg-gray-50/50 px-3 py-2"
                >
                  {/* Информация об условии */}
                  <div className="flex items-center gap-2">
                    {condition.isDate && (
                      <Calendar className="h-4 w-4 text-green-600" />
                    )}
                    <span className="text-sm font-medium text-gray-900">
                      {condition.name}
                    </span>
                    {condition.unit && (
                      <Badge
                        variant="secondary"
                        className="px-2 py-0.5 text-xs"
                      >
                        {condition.unit}
                      </Badge>
                    )}
                  </div>

                  {/* Компактный селектор ячейки */}
                  <Select
                    value={selectedCell || 'UNSELECTED'}
                    onValueChange={value =>
                      updateConditionMapping(
                        condition.id,
                        condition.name,
                        value === 'UNSELECTED' ? undefined : value
                      )
                    }
                  >
                    <SelectTrigger className="h-8 w-20 text-xs">
                      <SelectValue placeholder="—" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="UNSELECTED">—</SelectItem>
                      {targetCells
                        .map(
                          (target, index) => `${target.sheet}:${target.cell}`
                        )
                        .filter(cellKey => !occupiedCells.includes(cellKey))
                        .map(cellKey => (
                          <SelectItem key={cellKey} value={cellKey}>
                            {cellKey}
                          </SelectItem>
                        ))}
                    </SelectContent>
                  </Select>
                </div>
              )
            })}

            {allConditions.length === 1 && (
              <div className="rounded-md border border-dashed border-gray-300 py-4 text-center">
                <p className="text-xs text-gray-500">
                  У выбранной лаборатории нет настроенных типов условий
                </p>
              </div>
            )}
          </div>
        </div>
      )}

      {/* Предупреждение если нет целевых ячеек */}
      {targetCells.length === 0 && (
        <div className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2">
          <p className="text-xs text-amber-700">
            Добавьте целевые ячейки в настройки элемента для маппинга условий
            поверки
          </p>
        </div>
      )}

      {/* Предупреждение если выбрана лаборатория но нет ячеек */}
      {labData && targetCells.length === 0 && (
        <div className="rounded-md border border-blue-200 bg-blue-50 px-3 py-2">
          <p className="text-xs text-blue-700">
            Настройте целевые ячейки для сопоставления условий поверки
          </p>
        </div>
      )}
    </div>
  )
}
