import { Button } from '@/component/ui/button'
import { Input } from '@/component/ui/input'
import { ElementDefinition } from '@/entitiy/element/model/interface'
import { ElementOption } from '@/type/template'
import { CheckSquare, Plus, Trash2 } from 'lucide-react'

interface RadioConfig {
  placeholder?: string
  required?: boolean
  options: ElementOption[]
  targetCells: any[]
}

export const radioDefinition: ElementDefinition<RadioConfig, string> = {
  type: 'radio',
  label: 'Радиокнопки',
  icon: <CheckSquare className="h-4 w-4" />,
  version: 1,
  defaultConfig: {
    placeholder: '',
    required: false,
    options: [],
    targetCells: [],
  },
  mapToCells: config => config.targetCells || [],
  mapToCellValues: (config, value) => {
    const cells = config.targetCells || []
    return cells.map(target => ({ target, value: value || '' }))
  },
  Editor: ({ config, onChange }) => {
    const handleAddOption = () => {
      onChange({
        ...config,
        options: [...config.options, { value: '', label: '' }],
      })
    }

    const handleUpdateOption = (
      index: number,
      field: 'value' | 'label',
      value: string
    ) => {
      onChange({
        ...config,
        options: config.options.map((option, i) =>
          i === index ? { ...option, [field]: value } : option
        ),
      })
    }

    const handleRemoveOption = (index: number) => {
      onChange({
        ...config,
        options: config.options.filter((_, i) => i !== index),
      })
    }

    return (
      <div className="space-y-4">
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <label className="text-sm font-medium">Варианты</label>
            <Button variant="outline" size="sm" onClick={handleAddOption}>
              <Plus className="mr-1 h-4 w-4" />
              Добавить
            </Button>
          </div>
          <div className="max-h-32 space-y-2 overflow-y-auto">
            {config.options.map((option, index) => (
              <div key={index} className="flex gap-2">
                <Input
                  placeholder="Значение"
                  value={option.value}
                  onChange={e =>
                    handleUpdateOption(index, 'value', e.target.value)
                  }
                />
                <Input
                  placeholder="Подпись"
                  value={option.label}
                  onChange={e =>
                    handleUpdateOption(index, 'label', e.target.value)
                  }
                />
                <Button
                  variant="outline"
                  size="icon"
                  onClick={() => handleRemoveOption(index)}
                >
                  <Trash2 className="h-4 w-4" />
                </Button>
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  },
  Preview: ({ config }) => (
    <div className="space-y-3">
      <div className="text-sm font-medium text-gray-700">Предпросмотр</div>
      <div className="rounded-lg border border-gray-200 bg-white p-4">
        <div className="space-y-2">
          {config.options.length > 0 ? (
            config.options.map((option, index) => (
              <div key={index} className="flex items-center space-x-2">
                <div className="h-4 w-4 rounded-full border border-gray-300" />
                <span className="text-sm">{option.label}</span>
              </div>
            ))
          ) : (
            <div className="flex items-center space-x-2">
              <div className="h-4 w-4 rounded-full border border-gray-300" />
              <span className="text-sm text-gray-500">Вариант 1</span>
            </div>
          )}
        </div>
      </div>
    </div>
  ),
  Render: ({ config, value, onChange }) => (
    <div className="space-y-2">
      {config.options.map((option, index) => (
        <div key={index} className="flex items-center space-x-2">
          <input
            type="radio"
            name="radio-group"
            value={option.value}
            checked={value === option.value}
            onChange={e => onChange?.(e.target.value)}
            required={config.required}
            className="h-4 w-4"
          />
          <span className="text-sm">{option.label}</span>
        </div>
      ))}
    </div>
  ),
}