<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Register</title>
  <!-- Bootstrap CSS (CDN) -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
    rel="stylesheet"
  />
</head>
<body class="bg-light">
  <div class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-md-6 col-lg-4">
        <h3 class="text-center mb-4">Create an Account</h3>
        
        <!-- Registration Form -->
        <form id="registerForm" class="card p-3 shadow">
          <div class="mb-3">
            <label for="regUsername" class="form-label">Username</label>
            <input 
              type="text" 
              class="form-control" 
              id="regUsername" 
              placeholder="Enter username" 
              required 
            />
          </div>
          <div class="mb-3">
            <label for="regPassword" class="form-label">Password</label>
            <input 
              type="password" 
              class="form-control" 
              id="regPassword" 
              placeholder="Enter password" 
              required 
            />
          </div>
          <button type="submit" class="btn btn-primary w-100">Register</button>
        </form>
        
        <div id="registerMsg" class="mt-2 text-center"></div>

        <div class="text-center mt-3">
          <p>Already have an account? 
            <a href="login.html">Login here</a>
          </p>
        </div>
      </div>
    </div>
  </div>

  <script>

    const BIN_ID = "6792c48bacd3cb34a8d1ee28";             
    const SECRET_KEY = "$2a$10$vmSg2I15285wICNrhdZ8V.n7/Xu7gjPN/1AtqFEgXNQssDjPgfw0.";    
  

    async function getBinData() {
      const url = `https://api.jsonbin.io/v3/b/${BIN_ID}/latest`;
      const response = await fetch(url, {
        method: 'GET',
        headers: { 'X-Master-Key': SECRET_KEY }
      });
      if (!response.ok) {
        throw new Error(`Error fetching bin data: ${response.statusText}`);
      }
      const jsonData = await response.json();
      return jsonData.record; // the actual object in the bin
    }

    async function updateBinData(newData) {
      const url = `https://api.jsonbin.io/v3/b/${BIN_ID}`;
      const response = await fetch(url, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'X-Master-Key': SECRET_KEY
        },
        body: JSON.stringify(newData)
      });
      if (!response.ok) {
        throw new Error(`Error updating bin data: ${response.statusText}`);
      }
      return response.json();
    }

    // Registration
    document.getElementById('registerForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const username = document.getElementById('regUsername').value.trim();
      const password = document.getElementById('regPassword').value;

      try {
        const data = await getBinData();
        const users = data.users || [];

        // Check if user already exists
        if (users.some(u => u.username === username)) {
          document.getElementById('registerMsg').textContent = 'Username already taken!';
          document.getElementById('registerMsg').style.color = 'red';
          return;
        }

        // Add new user
        users.push({ username, password });
        data.users = users;

        // Update JSONbin
        await updateBinData(data);

        document.getElementById('registerMsg').textContent = 'Registration successful!';
        document.getElementById('registerMsg').style.color = 'green';

        // Clear the form
        e.target.reset();
      } catch (err) {
        console.error(err);
        document.getElementById('registerMsg').textContent = 'Registration failed!';
        document.getElementById('registerMsg').style.color = 'red';
      }
    });
  </script>
</body>
</html>
