<script lang="ts">
import { page } from '$app/stores';
import { onMount } from 'svelte';
let email = '';
let currentPassword = '';
let newPassword = '';
let confirmPassword = '';

// Use $page as a reactive value
$: fullName = $page.data?.user?.username || '';

let storageUsed = 0;
const MAX_STORAGE = 1024 * 1024 * 1024; // 1GB in bytes
let loadingStorage = true;

onMount(async () => {
  loadingStorage = true;
  try {
    const res = await fetch('/api/user-storage');
    if (res.ok) {
      const data = await res.json();
      storageUsed = data.usage;
    }
  } finally {
    loadingStorage = false;
  }
});

function formatBytes(bytes: number) {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
}

function handleEmailChange(e: Event) {
  e.preventDefault();
  alert('Email change submitted (dummy)');
}

function handlePasswordChange(e: Event) {
  e.preventDefault();
  if (newPassword !== confirmPassword) {
    alert('Passwords do not match!');
    return;
  }
  alert('Password change submitted (dummy)');
}
</script>

<h1 class="text-2xl font-bold mb-4">Profile</h1>

<!-- Storage Usage Bar -->
<div class="mb-8 p-4 bg-muted rounded">
  <div class="font-medium mb-2">Storage Usage</div>
  {#if loadingStorage}
    <div>Loading...</div>
  {:else}
    <div class="flex items-center gap-2 mb-1">
      <div class="flex-1 h-4 bg-gray-200 rounded overflow-hidden">
        <div class="h-4 bg-primary" style="width: {Math.min(100, (storageUsed / MAX_STORAGE) * 100)}%"></div>
      </div>
      <div class="text-sm text-muted-foreground whitespace-nowrap">{formatBytes(storageUsed)} / 1 GB</div>
    </div>
    {#if storageUsed > MAX_STORAGE}
      <div class="text-red-600 text-xs mt-1">You have exceeded your storage limit!</div>
    {/if}
  {/if}
</div>

<div class="mb-8 p-4 bg-muted rounded">
  <div class="font-medium">Full Name</div>
  <div class="text-lg">{fullName}</div>
</div>

<form class="space-y-4 mb-8" on:submit|preventDefault={handleEmailChange}>
  <div>
    <label class="block mb-1 font-medium" for="email">Email Address</label>
    <input id="email" type="email" bind:value={email} class="border rounded px-3 py-2 w-full" required />
  </div>
  <button type="submit" class="bg-primary text-primary-foreground rounded px-4 py-2">Change Email</button>
</form>

<form class="space-y-4" on:submit|preventDefault={handlePasswordChange}>
  <div>
    <label class="block mb-1 font-medium" for="currentPassword">Current Password</label>
    <input id="currentPassword" type="password" bind:value={currentPassword} class="border rounded px-3 py-2 w-full" required />
  </div>
  <div>
    <label class="block mb-1 font-medium" for="newPassword">New Password</label>
    <input id="newPassword" type="password" bind:value={newPassword} class="border rounded px-3 py-2 w-full" required />
  </div>
  <div>
    <label class="block mb-1 font-medium" for="confirmPassword">Confirm New Password</label>
    <input id="confirmPassword" type="password" bind:value={confirmPassword} class="border rounded px-3 py-2 w-full" required />
  </div>
  <button type="submit" class="bg-primary text-primary-foreground rounded px-4 py-2">Change Password</button>
</form> 