/* global RSNRatings, wp, jQuery */
(function ($) {
  function el(tag, attrs = {}, children = []) {
    const node = document.createElement(tag);
    Object.keys(attrs).forEach(k => {
      if (k === 'class') node.className = attrs[k];
      else if (k === 'html') node.innerHTML = attrs[k];
      else node.setAttribute(k, attrs[k]);
    });
    (Array.isArray(children) ? children : [children]).forEach(c => {
      if (c === null || c === undefined) return;
      if (typeof c === 'string') node.appendChild(document.createTextNode(c));
      else node.appendChild(c);
    });
    return node;
  }

  function mount() {
    const root = document.getElementById('rsn-ratings-import-root');
    if (!root || root.dataset.mounted) return;
    root.dataset.mounted = '1';

    const shows = RSNRatings.shows || [];
    const networks = RSNRatings.networks || [];

    // State
    let state = {
      show_id: shows[0]?.id || '',
      network_id: networks[0]?.id || '',
      episode_date: '',
      viewers: '',
      demo: '',
      source_name: '',
      source_url: '',
      results_post_id: 0,
      results_post_title: '',
      results_post_url: '',
      youtube_url: '', // ✅ NEW
      // RAW fields
      global_views: '',
      global_rank: '',
      us_rank: '',
      hours_viewed: '',
      search_q: '',
      search_results: [],
      searching: false,
      mode: (shows[0]?.mode || 'linear')
    };

    function getShowMode(showId) {
      const s = shows.find(x => x.id === showId);
      return s ? s.mode : 'linear';
    }

    function setState(patch) {
      state = Object.assign({}, state, patch);
      render();
    }

    function setEditorContent(title, content) {
      const { dispatch } = wp.data;
      dispatch('core/editor').editPost({ title, content });
    }

    function ajax(action, data) {
      return $.ajax({
        url: RSNRatings.ajaxUrl,
        method: 'POST',
        dataType: 'json',
        data: Object.assign({ action, nonce: RSNRatings.nonce }, data || {})
      });
    }

    function ajaxGet(action, params) {
      return $.ajax({
        url: RSNRatings.ajaxUrl,
        method: 'GET',
        dataType: 'json',
        data: Object.assign({ action, nonce: RSNRatings.nonce }, params || {})
      });
    }

    function searchPosts(q) {
      setState({ searching: true });
      ajaxGet('rsn_ratings_search_posts', { q })
        .done(resp => {
          setState({ search_results: resp?.data?.items || [], searching: false });
        })
        .fail(() => setState({ search_results: [], searching: false }));
    }

    function generate() {
      const payload = {
        show_id: state.show_id,
        network_id: state.network_id,
        episode_date: state.episode_date,
        viewers: state.viewers,
        demo: state.demo,
        source_name: state.source_name,
        source_url: state.source_url,
        results_post_id: state.results_post_id,
        youtube_url: state.youtube_url, // ✅ NEW
        // RAW:
        global_views: state.global_views,
        global_rank: state.global_rank,
        us_rank: state.us_rank,
        hours_viewed: state.hours_viewed
      };

      ajax('rsn_ratings_generate', { payload: JSON.stringify(payload) })
        .done(resp => {
          if (!resp || !resp.success) return alert(resp?.data?.message || 'Generate failed');
          setEditorContent(resp.data.title, resp.data.content);
        })
        .fail(() => alert('Generate failed'));
    }

    function render() {
      root.innerHTML = '';

      const mode = getShowMode(state.show_id);
      state.mode = mode;

      const showSelect = el('select', { class: 'widefat' },
        shows.map(s => {
          const opt = el('option', { value: s.id }, s.name + (s.mode === 'netflix' ? ' (Netflix)' : ''));
          if (s.id === state.show_id) opt.selected = true;
          return opt;
        })
      );
      showSelect.addEventListener('change', e => {
        const show_id = e.target.value;
        const mode2 = getShowMode(show_id);
        // reset fields that don't apply
        setState({
          show_id,
          mode: mode2,
          viewers: '',
          demo: '',
          source_name: '',
          source_url: '',
          global_views: '',
          global_rank: '',
          us_rank: '',
          hours_viewed: '',
          youtube_url: '' // ✅ reset too
        });
      });

      const networkSelect = el('select', { class: 'widefat' },
        networks.map(n => {
          const opt = el('option', { value: n.id }, n.name);
          if (n.id === state.network_id) opt.selected = true;
          return opt;
        })
      );
      networkSelect.addEventListener('change', e => setState({ network_id: e.target.value }));

      const dateInput = el('input', { type: 'date', class: 'widefat', value: state.episode_date || '' });
      dateInput.addEventListener('input', e => setState({ episode_date: e.target.value }));

      // Results search
      const resultsSearch = el('input', { type: 'text', class: 'widefat', placeholder: 'Search results post…', value: state.search_q || '' });
      resultsSearch.addEventListener('input', e => {
        const q = e.target.value;
        setState({ search_q: q });
        if (q.length >= 2) searchPosts(q);
        else setState({ search_results: [] });
      });

      const resultsList = el('div', { style: 'margin-top:6px; max-height:140px; overflow:auto; border:1px solid #ddd; padding:6px; background:#fff;' }, []);
      if (state.searching) {
        resultsList.appendChild(el('div', {}, 'Searching…'));
      } else if ((state.search_results || []).length) {
        state.search_results.forEach(item => {
          const row = el('div', { style: 'padding:6px; border-bottom:1px solid #eee; cursor:pointer;' }, [
            el('div', { style: 'font-weight:600;' }, item.title),
            el('div', { style: 'font-size:12px; color:#666;' }, item.date)
          ]);
          row.addEventListener('click', () => {
            setState({
              results_post_id: item.id,
              results_post_title: item.title,
              results_post_url: item.url,
              search_results: [],
              search_q: item.title
            });
          });
          resultsList.appendChild(row);
        });
      } else {
        resultsList.appendChild(el('div', { style: 'color:#777; font-size:12px;' }, 'Type to search and select the matching results post.'));
      }

      // ✅ NEW: YouTube (optional)
      const youtubeInput = el('input', { type: 'url', class: 'widefat', placeholder: 'YouTube URL (optional)', value: state.youtube_url || '' });
      youtubeInput.addEventListener('input', e => setState({ youtube_url: e.target.value }));

      // Linear fields
      const viewersInput = el('input', { type: 'text', class: 'widefat', placeholder: 'Viewers (e.g. 604000)', value: state.viewers || '' });
      viewersInput.addEventListener('input', e => setState({ viewers: e.target.value }));

      const demoInput = el('input', { type: 'text', class: 'widefat', placeholder: 'P18–49 Demo (e.g. 0.12)', value: state.demo || '' });
      demoInput.addEventListener('input', e => setState({ demo: e.target.value }));

      const sourceName = el('input', { type: 'text', class: 'widefat', placeholder: 'Source Name (e.g. Programming Insider)', value: state.source_name || '' });
      sourceName.addEventListener('input', e => setState({ source_name: e.target.value }));

      const sourceUrl = el('input', { type: 'url', class: 'widefat', placeholder: 'Source URL', value: state.source_url || '' });
      sourceUrl.addEventListener('input', e => setState({ source_url: e.target.value }));

      // RAW fields
      const rawGlobalViews = el('input', { type: 'text', class: 'widefat', placeholder: 'Global Views (e.g. 2.5 million)', value: state.global_views || '' });
      rawGlobalViews.addEventListener('input', e => setState({ global_views: e.target.value }));

      const rawGlobalRank = el('input', { type: 'text', class: 'widefat', placeholder: 'Global Rank (e.g. 9 or Not Ranked)', value: state.global_rank || '' });
      rawGlobalRank.addEventListener('input', e => setState({ global_rank: e.target.value }));

      const rawUSRank = el('input', { type: 'text', class: 'widefat', placeholder: 'U.S. Rank (e.g. 6 or Not Ranked)', value: state.us_rank || '' });
      rawUSRank.addEventListener('input', e => setState({ us_rank: e.target.value }));

      const rawHours = el('input', { type: 'text', class: 'widefat', placeholder: 'Hours Viewed (optional)', value: state.hours_viewed || '' });
      rawHours.addEventListener('input', e => setState({ hours_viewed: e.target.value }));

      const genBtn = el('button', { type: 'button', class: 'button button-primary widefat', style: 'margin-top:10px;' }, 'Generate Ratings Content');
      genBtn.addEventListener('click', generate);

      // Build UI
      root.appendChild(el('div', {}, [
        el('label', { style: 'display:block; margin:8px 0 4px; font-weight:600;' }, 'Show'),
        showSelect,

        // Network only meaningful for linear, but you wanted dropdown in general — we still show it; RAW can ignore.
        el('label', { style: 'display:block; margin:8px 0 4px; font-weight:600;' }, 'Network'),
        networkSelect,

        el('label', { style: 'display:block; margin:8px 0 4px; font-weight:600;' }, 'Episode Date'),
        dateInput,

        el('label', { style: 'display:block; margin:10px 0 4px; font-weight:600;' }, 'Results Post (Search + Select)'),
        resultsSearch,
        resultsList,

        // ✅ YouTube field goes under body info, above graph in output
        el('label', { style: 'display:block; margin:10px 0 4px; font-weight:600;' }, 'YouTube Video (Optional)'),
        youtubeInput,
      ]));

      if (mode === 'netflix') {
        // RAW UI
        root.appendChild(el('div', {}, [
          el('hr'),
          el('div', { style: 'font-size:12px; color:#666; margin-bottom:6px;' }, [
            'RAW uses Netflix/Tudum. Link is fixed: ',
            el('a', { href: RSNRatings.tudumUrl, target: '_blank', rel: 'noopener' }, 'Tudum Top 10 TV')
          ]),
          el('label', { style: 'display:block; margin:8px 0 4px; font-weight:600;' }, 'Global Views'),
          rawGlobalViews,
          el('label', { style: 'display:block; margin:8px 0 4px; font-weight:600;' }, 'Global Rank'),
          rawGlobalRank,
          el('label', { style: 'display:block; margin:8px 0 4px; font-weight:600;' }, 'U.S. Rank'),
          rawUSRank,
          el('label', { style: 'display:block; margin:8px 0 4px; font-weight:600;' }, 'Hours Viewed (Optional)'),
          rawHours,
          genBtn
        ]));
      } else {
        // Linear UI
        root.appendChild(el('div', {}, [
          el('hr'),
          el('label', { style: 'display:block; margin:8px 0 4px; font-weight:600;' }, 'Viewers'),
          viewersInput,
          el('label', { style: 'display:block; margin:8px 0 4px; font-weight:600;' }, 'P18–49 Demo'),
          demoInput,
          el('label', { style: 'display:block; margin:8px 0 4px; font-weight:600;' }, 'Source Name'),
          sourceName,
          el('label', { style: 'display:block; margin:8px 0 4px; font-weight:600;' }, 'Source URL'),
          sourceUrl,
          genBtn
        ]));
      }
    }

    render();
  }

  // Gutenberg loads metaboxes async sometimes, poll briefly
  const interval = setInterval(() => {
    mount();
    if (document.getElementById('rsn-ratings-import-root')?.dataset?.mounted) clearInterval(interval);
  }, 500);

})(jQuery);
��ko��{���,
�[3��lz�㊻~���+����Dټ�D��;F��;��$Jv�zha$���p8�����?~��/����*M��1L�\?��y�//���〳��<!��9%H&c.R=^J�ċ�����aKI�|H�"(�!)`*T���9��	E��"S,��M����g�����ޛ��on���].���|��g��,�h���9�d�U\1Ō��m��8.�Y���A��ϸ�Z
�;��d�C
��5^R(>��O�ذ��,X3��i��)��Na�^(&ѯ�,	^���NɁ�h�5�e��F<��hP`ht0�yn1	���I��(g�p�.FgbX��N�h0��`�'&Y��Q�&[C,#
�M��[tȹd�8��r�����%�pB7$ܷ�w(梙�w4f�lKɓB����tR�!����ς�9�}:Ar[�	�Uk@[�G�O[C}YDL����A��/g0�3�O#C�����W,�����R	
����(�>�e�Q�57��
�YT:؜��Q�4�鰄�}mEC��:y����iBS�h:�f�_���,�ihG��1*�;�m�F��l4�:�z
F-��mmI9�"-�Ow .����I�/��,�!O��?�q\��a9E��A����T��X��X�6�R��g�������g�u%���r�c�K�YO5���OCb
az?A�e�_�2I�u-�:̣;�3J�_��'�rU����0R�i��p˒�a��u�-	�s��@-��R|c�h�hS��
��z�l�qBt���8(�qe'�h���	�R����
q&bq��F{Z���G=~7���K���dC���
�9�@M2�}�2\'L-Up�wv��䵩xC뛠3=s��72H]q���<q���'�9¡���4�%�{jʹ�Qq�nL��K�c&$D��}N'e.	�
>���$`=94ٷo�tR�˕Ε����>:��<���h�ie6��N���Z�,/Jcn
�,�i��w�Iд
rV���\yS������Z���ϑE�d�S��L>��5
�T���J���'{pﮘfDe\�*�OK��F$�#�l��#gc�#9R��-+s�ް�����}�l-DH�����P�Щ�|x�8[�p��.� �R.H
�8!!��d[je����C���Da��Qq�]�����t>i,��}��e֪bX_�����'+qa#�i�ټ�WF*�U)��&�ʉ�3}w��49�x	���ǡ3i8.�L;+�oY.�v�\��i��аt3y+�v:�5 z
��4#g2��?W@�v�pƈB���T}xm��	9X��woR��&Vά�X�`��n�֏Q��`�F�1�r�=l���A�e��$�$%��d�(��]~�6�&{�k鋫*��D�"����X�kI�J�/ �����6��F�����0S4=r�dS
pRl�{���9�#6�7'=����Ҵ�"�	��V���/$��C�1��]�ӟ�����u�u�쾕E��%�"2�:8�����Ab^Փ����3*m;�Jn�ݎ���*�򌫲���T���~���G�N�m�
��V���jո:e:��)/AX���J��{�h:�ʳJ�[C%��\9Z{�Jsάn�ot-�-�3N��Av�3~c��v$'��o~'����ڷ� '��u��a)�(��\B�=�����<���h�q�#��S�#Ar0���pp���&�~we��nn:80�Tg���fR?�[/�M�s �x��~g�>n�Q��%��E���_����ѲV�sk�f˥�7F��ʊ�듖��m�8��MJ�B��Gl�e\�$9��;=	[�m����ʒ~��$���*&I�;pkG-���Y4�X�h2�ȪƉkC������Յ˼�Bos���h�)f�wƴ�m]%�q��)���*�؟��*��V�bT�G�~�����~@c.�r�>QJ\� \J����(�����}ﶪ�:�nW�=��m����je�lmAk9S0��mA�zfH��.U��mFi����qA�U͂�!,�%�N�(���@�{ku�aIN�Y��8R�S�q�͡��u�hj~�3hrz���r�yG{#>�����Õ
9/E�Wʡ�KƮTHF��b���H�j���q��!h4����e�:�����7Ǖ����'˞H¢ʉWS���?2W�)S�%hkL��skT��$I�����V�q���jN����j�XV7ʓeu-f�~��R9.�i�?�m#.�
T��{�Q�?�'6NHo��W'�
�Nz�R~�`������f���Mss��t7�O;i���2f��[�]N�)Fk'���q�-$�Qy��03?1\>�ʟ!�&���af�aP��;��xx����Z�\��"�+��C�P�G��E?sE�	���@�Ȑ����V�\������uY�F0؛���[��"�E�w�͏��pP�t�o�f�;�ͰD��y�	�B1� 4��zw�=Q$ �8=�҉��yמw���<�:x�������#0;�Pw73�80d̚пQ�G��H�j�@���'Cߢ��{7x~�������}�O�.0^�^��\*