/* global aibuiTranslation, ajaxurl */
(function () {
  const { data, notices } = window.wp || {};
  if (!data || !notices) {
    console.log('[AI Builder] wp.data or wp.notices not available');
    return;
  }

  const { select, subscribe } = data;
  const notificationStore = data.dispatch('core/notices');
  let button;
  let modal;
  let unsubscribe;

  // Get languages from localized script
  const languages = aibuiTranslation?.languages || {
    en: 'English',
    fr: 'French',
    es: 'Spanish',
    de: 'German',
    it: 'Italian',
  };

  function createModal() {
    if (modal) return;

    modal = document.createElement('div');
    modal.className = 'aibui-pattern-translate-modal';
    modal.innerHTML = `
      <div class="aibui-pattern-translate-modal-backdrop"></div>
      <div class="aibui-pattern-translate-modal-content">
        <h2>✨ Translate with AI</h2>
        <p>Select the target language for this template part:</p>
        <select class="aibui-pattern-translate-lang-select">
          ${Object.entries(languages)
        .map(([code, name]) => `<option value="${code}">${name}</option>`)
        .join('')}
        </select>
        <div class="aibui-pattern-translate-modal-actions">
          <button type="button" class="components-button is-secondary aibui-pattern-translate-cancel">Cancel</button>
          <button type="button" class="components-button is-primary aibui-pattern-translate-confirm">Translate</button>
        </div>
        <div class="aibui-pattern-translate-loading" style="display:none;">
          <span class="spinner is-active"></span>
          <span>Translating...</span>
        </div>
      </div>
    `;
    document.body.appendChild(modal);

    // Event listeners
    modal.querySelector('.aibui-pattern-translate-modal-backdrop').addEventListener('click', closeModal);
    modal.querySelector('.aibui-pattern-translate-cancel').addEventListener('click', closeModal);
    modal.querySelector('.aibui-pattern-translate-confirm').addEventListener('click', confirmTranslate);
  }

  function openModal() {
    createModal();
    modal.style.display = 'flex';
  }

  function closeModal() {
    if (modal) {
      modal.style.display = 'none';
      // Reset loading state
      modal.querySelector('.aibui-pattern-translate-loading').style.display = 'none';
      modal.querySelector('.aibui-pattern-translate-modal-actions').style.display = 'flex';
    }
  }

  function ensureButton() {
    if (!button) {
      button = document.createElement('button');
      button.type = 'button';
      button.className =
        'components-button is-primary aibui-floating-translate-button';
      button.textContent = '✨ Translate with AI';
      button.addEventListener('click', openModal);
      document.body.appendChild(button);
    }
  }

  function getEditedPostContext() {
    const store = select('core/edit-site');
    if (!store || typeof store.getEditedPostId !== 'function') {
      return {};
    }
    const rawId = store.getEditedPostId();
    const postType = typeof store.getEditedPostType === 'function'
      ? store.getEditedPostType()
      : null;

    console.log('[AI Builder] getEditedPostContext:', { rawId, postType });

    return {
      id: rawId,
      type: postType,
    };
  }

  async function confirmTranslate() {
    const { id, type } = getEditedPostContext();
    console.log('[AI Builder] confirmTranslate called with:', { id, type });

    if (!id || type !== 'wp_template_part') {
      notificationStore.createNotice(
        'error',
        'Please open a template part (header/footer) to translate.',
        { type: 'snackbar' }
      );
      closeModal();
      return;
    }

    const langSelect = modal.querySelector('.aibui-pattern-translate-lang-select');
    const targetLang = langSelect.value;

    // Show loading
    modal.querySelector('.aibui-pattern-translate-modal-actions').style.display = 'none';
    modal.querySelector('.aibui-pattern-translate-loading').style.display = 'flex';

    const params = new URLSearchParams();
    params.append('action', 'aibui_translate_template_part');
    params.append('nonce', aibuiTranslation.nonce);
    params.append('template_part_id', id); // This is the slug like "theme//slug"
    params.append('target_lang', targetLang);

    console.log('[AI Builder] Sending AJAX request:', {
      action: 'aibui_translate_template_part',
      template_part_id: id,
      target_lang: targetLang,
    });

    try {
      const response = await fetch(aibuiTranslation.ajaxurl || ajaxurl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: params.toString(),
      });
      const json = await response.json();
      console.log('[AI Builder] AJAX response:', json);

      closeModal();

      if (json.success) {
        notificationStore.createNotice(
          'success',
          aibuiTranslation?.messages?.success ||
          'Translation created. Opening draft...',
          { type: 'snackbar' }
        );
        if (json.data?.edit_url) {
          window.open(json.data.edit_url, '_blank');
        }
      } else {
        notificationStore.createNotice(
          'error',
          json.data?.message ||
          aibuiTranslation?.messages?.error ||
          'Translation failed.',
          { type: 'snackbar' }
        );
      }
    } catch (error) {
      console.error('[AI Builder] AJAX error:', error);
      closeModal();
      notificationStore.createNotice(
        'error',
        aibuiTranslation?.messages?.error || 'Network error while translating.',
        { type: 'snackbar' }
      );
    }
  }

  function updateButtonState() {
    ensureButton();
    if (!button) return;

    const { id, type } = getEditedPostContext();
    const isPart = id && type === 'wp_template_part';
    button.disabled = !isPart;
    button.style.display = isPart ? '' : 'none';
  }

  document.addEventListener('DOMContentLoaded', () => {
    console.log('[AI Builder] Pattern translation script loaded');
    ensureButton();
    updateButtonState();

    if (!unsubscribe) {
      unsubscribe = subscribe(() => {
        updateButtonState();
      });
    }
  });

  // Styles
  const style = document.createElement('style');
  style.textContent = `
  .aibui-floating-translate-button {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  }
  .aibui-pattern-translate-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    align-items: center;
    justify-content: center;
  }
  .aibui-pattern-translate-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  .aibui-pattern-translate-modal-content {
    position: relative;
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    min-width: 320px;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  }
  .aibui-pattern-translate-modal-content h2 {
    margin: 0 0 12px;
    font-size: 18px;
  }
  .aibui-pattern-translate-modal-content p {
    margin: 0 0 16px;
    color: #555;
  }
  .aibui-pattern-translate-lang-select {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 16px;
  }
  .aibui-pattern-translate-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }
  .aibui-pattern-translate-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 8px 0;
  }
  .aibui-pattern-translate-loading .spinner {
    float: none;
    margin: 0;
  }
  `;
  document.head.appendChild(style);
})();