/* ctor-ms-field-media.jsx — shared media field config + preview (constructor + FormEngine) */
(function () {
  function msNormalizeMediaField(field) {
    if (!field || field.type !== 'media') return field;
    const kinds = Array.isArray(field.mediaKinds) && field.mediaKinds.length
      ? field.mediaKinds.slice()
      : ['photo', 'video'];
    return {
      mediaMultiple: field.mediaMultiple !== false,
      mediaMaxFiles: typeof field.mediaMaxFiles === 'number' ? Math.max(1, field.mediaMaxFiles) : 10,
      mediaKinds: kinds,
      ...field,
    };
  }

  function msDefaultMediaField(patch) {
    return msNormalizeMediaField({
      type: 'media',
      label: '',
      required: false,
      mediaMultiple: true,
      mediaMaxFiles: 10,
      mediaKinds: ['photo', 'video'],
      ...patch,
    });
  }

  function MsMediaFieldConfigPanel({ field, onPatch }) {
    const f = msNormalizeMediaField(field);
    const kinds = new Set(f.mediaKinds || ['photo', 'video']);
    const toggleKind = (kind) => {
      const next = new Set(kinds);
      if (next.has(kind)) {
        if (next.size <= 1) return;
        next.delete(kind);
      } else {
        next.add(kind);
      }
      onPatch(f.id, { mediaKinds: [...next] });
    };

    return (
      <div className="ms-media-config">
        <MsMediaFieldPreview field={f} interactive />
        <div className="ms-media-config-row">
          <label className="ms-media-config-check">
            <input
              type="checkbox"
              checked={f.mediaMultiple !== false}
              onChange={(e) => onPatch(f.id, {
                mediaMultiple: e.target.checked,
                mediaMaxFiles: e.target.checked ? (f.mediaMaxFiles || 10) : 1,
              })}
            />
            <span>Несколько файлов</span>
          </label>
          {f.mediaMultiple !== false && (
            <label className="ms-media-config-max">
              <span>Лимит</span>
              <input
                type="number"
                min={1}
                max={30}
                value={f.mediaMaxFiles || 10}
                onChange={(e) => onPatch(f.id, { mediaMaxFiles: Math.max(1, Math.min(30, +e.target.value || 1)) })}
                className="ms-media-config-max-input"
              />
            </label>
          )}
        </div>
        <div className="ms-media-config-kinds">
          <span className="ms-media-config-kinds-label">Типы загрузки</span>
          <div className="ms-media-config-kinds-btns">
            <button type="button" className={'ms-media-kind-btn' + (kinds.has('photo') ? ' is-on' : '')} onClick={() => toggleKind('photo')}>Фото</button>
            <button type="button" className={'ms-media-kind-btn' + (kinds.has('video') ? ' is-on' : '')} onClick={() => toggleKind('video')}>Видео</button>
          </div>
        </div>
      </div>
    );
  }

  function MsMediaFieldPreview({ field, interactive }) {
    const f = msNormalizeMediaField(field);
    const max = f.mediaMultiple === false ? 1 : (f.mediaMaxFiles || 10);
    const kinds = f.mediaKinds || ['photo', 'video'];
    const slots = Math.min(max, f.mediaMultiple === false ? 1 : 3);

    return (
      <div className="ms-media-preview" aria-hidden={interactive ? undefined : true}>
        <div className="ms-media-preview-slots">
          {Array.from({ length: slots }).map((_, i) => (
            <div key={i} className="ms-media-preview-slot">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" aria-hidden="true">
                <rect x="3" y="5" width="18" height="14" rx="2" />
                <circle cx="8.5" cy="10" r="1.5" />
                <path d="M21 16l-5-5L5 18" />
              </svg>
            </div>
          ))}
          {interactive && (
            <div className="ms-media-preview-add">
              {kinds.includes('photo') && <span className="ms-media-preview-add-chip">+ фото</span>}
              {kinds.includes('video') && <span className="ms-media-preview-add-chip">+ видео</span>}
            </div>
          )}
        </div>
        {!interactive && (
          <div className="ms-media-preview-caption">
            {f.mediaMultiple === false ? '1 файл' : 'до ' + max + ' файлов'}
            {' · '}
            {kinds.map((k) => (k === 'video' ? 'видео' : 'фото')).join(', ')}
          </div>
        )}
      </div>
    );
  }

  Object.assign(window, {
    msNormalizeMediaField,
    msDefaultMediaField,
    MsMediaFieldConfigPanel,
    MsMediaFieldPreview,
  });
})();