// auth.jsx — sign-in / sign-up and the e-mail verification round trip.
// Loaded from index.html as an ordered `text/babel` classic script (position 4 of 8).
// Classic scripts share one global scope — see docs/engineering/Patterns.md §9.

// ─── Auth Pages ──────────────────────────────────────────────────────────────
function AuthPage({ mode }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [fullName, setFullName] = useState("");
  const [company, setCompany] = useState("");
  const [addressLine1, setAddressLine1] = useState("");
  const [city, setCity] = useState("");
  const [postalCode, setPostalCode] = useState("");
  const [country, setCountry] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const isRegister = mode === "register";
  const params = new URLSearchParams(window.location.hash.split("?")[1] || "");
  const selectedPlan = params.get("plan") || "business";

  const handleSubmit = async () => {
    if (isRegister) return; // Sign-ups are disabled in the UI.
    setError("");
    setLoading(true);
    try {
      const endpoint = isRegister ? "/auth/register" : "/auth/login";
      const body = isRegister
        ? { email, password, full_name: fullName, company_name: company, address_line1: addressLine1, city, postal_code: postalCode, country, plan: selectedPlan }
        : { email, password };
      const data = await apiCall(endpoint, {
        method: "POST",
        body: JSON.stringify(body),
      });
      if (isRegister && (data.status === "verification_required" || data.status === "verification_unavailable")) {
        const delivery = data.status === "verification_unavailable" ? "&delivery=unavailable" : "";
        window.location.hash = `#/check-email?email=${encodeURIComponent(data.email || email)}${delivery}`;
        return;
      }
      if (!data.token) throw new Error("Authentication response did not include a token");
      localStorage.setItem("zs_token", data.token);
      window.location.hash = "#/dashboard";
    } catch (e) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div
      style={{
        fontFamily: "'DM Sans', sans-serif",
        minHeight: "100vh",
        display: "flex",
        background: "#fafafa",
      }}
    >
      {/* Left panel */}
      <div
        style={{
          flex: 1,
          background: "#0a0a0a",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          padding: 48,
          minHeight: "100vh",
        }}
      >
        <div style={{ maxWidth: 360 }}>
          <Logo light />
          <h2
            style={{
              color: "#fff",
              fontSize: 28,
              fontWeight: 700,
              marginTop: 40,
              marginBottom: 12,
              letterSpacing: "-0.02em",
            }}
          >
            {isRegister ? "Get started in minutes" : "Welcome back"}
          </h2>
          <p style={{ color: "#888", lineHeight: 1.6, fontSize: 14 }}>
            {isRegister
              ? "Create your account, choose a plan, and your MDM server will be provisioned automatically. Takes less than 60 seconds."
              : "Sign in to manage your instances and monitor your device fleet."}
          </p>

          <div
            style={{
              marginTop: 48,
              padding: 24,
              background: "#111",
              borderRadius: 12,
              border: "1px solid #222",
            }}
          >
            <div
              style={{
                display: "flex",
                gap: 12,
                marginBottom: 16,
                alignItems: "center",
              }}
            >
              <div
                style={{
                  width: 32,
                  height: 32,
                  background: "#22c55e20",
                  borderRadius: 8,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <span style={{ color: "#22c55e" }}>✓</span>
              </div>
              <div>
                <div style={{ color: "#fff", fontSize: 13, fontWeight: 600 }}>
                  Instant provisioning
                </div>
                <div style={{ color: "#888", fontSize: 12 }}>
                  Server live within 60 seconds
                </div>
              </div>
            </div>
            <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
              <div
                style={{
                  width: 32,
                  height: 32,
                  background: "#22c55e20",
                  borderRadius: 8,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <span style={{ color: "#22c55e" }}>✓</span>
              </div>
              <div>
                <div style={{ color: "#fff", fontSize: 13, fontWeight: 600 }}>
                  14-day free trial
                </div>
                <div style={{ color: "#888", fontSize: 12 }}>
                  No credit card required
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Right panel — form */}
      <div
        style={{
          flex: 1,
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          padding: 48,
        }}
      >
        <div style={{ width: "100%", maxWidth: 380 }}>
          <h3
            style={{
              fontSize: 24,
              fontWeight: 700,
              marginBottom: 32,
              letterSpacing: "-0.01em",
            }}
          >
            {isRegister ? "Create your account" : "Sign in"}
          </h3>

          {error && (
            <div
              style={{
                background: "#fef2f2",
                border: "1px solid #fecaca",
                color: "#dc2626",
                padding: "12px 16px",
                borderRadius: 8,
                fontSize: 13,
                marginBottom: 16,
              }}
            >
              {error}
            </div>
          )}

          {isRegister && (
            <Input
              label="Full name"
              placeholder="Jane Smith"
              value={fullName}
              onChange={(e) => setFullName(e.target.value)}
            />
          )}
          {isRegister && (
            <Input
              label="Company name"
              placeholder="Acme Inc."
              value={company}
              onChange={(e) => setCompany(e.target.value)}
            />
          )}
          <Input
            label="Email"
            type="email"
            placeholder="you@company.com"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <Input
            label="Password"
            type="password"
            placeholder={isRegister ? "Min. 8 characters" : ""}
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
          />
          {isRegister && (
            <>
              <Input
                label="Address"
                placeholder="123 Main Street"
                value={addressLine1}
                onChange={(e) => setAddressLine1(e.target.value)}
              />
              <div style={{ display: "flex", gap: 12 }}>
                <div style={{ flex: 1 }}>
                  <Input
                    label="City"
                    placeholder="San Francisco"
                    value={city}
                    onChange={(e) => setCity(e.target.value)}
                  />
                </div>
                <div style={{ flex: 1 }}>
                  <Input
                    label="Postal code"
                    placeholder="94102"
                    value={postalCode}
                    onChange={(e) => setPostalCode(e.target.value)}
                  />
                </div>
              </div>
              <div style={{ marginBottom: 16 }}>
                <label htmlFor="register-country" style={{ display: "block", fontSize: 13, fontWeight: 500, marginBottom: 6, color: "#333" }}>Country</label>
                <select
                  id="register-country"
                  value={country}
                  onChange={(e) => setCountry(e.target.value)}
                  style={{
                    width: "100%",
                    padding: "10px 12px",
                    border: "1px solid #e2e2e2",
                    borderRadius: 8,
                    fontSize: 14,
                    fontFamily: "'DM Sans', sans-serif",
                    background: "#fff",
                    color: "#333",
                    appearance: "auto",
                  }}
                >
                  <option value="">Select country…</option>
                  <option value="US">United States</option>
                  <option value="GB">United Kingdom</option>
                  <option value="CA">Canada</option>
                  <option value="AU">Australia</option>
                  <option value="DE">Germany</option>
                  <option value="FR">France</option>
                  <option value="NL">Netherlands</option>
                  <option value="BE">Belgium</option>
                  <option value="AT">Austria</option>
                  <option value="CH">Switzerland</option>
                  <option value="SE">Sweden</option>
                  <option value="NO">Norway</option>
                  <option value="DK">Denmark</option>
                  <option value="FI">Finland</option>
                  <option value="IE">Ireland</option>
                  <option value="ES">Spain</option>
                  <option value="IT">Italy</option>
                  <option value="PT">Portugal</option>
                  <option value="PL">Poland</option>
                  <option value="CZ">Czech Republic</option>
                  <option value="JP">Japan</option>
                  <option value="KR">South Korea</option>
                  <option value="SG">Singapore</option>
                  <option value="HK">Hong Kong</option>
                  <option value="NZ">New Zealand</option>
                  <option value="IN">India</option>
                  <option value="BR">Brazil</option>
                  <option value="MX">Mexico</option>
                  <option value="ZA">South Africa</option>
                  <option value="AE">United Arab Emirates</option>
                  <option value="SA">Saudi Arabia</option>
                  <option value="IL">Israel</option>
                  <option value="RO">Romania</option>
                  <option value="BG">Bulgaria</option>
                  <option value="HR">Croatia</option>
                  <option value="LT">Lithuania</option>
                  <option value="LV">Latvia</option>
                  <option value="EE">Estonia</option>
                  <option value="LU">Luxembourg</option>
                  <option value="MT">Malta</option>
                  <option value="CY">Cyprus</option>
                  <option value="SK">Slovakia</option>
                  <option value="SI">Slovenia</option>
                  <option value="HU">Hungary</option>
                  <option value="GR">Greece</option>
                  <option value="IS">Iceland</option>
                  <option value="TW">Taiwan</option>
                  <option value="TH">Thailand</option>
                  <option value="MY">Malaysia</option>
                  <option value="PH">Philippines</option>
                  <option value="ID">Indonesia</option>
                  <option value="VN">Vietnam</option>
                  <option value="CL">Chile</option>
                  <option value="CO">Colombia</option>
                  <option value="AR">Argentina</option>
                  <option value="PE">Peru</option>
                  <option value="NG">Nigeria</option>
                  <option value="KE">Kenya</option>
                  <option value="EG">Egypt</option>
                  <option value="TR">Turkey</option>
                  <option value="PK">Pakistan</option>
                  <option value="BD">Bangladesh</option>
                  <option value="UA">Ukraine</option>
                  <option value="RS">Serbia</option>
                </select>
              </div>
            </>
          )}

          {isRegister && (
            <div
              style={{
                marginBottom: 20,
                padding: "12px 16px",
                background: "#f0fdf4",
                border: "1px solid #bbf7d0",
                borderRadius: 8,
                fontSize: 13,
                color: "#166534",
              }}
            >
              Selected plan:{" "}
              <strong>
                {PLANS.find((p) => p.id === selectedPlan)?.name || "Business"}
              </strong>{" "}
              — 14-day free trial included
            </div>
          )}

          <Button
            size="lg"
            style={{
              width: "100%",
              justifyContent: "center",
              opacity: isRegister ? 0.45 : loading ? 0.7 : 1,
              cursor: isRegister ? "not-allowed" : undefined,
            }}
            onClick={handleSubmit}
            disabled={loading || isRegister}
            aria-disabled={isRegister ? "true" : undefined}
          >
            {loading
              ? "Please wait…"
              : isRegister
              ? "Create account"
              : "Sign in"}
          </Button>
          {isRegister && (
            <p style={{ textAlign: "center", marginTop: 10, fontSize: 13, fontWeight: 500, color: "#6e6e6e" }}>
              Signups are disabled currently
            </p>
          )}

          <p
            style={{
              textAlign: "center",
              marginTop: 24,
              fontSize: 13,
              color: "#6e6e6e",
            }}
          >
            {isRegister ? (
              <>
                Already have an account?{" "}
                <a
                  href="#/login"
                  style={{ color: "#22c55e", textDecoration: "none" }}
                >
                  Sign in
                </a>
              </>
            ) : (
              <>
                Don't have an account?{" "}
                <span style={{ fontWeight: 500 }}>Signups are disabled currently</span>
                <br />
                <a
                  href={`#/check-email?email=${encodeURIComponent(email)}`}
                  style={{ color: "#22c55e", textDecoration: "none" }}
                >
                  Resend verification email
                </a>
              </>
            )}
          </p>
        </div>
      </div>
    </div>
  );
}

function CheckEmailPage() {
  const params = new URLSearchParams(window.location.hash.split("?")[1] || "");
  const email = params.get("email") || "";
  const [deliveryUnavailable, setDeliveryUnavailable] = useState(params.get("delivery") === "unavailable");
  const [message, setMessage] = useState({ text: "", error: false });
  const [loading, setLoading] = useState(false);

  const resend = async () => {
    if (!email) return;
    setLoading(true);
    setMessage({ text: "", error: false });
    try {
      const data = await apiCall("/auth/resend-verification", {
        method: "POST",
        body: JSON.stringify({ email }),
      });
      setDeliveryUnavailable(false);
      setMessage({ text: data.message, error: false });
    } catch (e) {
      setMessage({ text: e.message, error: true });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ minHeight: "100vh", display: "grid", placeItems: "center", background: "#fafafa", fontFamily: "'DM Sans', sans-serif", padding: 24 }}>
      <div style={{ width: "100%", maxWidth: 460, background: "#fff", border: "1px solid #e5e5e5", borderRadius: 16, padding: 40, textAlign: "center" }}>
        <Logo />
        <h2 style={{ marginTop: 32, marginBottom: 12, fontSize: 26 }}>
          {deliveryUnavailable ? "Verification temporarily unavailable" : "Check your email"}
        </h2>
        <p style={{ color: deliveryUnavailable ? "#b45309" : "#666", lineHeight: 1.6, marginBottom: 24 }}>
          {deliveryUnavailable ? (
            "Your account was created, but verification email delivery is temporarily unavailable. Try again later or contact support."
          ) : (
            <>We sent a verification link to <strong style={{ color: "#222" }}>{email || "your email address"}</strong>. Your MDM server will be provisioned after you verify your address.</>
          )}
        </p>
        {message.text && <p style={{ color: message.error ? "#dc2626" : "#166534", fontSize: 13, marginBottom: 16 }}>{message.text}</p>}
        <Button onClick={resend} disabled={loading || !email} style={{ width: "100%", justifyContent: "center" }}>
          {loading ? "Sending…" : deliveryUnavailable ? "Try sending verification email" : "Resend verification email"}
        </Button>
        <a href="#/login" style={{ display: "inline-block", marginTop: 20, color: "#22c55e", fontSize: 13, textDecoration: "none" }}>
          Back to sign in
        </a>
      </div>
    </div>
  );
}

function VerifyEmailPage() {
  const params = new URLSearchParams(window.location.hash.split("?")[1] || "");
  const token = params.get("token") || "";
  const [state, setState] = useState({ status: "verifying", error: "", warning: "" });

  useEffect(() => {
    if (!token) {
      setState({ status: "error", error: "The verification link is missing its token.", warning: "" });
      return;
    }
    let active = true;
    apiCall(`/auth/verify-email?token=${encodeURIComponent(token)}`)
      .then((data) => {
        if (!active) return;
        if (!data.token) throw new Error("Verification response did not include a token");
        localStorage.setItem("zs_token", data.token);
        setState({ status: "verified", error: "", warning: data.provisioning_error || "" });
      })
      .catch((error) => {
        if (active) setState({ status: "error", error: error.message, warning: "" });
      });
    return () => { active = false; };
  }, [token]);

  const verified = state.status === "verified";
  return (
    <div style={{ minHeight: "100vh", display: "grid", placeItems: "center", background: "#fafafa", fontFamily: "'DM Sans', sans-serif", padding: 24 }}>
      <div style={{ width: "100%", maxWidth: 460, background: "#fff", border: "1px solid #e5e5e5", borderRadius: 16, padding: 40, textAlign: "center" }}>
        <Logo />
        <h2 style={{ marginTop: 32, marginBottom: 12, fontSize: 26 }}>
          {state.status === "verifying" ? "Verifying your email…" : verified ? "Email verified" : "Verification failed"}
        </h2>
        <p style={{ color: state.status === "error" ? "#dc2626" : state.warning ? "#b45309" : "#666", lineHeight: 1.6, marginBottom: 24 }}>
          {state.status === "verifying"
            ? "Please wait while we activate your account."
            : verified
            ? state.warning || "Your account is active and your MDM server is being provisioned."
            : state.error}
        </p>
        {verified ? (
          <Button onClick={() => { window.location.hash = "#/dashboard"; }} style={{ width: "100%", justifyContent: "center" }}>
            Continue to dashboard
          </Button>
        ) : state.status === "error" ? (
          <a href="#/login" style={{ color: "#22c55e", fontSize: 13, textDecoration: "none" }}>Back to sign in</a>
        ) : null}
      </div>
    </div>
  );
}