// passwort.jsx — Neues Passwort setzen, nachdem der Mail-Link angeklickt wurde.
//
// Warum es diese Datei gibt: Bis zum 16.09.2026 war „Passwort vergessen?" im
// Login ein toter Link (`onClick={e => e.preventDefault()}`) und es gab keine
// Reset-Seite. Wer sein Passwort nicht mehr wusste, konnte sich im Studio nicht
// selbst helfen — jeder Fall musste von Vantix von Hand über die Supabase-
// Admin-Schnittstelle erledigt werden.
//
// Dieser Bildschirm wird von app.jsx gezeigt, BEVOR über Login oder Inbox
// entschieden wird — der Link im Hash gilt nur einmal und nur eine Stunde.
// Die Token-Logik steht in db.jsx (`wiederherstellungAusUrl` und Co.).

function PasswortNeuScreen({ token, fehlerAusUrl, onFertig, onAbbruch }) {
  const db = window.TF_DB;
  const [passwort, setPasswort] = React.useState('');
  const [wieder, setWieder] = React.useState('');
  const [zeigen, setZeigen] = React.useState(false);
  const [laeuft, setLaeuft] = React.useState(false);
  const [fehler, setFehler] = React.useState('');
  const [bereit, setBereit] = React.useState(false);
  const [fertig, setFertig] = React.useState(false);
  const [adresse, setAdresse] = React.useState('');

  const MIN = (db && db.auth.PASSWORT_MIN) || 12;

  // Aus dem Link eine Sitzung machen. Erst danach lässt sich das Passwort setzen.
  React.useEffect(() => {
    if (fehlerAusUrl || !token || !db) return;
    let abgebrochen = false;
    (async () => {
      try {
        const sess = await db.auth.wiederherstellungUebernehmen(token);
        if (abgebrochen) return;
        setAdresse((sess && sess.user && sess.user.email) || '');
        setBereit(true);
      } catch (err) {
        console.error('[passwort] Link konnte nicht eingelöst werden:', err);
        if (!abgebrochen) setFehler('Der Link ist nicht mehr gültig. Bitte fordere einen neuen an.');
      } finally {
        // Den Hash in jedem Fall entfernen: ein Neuladen darf den Vorgang nicht
        // wiederholen, und das Token soll nicht in der Adresszeile stehen bleiben.
        if (db) db.auth.urlAufraeumen();
      }
    })();
    return () => { abgebrochen = true; };
  }, [token, fehlerAusUrl]);

  const abschicken = async (e) => {
    e.preventDefault();
    setFehler('');
    const meldung = db.auth.passwortPruefen(passwort, wieder);
    if (meldung) { setFehler(meldung); return; }
    setLaeuft(true);
    try {
      await db.auth.passwortSetzen(passwort);
      setFertig(true);
      // Die Wiederherstellungs-Sitzung wird beendet: wer ein neues Passwort
      // setzt, soll sich damit auch einmal anmelden — sonst merkt niemand,
      // wenn es nicht das ist, was er gemeint hat.
      await db.auth.signOut();
    } catch (err) {
      console.error('[passwort] Setzen fehlgeschlagen:', err);
      const m = (err && err.message) || '';
      if (/should be at least|too short|weak/i.test(m)) {
        setFehler(`Das Passwort ist zu kurz — mindestens ${MIN} Zeichen.`);
      } else if (/same as the old|different from the old/i.test(m)) {
        setFehler('Das ist das alte Passwort. Bitte wähle ein anderes.');
      } else if (/session|jwt|expired|invalid/i.test(m)) {
        setFehler('Der Link ist abgelaufen. Bitte fordere einen neuen an.');
      } else {
        setFehler(m || 'Das Passwort konnte nicht gesetzt werden.');
      }
      setLaeuft(false);
    }
  };

  const rahmen = (inhalt) => (
    <div className="login-shell">
      <div className="login-bg"></div>
      <div className="login-card">
        <div className="login-logo">
          <img src="assets/logo.png" alt="Tattoo Fashion" />
          <div className="login-eyebrow">Studio Inbox</div>
        </div>
        {inhalt}
        <div className="login-footer">
          TATTOO FASHION
          <span className="sep">·</span>
          STUDIO INBOX
          <span className="sep">·</span>
          v1.0
        </div>
      </div>
    </div>
  );

  // --- Link kaputt oder abgelaufen -----------------------------------------
  if (fehlerAusUrl || (fehler && !bereit)) {
    const abgelaufen = fehlerAusUrl && /expired/i.test(String(fehlerAusUrl.code || ''));
    return rahmen(
      <React.Fragment>
        <h1 className="login-title">Link nicht mehr gültig</h1>
        <p className="login-subtitle">
          {abgelaufen
            ? 'Der Link aus der E-Mail gilt nur eine Stunde und nur einmal.'
            : 'Dieser Link lässt sich nicht mehr einlösen — er wurde schon benutzt oder ist abgelaufen.'}
        </p>
        <button type="button" className="btn-primary" onClick={onAbbruch}>
          Neuen Link anfordern
        </button>
      </React.Fragment>
    );
  }

  // --- Erledigt -------------------------------------------------------------
  if (fertig) {
    return rahmen(
      <React.Fragment>
        <h1 className="login-title">Passwort geändert</h1>
        <p className="login-subtitle">
          Melde dich jetzt mit dem neuen Passwort an{adresse ? ' — als ' + adresse : ''}.
        </p>
        <button type="button" className="btn-primary" onClick={onFertig}>
          Zur Anmeldung
        </button>
      </React.Fragment>
    );
  }

  // --- Link wird eingelöst --------------------------------------------------
  if (!bereit) {
    return rahmen(
      <React.Fragment>
        <h1 className="login-title">Einen Moment</h1>
        <p className="login-subtitle">Wir prüfen deinen Link …</p>
      </React.Fragment>
    );
  }

  // --- Neues Passwort setzen ------------------------------------------------
  return rahmen(
    <React.Fragment>
      <h1 className="login-title">Neues Passwort</h1>
      <p className="login-subtitle">
        {adresse ? 'Für ' + adresse + '. ' : ''}Mindestens {MIN} Zeichen.
      </p>
      {/* noValidate, siehe login.jsx: eigene Meldungen statt Browser-Sprechblase. */}
      <form className="login-form" onSubmit={abschicken} noValidate>
        {fehler && (
          <div className="login-error">
            <Icon.Info width="14" height="14" />
            {fehler}
          </div>
        )}
        <div className="field">
          <label className="field-label" htmlFor="pw-neu">Neues Passwort</label>
          <input
            id="pw-neu"
            type={zeigen ? 'text' : 'password'}
            className="field-input"
            placeholder="••••••••••••"
            value={passwort}
            onChange={(e) => setPasswort(e.target.value)}
            autoFocus
            autoComplete="new-password"
          />
        </div>
        <div className="field">
          <label className="field-label" htmlFor="pw-wieder">Noch einmal</label>
          <input
            id="pw-wieder"
            type={zeigen ? 'text' : 'password'}
            className="field-input"
            placeholder="••••••••••••"
            value={wieder}
            onChange={(e) => setWieder(e.target.value)}
            autoComplete="new-password"
          />
        </div>
        <div className="login-row">
          <label>
            <input
              type="checkbox"
              className="checkbox"
              checked={zeigen}
              onChange={(e) => setZeigen(e.target.checked)}
            />
            Passwort anzeigen
          </label>
          <span className="pw-zaehler" aria-live="polite">
            {passwort.length}/{MIN}
          </span>
        </div>
        <button type="submit" className="btn-primary" disabled={laeuft}>
          {laeuft ? 'Wird gespeichert …' : 'Passwort speichern'}
        </button>
      </form>
    </React.Fragment>
  );
}

window.PasswortNeuScreen = PasswortNeuScreen;