import { Info, Settings } from 'lucide-react'
import { useState } from 'react'
import { Button } from 'shared/ui/button'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from 'shared/ui/select'
import { StandardsSelector } from './StandardsSelector'
import { StandardsConfig } from './definition'

interface StandardsEditorProps {
  config: StandardsConfig
  onChange: (config: StandardsConfig) => void
}

export const StandardsEditor: React.FC<StandardsEditorProps> = ({
  config,
  onChange,
}) => {
  const [isStandardsDialogOpen, setIsStandardsDialogOpen] = useState(false)

  // Обеспечиваем значения по умолчанию
  const safeConfig = {
    maxItems: config.maxItems || 7,
    targetCells: config.targetCells || [],
    selectedStandards: config.selectedStandards || [],
  }

  const updateConfig = (updates: Partial<StandardsConfig>) => {
    onChange({ ...safeConfig, ...updates })
  }

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <div className="flex items-center gap-2">
          <label className="text-sm font-medium">Максимум эталонов</label>
          <Select
            value={safeConfig.maxItems.toString()}
            onValueChange={value => updateConfig({ maxItems: parseInt(value) })}
          >
            <SelectTrigger className="h-8 w-16">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="3">3</SelectItem>
              <SelectItem value="7">7</SelectItem>
              <SelectItem value="9">9</SelectItem>
              <SelectItem value="10">10</SelectItem>
              <SelectItem value="12">12</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <p className="text-xs text-gray-500">
          Максимальное количество эталонов для выбора (0-12)
        </p>
      </div>

      <div className="space-y-2">
        <label className="text-sm font-medium">Предустановленные эталоны</label>
        <div className="flex items-center gap-2">
          <Button
            type="button"
            variant="outline"
            size="sm"
            onClick={() => setIsStandardsDialogOpen(true)}
            className="flex-1"
          >
            <Settings className="mr-2 h-4 w-4" />
            {safeConfig.selectedStandards.length > 0
              ? `Выбрано: ${safeConfig.selectedStandards.length}`
              : 'Выбрать эталоны'}
          </Button>
          {safeConfig.selectedStandards.length > 0 && (
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={() => updateConfig({ selectedStandards: [] })}
            >
              Очистить
            </Button>
          )}
        </div>
        <p className="text-xs text-gray-500">
          Эталоны, которые будут выбраны по умолчанию при создании протокола
        </p>
      </div>

      <div className="rounded-lg bg-blue-50 p-3">
        <div className="flex items-start gap-2">
          <Info className="mt-0.5 h-4 w-4 text-blue-600" />
          <div className="text-sm">
            <p className="font-medium text-blue-900">Как это работает:</p>
            <ul className="mt-1 list-disc space-y-1 pl-4 text-blue-800">
              <li>Выберите максимальное количество эталонов</li>
              <li>Настройте предустановленные эталоны (опционально)</li>
              <li>При создании протокола пользователь сможет изменить выбор</li>
            </ul>
          </div>
        </div>
      </div>

      <StandardsSelector
        isOpen={isStandardsDialogOpen}
        onClose={() => setIsStandardsDialogOpen(false)}
        value={safeConfig.selectedStandards}
        onChange={standardIds => {
          updateConfig({ selectedStandards: standardIds })
        }}
        maxItems={safeConfig.maxItems}
      />
    </div>
  )
}
