import { useState } from 'react';
import { useForm } from '../../context/FormContext';
import { Check, Plus } from 'lucide-react';

export default function CheckboxGroup({ field, sectionId }) {
  const { formState, toggleCheckbox, addCustomCheckboxItem } = useForm();
  const [customInput, setCustomInput] = useState('');

  const fieldState = formState.sections[sectionId]?.[field.id] || { checked: [], customItems: [] };
  const checked = fieldState.checked || [];
  const allItems = [...(field.options || []), ...(fieldState.customItems || [])];

  const handleAddCustom = () => {
    if (customInput.trim()) {
      addCustomCheckboxItem(sectionId, field.id, customInput.trim());
      setCustomInput('');
    }
  };

  return (
    <div className="checkbox-group" id={`field-${field.id}`}>
      <div className="checkbox-group__label">{field.label}</div>

      {field.sentence && (
        <div className="checkbox-group__sentence">{field.sentence}</div>
      )}

      <div className="checkbox-group__items">
        {allItems.map(item => {
          const isChecked = checked.includes(item);
          return (
            <div
              key={item}
              className={`checkbox-item ${isChecked ? 'checkbox-item--checked' : ''}`}
              onClick={() => toggleCheckbox(sectionId, field.id, item)}
            >
              <div className="checkbox-item__box">
                {isChecked && <Check size={12} strokeWidth={3} />}
              </div>
              <span className="checkbox-item__label">{item}</span>
            </div>
          );
        })}
      </div>

      <div className="fill-blank__custom" style={{ marginTop: '0.5rem' }}>
        <input
          type="text"
          className="fill-blank__custom-input"
          placeholder="Add custom item..."
          value={customInput}
          onChange={e => setCustomInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && handleAddCustom()}
        />
        <button
          type="button"
          className="fill-blank__custom-add"
          onClick={handleAddCustom}
          title="Add custom checkbox item"
        >
          <Plus size={14} />
        </button>
      </div>
    </div>
  );
}