/* global React, AuthHeader, SsoButton, GhostButton, LegalDisclaimer, BottomSheetModal, GoogleAuthSheet, AppleAuthSheet, TERMS_BODY, PRIVACY_BODY */
// Yomee — Sign-up Screen ("Crea tu cuenta")
// Uses AuthHeader / SsoButton / GhostButton / LegalDisclaimer from AuthShared.jsx

const { useState: useStateSU } = React;

function SignUpScreen({ onBack, onSwitchToSignIn, onDemo, onAuthSuccess }) {
  const [legal, setLegal] = useStateSU(null);
  const [authProvider, setAuthProvider] = useStateSU(null);
  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        height: "100%",
        background: "var(--yo-bg)",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <AuthHeader onBack={onBack} screenKey="signup" noHelp />

      <div
        style={{
          flex: 1,
          display: "flex",
          flexDirection: "column",
          padding: "150px 24px 28px",
          minHeight: 0,
        }}
      >
        <h1
          style={{
            margin: 0,
            fontFamily: "var(--font-mono)",
            fontWeight: 500,
            fontSize: 26,
            lineHeight: "36px",
            color: "var(--yo-ink)",
            letterSpacing: "0.005em",
          }}
        >
          Crea tu cuenta<br />
          para obtener tu<br />
          <span style={{ fontWeight: 700, color: "#F76C72" }}>radiografía gratis</span>
        </h1>

        <p
          style={{
            margin: 0,
            marginTop: 16,
            fontFamily: "var(--font-body)",
            fontSize: 15,
            lineHeight: "22px",
            color: "var(--yo-ink)",
            letterSpacing: "0.01em",
          }}
        >
          Te permitirá acceder a tus resultados y<br />
          seguir tu progreso.
        </p>

        <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 14 }}>
          <SsoButton provider="google" label="CONTINUAR CON GOOGLE" onClick={() => setAuthProvider("google")} />
          <SsoButton provider="apple" label="CONTINUAR CON APPLE" onClick={() => setAuthProvider("apple")} />
        </div>

        <div style={{ marginTop: 22 }}>
          <LegalDisclaimer
            onOpenTerms={() => setLegal("terms")}
            onOpenPrivacy={() => setLegal("privacy")}
          />
        </div>

        <div style={{ marginTop: 38, textAlign: "center" }}>
          <p
            style={{
              margin: 0,
              marginBottom: 16,
              fontFamily: "var(--font-body)",
              fontSize: 14,
              color: "var(--yo-ink)",
              letterSpacing: "0.01em",
            }}
          >
            ¿Aún tienes dudas?
          </p>
          <GhostButton onClick={onDemo}>VER RADIOGRAFÍA DEMO</GhostButton>
        </div>

        <div style={{ marginTop: "auto", paddingTop: 24, textAlign: "center" }}>
          <span
            style={{
              fontFamily: "var(--font-body)",
              fontSize: 14,
              color: "var(--yo-ink)",
              letterSpacing: "0.01em",
            }}
          >
            ¿Ya tienes cuenta?{" "}
          </span>
          <button
            onClick={onSwitchToSignIn}
            style={{
              background: "transparent",
              border: "none",
              padding: 0,
              cursor: "pointer",
              fontFamily: "var(--font-body)",
              fontSize: 14,
              fontWeight: 700,
              color: "var(--yo-ink)",
              textDecoration: "underline",
              textUnderlineOffset: 3,
              textDecorationThickness: 1.5,
              letterSpacing: "0.01em",
              whiteSpace: "nowrap",
            }}
          >
            Iniciar sesión
          </button>
        </div>
      </div>

      <BottomSheetModal
        open={legal === "terms"}
        title="Términos y condiciones"
        onClose={() => setLegal(null)}
      >
        {TERMS_BODY}
      </BottomSheetModal>
      <BottomSheetModal
        open={legal === "privacy"}
        title="Aviso de privacidad"
        onClose={() => setLegal(null)}
      >
        {PRIVACY_BODY}
      </BottomSheetModal>

      <GoogleAuthSheet
        open={authProvider === "google"}
        onClose={() => setAuthProvider(null)}
        onSuccess={(user) => { setAuthProvider(null); onAuthSuccess?.("google", user); }}
      />
      <AppleAuthSheet
        open={authProvider === "apple"}
        onClose={() => setAuthProvider(null)}
        onSuccess={(user) => { setAuthProvider(null); onAuthSuccess?.("apple", user); }}
      />
    </div>
  );
}

window.SignUpScreen = SignUpScreen;