<!DOCTYPE html>
<html lang="en" class="light">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Password Reset</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      /* Light Mode Gradient (Teal/Cyan) */
      --bg-start: hsla(202, 71%, 27%, 1);
      --bg-end: hsla(176, 45%, 66%, 1);
    }

    .dark {
      /* Dark Mode Gradient (Purple) */
      --bg-start: hsla(252, 40%, 29%, 1);
      --bg-end: hsla(270, 77%, 71%, 1);
    }

    body {
      font-family: 'Poppins', sans-serif;
      background: linear-gradient(90deg, var(--bg-start), var(--bg-end));
      background-size: 400% 400%;
      animation: gradientAnimation 15s ease infinite;
      transition: background 0.5s ease-in-out;
    }

    @keyframes gradientAnimation {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* Glassmorphism card effect */
    .bg-card {
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      background-clip: padding-box;
    }

    .dark .bg-card {
      background-color: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.15);
    }
    .light .bg-card {
      background-color: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.25);
    }

    /* Input field styling */
    .form-input {
      border: 1px solid transparent;
      transition: all 0.2s ease-in-out;
    }
    .dark .form-input {
        background-color: rgba(0, 0, 0, 0.25);
        border-color: rgba(100, 100, 100, 0.4);
    }
    .light .form-input {
        background-color: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.4);
    }
    .form-input:focus {
        border-color: #a78bfa;
        box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.5);
        background-color: rgba(0, 0, 0, 0.3);
    }
    .light .form-input:focus {
        border-color: #6366f1;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
        background-color: rgba(255, 255, 255, 0.3);
    }
    /* Placeholder color */
    .dark .form-input::placeholder { color: rgba(156, 163, 175, 0.6); }
    .light .form-input::placeholder { color: rgba(255, 255, 255, 0.7); }
  </style>
  <script>
    function setTheme(theme) {
      document.documentElement.classList.toggle('dark', theme === 'dark');
      localStorage.setItem('theme', theme);
    }
    document.addEventListener('DOMContentLoaded', () => {
        const storedTheme = localStorage.getItem('theme');
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        setTheme(storedTheme || (prefersDark ? 'dark' : 'light'));
    });
    function toggleTheme() {
      const isDark = document.documentElement.classList.contains('dark');
      setTheme(isDark ? 'light' : 'dark');
    }
  </script>
</head>
<body class="min-h-screen flex items-center justify-center p-4
             text-gray-800 dark:text-gray-100">

  <div class="bg-card shadow-2xl rounded-3xl p-8 w-full max-w-sm relative">
    <button onclick="toggleTheme()" class="absolute top-4 right-4 p-2 rounded-full
                                          text-white/70 hover:text-white
                                          hover:bg-white/20 dark:hover:bg-black/20 transition-colors duration-200">
      <!-- SVG Icon for theme toggle -->
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 7.625A.75.75 0 018.25 7.5h.75a.75.75 0 01.75.75v.75a.75.75 0 01-.75.75h-.75A.75.75 0 017.5 8.375v-.75zM15 7.5a.75.75 0 01.75.75v.75a.75.75 0 01-1.5 0v-.75a.75.75 0 01.75-.75zM17.65 6.33a.75.75 0 011.06 0l1.06 1.06a.75.75 0 010 1.06l-1.06 1.06a.75.75 0 01-1.06 0L17.65 7.39a.75.75 0 010-1.06zM6.34 17.65a.75.75 0 010-1.06l1.06-1.06a.75.75 0 011.06 0l1.06 1.06a.75.75 0 010 1.06l-1.06 1.06a.75.75 0 01-1.06 0zM12 17.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V18a.75.75 0 01.75-.75zM2.25 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H3a.75.75 0 01-.75-.75zM18 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5h-2.25a.75.75 0 01-.75-.75zM12 7.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z" /></svg>
    </button>
    <div class="text-center mb-8">
      <div class="w-16 h-16 mx-auto bg-gradient-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center text-white text-3xl font-bold shadow-lg mb-4">
        <svg xmlns="http://www.w.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H5v-2H3v-2H1v-4a6 6 0 016-6h4a6 6 0 016 6z" />
        </svg>
      </div>
      <h1 class="text-4xl font-semibold text-white/95 leading-tight">Password Reset</h1>
      <p class="text-md text-white/70 mt-1 max-w-xs mx-auto">Enter and confirm your new password.</p>
    </div>

    <form id="reset-form" class="space-y-6">
        <input type="hidden" id="token-field" name="token" value="{{ token }}">
        <div>
            <label for="password" class="block text-sm font-medium text-white/80 mb-2">New Password</label>
            <input id="password" name="new_password" type="password" autocomplete="new-password" required
                   class="form-input block w-full px-5 py-3 rounded-xl text-white">
        </div>
        <div>
            <label for="confirm-password" class="block text-sm font-medium text-white/80 mb-2">Confirm Password</label>
            <input id="confirm-password" name="confirm_password" type="password" autocomplete="new-password" required
                   class="form-input block w-full px-5 py-3 rounded-xl text-white">
        </div>

        <div id="message-box" class="pt-2 text-center text-sm font-medium hidden"></div>

        <div>
            <button type="submit"
                    class="w-full py-3 px-4 rounded-xl font-semibold text-white text-lg
                           bg-gradient-to-r from-indigo-600 to-purple-600
                           hover:from-indigo-700 hover:to-purple-700
                           focus:ring-4 focus:ring-indigo-300 dark:focus:ring-purple-700
                           shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-0.5">
                Reset Password
            </button>
        </div>
    </form>
  </div>

  <script>
    const form = document.getElementById('reset-form');
    const messageBox = document.getElementById('message-box');
    const tokenField = document.getElementById('token-field');

    form.addEventListener('submit', async (e) => {
        e.preventDefault();

        const newPassword = document.getElementById('password').value;
        const confirmPassword = document.getElementById('confirm-password').value;
        const token = tokenField.value;

        if (newPassword !== confirmPassword) {
            showMessage("Passwords do not match.", 'text-red-300/90');
            return;
        }

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

            const data = await response.json();
            if (response.ok) {
                showMessage(data.message, 'text-green-300/90');
                setTimeout(() => window.location.href = '/auth/login', 3000);
            } else {
                showMessage(data.detail || 'An error occurred.', 'text-red-300/90');
            }
        } catch (error) {
            showMessage('Network error. Please try again.', 'text-red-300/90');
        }
    });

    function showMessage(text, colorClass) {
        messageBox.textContent = text;
        messageBox.className = `pt-2 text-center text-sm font-medium ${colorClass}`;
        messageBox.style.display = 'block';
    }
  </script>
</body>
</html>
