/* global React, BottomSheetModal */
// Yomee — Auth Sheets
// Fake Google / Apple consent sheets used by SignUp/SignIn.

const { useState: useStateAH, useEffect: useEffectAH } = React;

const FAKE_USER = {
  google: {
    name: "María García",
    email: "maria.garcia@gmail.com",
    initial: "M",
    avatarBg: "linear-gradient(135deg, #5B8DEF, #B96DEF)",
  },
  apple: {
    name: "María García",
    email: "mgarcia@icloud.com",
    initial: "M",
    avatarBg: "linear-gradient(135deg, #444, #1c1c1c)",
  },
};

function GoogleG({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" aria-hidden="true">
      <path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3c-1.6 4.6-6 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.1 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z" />
      <path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 16 19 13 24 13c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.1 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z" />
      <path fill="#4CAF50" d="M24 44c5.2 0 9.9-2 13.5-5.2l-6.2-5.3C29.2 35.4 26.7 36 24 36c-5.3 0-9.7-3.4-11.3-8L6.2 33C9.5 39.5 16.2 44 24 44z" />
      <path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.3 4.1-4.1 5.5l6.2 5.3C40.7 36.6 44 31.1 44 24c0-1.3-.1-2.4-.4-3.5z" />
    </svg>
  );
}

function AppleLogo({ size = 22, color = "#fff" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 384 512" aria-hidden="true">
      <path
        fill={color}
        d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
      />
    </svg>
  );
}

function AccountRow({ user, onTap, brand = "google" }) {
  const [hover, setHover] = useStateAH(false);
  return (
    <button
      onClick={onTap}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        width: "100%",
        background: hover ? "rgba(0,0,0,0.04)" : "transparent",
        border: "1px solid #e2e2e2",
        borderRadius: 14,
        padding: "14px 16px",
        display: "flex",
        alignItems: "center",
        gap: 14,
        cursor: "pointer",
        textAlign: "left",
        fontFamily: "var(--font-body)",
        transition: "background 140ms ease-out",
      }}
    >
      <div
        style={{
          width: 40,
          height: 40,
          borderRadius: "50%",
          background: user.avatarBg,
          color: "#fff",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          fontFamily: "var(--font-body)",
          fontWeight: 600,
          fontSize: 16,
          flexShrink: 0,
        }}
      >
        {user.initial}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div
          style={{
            fontFamily: "var(--font-body)",
            fontWeight: 600,
            fontSize: 14,
            color: "#1f1f1f",
            lineHeight: "18px",
            whiteSpace: "nowrap",
            overflow: "hidden",
            textOverflow: "ellipsis",
          }}
        >
          {user.name}
        </div>
        <div
          style={{
            fontFamily: "var(--font-body)",
            fontSize: 13,
            color: "#666",
            lineHeight: "18px",
            whiteSpace: "nowrap",
            overflow: "hidden",
            textOverflow: "ellipsis",
          }}
        >
          {user.email}
        </div>
      </div>
      <span style={{ color: "#999", fontSize: 18, flexShrink: 0 }}>›</span>
    </button>
  );
}

function GoogleAuthSheet({ open, onClose, onSuccess }) {
  const [phase, setPhase] = useStateAH("choose");
  const user = FAKE_USER.google;

  useEffectAH(() => {
    if (!open) {
      const t = setTimeout(() => setPhase("choose"), 400);
      return () => clearTimeout(t);
    }
  }, [open]);

  function pickAccount() {
    setPhase("connecting");
    setTimeout(() => onSuccess(user), 1300);
  }

  return (
    <BottomSheetModal open={open} title="" onClose={onClose}>
      <div style={{ padding: "0 4px 8px", marginTop: -8 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
          <GoogleG size={40} />
        </div>

        {phase === "choose" && (
          <>
            <h3
              style={{
                margin: "0 0 6px",
                textAlign: "center",
                fontFamily: "var(--font-body)",
                fontWeight: 500,
                fontSize: 20,
                lineHeight: "26px",
                color: "#1f1f1f",
                letterSpacing: 0,
              }}
            >
              Iniciar sesión
            </h3>
            <p
              style={{
                margin: "0 0 22px",
                textAlign: "center",
                fontFamily: "var(--font-body)",
                fontSize: 14,
                lineHeight: "20px",
                color: "#666",
              }}
            >
              para continuar a <span style={{ color: "#1f1f1f", fontWeight: 600 }}>yomee.ai</span>
            </p>

            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <AccountRow user={user} onTap={pickAccount} brand="google" />
            </div>

            <p
              style={{
                margin: "22px 0 0",
                textAlign: "center",
                fontFamily: "var(--font-body)",
                fontSize: 12,
                lineHeight: "18px",
                color: "#888",
              }}
            >
              Al continuar, Google compartirá tu nombre,
              <br />
              dirección de correo electrónico e idioma con yomee.ai
            </p>
          </>
        )}

        {phase === "connecting" && <Connecting providerName="Google" user={user} />}
      </div>
    </BottomSheetModal>
  );
}

function AppleAuthSheet({ open, onClose, onSuccess }) {
  const [phase, setPhase] = useStateAH("choose");
  const user = FAKE_USER.apple;

  useEffectAH(() => {
    if (!open) {
      const t = setTimeout(() => setPhase("choose"), 400);
      return () => clearTimeout(t);
    }
  }, [open]);

  function pickAccount() {
    setPhase("authing");
    setTimeout(() => {
      setPhase("connecting");
      setTimeout(() => onSuccess(user), 900);
    }, 1100);
  }

  return (
    <BottomSheetModal open={open} title="" onClose={onClose}>
      <div style={{ padding: "0 4px 8px", marginTop: -8 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 14 }}>
          <AppleLogo size={40} color="#1f1f1f" />
        </div>

        {phase === "choose" && (
          <>
            <h3
              style={{
                margin: "0 0 6px",
                textAlign: "center",
                fontFamily: "var(--font-body)",
                fontWeight: 600,
                fontSize: 20,
                lineHeight: "26px",
                color: "#1f1f1f",
              }}
            >
              Usar tu Apple ID
            </h3>
            <p
              style={{
                margin: "0 0 22px",
                textAlign: "center",
                fontFamily: "var(--font-body)",
                fontSize: 14,
                lineHeight: "20px",
                color: "#666",
              }}
            >
              Inicia sesión en yomee.ai con tu Apple ID
            </p>

            <AccountRow user={user} onTap={pickAccount} brand="apple" />

            <p
              style={{
                margin: "22px 0 0",
                textAlign: "center",
                fontFamily: "var(--font-body)",
                fontSize: 12,
                lineHeight: "18px",
                color: "#888",
              }}
            >
              Apple no compartirá tu actividad en yomee.ai
              <br />
              con otras apps ni servicios.
            </p>
          </>
        )}

        {phase === "authing" && <FaceIDPanel />}

        {phase === "connecting" && <Connecting providerName="Apple" user={user} />}
      </div>
    </BottomSheetModal>
  );
}

function FaceIDPanel() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        padding: "12px 0 24px",
      }}
    >
      <div
        style={{
          width: 88,
          height: 88,
          borderRadius: 22,
          border: "3px solid #1f1f1f",
          position: "relative",
          marginBottom: 20,
          animation: "yo-faceid-pulse 1.1s ease-in-out infinite",
        }}
      >
        <svg width="88" height="88" viewBox="0 0 88 88" style={{ position: "absolute", inset: 0 }}>
          <circle cx="34" cy="36" r="3" fill="#1f1f1f" />
          <circle cx="54" cy="36" r="3" fill="#1f1f1f" />
          <path d="M44 38 L44 50 L40 54" stroke="#1f1f1f" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
          <path d="M34 60 Q44 66 54 60" stroke="#1f1f1f" strokeWidth="2.4" fill="none" strokeLinecap="round" />
        </svg>
      </div>
      <p
        style={{
          margin: 0,
          fontFamily: "var(--font-body)",
          fontWeight: 600,
          fontSize: 16,
          color: "#1f1f1f",
        }}
      >
        Mira para autenticarte
      </p>
      <p
        style={{
          margin: "4px 0 0",
          fontFamily: "var(--font-body)",
          fontSize: 13,
          color: "#888",
        }}
      >
        Face ID
      </p>

      <style>{`
        @keyframes yo-faceid-pulse {
          0%, 100% { transform: scale(1); opacity: 1; }
          50%      { transform: scale(1.04); opacity: 0.85; }
        }
      `}</style>
    </div>
  );
}

function Connecting({ providerName, user }) {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        padding: "8px 0 28px",
      }}
    >
      <div
        style={{
          width: 44,
          height: 44,
          borderRadius: "50%",
          border: "3px solid rgba(0,0,0,0.1)",
          borderTopColor: "var(--yo-mint-700)",
          animation: "yo-spin 0.85s linear infinite",
          marginBottom: 18,
        }}
      />
      <p
        style={{
          margin: 0,
          fontFamily: "var(--font-body)",
          fontWeight: 600,
          fontSize: 16,
          color: "#1f1f1f",
        }}
      >
        Conectando con {providerName}…
      </p>
      <p
        style={{
          margin: "4px 0 0",
          fontFamily: "var(--font-body)",
          fontSize: 13,
          color: "#888",
        }}
      >
        {user.email}
      </p>

      <style>{`
        @keyframes yo-spin { to { transform: rotate(360deg); } }
      `}</style>
    </div>
  );
}

window.GoogleAuthSheet = GoogleAuthSheet;
window.AppleAuthSheet = AppleAuthSheet;
window.AccountRow = AccountRow;
window.FaceIDPanel = FaceIDPanel;
window.Connecting = Connecting;
window.GoogleG = GoogleG;
window.AppleLogo = AppleLogo;
window.FAKE_USER = FAKE_USER;