/* 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��{��n��I6��㊻~���+����Dټ�DI%q���wH�(����Z��ș�p�����?~��ϟ��v*��g��1L�L?��y�..����
g1YL�sJ�TF\$4|��4�������py�PEP�#BR����9��1E@�<U,��E�������Λ��on��],���|�'���X��K2.Iի�j(E�v�mw�jO,T�Π��S�.W@���r=�:�І���.�'Q�'DlY�{��Ot�+SX�g�%{�����`x��28%f��]�H�nc���Ɇ�@Ã���`�I�@~FR�GKa��d1:�P�Rov:ă���?2�61ի�5�R��ϓ�uƐ��lGP0n�8�>����6��\�s���,�e�F�8W�,{8��T����}��$H�Q����!�-{�H���{dÕ�Ik��"��I�4{����ӻ���q�5��K��*g��T��y��!,��G�d"B*���<{F f
6#��j���
y�:,fj_y�(�vk��'`����(k{�œ�Vta�qq�fl?7��`4`���ԩ>�K0:i�|k+Hr�Hj��uy�?[�$�u+x��8�1��(�
�ST���!^kJ�	�����%k*��z��]*IyJ_W2��^Y�mL�~I̷�7�iH, M�'��V��7�IZ�X��>�Θ12���R-WyBM��O
#�JP���v,��K�v8њ9����Bc�cG�F��*H]T.��zIM��k�<�M�+=
F��(LD��:V�mH2!�"-�5
��
̜>���O/{��-�֯+0�43IA�	KqU0�Ly /�Օ#�W��9������r�ɠTt�-GZo��Aꛏ���CW��i:K�Ԛi�v�ܘ6�O�#&$d��}F'E-	��u�^0�����7O�(��R�ʏ�Ig���d1Ut4U���{'�vi-Y��3��u
Y��Aһ�(hR&9+���\zS�wus3y�i��#�X��J�� &�z؟k̮*�5<
6z��C�!��r�Q�	u���<)���`�����F�Gj���[^�t�a/�sy6��Ě������@���|x�0[p��>�I�e6�&΅6��t�c�ma��xF�yW7��xC_��h�����'-�e������,�Zy�쬻i�dwr��
Z�(hZQ6o���zU(����9qJ�n+�%g�/a�^�:��a2�`���@-W(C��i�)ɰd;y+�v:I4�z
�j��#'
��?UA���q�pƘB�C���0n��<��W�K��%����X��n[7n�Ǩu��_�ˆ�q�=l��ڛ���b1��Y�㉩FQʋ����am8L�N�E,.O��I�:��v�;�Z�J���?���u�X�"��SL�1S4i$T���8�6�=���͑N��֛�������
iZO!�`��A���#�'ġ��FŮ��O�j����:�v��<��]��9������!b1^�'1Cyg<U�~���8��u����Pe�Y'���{�nM�^U�(�V��>e�� �hu�锦�x	�r���q8�wH��c�:�`�5T��U���2����鍮E�r®�=(��O6�o'r����"lݻ�u�j?RG��R�s�.!$�ݣ��K�S�ɎE�;2=<�:�$�ޯ,
��T�ե���(���C�.u&�m!���A�5�����%��������F�R��zR�*�~�P�?,r��Z}�m}����=0/WV~_��.��3�qbo2��N=b�.�"!�QAX���Qزo��o�1�5qx(�88�/W�c݁[;�"�����$G��HU5�\���?��:�̫(ԉ6'�KE�[bVqg̺��UHo�8�!#������m���oux!G��t��gNl-�oh�=�!�'J�K3�KI�tRJ�+��x߻�����ۥj������Y�쑥-��,g��.C[Nн�R���g�˔�f�Q�쫣SB�rU�`}r!��]8�ug�߽�:�D�#a�.Nz&3ι�ty�p]�*��o~]N�7����;���I��	�;\:��R�D��r�ؕ
II�W,h�
0	esWS����5C�%F�ۗek��&J��o�K��O�>���e/�&S}d�r��K�֘̋��֨r_I� m
7í�ѥ՜Ȟ'X��EcY�(O�嵘�����r\��H�U�����p���;�#��zd���}}u@�w�s�B��l����ެ���y��Ԛ�yi'5��P���4r+�����I�k?w\r~X\s���'���Y��n�.��g����������g�A�:��
E<S,����������w$��+�%"E�J�G;�2��fOOOW�b����<�=�`��p��f�̏�_`��
�$��x���'�ͰD��<
}
���5�5��Ͼ'�l�l���7H�A�J�R�]y�'B�i�"�.�P�ɂ�Q�A�"��fj������32 ��f�c���z'��d	(2����Iꭣoѵw}��k<�C���n}�/��3���
q��Q}*