<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>User Login | OAuth 2.0</title>
  <style>
    body { background: #f0f2f5; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; font-family: system-ui; }
    .login-box { width: 420px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; text-align: center; box-shadow: 0 10px 24px rgba(0,0,0,.06); }
    .title { margin: 0 0 12px; font-size: 20px; }
    .hint { color: #4b5563; margin: 0 0 16px; }
    .btn { width: 100%; border: 0; border-radius: 8px; padding: 11px 12px; cursor: pointer; font-size: 14px; }
    .btn-primary { background: #2563eb; color: #fff; }
    .btn-plain { background: #fff; color: #111827; border: 1px solid #d1d5db; margin-top: 8px; }
    .btn[disabled] { opacity: .6; cursor: not-allowed; }
    .providers { margin-top: 14px; text-align: left; }
    .providers-title { margin: 0 0 8px; color: #6b7280; font-size: 13px; }
    .msg { margin-top: 10px; font-size: 13px; color: #374151; min-height: 18px; }
    .msg.error { color: #dc2626; }
    .msg.info { color: #2563eb; }
  </style>
</head>
<body>
  <div class="login-box">
    <h3 class="title">OAuth User Login</h3>
    <p class="hint">Please log in using the SSO service.</p>

    <button id="btn-sso" class="btn btn-primary" type="button">Login via SSO</button>

    <div id="providers" class="providers" style="display:none;">
      <p class="providers-title">Or use linked external provider:</p>
      <div id="provider-list"></div>
    </div>

    <div id="msg" class="msg"></div>
  </div>

  <script>
    (function () {
      const btnSSO = document.getElementById('btn-sso')
      const msg = document.getElementById('msg')
      const providersBox = document.getElementById('providers')
      const providerList = document.getElementById('provider-list')
      let loading = false

      function setMessage(text, type) {
        msg.textContent = text || ''
        msg.className = 'msg' + (type ? (' ' + type) : '')
      }

      function setLoading(v) {
        loading = !!v
        btnSSO.disabled = loading
        btnSSO.textContent = loading ? 'Redirecting...' : 'Login via SSO'
        Array.from(providerList.querySelectorAll('button')).forEach(function (b) {
          b.disabled = loading
        })
      }

      function getNextPath() {
        const params = new URLSearchParams(window.location.search)
        return params.get('next') || '/user'
      }

      function goToSSO() {
        if (loading) return
        setLoading(true)
        setMessage('Redirecting to SSO...', 'info')
        const params = new URLSearchParams(window.location.search)
        const next = params.get('next') || ''
        const callbackUrl = window.location.origin + '/user/login/callback' + (next ? ('?next=' + encodeURIComponent(next)) : '')
        window.location.href = 'https://sso.mcsog.top/?redirect_uri=' + encodeURIComponent(callbackUrl)
      }

      async function loginWithProvider(provider) {
        if (loading) return
        setLoading(true)
        setMessage('Redirecting to external provider...', 'info')
        try {
          const res = await fetch('/api/user?action=external_login_start', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ provider: provider, next: getNextPath() })
          })
          const data = await res.json().catch(function(){ return {} })
          if (!res.ok || !data.authorize_url) {
            throw new Error(data.error || 'external_login_failed')
          }
          window.location.href = data.authorize_url
        } catch (e) {
          setMessage('External login failed: ' + (e.message || 'unknown_error'), 'error')
          setLoading(false)
        }
      }

      async function loadProviders() {
        try {
          const res = await fetch('/api/user?action=external_providers')
          const data = await res.json().catch(function(){ return [] })
          const list = Array.isArray(data) ? data : []
          providerList.innerHTML = ''
          if (!list.length) {
            providersBox.style.display = 'none'
            return
          }
          providersBox.style.display = 'block'
          list.forEach(function (p) {
            const b = document.createElement('button')
            b.type = 'button'
            b.className = 'btn btn-plain'
            b.textContent = 'Login via ' + (p.display_name || p.provider)
            b.addEventListener('click', function () { loginWithProvider(p.provider) })
            providerList.appendChild(b)
          })
        } catch (e) {
          setMessage('Failed to load external login providers', 'error')
        }
      }

      const extErr = new URLSearchParams(window.location.search).get('ext_error')
      if (extErr) setMessage('External login failed: ' + extErr, 'error')

      btnSSO.addEventListener('click', goToSSO)
      loadProviders()
    })()
  </script>
</body>
</html>