const { Card, TextInput, Button } = window.TersusDesignSystem_b3db99;

const FEHLER_DE = {
  "Invalid login credentials": "E-Mail oder Passwort falsch.",
  "Email not confirmed": "Die E-Mail-Adresse ist noch nicht bestaetigt.",
  "Password should be at least 6 characters.": "Das Passwort muss mindestens 6 Zeichen haben.",
  "New password should be different from the old password.": "Das neue Passwort muss sich vom alten unterscheiden.",
};
const deutsch = (t) => FEHLER_DE[t] || t;

function Rahmen({ titel, text, children, onSubmit }) {
  return (
    <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", padding: "var(--space-8)" }}>
      <Card padding="28px" style={{ width: 360 }}>
        <form onSubmit={onSubmit} style={{ display: "grid", gap: "var(--space-4)" }}>
          <div>
            <h2 style={{ font: "var(--text-h1)" }}>{titel}</h2>
            <p style={{ margin: "6px 0 0", fontSize: "var(--fs-sm)", color: "var(--text-muted)" }}>{text}</p>
          </div>
          {children}
        </form>
      </Card>
    </div>
  );
}

const linkStil = { background: "none", border: 0, padding: 0, cursor: "pointer", font: "inherit", fontSize: "var(--fs-sm)",
  color: "var(--text-muted)", textDecoration: "underline", textDecorationColor: "var(--border-strong)", justifySelf: "start" };

/* Anmeldemaske fuer den Supabase-Betrieb. Konten werden im Supabase-Dashboard
   angelegt (Authentication > Users), eine Selbstregistrierung gibt es bewusst nicht. */
function Anmeldung() {
  const [modus, setModus] = React.useState("anmelden"); // anmelden | vergessen | gesendet
  const [email, setEmail] = React.useState("");
  const [passwort, setPasswort] = React.useState("");
  const [laeuft, setLaeuft] = React.useState(false);
  const [fehler, setFehler] = React.useState(null);

  const anmelden = async (e) => {
    e.preventDefault();
    setLaeuft(true); setFehler(null);
    const res = await window.TersusDB.anmelden(email.trim(), passwort);
    setLaeuft(false);
    if (!res.ok) setFehler(deutsch(res.error));
  };

  const linkSenden = async (e) => {
    e.preventDefault();
    setLaeuft(true); setFehler(null);
    const res = await window.TersusDB.passwortVergessen(email.trim());
    setLaeuft(false);
    if (res.ok) setModus("gesendet"); else setFehler(deutsch(res.error));
  };

  const fehlerZeile = fehler ? <div role="alert" style={{ fontSize: "var(--fs-sm)", color: "var(--status-declined)" }}>{fehler}</div> : null;

  if (modus === "gesendet") {
    return (
      <Rahmen titel="E-Mail unterwegs" text={"Falls ein Konto zu " + email.trim() + " existiert, kommt gleich eine E-Mail mit einem Link zum Setzen eines neuen Passworts."}
        onSubmit={e => { e.preventDefault(); setModus("anmelden"); }}>
        <Button variant="secondary" type="submit" icon="arrow-left" fullWidth>Zurueck zur Anmeldung</Button>
      </Rahmen>
    );
  }

  if (modus === "vergessen") {
    return (
      <Rahmen titel="Passwort vergessen" text="Wir schicken einen Link, mit dem du ein neues Passwort setzen kannst." onSubmit={linkSenden}>
        <TextInput label="E-Mail" type="email" autoComplete="username" required value={email} onChange={e => setEmail(e.target.value)} />
        {fehlerZeile}
        <Button variant="primary" type="submit" icon={laeuft ? "loader" : "mail"} disabled={laeuft} fullWidth>Link senden</Button>
        <button type="button" style={linkStil} onClick={() => { setModus("anmelden"); setFehler(null); }}>Zurueck zur Anmeldung</button>
      </Rahmen>
    );
  }

  return (
    <Rahmen titel="Anmelden" text="Zugang zu den Karteikarten." onSubmit={anmelden}>
      <TextInput label="E-Mail" type="email" autoComplete="username" required value={email} onChange={e => setEmail(e.target.value)} />
      <TextInput label="Passwort" type="password" autoComplete="current-password" required value={passwort} onChange={e => setPasswort(e.target.value)} />
      {fehlerZeile}
      <Button variant="primary" type="submit" icon={laeuft ? "loader" : "log-in"} disabled={laeuft} fullWidth>Anmelden</Button>
      <button type="button" style={linkStil} onClick={() => { setModus("vergessen"); setFehler(null); }}>Passwort vergessen?</button>
    </Rahmen>
  );
}

/* Nach Klick auf den Link aus der Mail: neues Passwort setzen. */
function NeuesPasswort({ onFertig }) {
  const [pw, setPw] = React.useState("");
  const [pw2, setPw2] = React.useState("");
  const [laeuft, setLaeuft] = React.useState(false);
  const [fehler, setFehler] = React.useState(null);

  const speichern = async (e) => {
    e.preventDefault();
    if (pw.length < 8) { setFehler("Bitte mindestens 8 Zeichen verwenden."); return; }
    if (pw !== pw2) { setFehler("Die beiden Passwoerter stimmen nicht ueberein."); return; }
    setLaeuft(true); setFehler(null);
    const res = await window.TersusDB.neuesPasswort(pw);
    setLaeuft(false);
    if (res.ok) onFertig(); else setFehler(deutsch(res.error));
  };

  return (
    <Rahmen titel="Neues Passwort" text="Bitte ein neues Passwort mit mindestens 8 Zeichen festlegen." onSubmit={speichern}>
      <TextInput label="Neues Passwort" type="password" autoComplete="new-password" required value={pw} onChange={e => setPw(e.target.value)} />
      <TextInput label="Wiederholen" type="password" autoComplete="new-password" required value={pw2} onChange={e => setPw2(e.target.value)} />
      {fehler ? <div role="alert" style={{ fontSize: "var(--fs-sm)", color: "var(--status-declined)" }}>{fehler}</div> : null}
      <Button variant="primary" type="submit" icon={laeuft ? "loader" : "check"} disabled={laeuft} fullWidth>Passwort speichern</Button>
    </Rahmen>
  );
}

Object.assign(window, { Anmeldung, NeuesPasswort });