// ==UserScript==
// @name            netzradar-linker
// @source        https://gitlab.ard.de/ida/netzradar-linker
// @description     extrahiert Metadaten (Headline, Hostnamen, URL) des gegenwärtigen Dokuments, generiert Kurz-URL, übersetzt englischsprachigen Titel ins Deutsch, und kopiert Metadaten und Kurz-URL in die Zwischenablage.
// @version     2
// @grant           GM_setClipboard
// @match           *://*/*
// ==/UserScript==

(function () {
  "use strict";

  /*

  =====================
    Einstellungen
  =====================

  */

  /* Status-Meldungen */

  /** Zeige diesen Text im Button an */
  const STATUS_START_TEXT = "Link kürzen";
  const STATUS_START_COLOR = "#e52600";
  /** Zeige diesen Text im Button an, wenn kopiert wurde */
  const STATUS_COPIED_TEXT = "Link in 📋  🥳";
  const STATUS_COPIED_COLOR = "black";
  /** Zeige diesen Text im Button an, wenn Yourls-Abruf nicht klappt */
  const STATUS_YOURLS_ERROR_TEXT = "❌ Yourls-Fehler ❌";
  /** Setze STATUS_COPIED zurück auf STATUS_START zurück (nach Sekunden) */
  const STATUS_RESET_AFTER = 2;

  /* Ausgabe */

  /** Kopiere diese Werte in dieser Form in die Zwischenablage */
  const OUTPUT_TEMPLATE = "{{domain}}: {{headline}}\n{{url}}";

  /* Headline */
  /** Nutze diese Tags (in dieser Reihenfolge), um eine Headline zu finden */
  const HEADLINE_TAGS = ["h1", "title"];
  /** Nutze diesen Text, wenn keine Headline gefunden wird */
  const HEADLINE_FALLBACK = "<Titel bitte manuell eintragen>";

  /* Yourls-API */
  /** URL unter der die Yourls-API erreichbar */
  const YOURLS_API_URL = new URL('https://x.swr.de/a/yourls-api.php');
  /**
   * @typedef {Object} YourlsApiParams
   * @property {string} username Benutzername
   * @property {string} password Passwort
   * @property {'shorturl'} action durchzuführende Aktion
   * @property {'json'} format Rückgabe-Format
   */
  /**
   * Parameter für Yourls-API. Details können unter http://x.swr.de/a/ eingesehen werden bzw. im PWDSafe.
   * @type {YourlsApiParams}
   */
  const YOURLS_API_PARAMS = {
    username: "<User>",
    password: "<Password>",
    action: "shorturl",
    format: "json",
  };

  /* Google-Translate-API */
  /** URL unter der Google-Translate erreichbar ist */
  const GOOGLE_TRANSLATE_API_URL =
    "https://www.googleapis.com/language/translate/v2";
  /**
   * Parameter für Google-Translate-API.
   * @typedef {Object} GoogleTranslateParams
   * @property {string} key Google-API-Key
   * @property {string} target Code für die Zielsprache.
   * @property {string} source Code für die Ursprungssprache (wird automatisch erkannt, wenn leerer String).
   */
  /**
   * Google Translate-Parameter.
   * @type {GoogleTranslateParams}
   */
  const GOOGLE_TRANSLATE_PARAMS = {
    key: "YOUR_GOOGLE_API_KEY",
    target: "de",
    source: "",
  };

  /*

  =====================
    Funktionen
  =====================

  */

  /* Extraktoren */

  /**
   * Erhalte den Domainname (ohne WWW) von einer URL.
   * @param {URL} targetURL URL deren Domainname ausgegeben werden soll
   * @returns {string} Domainname (ohne WWW)
   */
  const extractDomainName = (targetURL) =>
    targetURL.hostname.toLowerCase().startsWith("www.")
      ? targetURL.hostname.slice(4)
      : targetURL.hostname;

  /**
   * Extrahiere die Headline aus einem Dokument.
   * @param {Document} document Dokument aus dem die Headline ausgelesen werden soll
   * @param {Array.<string>} headlineTags Suche in diesen Tags in dieser Reihenfolge nach der Headline
   * @returns {string | undefined} Headline (wenn gefunden), sonst undefined
   */
  const extractHeadline = (document, headlineTags) =>
    headlineTags
      .map((tag) => document.querySelector(tag)?.innerText)
      .filter((mayBeTitle) => typeof mayBeTitle === "string")[0]
      ?.trim();

  /* API-Calls */

  /**
   * Erhalte eine Kurz-URL von `targetURL` von der Yourls-API.
   * @param {URL} apiURL URL der Yourls-API
   * @param {YourlsApiParams} apiParams Paramater der der Yourls-API
   * @param {URL} targetURL URL die gekürzt werden soll
   * @returns {Promise<string>} Die gekürzte URL
   * @throws {Error} Es konnte keine Kurz-URL abgeholt werden
   */
  const fetchShortURL = async (apiURL, apiParams, targetURL) => {
    // GET-URL bauen für Yourls-API
    const params = { ...apiParams, url: targetURL.toString() };
    Object.entries(params).forEach(([name, value]) =>
      apiURL.searchParams.append(name, value)
    );

    // Request durchführen
    const request = await fetch(apiURL);
    if (!request.ok) throw new Error(request);
    const data = await request.json();

    return data.shorturl;
  };

  /**
   * Übersetze `text` via Google-Translate-API.
   * @param {URL} apiURL URL der Google-Translate-API
   * @param {GoogleTranslateParams} apiParams - API-Parameter.
   * @param {string} text Zu übersetzender Text.
   * @returns {Promise<string>} Der übersetzte Text.
   * @throws {Error} Request ist fehlgeschlagen.
   */
  const fetchTranslation = async (apiURL, apiParams, text) => {
    // GET-URL bauen für Google-Translate-API
    const params = { ...apiParams, q: text };
    Object.entries(params).forEach(([name, value]) =>
      apiURL.searchParams.append(name, value)
    );

    // Request durchführen
    const request = await fetch(apiURL);
    if (!request.ok) throw new Error(request);
    const data = await request.json();

    // Übersetzung zurückgeben (wenn nicht vorhanden, den Originaltext)
    return data?.data?.translations[0]?.translatedText || text;
  };

  /* Button */

  /**
   * Füge Interaktions-Button ins Dokument ein.
   * @param {Document} document Dokument dem der Button hinzufgefügt werden soll
   * @param {(event: MouseEvent, button: HTMLButtonElement) => Promise<void>} handleClick Löse diese Funktion bei Klick aus
   * @returns {HTMLButtonElement} Das erstellte HTML-Button-Element
   */
  const addButton = (document, handleClick) => {
    const button = document.createElement("button");
    button.setAttribute("id", "myshortenLink");
    button.addEventListener("click", (e) => handleClick(e, button), false);
    button.innerHTML = STATUS_START_TEXT;

    // Button stylen
    button.style.bottom = "20px";
    button.style.right = "50px";
    button.style.height = "50px";
    button.style.width = "200px";
    button.style.position = "fixed";
    button.style.color = "white";
    button.style.fontWeight = "700";
    button.style.fontFamily = "sans-serif";
    button.style.fontSize = "14px";
    button.style.padding = "3px";
    button.style.borderStyle = "none";
    button.style.borderRadius = "25px";
    button.style.zIndex = 99999999;
    button.style.cursor = "pointer";
    button.style.backgroundColor = STATUS_START_COLOR;
    button.style.transition = "background-color 0.7s ease";

    // Button dem Dokument hinzufügen
    document.body.appendChild(button);

    return button;
  };

  /** wurde der Button gedrückt? */
  let buttonIsPressed = false;
  /**
   * Manage den Anzeige-Text und Anzeige-Stil des Buttons
   * (vgl. für Status: `buttonIsPressed`).
   * @param {HTMLButtonElement} button Der Knopf
   */
  const toggleButton = (button) => {
    buttonIsPressed = !buttonIsPressed;

    // Löse Reflow aus, um sicherzustellen, dass die Transition startet
    void button.offsetWidth;

    if (buttonIsPressed) {
      button.style.backgroundColor = STATUS_COPIED_COLOR;
      button.innerHTML = STATUS_COPIED_TEXT;
      return;
    }

    button.innerHTML = STATUS_START_TEXT;
    button.style.backgroundColor = STATUS_START_COLOR;
  };

  /*

  =====================
    Programmablauf
  =====================

  */

  /**
   * Extrahiere Metadaten (Headline, Hostnamen, URL) des aktuellen Dokuments,
   * generiere Kurz-URL,
   * übersetze fremdsprachige Headline ins Deutsch
   * und kopiere Metadaten und Kurz-URL in die Zwischenablage.
   * @param {MouseEvent} event Das auslösende Klick-Event
   * @param {HTMLButtonElement} button Der gedrückte Knopf
   */
  const handleClick = async (event, button) => {
    event.preventDefault();

    /* Extrahiere Metadaten */

    /** URL der Website, die verlinkt werden soll  */
    const targetURL = new URL(window.location.href);
    const domainName = extractDomainName(targetURL);
    // Wenn die extrahierte falsy ist (hier relevant: leerer String oder undefined),
    // soll HEADLINE_FALLBACK genutzt werden
    const headline =
      extractHeadline(document, HEADLINE_TAGS) || HEADLINE_FALLBACK;

    /* Hole Short-URL und breche ab, falls nicht möglich */

    let shortURL = "";
    try {
      shortURL = await fetchShortURL(
        YOURLS_API_URL,
        YOURLS_API_PARAMS,
        targetURL
      );
    } catch (error) {
      button.innerHTML = STATUS_YOURLS_ERROR_TEXT;
      const msg = `Fataler Fehler, konnte short-URL nicht generieren ${JSON.stringify(
        error
      )}`;
      throw new Error(msg);
    }

    /* Wenn nötig: Versuche Headline zu übersetzen */

    let translatedHeadline = headline;
    if (headline !== HEADLINE_FALLBACK) {
      try {
        translatedHeadline = await fetchTranslation(
          GOOGLE_TRANSLATE_API_URL,
          GOOGLE_TRANSLATE_PARAMS
        );
      } catch (error) {
        console.error(
          `Fehler, konnte nicht übersetzen -- fahre ohne Übersetzung fort: ${JSON.stringify(
            error
          )}`
        );
      }
    }

    /* Formatiere Ausgabe */

    const output = OUTPUT_TEMPLATE.replace("{{domain}}", domainName)
      .replace("{{headline}}", translatedHeadline)
      .replace("{{url}}", shortURL);

    // Kopiere Ausgabe in den Zwischenspeicher
    // vgl. https://www.tampermonkey.net/documentation.php?locale=en#api:GM_setClipboard
    GM_setClipboard(output);

    /* Informiere Userin, dass kopiert */

    toggleButton(button);
    // Setze Text zurück (falls Userin noch einmal kopieren möchte)
    let buttonPressedTimeoutID = undefined;
    // Lösche ggf. existierendes Timeout
    clearTimeout(buttonPressedTimeoutID);
    buttonPressedTimeoutID = setTimeout(
      () => toggleButton(button),
      STATUS_RESET_AFTER * 1000
    );
  };

  // Button hinzufügen
  addButton(document, handleClick);
})();