<!DOCTYPE html>
<html lang="en" class="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>KEYGEN Generator</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <style>
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .fade-in {
      animation: fadeIn 0.5s ease-in-out;
    }
  </style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300">
  <div class="min-h-screen flex flex-col items-center justify-center p-4">
    <!-- Login Form -->
    <div id="login" class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-2xl w-full max-w-md fade-in">
      <h1 class="text-3xl font-bold text-center mb-6">Login</h1>
      <form id="loginForm" class="space-y-6">
        <div>
          <label for="username" class="block text-sm font-medium mb-2">Username:</label>
          <input type="text" id="username" name="username" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700">
        </div>
        <div>
          <label for="password" class="block text-sm font-medium mb-2">Password:</label>
          <input type="password" id="password" name="password" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700">
        </div>
        <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition-colors duration-300">
          Login
        </button>
      </form>
    </div>

    <!-- Advanced JWT Generator -->
    <div id="generator" class="hidden bg-white dark:bg-gray-800 p-8 rounded-lg shadow-2xl w-full max-w-4xl fade-in">
      <h1 class="text-3xl font-bold text-center mb-6">KEYGEN Generator</h1>
      <form id="jwtForm" enctype="multipart/form-data" class="space-y-6">
        <div>
          <label for="text" class="block text-sm font-medium mb-2">Manual Input:</label>
          <textarea id="text" name="text" rows="6" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700"></textarea>
        </div>
        <div>
          <label for="json" class="block text-sm font-medium mb-2">JSON Input:</label>
          <textarea id="json" name="json" rows="6" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700"></textarea>
        </div>
        <div>
          <label for="file" class="block text-sm font-medium mb-2">Upload .txt File:</label>
          <input type="file" id="file" name="file" accept=".txt" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700">
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="duration" class="block text-sm font-medium mb-2">Expiration Duration:</label>
            <select id="duration" name="duration" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700">
              <option value="1h">1 Hour</option>
              <option value="12h">12 Hours</option>
              <option value="1d">1 Day</option>
              <option value="1m">1 Month</option>
              <option value="2m">2 Months</option>
              <option value="3m">3 Months</option>
            </select>
          </div>
          <div>
            <label for="dateTime" class="block text-sm font-medium mb-2">Custom Expiration (DD/MM/YYYY HH:MM:SS):</label>
            <input type="text" id="dateTime" name="dateTime" placeholder="31/12/2024 00:00:00" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700">
          </div>
        </div>
        <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition-colors duration-300">
          Generate Token
        </button>
      </form>
      <div id="results" class="mt-8 space-y-6 hidden">
        <div>
          <h2 class="text-xl font-semibold mb-3">Generated Token:</h2>
          <div class="flex items-center gap-2">
            <pre id="tokenOutput" class="flex-1 p-3 bg-gray-100 dark:bg-gray-700 rounded-lg overflow-x-auto"></pre>
            <button id="copyToken" class="p-2 bg-gray-200 dark:bg-gray-600 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-300">
              📋
            </button>
          </div>
        </div>
        <div>
          <h2 class="text-xl font-semibold mb-3">Decoded Payload:</h2>
          <pre id="decodedOutput" class="p-3 bg-gray-100 dark:bg-gray-700 rounded-lg overflow-x-auto"></pre>
        </div>
      </div>
      <button id="logout" class="mt-4 w-full bg-red-600 text-white py-3 rounded-lg hover:bg-red-700 transition-colors duration-300">
        Logout
      </button>
    </div>
  </div>
  <script>
    // Login Form Submission
    document.getElementById('loginForm').addEventListener('submit', async (e) => {
      e.preventDefault();

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

      try {
        const response = await fetch('/login', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ username, password }),
        });

        if (response.ok) {
          const { token } = await response.json();
          localStorage.setItem('token', token); // Save token to localStorage
          console.log('Token saved:', token); // Debugging
          showGenerator(); // Show the generator interface
        } else {
          const errorData = await response.json();
          alert(`Error: ${errorData.error}`);
        }
      } catch (error) {
        console.error('Login failed:', error);
        alert('Login failed. Please try again.');
      }
    });

    // Show Generator Interface
    function showGenerator() {
      console.log('Showing generator...'); // Debugging
      document.getElementById('login').classList.add('hidden'); // Hide login form
      document.getElementById('generator').classList.remove('hidden'); // Show generator
    }

    // JWT Form Submission
    document.getElementById('jwtForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData();
      formData.append('text', document.getElementById('text').value);
      formData.append('json', document.getElementById('json').value);
      formData.append('duration', document.getElementById('duration').value);
      formData.append('dateTime', document.getElementById('dateTime').value);
      const fileInput = document.getElementById('file');
      if (fileInput.files[0]) {
        formData.append('file', fileInput.files[0]);
      }

      const token = localStorage.getItem('token');
      const response = await fetch('/generate-token', {
        method: 'POST',
        headers: {
          Authorization: token,
        },
        body: formData,
      });

      const result = await response.json();
      if (response.ok) {
        document.getElementById('tokenOutput').textContent = result.token;
        document.getElementById('decodedOutput').textContent = JSON.stringify(result.decoded, null, 2);
        document.getElementById('results').classList.remove('hidden');
      } else {
        alert(`Error: ${result.error}\nDetails: ${result.details}`);
      }
    });

    // Copy Token to Clipboard
    document.getElementById('copyToken').addEventListener('click', () => {
      const token = document.getElementById('tokenOutput').textContent;
      navigator.clipboard.writeText(token).then(() => {
        alert('Token copied to clipboard!');
      });
    });

    // Logout
    document.getElementById('logout').addEventListener('click', () => {
      localStorage.removeItem('token');
      document.getElementById('login').classList.remove('hidden');
      document.getElementById('generator').classList.add('hidden');
    });

    // Check if user is already logged in on page load
    const token = localStorage.getItem('token');
    if (token) {
      showGenerator();
    }
  </script>
</body>
</html>