const { useState: useInvState, useEffect: useInvEffect } = React;

window.InvitePage = function InvitePage({ token, onClaim }) {
  const [inv, setInv] = useInvState(null);
  const [loadErr, setLoadErr] = useInvState(null);
  const [name, setName] = useInvState("");
  const [password, setPassword] = useInvState("");
  const [busy, setBusy] = useInvState(false);
  const [err, setErr] = useInvState(null);

  useInvEffect(() => {
    window.api.get("/auth/invite/" + token)
      .then((d) => {
        setInv(d.invitation);
        if (d.invitation.tenant_primary || d.invitation.tenant_accent) {
          window.applyBrand({
            primaryColor: d.invitation.tenant_primary,
            accentColor:  d.invitation.tenant_accent,
            name: d.invitation.tenant_name,
          });
        }
      })
      .catch((e) => setLoadErr(e.data && e.data.error || e.message));
  }, [token]);

  async function submit(e) {
    e.preventDefault();
    if (password.length < 8) {
      setErr("Lösenord måste vara minst 8 tecken.");
      return;
    }
    setErr(null);
    setBusy(true);
    try {
      const { user } = await window.api.post("/auth/claim/" + token, { password, name });
      onClaim(user);
    } catch (e) {
      setErr(
        (e.data && e.data.error === "weak_password") ? "Lösenord måste vara minst 8 tecken." :
        (e.data && e.data.error === "email_taken") ? "Den här emailen har redan ett konto. Logga in istället." :
        "Något gick fel — försök igen."
      );
    } finally {
      setBusy(false);
    }
  }

  if (loadErr) {
    return (
      <div className="login-shell">
        <div className="login-card">
          <h1>Inbjudan ogiltig</h1>
          <p className="lead">
            {loadErr === "invitation_not_found" && "Vi hittar ingen inbjudan med den länken."}
            {loadErr === "invitation_already_claimed" && "Den här inbjudan har redan använts. Försök logga in istället."}
            {!["invitation_not_found", "invitation_already_claimed"].includes(loadErr) && "Något gick fel."}
          </p>
          <a href="/" className="btn btn-secondary">Till login</a>
        </div>
      </div>
    );
  }

  if (!inv) {
    return (
      <div className="loading-page"><div className="spinner" /><div>Laddar…</div></div>
    );
  }

  return (
    <div className="login-shell">
      <div className="login-card">
        <img src="/assets/jms-logo.svg" alt="JM Sandberg" className="login-jms-logo" />
        <h1>Välkommen till {inv.tenant_name || "MarTech Portal"}</h1>
        <p className="lead">
          Du har bjudits in som <b>{roleLabel(inv.role)}</b>. Sätt ett lösenord för att komma igång.
        </p>

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

        <form onSubmit={submit}>
          <div className="field-row">
            <label className="field-label">Email</label>
            <input className="field" type="email" value={inv.email} disabled />
          </div>
          <div className="field-row">
            <label className="field-label">Ditt namn (valfritt)</label>
            <input
              className="field"
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              autoFocus
            />
          </div>
          <div className="field-row">
            <label className="field-label">Välj lösenord (minst 8 tecken)</label>
            <input
              className="field"
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              minLength={8}
            />
          </div>
          <button className="btn btn-primary" type="submit" disabled={busy}>
            {busy ? <span className="spinner" /> : null}
            {busy ? "Skapar konto…" : "Skapa konto och logga in"}
          </button>
        </form>
      </div>
    </div>
  );
};

function roleLabel(role) {
  return {
    super_admin: "super-admin",
    tenant_admin: "kund-admin",
    member: "medlem",
  }[role] || role;
}