<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>河南农业大学消息推送中心</title>
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      /* 全局样式 */
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
      }

      /* 优化动画效果 */
      .animate-pulse {
        animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 0.7;
        }
        50% {
          opacity: 0.3;
        }
      }

      .animate-spin {
        animation: spin 1.2s linear infinite;
      }
      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      /* 背景气泡效果 */
      .bubble {
        position: absolute;
        border-radius: 50%;
        background: radial-gradient(
          circle at 30% 30%,
          rgba(255, 255, 255, 0.8),
          rgba(255, 255, 255, 0)
        );
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(2px);
        transition: all 0.5s ease;
      }

      /* 卡片悬浮效果 */
      .card-hover {
        transition: all 0.3s ease;
      }

      .card-hover:hover {
        /* transform: translateY(-5px); */
        box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1),
          0 10px 10px -5px rgba(59, 130, 246, 0.04);
      }

      /* 二维码框动画 */
      .qr-border {
        position: relative;
      }

      .qr-border::before {
        content: "";
        position: absolute;
        inset: -2px;
        z-index: -1;
        background: linear-gradient(90deg, #4f46e5, #3b82f6, #4f46e5);
        background-size: 200% 200%;
        animation: borderGradient 2s linear infinite;
        border-radius: 0.5rem;
        opacity: 0.5;
      }

      @keyframes borderGradient {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

      /* 微信扫码指示动画 */
      .scan-indicator {
        position: absolute;
        height: 2px;
        width: 80%;
        left: 10%;
        background: linear-gradient(90deg, transparent, #3b82f6, transparent);
        z-index: 2;
        animation: scanMove 2s ease-in-out infinite;
        opacity: 0.7;
      }

      @keyframes scanMove {
        0% {
          top: 10%;
        }
        50% {
          top: 90%;
        }
        100% {
          top: 10%;
        }
      }

      /* 优化加载动画 */
      .loader {
        width: 48px;
        height: 48px;
        border: 4px solid rgba(59, 130, 246, 0.3);
        border-radius: 50%;
        border-top-color: #3b82f6;
        transform-origin: center;
      }
    </style>
  </head>
  <body>
    <div
      id="app"
      class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 p-4 relative overflow-hidden"
    >
      <!-- 优化的动态背景 -->
      <div class="absolute inset-0 overflow-hidden">
        <div
          class="bubble w-56 h-56 top-10 -left-10 bg-blue-100 opacity-60"
        ></div>
        <div
          class="bubble w-72 h-72 bottom-10 -right-10 bg-indigo-100 opacity-50"
        ></div>
        <div
          class="bubble w-40 h-40 top-1/4 right-1/4 bg-purple-100 opacity-40 animate-pulse"
        ></div>
        <div
          class="bubble w-32 h-32 bottom-1/3 left-1/3 bg-blue-100 opacity-30 animate-pulse"
          style="animation-delay: 0.7s"
        ></div>
        <div
          class="bubble w-64 h-64 -bottom-10 left-1/3 bg-indigo-100 opacity-20 animate-pulse"
          style="animation-delay: 1.4s"
        ></div>
      </div>

      <!-- 加载屏幕 -->
      <div
        id="loadingScreen"
        class="fixed inset-0 flex items-center justify-center bg-white bg-opacity-95 z-50"
      >
        <div class="flex flex-col items-center">
          <div class="loader animate-spin mb-4"></div>
          <p class="text-blue-600 font-medium">正在加载...</p>
        </div>
      </div>

      <!-- 主要内容 -->
      <div id="mainContent" class="w-full max-w-md z-10 hidden">
        <div
          class="bg-white backdrop-filter backdrop-blur-lg bg-opacity-95 rounded-2xl shadow-xl p-8 card-hover border border-blue-50"
        >
          <div class="text-center mb-8">
            <h2 class="text-2xl font-bold text-slate-800">河南农业大学</h2>
            <p class="text-slate-500 mt-1">校园应用</p>
          </div>

          <!-- 错误状态 -->
          <div
            id="errorState"
            class="flex flex-col items-center justify-center py-8 hidden"
          >
            <div class="p-3 bg-red-50 rounded-full mb-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="w-8 h-8 text-red-500"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="8" x2="12" y2="12"></line>
                <line x1="12" y1="16" x2="12.01" y2="16"></line>
              </svg>
            </div>
            <p class="text-red-600 text-lg font-medium mb-2">登录失败</p>
            <p class="text-slate-500 mb-4 text-center">
              你可能没有权限登录或网络连接出现问题
            </p>
            <button
              class="mt-2 px-6 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all"
              onclick="window.location.href='/login'"
            >
              重新尝试登录
            </button>
          </div>

          <!-- 微信浏览器状态 -->
          <div id="wechatState" class="text-center py-8 hidden">
            <div class="loader animate-spin mx-auto mb-4"></div>
            <p class="text-slate-700 font-medium mb-2">
              正在跳转到微信授权登录
            </p>
            <p class="text-slate-500 text-sm">
              请稍候，即将为您打开微信授权页面...
            </p>
          </div>

          <!-- 二维码状态 -->
          <div id="qrState" class="hidden">
            <div class="text-center mb-6">
              <h3 class="text-lg font-medium text-slate-800">微信扫码登录</h3>
              <p class="text-slate-500 text-sm mt-1">
                使用微信扫描下方二维码完成登录
              </p>
            </div>

            <div
              class="bg-white border border-slate-100 rounded-lg overflow-hidden h-96 flex items-center justify-center qr-border relative"
            >
              <div class="scan-indicator"></div>
              <iframe
                id="qrFrame"
                title="Login QR Code"
                class="w-full h-full z-10 bg-white"
              ></iframe>
            </div>

            <div
              class="mt-6 bg-blue-50 rounded-lg p-4 flex items-start text-sm"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 mr-3 text-blue-500 flex-shrink-0 mt-0.5"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="16" x2="12" y2="12"></line>
                <line x1="12" y1="8" x2="12.01" y2="8"></line>
              </svg>
              <div>
                <p class="text-slate-700 font-medium">
                  请确保您的微信账号已完成学校账号绑定
                </p>
                <p class="text-slate-500 mt-1">
                  如未绑定，请先联系信息化办公室进行账号关联
                </p>
              </div>
            </div>
          </div>

          <div
            class="text-center text-xs text-slate-400 mt-8 pt-6 border-t border-slate-100"
          >
            <p class="mb-1">管理单位：河南农业大学信息化办公室</p>
            <p>技术支持：河南农业大学IT工作室</p>
          </div>
        </div>
      </div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // Configuration
        const config = {
          baseUrl: "https://oauth.henau.edu.cn/oauth2",
          appId: "{{app_id}}",
          redirectUri: "{{ redirect_uri }}",
          loginApiEndpoint: "{{ login_api_endpoint }}", // 后端登录接口
          successRedirectUrl: "{{ success_redirect_url }}", // 获取令牌后跳转的链接
        };

        // DOM Elements
        const loadingScreen = document.getElementById("loadingScreen");
        const mainContent = document.getElementById("mainContent");
        const errorState = document.getElementById("errorState");
        const wechatState = document.getElementById("wechatState");
        const qrState = document.getElementById("qrState");
        const qrFrame = document.getElementById("qrFrame");

        // State variables
        let isWeixinBrowser = false;
        let isError = false;
        let qrURL = "";

        // Check if browser is WeChat
        const ua = navigator.userAgent.toLowerCase();
        isWeixinBrowser = ua.indexOf("micromessenger") !== -1;

        // Set redirect URI
        const redirectUri = encodeURIComponent(
          `${location.origin}${config.redirectUri}`
        );

        // Construct QR URL
        const commonParams = `appid=${config.appId}&redirect_uri=${redirectUri}&response_type=code&scope=henauapi_`;
        qrURL = `${config.baseUrl}_qr_connect/login?${commonParams}login`;

        // Set QR iframe src

        qrFrame.src = qrURL;

        // Handle code if present in URL
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has("code")) {
          const code = urlParams.get("code");
          alert("code: " + code);

          // In a real implementation, you'd make a server request
          // For demonstration, we'll use the isError flag
          fetch(config.loginApiEndpoint + `?code=${code}`, {
            method: "GET",
          })
            .then((response) => response.json())
            .then((data) => {
              alert("Login successful");
              localStorage.setItem("token", data.token);
              localStorage.setItem("user", JSON.stringify(data.user));
              window.location.href =
                location.origin + config.successRedirectUrl;
            })
            .catch((error) => {
              isError = true;
              hideLoading();
              showError();
              // alert("Login failed");
            });
        } else if (isWeixinBrowser) {
          // For WeChat browsers
          hideLoading();
          showWechatRedirect();
          // alert(`${config.baseUrl}_connect/authorize?${commonParams}userinfo`)
          //   location.href = `${config.baseUrl}_connect/authorize?${commonParams}userinfo`;
          location.href = qrURL;
        } else {
          // Show QR code
          hideLoading();
          showQrCode();
        }

        // Helper functions
        function hideLoading() {
          loadingScreen.classList.add("hidden");
          mainContent.classList.remove("hidden");
        }

        function showError() {
          errorState.classList.remove("hidden");
          wechatState.classList.add("hidden");
          qrState.classList.add("hidden");
        }

        function showWechatRedirect() {
          errorState.classList.add("hidden");
          wechatState.classList.remove("hidden");
          qrState.classList.add("hidden");
        }

        function showQrCode() {
          errorState.classList.add("hidden");
          wechatState.classList.add("hidden");
          qrState.classList.remove("hidden");
        }
      });
    </script>
  </body>
</html>
