/* ==========================================================================
   ACCOUNT: login, registration, public profile, settings.
   ========================================================================== */

function AuthForm({ mode }) {
  const { go } = useRouter();
  const { setUser } = useAuth();
  const notify = useToast();
  const register = mode === "register";

  const [form, setForm] = useState({ username: "", email: "", password: "" });
  const [accepted, setAccepted] = useState(false);
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  async function submit(e) {
    e.preventDefault();
    setBusy(true);
    setError("");
    try {
      const user = await BB.post(
        register ? "/auth/register" : "/auth/login",
        register ? { ...form, acceptedTerms: accepted } : form
      );
      setUser(user);
      notify(register ? `Willkommen, ${user.displayName}!` : `Willkommen zurück, ${user.displayName}.`);
      const next = new URLSearchParams(window.location.search).get("next");
      go(next || "/");
    } catch (err) {
      setError(err.message);
      setBusy(false);
    }
  }

  return (
    <div className="auth-wrap">
      <form className="auth-card" onSubmit={submit}>
        <div className="stack" style={{ gap: "0.6rem" }}>
          <div className="eyebrow">{register ? "Profil erstellen" : "Willkommen zurück"}</div>
          <h1>{register ? "Werde Teil der Bible." : "Einloggen"}</h1>
        </div>

        <Field label="Benutzername" hint={register ? "3–24 Zeichen, öffentlich sichtbar." : null}>
          <input
            className="input" value={form.username} onChange={set("username")}
            autoComplete="username" autoFocus required
          />
        </Field>

        {register && (
          <Field label={BB.t("E-Mail")} hint={BB.t("Optional, nur für dich sichtbar.")}>
            <input className="input" type="email" value={form.email} onChange={set("email")} autoComplete="email" />
          </Field>
        )}

        <Field label="Passwort" hint={register ? "Mindestens 8 Zeichen." : null}>
          <input
            className="input" type="password" value={form.password} onChange={set("password")}
            autoComplete={register ? "new-password" : "current-password"} required
          />
        </Field>

        {register && (
          <label className="auth-terms">
            <input
              type="checkbox" checked={accepted}
              onChange={(e) => setAccepted(e.target.checked)} required
            />
            <span>
              {BB.tMit(
                "Ich habe die {agb} und die {datenschutz} gelesen und bin einverstanden. Ich bestätige, dass ich mindestens 18 Jahre alt bin.",
                {
                  agb: <Link to="/agb">{BB.t("Nutzungsbedingungen")}</Link>,
                  datenschutz: <Link to="/datenschutz">{BB.t("Datenschutzerklärung")}</Link>,
                }
              )}
            </span>
          </label>
        )}

        {error && <div className="err">⚠ {error}</div>}

        <button className="btn primary block lg" disabled={busy || (register && !accepted)}>
          {busy ? "Moment …" : register ? "Profil erstellen" : "Einloggen"}
        </button>

        <div className="dim" style={{ fontSize: "var(--fs-sm)", textAlign: "center" }}>
          {register ? (
            <>{BB.t("Schon dabei?")} <Link to="/login" style={{ color: "var(--accent)" }}>{BB.t("Einloggen")}</Link></>
          ) : (
            <>
              {BB.t("Noch kein Profil?")} <Link to="/registrieren" style={{ color: "var(--accent)" }}>{BB.t("Jetzt erstellen")}</Link>
              <div style={{ marginTop: "0.5rem" }}>
                {BB.t("Die Redaktion setzt dein Passwort auf Anfrage zurück. Schreib uns dazu kurz über die im Impressum genannte Adresse.")}
              </div>
            </>
          )}
        </div>
      </form>
    </div>
  );
}

/* --- neues Passwort ueber einen Reset-Link -------------------------------- */

/* Die Gegenseite zu "Reset-Link erzeugen" in der Verwaltung. Der Link wird
   zuerst geprueft, bevor ein Formular erscheint: ein abgelaufenes Token erst
   nach dem Ausfuellen zu melden, waere die Arbeit umsonst. */
function PasswortNeu({ params }) {
  const { go } = useRouter();
  const { setUser } = useAuth();
  const notify = useToast();
  const token = (params.get("token") || "").trim();

  const [stand, setStand] = useState("pruefe");   // pruefe | offen | ungueltig
  const [konto, setKonto] = useState("");
  const [form, setForm] = useState({ password: "", wieder: "" });
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    let alive = true;
    if (!token) { setStand("ungueltig"); return; }
    BB.get("/auth/passwort-neu" + BB.qs({ token }))
      .then((res) => {
        if (!alive) return;
        setStand(res.gueltig ? "offen" : "ungueltig");
        setKonto(res.username || "");
      })
      .catch(() => alive && setStand("ungueltig"));
    return () => { alive = false; };
  }, [token]);

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  async function submit(e) {
    e.preventDefault();
    if (form.password !== form.wieder) {
      setError(BB.t("Die beiden Passwörter stimmen nicht überein."));
      return;
    }
    setBusy(true);
    setError("");
    try {
      const user = await BB.post("/auth/passwort-neu", { token, password: form.password });
      setUser(user);
      notify(BB.t("Dein Passwort ist gesetzt. Du bist jetzt eingeloggt."), "ok");
      go("/");
    } catch (err) {
      setError(err.message);
      setBusy(false);
    }
  }

  if (stand === "pruefe") {
    return <div className="auth-wrap"><div className="auth-card"><Spinner /></div></div>;
  }

  if (stand === "ungueltig") {
    return (
      <div className="auth-wrap">
        <div className="auth-card">
          <div className="stack" style={{ gap: "0.6rem" }}>
            <div className="eyebrow">{BB.t("Neues Passwort setzen")}</div>
            <h1>{BB.t("Dieser Link gilt nicht mehr")}</h1>
          </div>
          <p className="dim">
            {BB.t("Der Link ist abgelaufen oder wurde schon benutzt. Bitte fordere einen neuen an.")}
          </p>
          <Link to="/login" className="btn primary block lg">{BB.t("Zur Anmeldung")}</Link>
        </div>
      </div>
    );
  }

  return (
    <div className="auth-wrap">
      <form className="auth-card" onSubmit={submit}>
        <div className="stack" style={{ gap: "0.6rem" }}>
          <div className="eyebrow">{BB.t("Neues Passwort setzen")}</div>
          <h1>{BB.t("Neues Passwort")}</h1>
          {konto && <p className="dim">{BB.t("Konto:")} <strong>@{konto}</strong></p>}
        </div>

        <Field label={BB.t("Neues Passwort")} hint={BB.t("Mindestens 8 Zeichen.")}>
          <input className="input" type="password" value={form.password} onChange={set("password")}
                 autoComplete="new-password" autoFocus required minLength={8} />
        </Field>

        <Field label={BB.t("Passwort wiederholen")}>
          <input className="input" type="password" value={form.wieder} onChange={set("wieder")}
                 autoComplete="new-password" required minLength={8} />
        </Field>

        {error && <div className="err">⚠ {error}</div>}

        <button className="btn primary block lg" disabled={busy}>
          {busy ? BB.t("Speichert …") : BB.t("Passwort speichern")}
        </button>
      </form>
    </div>
  );
}

/* --- public profile ------------------------------------------------------ */

function Profile({ username }) {
  const { user } = useAuth();
  const [profile, setProfile] = useState(null);
  const [missing, setMissing] = useState(false);
  const [kind, setKind] = useState("");

  useEffect(() => {
    let alive = true;
    setProfile(null);
    setMissing(false);
    BB.get("/users/" + encodeURIComponent(username))
      .then((p) => { if (alive) setProfile(p); })
      .catch(() => { if (alive) setMissing(true); });
    return () => { alive = false; };
  }, [username]);

  const { items, total, loading } = usePosts({
    author: username, kind: kind || [].concat(BB.USER_KINDS, "wiki").join(","), sort: "new",
  });

  if (missing) {
    return (
      <div className="wrap section">
        <Empty mark="404" title={BB.t("Profil nicht gefunden")} action={<Link to="/forum" className="btn ghost">{BB.t("Zum Forum")}</Link>} />
      </div>
    );
  }
  if (!profile) return <div className="wrap section"><Spinner /></div>;

  const mine = user && user.id === profile.id;
  const posts = Object.values(profile.counts || {}).reduce((a, b) => a + b, 0);

  return (
    <div className="wrap section" style={{ paddingTop: "3rem" }}>
      <header className="profile-head" style={{ marginBottom: "3rem" }}>
        <Avatar user={profile} size="xl" />
        <div className="stack grow" style={{ gap: "0.75rem" }}>
          <div>
            <h1 style={{ fontSize: "var(--fs-h1)" }}>{profile.displayName}</h1>
            <div className="mono dim">@{profile.username} · dabei seit {BB.when(profile.createdAt)}</div>
          </div>
          {profile.bio && <p className="lead" style={{ fontSize: "var(--fs-body)" }}>{profile.bio}</p>}
          <div className="profile-stats">
            <div><div className="n">{BB.num(posts)}</div><div className="l">{BB.t("Beiträge")}</div></div>
            <div><div className="n">{BB.num(profile.karma)}</div><div className="l">{BB.t("Upvotes")}</div></div>
            {Object.entries(profile.stats || {}).filter(([, v]) => v).map(([k, v]) => (
              <div key={k}><div className="n">{v}</div><div className="l">{k}</div></div>
            ))}
          </div>
        </div>
        {mine && <Link to="/einstellungen" className="btn ghost">{BB.t("Profil bearbeiten")}</Link>}
      </header>

      <div className="spread" style={{ marginBottom: "1.5rem", flexWrap: "wrap", gap: "1rem" }}>
        <Segmented
          value={kind}
          onChange={setKind}
          options={[{ value: "", label: "Alle" }].concat(
            Object.keys(profile.counts || {}).map((k) => ({
              value: k, label: `${BB.KINDS[k] ? BB.KINDS[k].plural : k} ${profile.counts[k]}`,
            }))
          )}
        />
        <span className="label">{BB.num(total)} veröffentlicht</span>
      </div>

      {loading && items.length === 0 ? (
        <SkeletonCards n={3} />
      ) : items.length === 0 ? (
        <Empty
          mark="✎"
          title={mine ? "Du hast noch nichts veröffentlicht" : "Noch nichts veröffentlicht"}
          action={mine ? <Link to="/neu" className="btn primary">{BB.t("Ersten Beitrag schreiben")}</Link> : null}
        />
      ) : (
        <div className="grid-posts">{items.map((p) => <PostCard key={p.id} post={p} />)}</div>
      )}
    </div>
  );
}

/* --- settings ------------------------------------------------------------ */

const STAT_FIELDS = [
  { key: "Größe", placeholder: "184 cm" },
  { key: "Gewicht", placeholder: "92 kg" },
  { key: "Jahre", placeholder: "8" },
  { key: "Split", placeholder: "PPL" },
];

function Settings() {
  const { user, setUser, ready } = useAuth();
  const { go } = useRouter();
  const notify = useToast();
  const [form, setForm] = useState(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    if (ready && !user) go("/login?next=/einstellungen");
    if (user && !form) {
      setForm({ bio: user.bio, avatar: user.avatar, stats: user.stats || {} });
    }
  }, [ready, user, form, go]);

  if (!ready || !form) return <div className="wrap section"><Spinner /></div>;

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  async function submit(e) {
    e.preventDefault();
    setBusy(true);
    setError("");
    try {
      const updated = await BB.patch("/me", form);
      setUser(updated);
      notify("Profil gespeichert");
      go("/u/" + updated.username);
    } catch (err) {
      setError(err.message);
      setBusy(false);
    }
  }

  async function logout() {
    await BB.post("/auth/logout").catch(() => {});
    setUser(null);
    notify("Abgemeldet");
    go("/");
  }

  // Zahlungsmittel, Rechnungen und Kuendigung laufen ueber Stripes eigenes
  // Portal. Das selbst zu bauen hiesse, ein Rechnungsarchiv und eine
  // Kuendigungsstrecke nachzubauen, und beides muss rechtlich stimmen.
  async function verwalten() {
    setBusy(true);
    try {
      const { url } = await BB.post("/zahlung/verwalten");
      window.location.href = url;
    } catch (err) {
      notify(err.message, "bad");
      setBusy(false);
    }
  }

  return (
    <div className="wrap wrap-narrow section" style={{ paddingTop: "3rem" }}>
      <header className="section-head" style={{ marginBottom: "2.5rem" }}>
        <div className="eyebrow">{BB.t("Einstellungen")}</div>
        <h2>{BB.t("Dein Profil")}</h2>
      </header>

      <form className="stack" style={{ gap: "1.75rem" }} onSubmit={submit}>
        <div className="row" style={{ gap: "1.5rem", flexWrap: "wrap" }}>
          <Avatar user={{ ...user, avatar: form.avatar }} size="lg" />
          <ImageUpload
            label="Profilbild"
            hint={BB.t("PNG, JPG oder WEBP. Das Bild wird automatisch verkleinert und komprimiert.")}
            variant="avatar"
            allowUrl={false}
            compact
            value={form.avatar || ""}
            onChange={(avatar) => setForm((f) => ({ ...f, avatar }))}
          />
        </div>

        <Field label={BB.t("Über dich")} hint={BB.t("Max. 600 Zeichen.")}>
          <textarea
            className="textarea" style={{ minHeight: 120, fontFamily: "var(--font-body)", fontSize: "var(--fs-body)" }}
            value={form.bio} onChange={set("bio")} maxLength={600}
            placeholder={BB.t("Wer bist du, was trainierst du, wofür interessierst du dich?")}
          />
        </Field>

        <Field label="Eckdaten" hint="Erscheinen als Zahlen auf deinem Profil. Optional.">
          <div className="row" style={{ gap: "0.75rem", flexWrap: "wrap" }}>
            {STAT_FIELDS.map((s) => (
              <input
                key={s.key}
                className="input" style={{ flex: "1 1 130px" }}
                value={form.stats[s.key] || ""}
                placeholder={`${s.key}: ${s.placeholder}`}
                onChange={(e) => setForm((f) => ({ ...f, stats: { ...f.stats, [s.key]: e.target.value } }))}
              />
            ))}
          </div>
        </Field>

        {error && <div className="err">⚠ {error}</div>}

        <div className="row" style={{ gap: "0.75rem", flexWrap: "wrap", paddingTop: "0.5rem", borderTop: "1px solid var(--line)" }}>
          <button className="btn primary" disabled={busy}>{busy ? "Speichert …" : "Speichern"}</button>
          {user.plan === "premium" && (
            <button type="button" className="btn quiet" disabled={busy} onClick={verwalten}>
              {BB.t("Mitgliedschaft verwalten")}
            </button>
          )}
          <div className="grow" />
          <button type="button" className="btn ghost danger" onClick={logout}>{BB.t("Abmelden")}</button>
        </div>
      </form>

      {/* Eine erteilte Einwilligung muss jederzeit widerrufbar sein, und zwar
          so einfach, wie sie erteilt wurde. Deshalb steht sie hier und nicht
          hinter einem Link in der Datenschutzerklaerung. */}
      <div style={{ marginTop: "2.5rem", paddingTop: "1.5rem", borderTop: "1px solid var(--line)" }}>
        <ConsentSetting />
      </div>
    </div>
  );
}

Object.assign(window, { AuthForm, PasswortNeu, Profile, Settings });