<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Register</title>
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">

  <style>
    body {
      background-color: rgb(5, 5, 5);
      margin: 0;
      padding: 0;
      height: 100vh;
      overflow: hidden;
      position: relative;
      font-family: 'Geist', serif;
    }

    h2 {
      font-size: 35px;
      margin-bottom: 10px;
      color: white;
      text-align: center;
      font-family: 'Geist', serif;
      font-weight: 500;
    }

    .content-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 100%;
      max-width: 360px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(5px);
      padding: 20px;
      border-radius: 30px;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
      background-color: transparent;
      border: 1px solid rgba(255, 255, 255, 0.25);
    }

    form {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: transparent;
      padding: 20px;
      border-radius: 30px;
      box-shadow: none;
      width: 100%;
      max-width: 360px;
    }

    input,
    button {
      width: 90%;
      padding: 10px;
      margin: 10px 0;
      font-size: 16px;
      border: 1px solid #646464;
      border-radius: 50px;
      background-color: #1e1e1e;
      color: white;
      outline: none;
      font-family: 'Geist', serif;
    }

    input::placeholder {
      color: #b5b5b5;
    }

    button {
      background-color: #0a0a0a;
      color: white;
      border: 1px solid #646464;
      padding: 10px;
      font-size: 16px;
      font-weight: 400;
      border-radius: 50px;
      margin-top: 10px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.2s ease;
      width: 95%;
      font-family: 'Geist', serif;
    }

    button:hover {
      background-color: #1e1e1e;
      transform: scale(1.05);
    }

    .error-message {
      color: #ff6464;
      font-size: 14px;
      margin-top: 10px;
    }

    canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .snowflake {
      position: absolute;
      background-color: white;
      border-radius: 50%;
      opacity: 0;
      animation: fall 10s linear infinite, fadeIn 2s ease-out forwards, trail 1s linear infinite;
    }

    @keyframes fall {
      0% {
        transform: translateY(-100px) scale(0.8);
        opacity: 1;
      }

      100% {
        transform: translateY(100vh) scale(0.5);
        opacity: 0.6;
      }
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes trail {
      0% {
        box-shadow: 0px 0px 5px white, 0px 0px 10px white;
      }

      50% {
        box-shadow: 0px 0px 10px white, 0px 0px 15px white;
      }

      100% {
        box-shadow: 0px 0px 5px white, 0px 0px 10px white;
      }
    }
  </style>
</head>

<body>
  <canvas id="snowflakesCanvas"></canvas>

  <div class="content-container">
    <form id="registerForm">
      <h2>Register</h2>
      <input type="text" id="username" placeholder="Username" required>
      <input type="password" id="password" placeholder="Password" required>
      <button type="submit">Register</button>
      <button type="button" id="goBackButton">Go Back</button>

      <p class="error-message" id="errorMessage" style="display: none;">Error occurred. Please try again.</p>
    </form>
  </div>

  <script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/11.2.0/firebase-app.js";
    import { getFirestore, collection, addDoc, getDocs, query, where } from "https://www.gstatic.com/firebasejs/11.2.0/firebase-firestore.js";

    // Firebase configuration
    const firebaseConfig = {
      apiKey: "AIzaSyC3J6RZGiAzhOgyJTsC3WLs9O6qV7CprdM",
      authDomain: "atlastoby-site.firebaseapp.com",
      projectId: "atlastoby-site",
      storageBucket: "atlastoby-site.firebasestorage.app",
      messagingSenderId: "1020680989557",
      appId: "1:1020680989557:web:dc1b1fb1170fa9a122813c"
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const db = getFirestore(app);

    // Register Form Logic
    const registerForm = document.getElementById('registerForm');
    const errorMessage = document.getElementById('errorMessage');

    registerForm.addEventListener('submit', async (event) => {
      event.preventDefault();

      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;

      try {
        // Check if the username already exists
        const q = query(collection(db, "users"), where("username", "==", username));
        const querySnapshot = await getDocs(q);

        if (!querySnapshot.empty) {
          errorMessage.textContent = 'Username already exists. Please choose a different one.';
          errorMessage.style.display = 'block';
          return;
        }

        // Add user to Firestore
        await addDoc(collection(db, "users"), {
          username: username,
          password: password,
          timestamp: new Date().toISOString()
        });

        alert('Registration successful!');
        errorMessage.style.display = 'none';
        registerForm.reset();
      } catch (error) {
        console.error('Error registering user: ', error);
        errorMessage.textContent = 'An error occurred. Please try again.';
        errorMessage.style.display = 'block';
      }
    });
    // Go Back Button Logic
    const goBackButton = document.getElementById('goBackButton');

    goBackButton.addEventListener('click', () => {
      window.location.href = '/'; // Redirect to the main page (adjust the URL if needed)
    });


    // Snowflakes Animation
    const canvas = document.getElementById('snowflakesCanvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const snowflakes = [];
    const maxDistance = 100;
    const spawnInterval = 100;
    const maxSnowflakes = 100;

    let lastSpawnTime = 0;

    function createSnowflake() {
      if (snowflakes.length < maxSnowflakes) {
        const snowflake = {
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          size: Math.random() * 5 + 2,
          speedY: Math.random() * 0.7 + 0.2,
          speedX: (Math.random() - 0.5) * 0.3,
          opacity: 0,
        };
        snowflakes.push(snowflake);
      }
    }

    function updateSnowflakes() {
      for (let i = 0; i < snowflakes.length; i++) {
        const snowflake = snowflakes[i];
        snowflake.y += snowflake.speedY;
        snowflake.x += snowflake.speedX;
        snowflake.opacity = Math.min(1, snowflake.opacity + 0.01);

        if (snowflake.y > canvas.height) {
          snowflake.y = -snowflake.size;
          snowflake.x = Math.random() * canvas.width;
        }

        if (snowflake.x > canvas.width) snowflake.x = 0;
        if (snowflake.x < 0) snowflake.x = canvas.width;
      }
    }

    function drawSnowflakes() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = 'white';
      for (let i = 0; i < snowflakes.length; i++) {
        const snowflake = snowflakes[i];
        ctx.beginPath();
        ctx.arc(snowflake.x, snowflake.y, snowflake.size, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(255, 255, 255, ${snowflake.opacity})`;
        ctx.fill();
      }
    }

    function drawLines() {
      for (let i = 0; i < snowflakes.length; i++) {
        for (let j = i + 1; j < snowflakes.length; j++) {
          const snowflakeA = snowflakes[i];
          const snowflakeB = snowflakes[j];
          const distance = Math.sqrt(Math.pow(snowflakeB.x - snowflakeA.x, 2) + Math.pow(snowflakeB.y - snowflakeA.y, 2));

          if (distance < maxDistance) {
            ctx.strokeStyle = 'white';
            ctx.lineWidth = 0.5;
            ctx.beginPath();
            ctx.moveTo(snowflakeA.x, snowflakeA.y);
            ctx.lineTo(snowflakeB.x, snowflakeB.y);
            ctx.stroke();
          }
        }
      }
    }

    function animate(time) {
      if (time - lastSpawnTime >= spawnInterval) {
        createSnowflake();
        lastSpawnTime = time;
      }

      updateSnowflakes();
      drawSnowflakes();
      drawLines();
      requestAnimationFrame(animate);
    }

    animate(0);
  </script>
</body>

</html>
