// ==UserScript==
// @name         字统工具
// @namespace    http://martingrocery.top/
// @version      2025-01-24
// @description  本工具旨在为用户提供关于当前正在搜索的汉字的其他网站链接。
// @author       Martin的杂货铺
// @match        https://zi.tools/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=zi.tools
// @grant        none
// @license      MIT
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    const app = document.querySelector('#app');

    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'href') {
          let error = false;
          const url_path = window.location.pathname;
          const Match = url_path.match(regex);
          let character;
          if (Match === null) {
            error = true;
          } else {
            character = decodeURIComponent(url_path.match(regex)[1]);
            if ([...character].length !== 1 || character === null) {
              error = true;
            }
          }
          if (!error) {
            if (document.querySelector('#mtgc-zi') !== null) {
              document.querySelector('#mtgc-zi').innerHTML = links(character);
            } else {
              let MTGC_zi = document.createElement('div');
              MTGC_zi.innerHTML = links(character);
              MTGC_zi.id = 'mtgc-zi';
              app.appendChild(MTGC_zi);
            }
          } else {
            if (document.querySelector('#mtgc-zi') !== null) {
              document.querySelector('#mtgc-zi').remove();
            }
          }
        }
      });
    });

    observer.observe(document.documentElement, { attributes: true, subtree: true });

    function ord(char) {
      return char.codePointAt(0);
    }

    function links(character) {
      return `
        <p>“${character}”在其他网站的信息</p>
        <ul>
          <li>
            <a href="http://zisea.com/zscontent.asp?uni=${ord(character).toString(16).toUpperCase()}" target="_blank">
              字海网
            </a>
          </li>
          <li>
            <a href="http://ccamc.org/cjkv.php?cjkv=${encodeURIComponent(character)}" target="_blank">
              古今文字集成
            </a>
          </li>
          <li>
            <a href="https://www.zdic.net/hans/${encodeURIComponent(character)}" target="_blank">
              汉典
            </a>
          </li>
          <li>
            <a href="https://www.unicode.org/cgi-bin/GetUnihanData.pl?codepoint=${encodeURIComponent(character)}" target="_blank">
              Unihan Database
            </a>
          </li>
          <li>
            <a href="https://glyphwiki.org/wiki/u${ord(character).toString(16).toLowerCase()}" target="_blank">
              GlyphWiki
            </a>
          </li>
        </ul>
      `
    }

    let MTGC_zi_style = document.createElement('style');
    let MTGC_zi_style_text = document.createTextNode(`
      #mtgc-zi {
        color: grey;
        position: fixed;
        bottom: 0.5rem;
        left: 0.5rem;
        width: 11rem;
        background-color: white;
        transition: left 0.5s ease-in-out;
        border: 2px solid #ba2a25;
        box-sizing: border-box;
        border-radius: 5px;
      }

      #mtgc-zi a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 0.1rem;
        border-radius: 50rem;
        transition: width 0.25s ease-in-out;
        background-color: #ba2a25;
      }

      #mtgc-zi a:hover::after {
        width: 100%;
      }

      #mtgc-zi a {
        position: relative;
      }

      #mtgc-zi>* {
        margin-bottom: 0.5rem;
      }

      @media (max-width: 1200px) {
        #mtgc-zi {
          left: -11rem;
          border-radius: 5px 0 5px 5px;
        }

        #mtgc-zi::after {
          content: "字统工具";
          color: white;
          border-radius: 0 5px 5px 0;
          font-size: 0.7em;
          height: 5rem;
          width: 1rem;
          background-color: #ba2a25;
          position: absolute;
          right: -1rem;
          top: -2px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
        }

        #mtgc-zi:hover {
          left: 0.5rem;
        }
      }
    `);
    MTGC_zi_style.appendChild(MTGC_zi_style_text);
    document.head.appendChild(MTGC_zi_style);

    let error = false;
    const regex = /\/zi\/(.*)(?=$|\?)/;
    const url_path = window.location.pathname;
    const Match = url_path.match(regex);
    let character;
    if (Match === null) {
      error = true;
    } else {
      character = decodeURIComponent(url_path.match(regex)[1]);
      if ([...character].length !== 1 || character === null) {
        error = true;
      }
    }
    if (!error) {
      if (document.querySelector('#mtgc-zi') !== null) {
        document.querySelector('#mtgc-zi').innerHTML = links(character);
      } else {
        let MTGC_zi = document.createElement('div');
        MTGC_zi.innerHTML = links(character);
        MTGC_zi.id = 'mtgc-zi';
        app.appendChild(MTGC_zi);
      }
    } else {
      if (document.querySelector('#mtgc-zi') !== null) {
        document.querySelector('#mtgc-zi').remove();
      }
    }
})();