{% extends 'base.html' %}
{% block content %}
<!-- Cyberpunk Theme Background with Lasers, Strobe Lights and Disco Balls -->
<style>
  body {
    background: #000;
    color: #0ff;
    font-family: 'Courier New', monospace;
    overflow: hidden;
    position: relative;
    height: 100vh;
  }

  /* Laser effects */
  .laser {
    position: absolute;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #ff00ff, #00ffff);
    box-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff;
    animation: laser 0.5s infinite alternate;
  }

  @keyframes laser {
    from { opacity: 0.3; }
    to { opacity: 1; }
  }

  /* Strobe effect */
  .strobe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
  }

  @keyframes strobe {
    0% { opacity: 0; }
    5% { opacity: 0.8; }
    10% { opacity: 0; }
  }

  /* Disco ball effect */
  .disco-ball {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, #ff00ff, #00ffff);
    box-shadow: 0 0 30px #ff00ff, 0 0 60px #00ffff;
    animation: spin 10s linear infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  @keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }

  /* Scanline effect */
  .scanline {
    position: absolute;
    width: 100%;
    height: 2px;
    background: rgba(0, 255, 255, 0.3);
    animation: scan 8s linear infinite;
    z-index: 999;
  }

  @keyframes scan {
    0% { top: 0; }
    100% { top: 100%; }
  }

  /* Neon text effects */
  .neon-text {
    text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 15px #0ff;
  }

  .login-container {
    position: relative;
    z-index: 10;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #0ff;
    box-shadow: 0 0 15px #0ff;
    border-radius: 10px;
    padding: 2rem;
    margin-top: 5rem;
  }

  .login-input {
    background: rgba(0, 20, 30, 0.7);
    border: 1px solid #0ff;
    color: #0ff;
    box-shadow: 0 0 5px #0ff;
  }

  .login-input:focus {
    outline: none;
    box-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
  }

  .login-button {
    background: linear-gradient(45deg, #0ff, #f0f);
    border: none;
    color: #000;
    font-weight: bold;
    box-shadow: 0 0 10px #0ff, 0 0 20px #f0f;
  }

  .login-button:hover {
    box-shadow: 0 0 15px #0ff, 0 0 30px #f0f;
  }
</style>

<!-- Laser effects -->
<div class="laser" style="left: 10%;"></div>
<div class="laser" style="left: 20%;"></div>
<div class="laser" style="left: 30%;"></div>
<div class="laser" style="left: 40%;"></div>
<div class="laser" style="left: 50%;"></div>
<div class="laser" style="left: 60%;"></div>
<div class="laser" style="left: 70%;"></div>
<div class="laser" style="left: 80%;"></div>
<div class="laser" style="left: 90%;"></div>

<!-- Strobe light effect -->
<div id="strobe" class="strobe"></div>

<!-- Disco ball -->
<div class="disco-ball"></div>

<!-- Scanline effect -->
<div class="scanline"></div>

<div class="login-container max-w-md mx-auto">
  <h1 class="text-2xl font-bold mb-4 neon-text">SECURE ACCESS TERMINAL</h1>
  <form id="login-form" class="space-y-3">
    <div>
      <label class="block text-sm mb-1 neon-text">USER IDENTIFICATION</label>
      <input id="email" type="email" required class="w-full border rounded-lg p-2 login-input" />
    </div>
    <div>
      <label class="block text-sm mb-1 neon-text">SECURITY CODE</label>
      <input id="password" type="password" required class="w-full border rounded-lg p-2 login-input" />
    </div>
    <button type="submit" class="w-full py-2 rounded-lg login-button">INITIATE AUTHENTICATION</button>
    <p id="error" class="text-sm text-red-600 mt-2 hidden"></p>
  </form>
</div>

<!-- Firebase App (the core Firebase SDK) -->
<script src="https://www.gstatic.com/firebasejs/12.4.0/firebase-app-compat.js"></script>

<!-- Firebase Auth -->
<script src="https://www.gstatic.com/firebasejs/12.4.0/firebase-auth-compat.js"></script>

<script>
  // Strobe light effect
  const strobe = document.getElementById('strobe');
  setInterval(() => {
    strobe.style.animation = 'none';
    setTimeout(() => {
      strobe.style.animation = 'strobe 0.1s';
    }, 10);
  }, 500);

  window.FIREBASE_CONFIG = {{ firebase_config|tojson }};

  const app = firebase.initializeApp(window.FIREBASE_CONFIG || {});
  const auth = firebase.auth()

  const form = document.getElementById('login-form');
  const email = document.getElementById('email');
  const password = document.getElementById('password');
  const err = document.getElementById('error');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    err.classList.add('hidden');
    try {
      const cred = await auth.signInWithEmailAndPassword(email.value, password.value);
      const idToken = await cred.user.getIdToken();
      const res = await fetch('/session_login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ idToken })
      });
      if(!res.ok){
        throw new Error('Session exchange failed');
      }
      window.location.href = '/';
    } catch (e) {
      err.textContent = e.message || 'Authentication failed';
      err.classList.remove('hidden');
    }
  });
</script>

{% endblock %}