<!-- #region ProfilePage [C:3] [TYPE Page] [SEMANTICS sveltekit, profile, preferences, user, settings] -->
<!-- @BRIEF User profile page for viewing and editing personal preferences and settings. -->
<!-- @LAYER Page -->
<!-- @RELATION BINDS_TO -> [EXT:frontend:api_module] -->
<!-- @UX_STATE Loading -> Profile data loading. -->
<!-- @UX_STATE Loaded -> Profile form displayed. -->
<!-- @UX_STATE Error -> Error message shown. -->
<!-- @UX_FEEDBACK Success toast on profile update. -->
<script lang="ts">
  import { onMount } from 'svelte';
  import { t } from '$lib/i18n/index.svelte.js';
  import { PageHeader, Button, Card, Input } from '$lib/ui';
  import { api } from '$lib/api.js';
  import { auth } from '$lib/auth/store.svelte.js';
  import { addToast } from '$lib/toasts.svelte.js';
  import { hasPermission } from '$lib/auth/permissions.js';

  let _authState = $state({ user: null, token: null, isAuthenticated: false, loading: true });
  $effect(() => {
    const unsub = auth.subscribe(v => { _authState = v; });
    return unsub;
  });

  let preferences = $state<any>({});
  let loading = $state(true);
  let saving = $state(false);

  let user = $derived(_authState.user || null);

  onMount(async () => {
    try {
      const response = await api.getProfilePreferences();
      preferences = response?.preference || {};
    } catch (e) {
      addToast(String(e?.message || 'Failed to load preferences'), 'error');
    } finally {
      loading = false;
    }
  });

  async function handleSave() {
    saving = true;
    try {
      await api.postApi('/profile/preferences', { preference: preferences });
      addToast($t.profile?.saved || 'Preferences saved', 'success');
    } catch (e) {
      addToast(String(e?.message || 'Failed to save preferences'), 'error');
    } finally {
      saving = false;
    }
  }
</script>

<div class="max-w-2xl mx-auto px-4 py-8">
  <PageHeader title={$t.nav?.profile || 'Profile'} />

  {#if loading}
    <div class="animate-pulse space-y-4 mt-6">
      <div class="h-10 bg-gray-200 rounded w-full"></div>
      <div class="h-10 bg-gray-200 rounded w-full"></div>
      <div class="h-10 bg-gray-200 rounded w-1/3"></div>
    </div>
  {:else}
    <Card title={$t.profile?.preferences || 'Preferences'} padding="lg">
      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">{$t.profile?.start_page || 'Start page'}</label>
          <select
            class="w-full px-3 py-2 border border-gray-300 rounded-md"
            bind:value={preferences.start_page}
          >
            <option value="dashboards">{$t.nav?.dashboards}</option>
            <option value="datasets">{$t.nav?.datasets}</option>
            <option value="reports">{$t.nav?.reports}</option>
          </select>
        </div>
        <div class="pt-4">
          <Button onclick={handleSave} isLoading={saving}>
            {$t.common?.save || 'Save'}
          </Button>
        </div>
      </div>
    </Card>
  {/if}
</div>
<!-- #endregion ProfilePage -->
