<script lang="ts">
  import { goto } from '$app/navigation';

  let identifier = $state('');
  let password = $state('');
  let error = $state('');
  let loading = $state(false);

  async function handleSubmit() {
    loading = true;
    error = '';

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

      const data = await res.json();

      if (!res.ok) {
        error = data.error || 'Login failed';
        return;
      }

      localStorage.setItem('token', data.data.token);
      
      if (data.data.user.role === 'admin') {
        goto('/');
      } else {
        goto('/auth/dashboard');
      }
    } catch (e) {
      error = 'Connection error';
    } finally {
      loading = false;
    }
  }
</script>

<div class="login-container">
  <div class="login-card">
    <h1>IMC Vibe</h1>
    <p class="subtitle">Mail Server Administration</p>

    {#if error}
      <div class="error">{error}</div>
    {/if}

    <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
      <label>
        Email or Username
        <input
          type="text"
          bind:value={identifier}
          placeholder="user@example.org or username"
          required
          autocomplete="username"
        />
      </label>

      <label>
        Password
        <input
          type="password"
          bind:value={password}
          placeholder="Enter password"
          required
          autocomplete="current-password"
        />
      </label>

      <div class="forgot">
        <a href="/auth/forgot">Forgot password?</a>
      </div>

      <button type="submit" disabled={loading}>
        {loading ? 'Signing in...' : 'Sign In'}
      </button>
    </form>
  </div>
</div>

<style>
  .login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  }

  .login-card {
    background: white;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 400px;
  }

  h1 {
    margin: 0;
    text-align: center;
    color: #2c3e50;
    font-size: 2rem;
  }

  .subtitle {
    text-align: center;
    color: #7f8c8d;
    margin: 0.5rem 0 2rem;
  }

  .error {
    background: #fee;
    border: 1px solid #fcc;
    color: #c00;
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
  }

  form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-weight: 500;
    color: #2c3e50;
  }

  input {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s;
  }

  input:focus {
    outline: none;
    border-color: #3498db;
  }

  .forgot {
    text-align: right;
    margin-top: -0.5rem;
  }

  .forgot a {
    color: #3498db;
    text-decoration: none;
    font-size: 0.9rem;
  }

  .forgot a:hover {
    text-decoration: underline;
  }

  button {
    padding: 0.875rem;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 0.5rem;
  }

  button:hover:not(:disabled) {
    background: #2980b9;
  }

  button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }
</style>
