@php
  $editorId = $editorId ?? 'rich_text_editor';
  $inputName = $inputName ?? 'body';
  $value = $value ?? '';
  $minHeight = max(280, (int) ($minHeight ?? 320));
  $editorHeight = $minHeight + 140;
  $mediaUploadUrl = $mediaUploadUrl ?? route('media.api.upload');
@endphp
<div class="tinymce-field-wrap border rounded bg-white overflow-hidden">
  <textarea
    id="{{ $editorId }}"
    name="{{ $inputName }}"
    class="form-control border-0"
    data-tinymce-field
    data-tinymce-min-height="{{ $minHeight }}"
    data-tinymce-height="{{ $editorHeight }}"
  >{{ $value }}</textarea>
</div>

@once
  @push('styles')
  <style>
    .tinymce-field-wrap .tox-tinymce {
      width: 100% !important;
      max-width: 100%;
      border: none !important;
    }
    .tinymce-field-wrap .tox .tox-edit-area {
      min-height: 260px;
    }
    .tinymce-field-wrap .tox .tox-edit-area__iframe {
      min-height: 260px !important;
    }
  </style>
  @endpush
  @push('scripts')
  <script src="https://cdn.jsdelivr.net/npm/tinymce@7.6.1/tinymce.min.js" crossorigin="anonymous"></script>
  <script>
    (function () {
      const initEditors = () => {
        if (typeof tinymce === 'undefined') return;

        const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
        const uploadUrl = @json(route('media.api.upload'));

        const uploadMedia = (file, mediaType) => new Promise((resolve, reject) => {
          const fd = new FormData();
          fd.append('file', file);
          fd.append('media_type', mediaType);
          fetch(uploadUrl, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
            credentials: 'same-origin',
            body: fd,
          })
            .then((r) => r.json().then((data) => ({ ok: r.ok, data })))
            .then(({ ok, data }) => {
              if (ok && data?.success && data.url) resolve(data.url);
              else reject((data && data.message) ? data.message : 'アップロードに失敗しました');
            })
            .catch(() => reject('アップロードに失敗しました'));
        });

        const baseConfig = {
          menubar: false,
          language: 'ja',
          language_url: 'https://cdn.jsdelivr.net/npm/tinymce-i18n@24.12.30/langs7/ja.js',
          branding: false,
          promotion: false,
          license_key: 'gpl',
          resize: true,
          plugins: [
            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'anchor',
            'searchreplace', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media',
            'table', 'help', 'wordcount', 'directionality', 'hr', 'nonbreaking',
          ],
          toolbar1: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | forecolor backcolor removeformat',
          toolbar2: 'alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media table blockquote hr',
          toolbar3: 'subscript superscript | charmap | code fullscreen',
          toolbar_mode: 'wrap',
          block_formats: '段落=p; 見出し1=h1; 見出し2=h2; 見出し3=h3; 見出し4=h4; 引用=blockquote; コード=pre',
          font_size_formats: '8px 10px 12px 14px 16px 18px 20px 24px 28px 32px 36px',
          font_family_formats: 'メイリオ=Meiryo, "Hiragino Kaku Gothic ProN", sans-serif; 游ゴシック="Yu Gothic", YuGothic, sans-serif; MS PGothic=MS PGothic, sans-serif; 明朝="Yu Mincho", serif; Arial=Arial, Helvetica, sans-serif',
          content_style: [
            'body { font-family: Meiryo, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 16px; line-height: 1.6; color: #212529; }',
            'p { margin: 0 0 0.75rem; }',
            'table { border-collapse: collapse; width: 100%; }',
            'td, th { border: 1px solid #dee2e6; padding: 0.5rem; }',
          ].join(' '),
          relative_urls: false,
          convert_urls: true,
          paste_data_images: true,
          automatic_uploads: true,
          images_upload_handler: (blobInfo) => uploadMedia(blobInfo.blob(), 'image'),
          file_picker_types: 'image media',
          file_picker_callback: (callback, _value, meta) => {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = meta.filetype === 'image' ? 'image/*' : 'image/*,video/*';
            input.onchange = () => {
              const file = input.files && input.files[0];
              if (!file) return;
              const mediaType = file.type.startsWith('video/') ? 'video' : 'image';
              uploadMedia(file, mediaType)
                .then((url) => callback(url, mediaType === 'video' ? { source2: url } : { alt: file.name }))
                .catch((msg) => window.alert(msg));
            };
            input.click();
          },
        };

        document.querySelectorAll('[data-tinymce-field]').forEach((el) => {
          if (!el.id || tinymce.get(el.id)) return;
          const minH = Math.max(280, parseInt(el.getAttribute('data-tinymce-min-height') || '320', 10));
          const totalH = Math.max(420, parseInt(el.getAttribute('data-tinymce-height') || String(minH + 140), 10));
          tinymce.init({
            ...baseConfig,
            target: el,
            height: totalH,
            min_height: minH,
          });
        });

        const pageSettingsForm = document.getElementById('page-settings-form');
        if (pageSettingsForm) {
          pageSettingsForm.addEventListener('submit', () => {
            if (typeof tinymce !== 'undefined') tinymce.triggerSave();
          });
        }
      };

      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initEditors);
      } else {
        initEditors();
      }
    })();
  </script>
  @endpush
@endonce