<script lang="ts">
  import { goto } from '$app/navigation';
  import LoginForm from '$lib/components/Auth/LoginForm.svelte';
  import { login, isLoading, authError, clearAuthError } from '$lib/stores/auth';
  import { LayoutDashboard } from 'lucide-svelte';

  async function handleLogin(event: CustomEvent<{ email: string; password: string }>) {
    const { email, password } = event.detail;
    clearAuthError();
    
    const result = await login({ email, password });
    
    if (result.success) {
      goto('/dashboard');
    }
  }
</script>

<svelte:head>
  <title>Login - Headroom</title>
</svelte:head>

<div class="min-h-screen flex flex-col items-center justify-center bg-base-200 p-4">
  <!-- App Branding/Logo -->
  <div class="mb-8 text-center">
    <div class="inline-flex items-center justify-center w-16 h-16 bg-primary rounded-2xl shadow-lg mb-4">
      <LayoutDashboard size={32} class="text-primary-content" />
    </div>
    <h1 class="text-3xl font-bold text-base-content">Headroom</h1>
    <p class="text-base-content/60 mt-2">Resource Planning & Capacity Management</p>
  </div>

  <div class="card w-full max-w-md bg-base-100 shadow-xl border border-base-300">
    <div class="card-body p-8">
      <h2 class="card-title text-xl text-center justify-center mb-2">
        Welcome Back
      </h2>
      
      <p class="text-center text-base-content/60 mb-6">
        Sign in to access your dashboard
      </p>

      <LoginForm
        on:login={handleLogin}
        isLoading={$isLoading}
        errorMessage={$authError}
      />

      <div class="divider text-base-content/40 text-sm">Demo Access</div>

      <div class="text-center text-sm">
        <p class="text-base-content/60">Use these credentials to explore:</p>
        <div class="mt-2 p-3 bg-base-200 rounded-lg">
          <code class="text-sm font-mono text-base-content">admin@example.com</code>
          <span class="text-base-content/40 mx-2">/</span>
          <code class="text-sm font-mono text-base-content">password</code>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Footer -->
  <p class="mt-8 text-sm text-base-content/40 text-center">
    Headroom - Engineering Resource Planning
  </p>
</div>
