import { useCategoryContext } from '@/entity/template/model/CategoryContext'
import { Attribute } from '@/type/template'
import { AlertCircle } from 'lucide-react'
import React from 'react'
import { Input } from 'shared/ui/input'
import { Label } from 'shared/ui/label'

interface AttributeValue {
  attributeId: string
  value: string | number
}

interface CategoryFieldsSelectorProps {
  selectedValues: AttributeValue[]
  onValuesChange: (values: AttributeValue[]) => void
  disabled?: boolean
  compact?: boolean // Новый проп для компактного отображения
}

export const CategoryFieldsSelector: React.FC<CategoryFieldsSelectorProps> = ({
  selectedValues,
  onValuesChange,
  disabled = false,
  compact = false, // По умолчанию обычный режим
}) => {
  const { attributes, isLoading } = useCategoryContext()

  const getAttributeValue = (attributeId: string): string => {
    const value = selectedValues.find(v => v.attributeId === attributeId)?.value
    return value?.toString() || ''
  }

  const updateAttributeValue = (
    attributeId: string,
    value: string | number
  ) => {
    const newValues = selectedValues.filter(v => v.attributeId !== attributeId)
    if (value !== '' && value !== null && value !== undefined) {
      newValues.push({ attributeId, value })
    }
    onValuesChange(newValues)
  }

  const renderAttribute = (attribute: Attribute) => {
    const value = getAttributeValue(attribute.id)

    const fieldProps = {
      disabled,
    }

    return (
      <div key={attribute.id} className="space-y-2">
        <Label
          htmlFor={attribute.id}
          className={`text-sm font-medium ${compact ? 'text-xs' : ''}`}
        >
          {attribute.name}
          {attribute.is_required && (
            <span className="ml-1 text-red-500">*</span>
          )}
        </Label>

        {/* Простое текстовое поле для всех атрибутов */}
        <Input
          id={attribute.id}
          value={value}
          onChange={e => updateAttributeValue(attribute.id, e.target.value)}
          placeholder={
            compact ? attribute.name : `Введите ${attribute.name.toLowerCase()}`
          }
          className={compact ? 'h-8 text-sm' : ''}
          {...fieldProps}
        />

        {attribute.is_required && !value && (
          <p
            className={`flex items-center gap-1 text-red-500 ${compact ? 'text-xs' : 'text-xs'}`}
          >
            <AlertCircle className="h-3 w-3" />
            {compact ? 'Обязательно' : 'Это поле обязательно для заполнения'}
          </p>
        )}
      </div>
    )
  }

  if (isLoading) {
    return (
      <div className="space-y-4">
        <div className="text-sm text-muted-foreground">
          Загрузка атрибутов...
        </div>
      </div>
    )
  }

  return (
    <div className={compact ? 'space-y-4' : 'space-y-6'}>
      {attributes.length > 0 ? (
        <div className={compact ? 'grid grid-cols-2 gap-3' : 'space-y-4'}>
          {attributes.map(renderAttribute)}
        </div>
      ) : (
        <div className="py-4 text-center">
          <p className="text-sm text-muted-foreground">Атрибуты не настроены</p>
        </div>
      )}
    </div>
  )
}

export default CategoryFieldsSelector
