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

  let user: { email?: string; username?: string; quota?: number; role?: string } | null = $state(null);
  let loading = $state(true);

  onMount(async () => {
    const token = localStorage.getItem('token');
    if (!token) {
      await goto('/auth/login');
      return;
    }

    try {
      const res = await fetch('/api/auth/me', {
        headers: { Authorization: `Bearer ${token}` }
      });
      
      if (!res.ok) {
        await goto('/auth/login');
        return;
      }

      const data = await res.json();
      user = data.data;

      if (user?.role === 'admin') {
        await goto('/');
        return;
      }
    } catch {
      await goto('/auth/login');
    } finally {
      loading = false;
    }
  });

  function handleLogout() {
    localStorage.removeItem('token');
    goto('/auth/login');
  }
</script>

<div class="page-container">
  <header class="header">
    <h1>User Dashboard</h1>
    <div class="user-info">
      {#if user}
        <span>Logged in as <strong>{user.email || user.username}</strong></span>
      {/if}
      <button class="logout" onclick={handleLogout}>Logout</button>
    </div>
  </header>

  <div class="content">
    {#if loading}
      <p>Loading...</p>
    {:else if user}
      <div class="card">
        <h2>Account Information</h2>
        <div class="info-row">
          <span class="label">Email:</span>
          <span class="value">{user.email || 'N/A'}</span>
        </div>
        <div class="info-row">
          <span class="label">Username:</span>
          <span class="value">{user.username || 'N/A'}</span>
        </div>
        <div class="info-row">
          <span class="label">Role:</span>
          <span class="value">{user.role}</span>
        </div>
        {#if user.quota !== undefined}
          <div class="info-row">
            <span class="label">Quota:</span>
            <span class="value">{user.quota > 0 ? (user.quota / 1024 / 1024).toFixed(0) + ' MB' : 'Unlimited'}</span>
          </div>
        {/if}
      </div>

      <div class="card">
        <h2>Quick Actions</h2>
        <div class="actions">
          <a href="/auth/change-password" class="action-btn">Change Password</a>
        </div>
      </div>
    {/if}
  </div>
</div>

<style>
  .page-container {
    min-height: 100vh;
    background: #f5f7fa;
  }

  .header {
    background: white;
    padding: 1rem 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header h1 {
    margin: 0;
    font-size: 1.5rem;
    color: #2c3e50;
  }

  .user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .logout {
    padding: 0.5rem 1rem;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .content {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
  }

  .card {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
  }

  .card h2 {
    margin: 0 0 1rem;
    color: #2c3e50;
    font-size: 1.2rem;
  }

  .info-row {
    display: flex;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
  }

  .info-row:last-child {
    border-bottom: none;
  }

  .label {
    font-weight: 500;
    color: #666;
    width: 120px;
  }

  .value {
    color: #2c3e50;
  }

  .actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .action-btn {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: opacity 0.2s;
  }

  .action-btn:hover {
    opacity: 0.9;
  }
</style>
