// ==UserScript==
// @name         Danbooru - Copy Commentary
// @author       hdk5
// @version      20260313132501
// @namespace    https://github.com/hdk5/danbooru.user.js
// @homepageURL  https://github.com/hdk5/danbooru.user.js
// @supportURL   https://github.com/hdk5/danbooru.user.js/issues
// @downloadURL  https://github.com/hdk5/danbooru.user.js/raw/master/dist/copy-commentary.user.js
// @updateURL    https://github.com/hdk5/danbooru.user.js/raw/master/dist/copy-commentary.user.js
// @match        *://*.donmai.us/*
// @grant        GM_addStyle
// ==/UserScript==

/* globals
  GM_addStyle
  $
*/

/* eslint-disable no-use-before-define */

const TAG_SCRIPT_SHORTCUTS = [
  'paid_reward_available',
  'english_commentary',
  'korean_commentary',
  'chinese_commentary',
  'mixed-language_commentary',
  'bilingual_commentary',
];

const CSS = `
  .copy-commentary summary {
    font-weight: bold;
  }

  .copy-commentary-query, .copy-commentary-tag-script {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 0.5rem;
    align-items: center;
  }

  .copy-commentary-shortcuts, .copy-commentary-tag-script-shortcuts {
    grid-column: 2 / 3;
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.5rem;
  }

  .copy-commentary-status-pending,
  .copy-commentary-status-processing {
    color: var(--orange-3);
  }

  .copy-commentary-status-success {
    color: var(--green-3);
  }

  .copy-commentary-status-error {
    color: var(--red-3);
  }

  .copy-commentary-results-table {
    display: inline-block;
  }

  .copy-commentary-results-table th,
  .copy-commentary-results-table td {
    padding: 0.25rem;
    vertical-align: middle;
  }

  .copy-commentary-col-select,
  .copy-commentary-cell-select {
    width: 1%;
    white-space: nowrap;
  }

  .copy-commentary-col-id,
  .copy-commentary-cell-id {
    min-width: 1rem;
  }

  .copy-commentary-col-status,
  .copy-commentary-cell-status,
  .copy-commentary-col-tag-script-status,
  .copy-commentary-cell-tag-script-status {
    min-width: 1rem;
    white-space: nowrap;
    text-align: center;
  }

  .copy-commentary-results-table:has(tbody:empty) {
    display: none;
  }

  .copy-commentary-results-table:has(tbody:empty) + .copy-commentary-actions {
    display: none;
  }

  .copy-commentary-actions {
    display: block;
  }
`;

setTimeout(() => {
  const $addCommentaryDialog = $('#add-commentary-dialog');
  if ($addCommentaryDialog.length === 0) {
    return;
  }

  GM_addStyle(CSS);

  const postId = $('body').data('post-id');

  const $shortcutsWrapper = $('<div>', { class: 'copy-commentary-shortcuts' });
  let defaultQuery = `id:${postId}`;

  const hasChildren = $('body').data('post-has-children');
  if (hasChildren) {
    const childrenQuery = `parent:${postId}`;
    defaultQuery = childrenQuery;
    const $childrenShortcut = $('<a>', {
      href: '#',
      text: 'Children',
      class: 'text-xs mr-2',
      click: ev => onClickShortcut(ev, childrenQuery),
    });
    $shortcutsWrapper.append($childrenShortcut);
  }

  const parentId = $('body').data('post-parent-id');
  if (parentId) {
    const parentQuery = `parent:${parentId}`;
    if (!hasChildren) {
      defaultQuery = parentQuery;
    }
    const $parentShortcut = $('<a>', {
      href: '#',
      text: 'Siblings',
      class: 'text-xs mr-2',
      click: ev => onClickShortcut(ev, parentQuery),
    });
    $shortcutsWrapper.append($parentShortcut);
  }

  const pixivId = $('body').data('post-pixiv-id');
  if (pixivId) {
    const pixivQuery = `pixiv_id:${pixivId}`;
    const $pixivShortcut = $('<a>', {
      href: '#',
      text: 'Pixiv',
      class: 'text-xs mr-2',
      click: ev => onClickShortcut(ev, pixivQuery),
    });
    $shortcutsWrapper.append($pixivShortcut);
  }

  const source = $('#post-info-source a:last').attr('href');
  const sourceQuery = `source:"${source}"`;
  const $sourceShortcut = $('<a>', {
    href: '#',
    text: 'Source',
    class: 'text-xs mr-2',
    click: ev => onClickShortcut(ev, sourceQuery),
  });
  $shortcutsWrapper.append($sourceShortcut);

  const $copyCommentaryDetails = $('<details>', { class: 'copy-commentary' });

  const $queryWrapper = $('<div>', { class: 'copy-commentary-query' });
  const $queryLabel = $('<label>', {
    for: 'copy-commentary-query-input',
    text: 'Query:',
  });
  const $queryInput = $('<input>', {
    type: 'text',
    id: 'copy-commentary-query-input',
    value: defaultQuery,
  });
  const $fetchButton = $('<button>', {
    type: 'button',
    text: 'Fetch',
    click: () => fetchPosts(),
  });
  $queryWrapper.append($queryLabel, $queryInput, $fetchButton, $shortcutsWrapper);

  const $resultsTable = $('<table>', { class: 'copy-commentary-results-table' });
  const $resultsThead = $('<thead>');
  const $headerRow = $('<tr>');
  const $selectAllCheckbox = $('<input>', { type: 'checkbox' });
  const $resultsTbody = $('<tbody>');
  $resultsTable.append($resultsThead, $resultsTbody);
  $resultsThead.append($headerRow);
  $headerRow.append(
    $('<th>', { class: 'copy-commentary-col-select' }).append($selectAllCheckbox),
    $('<th>', { class: 'copy-commentary-col-id', text: 'ID' }),
    $('<th>', { class: 'copy-commentary-col-status', text: 'Commentary' }),
    $('<th>', { class: 'copy-commentary-col-tag-script-status', text: 'Tag Script' }),
  );

  $selectAllCheckbox.on('change', () => {
    const checked = $selectAllCheckbox.is(':checked');
    $selectAllCheckbox.prop('indeterminate', false);
    $resultsTbody.find('input[type="checkbox"]').each((_, checkbox) => {
      $(checkbox).prop('checked', checked).trigger('change');
    });
  });

  const $submitButton = $('<button>', {
    text: 'Apply Commentary',
    class: 'copy-commentary-submit-button',
    click: () => submitCommentary(),
  });

  const $tagScriptWrapper = $('<div>', { class: 'copy-commentary-tag-script' });
  const $tagScriptLabel = $('<label>', {
    for: 'copy-commentary-tag-script-input',
    text: 'Tag Script:',
  });
  const $tagScriptInput = $('<input>', {
    type: 'text',
    id: 'copy-commentary-tag-script-input',
  });
  const $tagScriptSubmitButton = $('<button>', {
    text: 'Apply Tags',
    class: 'copy-commentary-tag-script-submit-button',
    click: () => submitTagScript(),
  });
  const $tagScriptShortcutsWrapper = $('<div>', { class: 'copy-commentary-tag-script-shortcuts' });

  for (const tag of TAG_SCRIPT_SHORTCUTS) {
    const $shortcut = $('<a>', {
      href: '#',
      text: tag,
      class: 'text-xs mr-2',
      click: ev => onClickTagScriptShortcut(ev, tag),
    });
    $tagScriptShortcutsWrapper.append($shortcut);
  }

  $tagScriptWrapper.append(
    $tagScriptLabel,
    $tagScriptInput,
    $tagScriptSubmitButton,
    $tagScriptShortcutsWrapper,
  );

  const $actionsWrapper = $('<div>', { class: 'copy-commentary-actions' });
  $actionsWrapper.append($submitButton, $tagScriptWrapper);

  $addCommentaryDialog.append($copyCommentaryDetails);
  $copyCommentaryDetails.append($('<summary>', { text: 'Copy Commentary' }));
  $copyCommentaryDetails.append(
    $queryWrapper,
    $resultsTable,
    $actionsWrapper,
  );

  const fetchPosts = async () => {
    try {
      $resultsTbody.empty();
      updateSelectAllState();

      const tags = $queryInput.val()?.trim();
      if (!tags) {
        return;
      }

      $fetchButton.prop('disabled', true);

      const posts = await $.getJSON('/posts.json', {
        tags,
        only: 'id',
        limit: 200,
      });
      fillTable(posts.map(post => post.id));
    }
    finally {
      $fetchButton.prop('disabled', false);
      updateSelectAllState();
    }
  };

  const fillTable = (post_ids) => {
    for (const post_id of post_ids) {
      const $checkbox = $('<input>', {
        'type': 'checkbox',
        'data-post-id': post_id,
        'checked': true,
      });
      $checkbox.on('change', updateSelectAllState);

      const $row = $('<tr>');
      const $statusCell = $('<td>', { class: 'copy-commentary-cell-status' });
      const $tagScriptStatusCell = $('<td>', { class: 'copy-commentary-cell-tag-script-status' });
      setStatus($statusCell, 'pending');
      setStatus($tagScriptStatusCell, 'pending');
      $row.append(
        $('<td>', { class: 'copy-commentary-cell-select' }).append($checkbox),
        $('<td>', { class: 'copy-commentary-cell-id' }).append(
          $('<a>', {
            href: `/posts/${post_id}`,
            text: `post #${post_id}`,
            class: 'dtext-link dtext-id-link dtext-post-id-link',
          }),
        ),
        $statusCell,
        $tagScriptStatusCell,
      );
      $resultsTbody.append($row);
    }
  };

  const submitCommentary = async () => {
    $submitButton.prop('disabled', true);
    const $checkedRows = $resultsTbody.find('input[type="checkbox"]:checked');
    const $form = $('#edit-commentary');
    const formData = new FormData($form.get(0));
    const payload = Object.fromEntries(formData.entries());

    for (const checkbox of $checkedRows) {
      const $checkbox = $(checkbox);
      const $row = $checkbox.closest('tr');
      const postId = $checkbox.data('post-id');
      const $statusCell = $row.find('.copy-commentary-cell-status');
      setStatus($statusCell, 'processing');

      try {
        await $.post(`/posts/${postId}/artist_commentary/create_or_update.json`, payload);

        setStatus($statusCell, 'success');
        uncheckRow($row, $checkbox);
      }
      catch (error) {
        console.error('Failed to submit commentary', postId, error);
        setStatus($statusCell, 'error');
      }
    }
    updateSelectAllState();
    $submitButton.prop('disabled', false);
  };

  const submitTagScript = async () => {
    const tagString = $tagScriptInput.val()?.trim();
    if (!tagString) {
      return;
    }

    $tagScriptSubmitButton.prop('disabled', true);
    const $checkedRows = $resultsTbody.find('input[type="checkbox"]:checked');

    try {
      for (const checkbox of $checkedRows) {
        const $checkbox = $(checkbox);
        const $row = $checkbox.closest('tr');
        const postId = $checkbox.data('post-id');
        const $statusCell = $row.find('.copy-commentary-cell-tag-script-status');
        setStatus($statusCell, 'processing');

        try {
          await $.ajax({
            type: 'PUT',
            url: `/posts/${postId}.json`,
            data: {
              post: {
                old_tag_string: '',
                tag_string: tagString,
              },
            },
          });

          setStatus($statusCell, 'success');
          uncheckRow($row, $checkbox);
        }
        catch (error) {
          console.error('Failed to submit tag script', postId, error);
          setStatus($statusCell, 'error');
        }
      }
    }
    finally {
      updateSelectAllState();
      $tagScriptSubmitButton.prop('disabled', false);
    }
  };

  const updateSelectAllState = () => {
    const $checkboxes = $resultsTbody.find('input[type="checkbox"]');
    const total = $checkboxes.length;
    const checked = $checkboxes.filter(':checked').length;

    if (total === 0) {
      $selectAllCheckbox.prop('checked', false).prop('indeterminate', false);
    }
    else if (checked === total) {
      $selectAllCheckbox.prop('checked', true).prop('indeterminate', false);
    }
    else if (checked === 0) {
      $selectAllCheckbox.prop('checked', false).prop('indeterminate', false);
    }
    else {
      $selectAllCheckbox.prop('checked', false).prop('indeterminate', true);
    }
  };

  const setStatus = ($cell, status) => {
    $cell
      .removeClass(
        (_, className) => className
          .split(' ')
          .filter(cls => cls.startsWith('copy-commentary-status-'))
          .join(' '),
      )
      .addClass(`copy-commentary-status-${status}`)
      .text(status);
  };

  const uncheckRow = ($row, $checkbox) => {
    const commentaryStatus = $row.find('.copy-commentary-cell-status').text().trim().toLowerCase();
    const tagScriptStatus = $row.find('.copy-commentary-cell-tag-script-status').text().trim().toLowerCase();

    if (commentaryStatus === 'success' && tagScriptStatus === 'success') {
      $checkbox.prop('checked', false).trigger('change');
    }
  };

  const onClickShortcut = (ev, tag) => {
    ev.preventDefault();
    $queryInput.val(tag);
    fetchPosts();
  };

  const onClickTagScriptShortcut = (ev, tag) => {
    ev.preventDefault();

    const tokens = $tagScriptInput.val().match(/\S+/g) || [];
    const hasTag = tokens.some(token => token.toLowerCase() === tag.toLowerCase());

    if (hasTag) {
      $tagScriptInput.val($tagScriptInput.val().replace(new RegExp(`(?<=^|\\s)${RegExp.escape(tag)}(?=$|\\s)`, 'gi'), ''));
    }
    else {
      $tagScriptInput.val(`${$tagScriptInput.val().trim()} ${tag}`.trim());
    }
  };
}, 0);