/* global React, AuthHeader, SsoButton, LegalDisclaimer, BottomSheetModal, GoogleAuthSheet, AppleAuthSheet, TERMS_BODY, PRIVACY_BODY */
// Yomee — Sign-in Screen ("Bienvenido de nuevo")
// Uses AuthHeader / SsoButton / LegalDisclaimer from AuthShared.jsx

const { useState: useStateSI } = React;

function SignInScreen({ onBack, onSwitchToSignUp, onAuthSuccess }) {
  const [legal, setLegal] = useStateSI(null);
  const [authProvider, setAuthProvider] = useStateSI(null);
  // Reactive bind to the active persona — switching personas updates the
  // greeting (gender agreement) instantly.
  const yomeeUser = (window.useYomeeUser && window.useYomeeUser()) || {};
  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        height: "100%",
        background: "var(--yo-bg)",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <AuthHeader onBack={onBack} screenKey="signin" noHelp />

      <div
        style={{
          flex: 1,
          display: "flex",
          flexDirection: "column",
          padding: "230px 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",
          }}
        >
          {yomeeUser?.gender === "female"
            ? "Bienvenida de nuevo"
            : "Bienvenido de nuevo"}
        </h1>

        <p
          style={{
            margin: 0,
            marginTop: 14,
            fontFamily: "var(--font-body)",
            fontSize: 15,
            lineHeight: "22px",
            color: "var(--yo-ink)",
            letterSpacing: "0.01em",
          }}
        >
          Inicia sesión para continuar
        </p>

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

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

        <div style={{ marginTop: "auto", paddingTop: 24, textAlign: "center" }}>
          <span
            style={{
              fontFamily: "var(--font-body)",
              fontSize: 14,
              color: "var(--yo-ink)",
              letterSpacing: "0.01em",
            }}
          >
            ¿No tienes cuenta?{" "}
          </span>
          <button
            onClick={onSwitchToSignUp}
            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",
            }}
          >
            Únete gratis
          </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.SignInScreen = SignInScreen;