import { useState } from 'react';

import { KONTAKT } from '../../../../shared/kontakt';
import { UNTERSTUETZUNG_KNOPF, UNTERSTUETZUNG_TITEL } from '../../../../shared/unterstuetzung';
import { bridge } from '../../bridge';
import { fehlerMeldung } from '../../lernen/bruecke';
import { Hinweis } from '../lernen/Hinweis';

export interface UnterstuetzungProps {
  /**
   * Die geprüfte Adresse, oder `null`. Bei `null` rendert diese Komponente
   * **nichts** – kein leerer Block, keine Überschrift ohne Inhalt.
   *
   * Als Eigenschaft und nicht aus dem Modul gelesen: So ist beides prüfbar,
   * der Zustand von heute (keine Adresse) und der von morgen (eine).
   */
  readonly ziel: string | null;
}

/**
 * „Diese Arbeit unterstützen“ – der ruhige Platz für eine Bitte.
 *
 * ## Was hier bewusst fehlt
 *
 * Kein Betrag, kein Vorschlag, kein „schon ab 3 Euro“. Keine Zählung dessen,
 * was jemand gelernt hat, und keine Erinnerung daran, wie lange er die
 * Anwendung schon benutzt. Kein zweites Fragen, kein Wegklicken, das sich
 * merken ließe – es gibt nichts wegzuklicken, weil nichts von selbst kommt.
 * Die Begründung im Einzelnen steht im Kopf von `shared/unterstuetzung.ts`
 * und folgt der Haltung aus `docs/entscheidung-motivation.md`.
 *
 * ## Warum die Adresse sichtbar danebensteht
 *
 * Wer gleich den Browser verlässt, soll vorher wissen, wohin. Die Adresse
 * steht deshalb als auswählbarer Text da – und sie ist zugleich der Rückfall,
 * wenn sich der Browser nicht öffnen lässt: Dann kann man sie abschreiben,
 * statt vor einer Meldung ohne Ausweg zu stehen.
 *
 * ## Warum ein Knopf und kein Verweis
 *
 * Ein `<a href="https://…">` wäre die Unwahrheit: Diese Anwendung navigiert
 * nirgendwohin, sie stößt den Systembrowser an. Ein Knopf sagt genau das, und
 * seine Beschriftung sagt auch, dass das Fenster dabei verlassen wird
 * (WCAG 3.2). Die sichtbare Beschriftung ist der ganze zugängliche Name –
 * kein `aria-label`, das daneben laufen könnte (WCAG 2.5.3). Die Klickfläche
 * bringt die Klasse `knopf` mit (`--klickflaeche-min`, 44 px), den Fokusring
 * die zentrale Regel in `global.css`.
 */
export function Unterstuetzung({ ziel }: UnterstuetzungProps): React.JSX.Element | null {
  const [meldung, setzeMeldung] = useState<string | null>(null);

  const oeffnen = bridge()?.unterstuetzungOeffnen;

  /* Beides muss stimmen: eine eingetragene Adresse UND ein Kanal, der sie
     öffnen kann. Fehlt eines, gibt es das Angebot nicht – und nicht etwa
     einen Knopf, der auf Druck erklärt, dass er nicht kann. */
  if (ziel === null || oeffnen === undefined) {
    return null;
  }

  const anstossen = (): void => {
    setzeMeldung(null);
    void oeffnen(ziel)
      .then((geoeffnet) => {
        if (!geoeffnet) {
          setzeMeldung(
            'Der Standardbrowser ließ sich nicht öffnen. Sie können die Adresse abschreiben.',
          );
        }
      })
      .catch((fehler: unknown) => {
        setzeMeldung(
          fehlerMeldung(
            fehler,
            'Der Standardbrowser ließ sich nicht öffnen. Sie können die Adresse abschreiben.',
          ),
        );
      });
  };

  return (
    <div className="ueber__block">
      <h2>{UNTERSTUETZUNG_TITEL}</h2>
      {/* Die Lizenzkennung steht hier bewusst NICHT noch einmal ausgeschrieben.
          Sie hat weiter oben ihren Block; zweimal derselbe Bezeichner liefe mit
          der Zeit auseinander – und nachgemessen machte er zugleich die Suche
          nach „EUPL-1.2“ in `renderer-ueber.test.tsx` mehrdeutig. */}
      {/* „auf Anfrage erhältlich“ und nicht „offen“: Ein öffentliches
          Quelltextarchiv gibt es bislang nicht. Bis Fassung 0.24.1 stand hier
          „ihr Quelltext ist offen“, und wer danach suchte, fand nichts – die
          Anwendung nannte weder eine Adresse noch den Weg über die Anfrage.
          Updatebericht und Datenschutzerklärung sagen es seit jeher so, wie
          es hier jetzt auch steht. Sobald ein Archiv besteht, gehört seine
          Adresse hierher. */}
      <p>
        Diese Anwendung ist kostenlos, sie überträgt keine Daten, und sie steht unter einer freien
        Lizenz – sie steht weiter oben auf dieser Seite. Den Quelltext gibt es auf Anfrage unter{' '}
        {KONTAKT.epost}. Wer die Arbeit daran unterstützen möchte, kann das freiwillig tun.
      </p>
      <p>
        Am Funktionsumfang ändert das nichts. Es gibt hier nichts freizuschalten und keine Werbung
        abzustellen; wer nichts gibt, hat dieselbe Anwendung wie alle anderen. Gefragt wird an
        dieser Stelle und sonst nirgends – beim Lernen kommt diese Bitte nicht wieder.
      </p>

      <div>
        <button type="button" className="knopf" onClick={anstossen}>
          {UNTERSTUETZUNG_KNOPF}
        </button>
      </div>

      <p className="ueber__fussnote">
        Die Seite öffnet sich im Standardbrowser Ihres Systems:{' '}
        <code className="ueber__url">{ziel}</code>. Die Anwendung selbst stellt dabei keine
        Verbindung her und übermittelt nichts – sie übergibt nur die Adresse.
      </p>

      {meldung === null ? null : (
        <Hinweis art="fehler" alsMeldung>
          {meldung}
        </Hinweis>
      )}
    </div>
  );
}
