<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>PowerVita</title>
  <!-- PowerVita PWA / app icon settings -->
  <meta name="theme-color" content="#071a12">
  <meta name="application-name" content="PowerVita">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="PowerVita">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="msapplication-TileColor" content="#071a12">
  <meta name="msapplication-TileImage" content="/icons/powervita-icon-v4-192.png?v=20260626v4">
  <link rel="manifest" href="/manifest.webmanifest?v=20260626v4">
  <link rel="shortcut icon" href="/favicon.ico?v=20260626v4">
  <link rel="icon" href="/favicon.ico?v=20260626v4">
  <link rel="icon" type="image/png" sizes="32x32" href="/icons/powervita-icon-v4-32.png?v=20260626v4">
  <link rel="icon" type="image/png" sizes="192x192" href="/icons/powervita-icon-v4-192.png?v=20260626v4">
  <link rel="icon" type="image/png" sizes="512x512" href="/icons/powervita-icon-v4-512.png?v=20260626v4">
  <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-v4.png?v=20260626v4">
  <link rel="stylesheet" href="/app.css">
  <style>
    body { opacity: 0; transition: opacity 0.15s ease; }
  </style>
  <script>
    (function() {
      // Just logged out: show login form immediately
      if (sessionStorage.getItem('pv_just_logged_out') === 'true') {
        sessionStorage.removeItem('pv_just_logged_out');
        document.body.style.opacity = '1';
        return;
      }
      // No token = not logged in, show immediately
      var hasToken = localStorage.getItem('sb-ljhngpcrgxbppptcoked-auth-token');
      if (!hasToken) {
        document.body.style.opacity = '1';
      }
      // Safety: if module hangs, always show login after 3s
      setTimeout(function() {
        document.body.style.opacity = '1';
      }, 3000);
    })();
  </script>
  <script src="/js/app-lang.js"></script>
</head>
<body>
  <div class="app-wrapper">
    <div class="app-header login-header">
      <div class="lang-switch top-right">
        <button class="lang-btn active" onclick="setAppLang('nl')">NL</button>
        <button class="lang-btn" onclick="setAppLang('en')">EN</button>
      </div>
      <div class="logo">PowerVita<span class="logo-accent">.</span></div>
      <p class="tagline" data-text="nl">Jouw online coaching app</p>
      <p class="tagline" data-text="en" style="display:none">Your online coaching app</p>
    </div>

    <div class="card login-card">
      <h1 class="card-title" data-text="nl">Inloggen</h1>
      <h1 class="card-title" data-text="en" style="display:none">Sign In</h1>

      <form id="login-form" class="form-stack" autocomplete="on">
        <div class="field-group">
          <label for="email" data-text="nl">E-mail</label>
          <label for="email" data-text="en" style="display:none">Email</label>
          <input type="email" id="email" name="email" required placeholder="jouw@email.nl" class="input-field" autocomplete="email">
        </div>
        <div class="field-group">
          <label for="password" data-text="nl">Wachtwoord</label>
          <label for="password" data-text="en" style="display:none">Password</label>
          <input type="password" id="password" name="password" required placeholder="••••••••" class="input-field" autocomplete="current-password">
        </div>
        <button type="submit" class="btn btn-primary btn-block glow-hover" id="login-submit-btn">
          <span data-text="nl">Inloggen</span>
          <span data-text="en" style="display:none">Sign In</span>
        </button>
      </form>

      <div id="login-error" class="form-error" style="display:none;"></div>

      <div id="mfa-challenge" style="display:none; margin-top:16px;">
        <div class="field-group">
          <label for="mfa-code">Authenticator Code</label>
          <input type="text" id="mfa-code" inputmode="numeric" maxlength="6" placeholder="000000" class="input-field">
        </div>
        <button id="mfa-verify-btn" class="btn btn-primary btn-block">Verify</button>
      </div>

      <!-- GEFIXT: Link naar /mfa/reset-password/ -->
      <div style="text-align:center; margin-top:14px;">
        <a href="/mfa/reset-password/" class="form-note" style="color: var(--neon-dim, #00cc6a); text-decoration: underline; font-size: 0.9rem;">
          <span data-text="nl">Wachtwoord vergeten?</span>
          <span data-text="en" style="display:none">Forgot password?</span>
        </a>
      </div>

      <p class="form-note" style="margin-top:20px;" data-text="nl">Nog geen account? Contacteer je coach.</p>
      <p class="form-note" data-text="en" style="display:none">No account yet? Contact your coach.</p>
    </div>
  </div>

  <script type="module">
    import { supabase } from "/js/auth.js";
    import { redirectAfterLogin } from "/js/auth-guard.js";

    console.log("[Login] Script loaded");

    const form = document.getElementById("login-form");
    const submitBtn = document.getElementById("login-submit-btn");
    const errorEl = document.getElementById("login-error");
    const mfaBox = document.getElementById("mfa-challenge");
    const mfaBtn = document.getElementById("mfa-verify-btn");
    const mfaInput = document.getElementById("mfa-code");

    let currentSession = null;

    function showError(msg) {
      errorEl.textContent = msg;
      errorEl.style.display = "block";
      console.error("[Login]", msg);
    }

    function hideError() {
      errorEl.textContent = "";
      errorEl.style.display = "none";
    }

    function setLoading(isLoading) {
      if (!submitBtn) return;
      submitBtn.disabled = isLoading;
      submitBtn.style.opacity = isLoading ? "0.65" : "1";
    }

    async function checkExistingSession() {
      console.log("[Login] Checking existing session...");
      const { data, error } = await supabase.auth.getSession();

      if (error) {
        console.warn("[Login] Existing session check error:", error.message);
        document.body.style.opacity = "1";
        return;
      }

      if (!data?.session) {
        console.log("[Login] No existing session");
        document.body.style.opacity = "1";
        return;
      }

      console.log("[Login] Existing session found");
      await redirectAfterLogin(data.session);
    }

    form.addEventListener("submit", async (e) => {
      e.preventDefault();
      hideError();
      setLoading(true);

      try {
        const email = document.getElementById("email").value.trim();
        const password = document.getElementById("password").value;

        if (!email || !password) {
          showError("❌ Vul e-mail en wachtwoord in");
          return;
        }

        console.log("[Login] Signing in...");

        const { data, error } = await supabase.auth.signInWithPassword({
          email,
          password
        });

        if (error) {
          showError("❌ " + error.message);
          return;
        }

        if (!data?.session) {
          showError("❌ Login gelukt, maar geen sessie ontvangen. Controleer Supabase Auth instellingen.");
          return;
        }

        currentSession = data.session;
        console.log("[Login] Login successful, session received");

        const { data: aalData, error: aalError } = await supabase.auth.mfa.getAuthenticatorAssuranceLevel();

        if (aalError) {
          console.warn("[Login] MFA AAL check error:", aalError.message);
        }

        const needsVerify = aalData?.currentLevel === "aal1" && aalData?.nextLevel === "aal2";

        if (needsVerify) {
          console.log("[Login] MFA verification required");
          mfaBox.style.display = "block";
          mfaInput.focus();
          return;
        }

        // Belangrijk: geef de verse session direct mee om timingproblemen met getSession() te voorkomen.
        await redirectAfterLogin(currentSession);

      } catch (err) {
        showError("❌ Onverwachte fout: " + (err?.message || err));
      } finally {
        setLoading(false);
      }
    });

    mfaBtn.addEventListener("click", async () => {
      hideError();

      const code = mfaInput.value.trim();

      if (!code || code.length !== 6) {
        showError("❌ Vul een 6-cijferige code in");
        return;
      }

      try {
        const { data: factorsData, error: factorsError } = await supabase.auth.mfa.listFactors();

        if (factorsError) {
          showError("❌ " + factorsError.message);
          return;
        }

        const factorId = factorsData?.totp?.[0]?.id;

        if (!factorId) {
          showError("❌ Geen MFA factor gevonden");
          return;
        }

        const { data: challengeData, error: challengeError } = await supabase.auth.mfa.challenge({ factorId });

        if (challengeError) {
          showError("❌ " + challengeError.message);
          return;
        }

        const { error: verifyError } = await supabase.auth.mfa.verify({
          factorId,
          challengeId: challengeData.id,
          code
        });

        if (verifyError) {
          showError("❌ Code onjuist");
          return;
        }

        const { data: freshSessionData } = await supabase.auth.getSession();
        await redirectAfterLogin(freshSessionData?.session || currentSession);

      } catch (err) {
        showError("❌ Onverwachte MFA fout: " + (err?.message || err));
      }
    });

    checkExistingSession();
  </script>
</body>
</html>