// Login / Register page
const { useState: useStateLogin, useEffect: useEffectLogin, useRef: useRefLogin } = React;

// Sconto annuale — deve corrispondere a ANNUAL_DISCOUNT in stripe_service.py
const ANNUAL_DISCOUNT = 0.90;

const PLANS_META = [
  {
    id: "starter",
    name: "Starter",
    monthlyPrice: 19,
    properties: "1 struttura",
    features: ["Chatbot WhatsApp/Telegram", "100 messaggi per sessione", "Check-in PDF", "QR Code"],
  },
  {
    id: "pro",
    name: "Pro",
    monthlyPrice: 39,
    properties: "fino a 10 strutture",
    highlight: true,
    features: ["Tutto di Starter", "500 messaggi per sessione", "Check-in digitale OCR", "Supporto prioritario"],
  },
  {
    id: "business",
    name: "Business",
    monthlyPrice: 79,
    properties: "strutture illimitate",
    features: ["Tutto di Pro", "1.000 messaggi per sessione", "Account manager dedicato", "API access"],
  },
];

function fmtPrice(monthly, interval) {
  if (interval === "monthly") return `€${monthly}`;
  return `€${(monthly * ANNUAL_DISCOUNT).toFixed(2).replace(".00", "")}`;
}

function yearlySaving(monthly) {
  return Math.round(monthly * 12 * (1 - ANNUAL_DISCOUNT));
}

// Monta il form Stripe Embedded Checkout in un div interno dedicato.
// stripeCustomerId: se presente usa /auth/checkout-anon (registrazione), altrimenti /billing/checkout (host autenticato).
function EmbeddedCheckout({ planId, interval, stripeCustomerId }) {
  const mountRef = useRefLogin(null);
  const [error, setError] = useStateLogin(null);

  useEffectLogin(() => {
    if (!planId) return;
    let checkout = null;

    (async () => {
      try {
        const stripe = await window.API.getStripe();
        if (!stripe) { setError("Pagamenti non disponibili al momento."); return; }

        checkout = await stripe.initEmbeddedCheckout({
          fetchClientSecret: async () => {
            const data = stripeCustomerId
              ? await window.API.checkoutAnon(stripeCustomerId, planId, interval)
              : await window.API.createCheckout(planId, interval);
            return data.client_secret;
          },
        });
        if (mountRef.current) checkout.mount(mountRef.current);
      } catch (e) {
        setError(e.message || "Errore durante il caricamento del pagamento.");
      }
    })();

    return () => { if (checkout) checkout.destroy(); };
  }, [planId, interval, stripeCustomerId]);

  if (error) return (
    <div style={{ padding: 24, color: "var(--red-600)", fontSize: 13 }}>{error}</div>
  );
  return <div ref={mountRef} />;
}

function PlanSelectPage({ onLogin, heading, subtitle, stripeCustomerId, billingStatus }) {
  const [interval, setInterval] = useStateLogin("monthly");
  const [selectedPlan, setSelectedPlan] = useStateLogin(null);

  const selectPlan = (planId) => setSelectedPlan(planId);

  // Piano custom preassegnato dall'admin: mostra solo il CTA di attivazione
  const isCustomPlan = billingStatus?.plan_type === "custom";
  const assignedPlanId = billingStatus?.plan;
  const assignedPlanName = billingStatus?.plan_display_name;

  if (isCustomPlan && assignedPlanId) {
    const hasStripePrices = billingStatus?.has_stripe_prices === true;
    return (
      <div className="login-bg" style={{ minHeight: "100vh", justifyContent: "center" }}>
        <div style={{ marginBottom: 28 }}><Logo /></div>
        <div style={{ background: "white", borderRadius: 16, padding: "40px 48px", maxWidth: 440,
          boxShadow: "0 4px 24px rgba(0,0,0,.08)", textAlign: "center" }}>
          <h1 className="h1" style={{ fontSize: 22, marginBottom: 8 }}>Il tuo account è pronto</h1>
          <p className="muted" style={{ marginBottom: 24 }}>
            Hai il piano <strong>{assignedPlanName}</strong> preconfigurato per te.<br/>
            {hasStripePrices
              ? "Clicca qui sotto per completare l'attivazione e iniziare a usare Argo."
              : "Entra nel dashboard per iniziare a gestire le tue strutture."}
          </p>
          {hasStripePrices
            ? <EmbeddedCheckout planId={assignedPlanId} interval="monthly" />
            : (
              <button
                className="btn btn-primary"
                style={{ width: "100%", padding: "12px 16px" }}
                onClick={onLogin}
              >
                Entra nel dashboard
              </button>
            )
          }
        </div>
      </div>
    );
  }

  return (
    <div className="login-bg" style={{ alignItems: "flex-start", paddingTop: 48, minHeight: "100vh" }}>
      <div style={{ marginBottom: 28 }}><Logo /></div>

      <div style={{ textAlign: "center", marginBottom: 24 }}>
        <h1 className="h1" style={{ fontSize: 24, marginBottom: 8 }}>{heading || "Scegli il tuo piano"}</h1>
        <p className="muted">{subtitle || "Inizia subito — puoi cambiare piano in qualsiasi momento."}</p>
      </div>

      {/* Toggle mensile / annuale */}
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 28,
        background: "white", borderRadius: 99, padding: "4px 6px", boxShadow: "0 1px 6px rgba(0,0,0,.08)" }}>
        {["monthly", "yearly"].map(iv => (
          <button key={iv} onClick={() => { setInterval(iv); setSelectedPlan(null); }}
            style={{
              padding: "6px 18px", borderRadius: 99, border: "none", cursor: "pointer", fontSize: 13, fontWeight: 500,
              background: interval === iv ? "var(--green-600)" : "transparent",
              color: interval === iv ? "white" : "var(--gray-500)",
              transition: "all .15s",
            }}>
            {iv === "monthly" ? "Mensile" : "Annuale"}
            {iv === "yearly" && (
              <span style={{ marginLeft: 6, fontSize: 11, fontWeight: 600,
                background: interval === "yearly" ? "rgba(255,255,255,.25)" : "var(--green-50)",
                color: interval === "yearly" ? "white" : "var(--green-700)",
                borderRadius: 99, padding: "1px 7px" }}>
                −10%
              </span>
            )}
          </button>
        ))}
      </div>

      {/* Layout: cards a sinistra, checkout a destra */}
      <div style={{ display: "flex", gap: 24, alignItems: "flex-start", maxWidth: 1060, width: "100%" }}>

        {/* Colonna sinistra: plan cards */}
        <div style={{ display: "flex", flexDirection: "column", gap: 12, flex: "0 0 auto" }}>
          {PLANS_META.map(p => {
            const isSelected = selectedPlan === p.id;
            return (
              <div key={p.id} onClick={() => selectPlan(p.id)} style={{
                background: "white",
                borderRadius: 12,
                padding: "20px",
                width: 280,
                boxShadow: isSelected
                  ? "0 0 0 2px var(--green-600), 0 8px 24px rgba(0,0,0,.08)"
                  : p.highlight && !selectedPlan
                    ? "0 0 0 2px var(--green-600), 0 8px 24px rgba(0,0,0,.08)"
                    : "0 2px 12px rgba(0,0,0,.06)",
                display: "flex", gap: 14, cursor: "pointer",
                position: "relative",
                transition: "box-shadow .15s",
              }}>
                {p.highlight && !selectedPlan && (
                  <div style={{ position: "absolute", top: -12, left: "50%", transform: "translateX(-50%)",
                    background: "var(--green-600)", color: "white", borderRadius: 99, padding: "2px 12px",
                    fontSize: 11, fontWeight: 600, whiteSpace: "nowrap" }}>
                    Più popolare
                  </div>
                )}
                {/* Radio */}
                <div style={{ width: 18, height: 18, borderRadius: "50%", flexShrink: 0, marginTop: 2,
                  border: `2px solid ${isSelected ? "var(--green-600)" : "var(--gray-300)"}`,
                  background: isSelected ? "var(--green-600)" : "white",
                  display: "flex", alignItems: "center", justifyContent: "center" }}>
                  {isSelected && <div style={{ width: 6, height: 6, borderRadius: "50%", background: "white" }} />}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                    <span style={{ fontWeight: 700, fontSize: 15 }}>{p.name}</span>
                    <span style={{ fontSize: 20, fontWeight: 700 }}>
                      {fmtPrice(p.monthlyPrice, interval)}
                      <span style={{ fontSize: 12, fontWeight: 400, color: "var(--gray-400)" }}>/mese</span>
                    </span>
                  </div>
                  <div style={{ fontSize: 11, color: "var(--gray-400)", marginBottom: 6 }}>
                    {p.properties}
                    {interval === "yearly" && (
                      <span style={{ marginLeft: 8, color: "var(--green-700)", fontWeight: 600 }}>
                        Risparmi €{yearlySaving(p.monthlyPrice)}/anno
                      </span>
                    )}
                  </div>
                  <ul style={{ margin: 0, padding: "0 0 0 14px", display: "flex", flexDirection: "column", gap: 2 }}>
                    {p.features.map(f => <li key={f} style={{ fontSize: 12, color: "var(--gray-600)" }}>{f}</li>)}
                  </ul>
                </div>
              </div>
            );
          })}
        </div>

        {/* Colonna destra: Stripe Embedded Checkout */}
        <div style={{
          flex: 1,
          minWidth: 0,
          background: "white",
          borderRadius: 12,
          boxShadow: "0 2px 12px rgba(0,0,0,.06)",
          overflow: "hidden",
          opacity: selectedPlan ? 1 : 0,
          transform: selectedPlan ? "translateX(0)" : "translateX(20px)",
          transition: "opacity .2s, transform .2s",
          pointerEvents: selectedPlan ? "auto" : "none",
          minHeight: 400,
        }}>
          {selectedPlan && (
            <>
              <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--gray-100)" }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: "var(--gray-700)" }}>
                  Piano {PLANS_META.find(p => p.id === selectedPlan)?.name} · {interval === "monthly" ? "fatturazione mensile" : "fatturazione annuale"}
                </div>
              </div>
              <div style={{ padding: 4 }}>
                <EmbeddedCheckout planId={selectedPlan} interval={interval} stripeCustomerId={stripeCustomerId} />
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

function LoginPage({ onLogin, resetToken }) {
  const registrationSuccess = new URLSearchParams(window.location.search).get("registration_success") === "true";
  const initialMode = resetToken ? "reset" : "signin";
  const [mode, setMode] = useStateLogin(initialMode);
  const [email, setEmail] = useStateLogin("");
  const [password, setPassword] = useStateLogin("");
  const [name, setName] = useStateLogin("");
  const [loading, setLoading] = useStateLogin(false);
  const [error, setError] = useStateLogin(null);
  const [success, setSuccess] = useStateLogin(registrationSuccess
    ? "Account attivato! Accedi con le tue credenziali per iniziare."
    : null
  );
  // stripeCustomerId è impostato dopo la prima fase della registrazione
  const [pendingStripeCustomerId, setPendingStripeCustomerId] = useStateLogin(null);

  const switchMode = (m) => { setMode(m); setError(null); setSuccess(null); };

  if (pendingStripeCustomerId) {
    return (
      <PlanSelectPage
        onLogin={onLogin}
        heading="Scegli il tuo piano"
        subtitle="Completa l'iscrizione scegliendo un piano. Potrai cambiarlo in qualsiasi momento."
        stripeCustomerId={pendingStripeCustomerId}
      />
    );
  }

  const submit = async (e) => {
    e.preventDefault();
    setError(null);
    setSuccess(null);
    setLoading(true);
    try {
      if (mode === "signin") {
        await window.API.login(email, password);
        onLogin();
      } else if (mode === "signup") {
        // Fase 1: valida + crea customer Stripe + salva in Redis
        const res = await window.API.register(email, password, name);
        // Fase 2: mostra selezione piano con checkout anonimo
        setPendingStripeCustomerId(res.stripe_customer_id);
      } else if (mode === "forgot") {
        const res = await window.API.forgotPassword(email);
        setSuccess(res.detail);
      } else if (mode === "reset") {
        await window.API.resetPassword(resetToken, password);
        setSuccess("Password aggiornata! Puoi accedere con le nuove credenziali.");
        setTimeout(() => switchMode("signin"), 2000);
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const isSignIn = mode === "signin";

  return (
    <div className="login-bg">
      <div style={{ marginBottom: 28 }}>
        <Logo />
      </div>

      <div className="login-card">
        {/* Tabs signin/signup — nascosti in forgot e reset */}
        {(mode === "signin" || mode === "signup") && (
          <div className="login-switch">
            <div
              className="login-switch-indicator"
              style={{ transform: isSignIn ? "translateX(0)" : "translateX(100%)" }}
            />
            <button className={isSignIn ? "active" : ""} onClick={() => switchMode("signin")} type="button">
              Accedi
            </button>
            <button className={!isSignIn ? "active" : ""} onClick={() => switchMode("signup")} type="button">
              Crea account
            </button>
          </div>
        )}

        <div style={{ marginBottom: 24 }}>
          <h1 className="h1" style={{ fontSize: 22, marginBottom: 6 }}>
            {mode === "signin" && "Bentornato"}
            {mode === "signup" && "Inizia con Argo"}
            {mode === "forgot" && "Password dimenticata"}
            {mode === "reset" && "Scegli una nuova password"}
          </h1>
          <p className="muted" style={{ margin: 0 }}>
            {mode === "signin" && "Accedi per gestire le tue strutture e il chatbot."}
            {mode === "signup" && "Crea il tuo account e imposta il chatbot in pochi minuti."}
            {mode === "forgot" && "Inserisci la tua email e ti invieremo un link per reimpostare la password."}
            {mode === "reset" && "Scegli una password sicura di almeno 8 caratteri."}
          </p>
        </div>

        <form onSubmit={submit} className="stack-16">
          {mode === "signup" && (
            <div>
              <label className="field-label">Nome e cognome</label>
              <input className="input" type="text" value={name} onChange={e => setName(e.target.value)}
                placeholder="Marco Rossi" required />
            </div>
          )}

          {(mode === "signin" || mode === "signup" || mode === "forgot") && (
            <div>
              <label className="field-label">Email</label>
              <input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)}
                placeholder="tu@struttura.it" required />
            </div>
          )}

          {(mode === "signin" || mode === "signup" || mode === "reset") && (
            <div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <label className="field-label">
                  {mode === "reset" ? "Nuova password" : "Password"}
                </label>
                {mode === "signin" && (
                  <button type="button" onClick={() => switchMode("forgot")}
                    style={{ fontSize: 12, color: "var(--green-700)", fontWeight: 500,
                             background: "none", border: "none", cursor: "pointer", padding: 0 }}>
                    Password dimenticata?
                  </button>
                )}
              </div>
              <input className="input" type="password" value={password} onChange={e => setPassword(e.target.value)}
                placeholder={mode === "signin" ? "••••••••" : "Almeno 8 caratteri"} required />
            </div>
          )}

          {error && (
            <div style={{ padding: "10px 14px", background: "var(--red-50)", color: "var(--red-600)",
              borderRadius: "var(--radius-sm)", fontSize: 13, border: "1px solid var(--red-200)" }}>
              {error}
            </div>
          )}

          {success && (
            <div style={{ padding: "10px 14px", background: "var(--green-50)", color: "var(--green-700)",
              borderRadius: "var(--radius-sm)", fontSize: 13, border: "1px solid var(--green-200)" }}>
              {success}
            </div>
          )}

          {(!success || mode === "signin") && (
            <button type="submit" className="btn btn-primary"
              style={{ width: "100%", padding: "12px 16px", marginTop: 8 }} disabled={loading}>
              {loading ? "Attendi…"
                : mode === "signin" ? "Accedi"
                : mode === "signup" ? "Crea account"
                : mode === "forgot" ? "Invia link"
                : "Aggiorna password"}
            </button>
          )}
        </form>

        {(mode === "forgot" || mode === "reset") && !success && (
          <p style={{ textAlign: "center", marginTop: 16 }}>
            <button type="button" onClick={() => switchMode("signin")}
              style={{ fontSize: 13, color: "var(--gray-500)", background: "none",
                       border: "none", cursor: "pointer" }}>
              ← Torna al login
            </button>
          </p>
        )}

        {mode === "signup" && (
          <p className="mini" style={{ textAlign: "center", marginTop: 20, lineHeight: 1.5 }}>
            Creando un account accetti i <a href="#" style={{ color: "var(--green-700)" }}>Termini</a> e la{" "}
            <a href="#" style={{ color: "var(--green-700)" }}>Privacy policy</a>.
          </p>
        )}
      </div>
    </div>
  );
}

window.LoginPage = LoginPage;

// ---------------------------------------------------------------------------
// ForceChangePasswordPage — mostrata all'host dopo il primo login con password temporanea
// ---------------------------------------------------------------------------

function ForceChangePasswordPage({ onDone, onLogout }) {
  const [currentPw, setCurrentPw] = useStateLogin("");
  const [newPw, setNewPw] = useStateLogin("");
  const [confirmPw, setConfirmPw] = useStateLogin("");
  const [loading, setLoading] = useStateLogin(false);
  const [error, setError] = useStateLogin(null);

  const submit = async (e) => {
    e.preventDefault();
    setError(null);
    if (newPw.length < 8) {
      setError("La nuova password deve essere di almeno 8 caratteri.");
      return;
    }
    if (newPw !== confirmPw) {
      setError("Le due password non coincidono.");
      return;
    }
    setLoading(true);
    try {
      await window.API.changePassword(currentPw, newPw);
      onDone();
    } catch (err) {
      setError(err.message || "Errore durante il cambio password. Riprova.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-bg">
      <div style={{ marginBottom: 28 }}><Logo /></div>
      <div className="login-card">
        <div style={{ marginBottom: 24 }}>
          <h1 className="h1" style={{ fontSize: 22, marginBottom: 6 }}>Imposta la tua password</h1>
          <p className="muted" style={{ margin: 0 }}>
            Il tuo account è stato creato dall'amministratore con una password temporanea.<br />
            Scegli una password personale per continuare.
          </p>
        </div>

        <form onSubmit={submit} className="stack-16">
          <div>
            <label className="field-label">Password temporanea (ricevuta via email)</label>
            <input
              className="input"
              type="password"
              value={currentPw}
              onChange={e => setCurrentPw(e.target.value)}
              placeholder="••••••••"
              required
              autoComplete="current-password"
            />
          </div>
          <div>
            <label className="field-label">Nuova password</label>
            <input
              className="input"
              type="password"
              value={newPw}
              onChange={e => setNewPw(e.target.value)}
              placeholder="Almeno 8 caratteri"
              required
              autoComplete="new-password"
            />
          </div>
          <div>
            <label className="field-label">Conferma nuova password</label>
            <input
              className="input"
              type="password"
              value={confirmPw}
              onChange={e => setConfirmPw(e.target.value)}
              placeholder="Ripeti la password"
              required
              autoComplete="new-password"
            />
          </div>

          {error && (
            <div style={{ padding: "10px 14px", background: "var(--red-50)", color: "var(--red-600)",
              borderRadius: "var(--radius-sm)", fontSize: 13, border: "1px solid var(--red-200)" }}>
              {error}
            </div>
          )}

          <button
            type="submit"
            className="btn btn-primary"
            style={{ width: "100%", padding: "12px 16px", marginTop: 8 }}
            disabled={loading}
          >
            {loading ? "Salvataggio…" : "Salva e accedi →"}
          </button>
        </form>
      </div>

      <button
        onClick={onLogout}
        style={{ marginTop: 20, fontSize: 12, color: "var(--gray-400)", background: "none", border: "none", cursor: "pointer" }}
      >
        Esci
      </button>
    </div>
  );
}

window.ForceChangePasswordPage = ForceChangePasswordPage;