// Aria console — landing pubblica di un invito (?invite=<token>).
// Il token nell'URL è la capability: la pagina mostra organizzazione e ruolo
// proposti e offre la strada giusta: registrazione (account nuovo), login e
// accettazione (account esistente), o accettazione diretta se già loggati.
// Al successo i token emessi dal backend entrano in sessione e si riparte
// sulla console con la nuova organizzazione attiva.
const { Icon, TextField, Button, Banner, Badge } = window.AriaDesignSystem_af77ab;

const INVITE_ROLE_LABEL = { viewer: "Viewer", editor: "Editor", manager: "Manager", admin: "Admin" };

function inviteDone(tokens) {
  if (tokens) window.AriaAuth.setTokens(tokens);
  // Ricarica pulita senza query string: la console riparte con la sessione nuova.
  window.location.replace(window.location.pathname);
}

function InviteCard({ children }) {
  return (
    <div style={{ minHeight: "100vh", background: "var(--surface-app)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
      <div style={{ width: "100%", maxWidth: 420 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 22, justifyContent: "center" }}>
          <span style={{ width: 36, height: 36, borderRadius: 10, background: "var(--primary)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
            <Icon name="mail-open" size={20} color="#fff" strokeWidth={1.75} />
          </span>
          <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.1 }}>
            <span style={{ font: "var(--fw-semibold) 19px/1 var(--font-sans)", color: "var(--text-strong)", letterSpacing: "-0.01em" }}>Aria</span>
            <span style={{ fontSize: 12, color: "var(--text-subtle)" }}>Invito</span>
          </span>
        </div>
        <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-sm)", padding: 28, display: "flex", flexDirection: "column", gap: 16 }}>
          {children}
        </div>
      </div>
    </div>
  );
}

function InviteScreen({ token }) {
  const { user, isAuthenticated, signIn, signOut } = window.AriaAuth.useAuth();
  const [invite, setInvite] = React.useState(null);   // esito di GET /invites/:token
  const [mode, setMode] = React.useState(null);       // 'register' | 'login' (per i non loggati)
  const [username, setUsername] = React.useState("");
  const [displayName, setDisplayName] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [error, setError] = React.useState(null);
  const [busy, setBusy] = React.useState(false);

  React.useEffect(() => {
    let alive = true;
    window.AriaData.getInvite(token).then(
      (res) => {
        if (!alive) return;
        setInvite(res);
        // Un invito di PIATTAFORMA (organization null) crea sempre un account
        // nuovo: la strada del login non si applica.
        if (res.ok) setMode(res.organization == null ? "register" : (res.existingUser ? "login" : "register"));
      },
      () => { if (alive) setInvite({ ok: false, error: "Errore inatteso." }); }
    );
    return () => { alive = false; };
  }, [token]);

  async function doRegister(e) {
    e.preventDefault();
    setError(null); setBusy(true);
    try {
      const res = await window.AriaData.registerInvite(token, { username: username.trim(), displayName: displayName.trim(), password });
      if (res.ok) inviteDone(res.tokens);
      else setError(res.error);
    } finally { setBusy(false); }
  }

  async function doLoginAndAccept(e) {
    e.preventDefault();
    setError(null); setBusy(true);
    try {
      await signIn(username.trim(), password); // 401 → catch sotto
      const res = await window.AriaData.acceptInvite(token);
      if (res.ok) inviteDone(res.tokens);
      else setError(res.error);
    } catch (err) {
      setError(err && err.code === 401 ? "Credenziali non valide" : (err && err.message) || "Accesso non riuscito");
    } finally { setBusy(false); }
  }

  async function doAcceptLogged() {
    setError(null); setBusy(true);
    try {
      const res = await window.AriaData.acceptInvite(token);
      if (res.ok) inviteDone(res.tokens);
      else setError(res.error);
    } finally { setBusy(false); }
  }

  if (invite === null) {
    return (
      <InviteCard>
        <span style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--text-muted)", fontSize: 14 }}>
          <Icon name="loader" size={16} color="var(--text-subtle)" /> Verifica dell'invito…
        </span>
      </InviteCard>
    );
  }
  if (!invite.ok || invite.expired || invite.accepted) {
    const msg = !invite.ok ? invite.error
      : invite.expired ? "L'invito è scaduto: chiedi a chi ti ha invitato di crearne uno nuovo."
      : "L'invito è già stato utilizzato.";
    return (
      <InviteCard>
        <Banner tone="danger" title="Invito non utilizzabile" icon="alert-circle">{msg}</Banner>
        <Button variant="secondary" onClick={() => window.location.replace(window.location.pathname)}>Vai alla console</Button>
      </InviteCard>
    );
  }

  const platformInvite = invite.organization == null;
  const header = (
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span style={{ font: "var(--text-h2)", color: "var(--text-strong)" }}>
        {platformInvite ? "Sei stato invitato su Aria" : `Invito a «${invite.organization.name}»`}
      </span>
      <span style={{ fontSize: 13, color: "var(--text-muted)", display: "flex", alignItems: "center", gap: 6 }}>
        {platformInvite
          ? <span>Registrandoti potrai <b>creare la tua organizzazione</b> · invito per {invite.email}</span>
          : <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>Entrerai come <Badge tone="info">{INVITE_ROLE_LABEL[invite.role] || invite.role}</Badge> · invito per {invite.email}</span>}
      </span>
    </div>
  );

  // Un invito di piattaforma con una sessione aperta: serve un account NUOVO.
  if (isAuthenticated && platformInvite) {
    return (
      <InviteCard>
        {header}
        <Banner tone="info" icon="info">
          Questo invito crea un <b>nuovo account</b>, ma sei connesso come <b>{user.username}</b>. Esci per registrarti, oppure chiedi all'amministratore di alzare il limite del tuo account.
        </Banner>
        <Button variant="secondary" onClick={() => signOut()}>Esci e registrati</Button>
      </InviteCard>
    );
  }

  // Già loggati: accettazione diretta con l'account corrente.
  if (isAuthenticated) {
    return (
      <InviteCard>
        {header}
        {error && <Banner tone="danger">{error}</Banner>}
        <span style={{ fontSize: 13, color: "var(--text-muted)" }}>Sei connesso come <b>{user.username}</b>: l'organizzazione verrà aggiunta a questo account.</span>
        <Button variant="primary" disabled={busy} iconLeft={busy ? <Icon name="loader" size={16} color="#fff" /> : <Icon name="check" size={16} color="#fff" />} onClick={doAcceptLogged}>
          Accetta l'invito
        </Button>
      </InviteCard>
    );
  }

  return (
    <InviteCard>
      {header}
      {error && <Banner tone="danger">{error}</Banner>}
      {mode === "register" ? (
        <form onSubmit={doRegister} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <TextField label="Nome utente" required value={username} hint="3-32 caratteri: minuscole, numeri e . _ -" onChange={(e) => setUsername(e.target.value)} />
          <TextField label="Nome visualizzato" optional value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
          <TextField label="Password" required type="password" value={password} hint="Almeno 8 caratteri." onChange={(e) => setPassword(e.target.value)} />
          <Button variant="primary" type="submit" disabled={busy || username.trim() === "" || password === ""}
            iconLeft={busy ? <Icon name="loader" size={16} color="#fff" /> : undefined}>
            Registrati e accetta
          </Button>
          {!platformInvite && <Button variant="ghost" size="sm" type="button" onClick={() => { setError(null); setMode("login"); }}>Ho già un account: accedi</Button>}
        </form>
      ) : (
        <form onSubmit={doLoginAndAccept} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <TextField label="Nome utente" required value={username} onChange={(e) => setUsername(e.target.value)} />
          <TextField label="Password" required type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
          <Button variant="primary" type="submit" disabled={busy || username.trim() === "" || password === ""}
            iconLeft={busy ? <Icon name="loader" size={16} color="#fff" /> : undefined}>
            Accedi e accetta
          </Button>
          <Button variant="ghost" size="sm" type="button" onClick={() => { setError(null); setMode("register"); }}>Non ho un account: registrati</Button>
        </form>
      )}
    </InviteCard>
  );
}

Object.assign(window, { InviteScreen });