function normalizeCheckboxValue(value) {
  return value === 'yes';
}

function normalizeArrayValue(value) {
  if (Array.isArray(value)) return value;
  if (typeof value === 'string' && value.trim()) {
    return value
      .split(',')
      .map((part) => Number(part.trim()))
      .filter((item) => Number.isFinite(item) && item > 0);
  }
  return [];
}

function renderIconPreview(iconType) {
  if (iconType === 'spark') {
    return (
      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <path d="M12 3l2.2 5.2L19.5 10l-5.3 1.8L12 17l-2.2-5.2L4.5 10l5.3-1.8L12 3Z" fill="currentColor" />
      </svg>
    );
  }

  if (iconType === 'bolt') {
    return (
      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <path d="M13.5 2L5 13h5l-1.2 9L19 10h-5L13.5 2Z" fill="currentColor" />
      </svg>
    );
  }

  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M6.8 3.5A3.3 3.3 0 0 0 3.5 6.8v8.4a3.3 3.3 0 0 0 3.3 3.3h0.7v2.8c0 0.6 0.7 1 1.2 0.6l4.4-3.4h4.1a3.3 3.3 0 0 0 3.3-3.3V6.8a3.3 3.3 0 0 0-3.3-3.3H6.8Zm2.1 4.6c0-0.4 0.3-0.7 0.7-0.7h5.6c0.4 0 0.7 0.3 0.7 0.7s-0.3 0.7-0.7 0.7H9.6c-0.4 0-0.7-0.3-0.7-0.7Zm0 3.2c0-0.4 0.3-0.7 0.7-0.7h3.8c0.4 0 0.7 0.3 0.7 0.7s-0.3 0.7-0.7 0.7H9.6c-0.4 0-0.7-0.3-0.7-0.7Z" fill="currentColor" />
    </svg>
  );
}

export default function SettingField({ field, value, onChange, options = [] }) {
  const id = `field-${field.name}`;
  const rowClassName = `wp-ai-field-row ${field.className || ''}`.trim();

  if (field.type === 'checkbox') {
    return (
      <div className="wp-ai-field-row wp-ai-field-toggle">
        <span className="wp-ai-field-label">{field.label}</span>
        {field.description ? <span className="wp-ai-field-description">{field.description}</span> : null}
        <label className="wp-ai-toggle-switch" htmlFor={id}>
          <input
            id={id}
            type="checkbox"
            checked={normalizeCheckboxValue(value)}
            onChange={(event) => onChange(field.name, event.target.checked ? 'yes' : 'no')}
          />
          <span className="wp-ai-toggle-slider"></span>
        </label>
      </div>
    );
  }

  if (field.type === 'tool-selector') {
    return (
      <div className="wp-ai-field-row wp-ai-field-tool-selector">
        <span className="wp-ai-field-label">{field.label}</span>
        {field.description ? <span className="wp-ai-field-description">{field.description}</span> : null}
        <div className="wp-ai-tool-cards">
          {options.map((option) => {
            const isSelected = value === option.value;

            return (
              <button
                key={option.value} 
                type="button"
                className={`wp-ai-tool-card ${isSelected ? 'selected' : ''}`}
                onClick={() => onChange(field.name, option.value)}
              >
                <h4>{option.label}</h4>
                <div className="wp-ai-tool-status">
                  <span className={`status-indicator ${isSelected ? 'active' : ''}`}></span>
                  {isSelected ? 'Selected' : 'Select'}
                </div>
              </button>
            );
          })}
        </div>
      </div>
    );
  }

  if (field.type === 'card-selector') {
    return (
      <div className={`${rowClassName} wp-ai-card-selector`.trim()}>
        <span className="wp-ai-field-label">{field.label}</span>
        {field.description ? <span className="wp-ai-field-description">{field.description}</span> : null}
        <div className="wp-ai-choice-cards">
          {options.map((option) => {
            const isSelected = value === option.value;

            return (
              <button
                key={option.value}
                type="button"
                className={`wp-ai-choice-card ${isSelected ? 'selected' : ''}`}
                onClick={() => onChange(field.name, option.value)}
              >
                <span className="wp-ai-choice-card-title">{option.label}</span>
              </button>
            );
          })}
        </div>
      </div>
    );
  }

  if (field.type === 'icon-selector') {
    return (
      <div className={`${rowClassName} wp-ai-icon-selector`.trim()}>
        <span className="wp-ai-field-label">{field.label}</span>
        {field.description ? <span className="wp-ai-field-description">{field.description}</span> : null}
        <div className="wp-ai-icon-cards">
          {options.map((option) => {
            const isSelected = value === option.value;

            return (
              <button
                key={option.value}
                type="button"
                className={`wp-ai-icon-card ${isSelected ? 'selected' : ''}`}
                onClick={() => onChange(field.name, option.value)}
              >
                <span className="wp-ai-icon-card-preview">{renderIconPreview(option.value)}</span>
                <span className="wp-ai-icon-card-label">{option.label}</span>
              </button>
            );
          })}
        </div>
      </div>
    );
  }

  if (field.type === 'multi-checkbox') {
    const selectedValues = normalizeArrayValue(value).map((item) => Number(item));

    return (
      <div className={`${rowClassName} wp-ai-field-multi-checkbox`.trim()}>
        <span className="wp-ai-field-label">{field.label}</span>
        {field.description ? <span className="wp-ai-field-description">{field.description}</span> : null}
        <div className="wp-ai-multi-checkbox-list">
          {options.length === 0 ? <span className="wp-ai-field-description">No pages found.</span> : null}
          {options.map((option) => {
            const numericValue = Number(option.value);
            const isChecked = selectedValues.includes(numericValue);

            return (
              <label key={option.value} className="wp-ai-multi-checkbox-item">
                <input
                  type="checkbox"
                  checked={isChecked}
                  onChange={(event) => {
                    const nextValues = event.target.checked
                      ? [...selectedValues, numericValue]
                      : selectedValues.filter((item) => item !== numericValue);
                    onChange(field.name, Array.from(new Set(nextValues)).sort((a, b) => a - b));
                  }}
                />
                <span className="wp-ai-multi-checkbox-label">{option.label}</span>
              </label>
            );
          })}
        </div>
      </div>
    );
  }

  if (field.type === 'textarea') {
    return (
      <label className="wp-ai-field-row" htmlFor={id}>
        <span className="wp-ai-field-label">{field.label}</span>
        {field.description ? <span className="wp-ai-field-description">{field.description}</span> : null}
        <textarea
          id={id}
          rows={field.rows || 4}
          value={value ?? ''}
          onChange={(event) => onChange(field.name, event.target.value)}
        />
      </label>
    );
  }

  if (field.type === 'select') {
    return (
      <label className={rowClassName} htmlFor={id}>
        <span className="wp-ai-field-label">{field.label}</span>
        {field.description ? <span className="wp-ai-field-description">{field.description}</span> : null}
        <div className="wp-ai-modern-select-wrap">
          <select id={id} value={value ?? ''} onChange={(event) => onChange(field.name, event.target.value)}>
            {options.map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </div>
      </label>
    );
  }

  if (field.type === 'color') {
    const resolvedColor = (value || '#000000').toUpperCase();

    return (
      <label className={`${rowClassName} wp-ai-field-color`.trim()} htmlFor={id}>
        <span className="wp-ai-field-label">{field.label}</span>
        {field.description ? <span className="wp-ai-field-description">{field.description}</span> : null}
        <div className="wp-ai-color-picker-wrap">
          <input
            id={id}
            type="color"
            value={value || '#000000'}
            onChange={(event) => onChange(field.name, event.target.value)}
          />
          <span className="wp-ai-color-val">{resolvedColor}</span>
        </div>
      </label>
    );
  }

  return (
    <label className={rowClassName} htmlFor={id}>
      <span className="wp-ai-field-label">{field.label}</span>
      {field.description ? <span className="wp-ai-field-description">{field.description}</span> : null}
      <input
        id={id}
        type={field.type || 'text'}
        min={field.min}
        max={field.max}
        step={field.step}
        value={value ?? ''}
        placeholder={field.placeholder || ''}
        onChange={(event) => onChange(field.name, event.target.value)}
      />
    </label>
  );
}