data-entry-app/frontend/src/routes/settings/+page.svelte

<script lang="ts">
  import { api } from '$lib/api';
  import AppSecondaryRail from '$lib/components/navigation/AppSecondaryRail.svelte';
  import AppSecondaryRailLayout from '$lib/components/navigation/AppSecondaryRailLayout.svelte';
  import { clientSession } from '$lib/session';
  import { toast } from '$lib/toast';
  import { CircleUserRound, LockKeyhole } from 'lucide-svelte';

  type Section = 'profile' | 'security';
  let activeSection = $state<Section>('profile');

  let name = $state($clientSession?.name ?? '');
  let email = $state($clientSession?.email ?? '');

  let currentPassword = $state('');
  let newPassword = $state('');
  let confirmPassword = $state('');

  let profileSaving = $state(false);
  let passwordSaving = $state(false);
  let passwordError = $state('');

  async function saveProfile() {
    profileSaving = true;
    const tid = toast.loading('Saving profile…');
    try {
      const updated = await api.updateMe({ name: name.trim(), email: email.trim().toLowerCase() });
      clientSession.set({
        ...$clientSession!,
        name: updated.name,
        email: updated.email,
      });
      toast.dismiss(tid);
      toast.success('Profile updated');
    } catch (err: unknown) {
      toast.dismiss(tid);
      toast.error(err instanceof Error ? err.message : 'An error occurred');
    } finally {
      profileSaving = false;
    }
  }

  async function savePassword() {
    passwordError = '';
    if (newPassword !== confirmPassword) {
      passwordError = 'New passwords do not match';
      return;
    }
    if (newPassword.length < 8) {
      passwordError = 'Password must be at least 8 characters';
      return;
    }
    passwordSaving = true;
    const tid = toast.loading('Updating password…');
    try {
      await api.updateMe({ current_password: currentPassword, new_password: newPassword });
      currentPassword = '';
      newPassword = '';
      confirmPassword = '';
      toast.dismiss(tid);
      toast.success('Password updated');
    } catch (err: unknown) {
      toast.dismiss(tid);
      const msg = err instanceof Error ? err.message : 'An error occurred';
      passwordError = msg;
      toast.error(msg);
    } finally {
      passwordSaving = false;
    }
  }

  const initials = $derived(
    ($clientSession?.name ?? '')
      .split(' ')
      .slice(0, 2)
      .map((w) => w[0])
      .join('')
      .toUpperCase() || '?'
  );

  const navItems: { id: Section; label: string; icon: typeof CircleUserRound }[] = [
    { id: 'profile', label: 'Profile', icon: CircleUserRound },
    { id: 'security', label: 'Security', icon: LockKeyhole },
  ];

  const railGroups = [{ items: navItems }];
</script>

<AppSecondaryRailLayout>
  {#snippet rail()}
    <AppSecondaryRail
      sectionLabel="Settings"
      identityAvatarText={initials}
      identityTitle={$clientSession?.name ?? 'Unknown'}
      identitySubtitle={$clientSession?.role_name ?? $clientSession?.role ?? 'User'}
      groups={railGroups}
      activeId={activeSection}
      onSelect={(id) => (activeSection = id as Section)}
    />
  {/snippet}

  <div class="settings-panel">
    {#if activeSection === 'profile'}
      <div class="panel-section">
        <header class="panel-header">
          <h2>Profile</h2>
          <p>Update your display name and email address.</p>
        </header>

        <form class="panel-form" onsubmit={(e) => { e.preventDefault(); saveProfile(); }}>
          <div class="field-row">
            <div class="field">
              <label for="name">Full name</label>
              <input id="name" type="text" bind:value={name} autocomplete="name" required />
            </div>
            <div class="field">
              <label for="email">Email address</label>
              <input id="email" type="email" bind:value={email} autocomplete="email" required />
            </div>
          </div>

          <div class="form-footer">
            <button class="btn-primary" type="submit" disabled={profileSaving}>
              {profileSaving ? 'Saving…' : 'Save changes'}
            </button>
          </div>
        </form>
      </div>

    {:else if activeSection === 'security'}
      <div class="panel-section">
        <header class="panel-header">
          <h2>Security</h2>
          <p>Choose a strong password with at least 8 characters.</p>
        </header>

        <form class="panel-form" onsubmit={(e) => { e.preventDefault(); savePassword(); }}>
          <div class="field">
            <label for="current-password">Current password</label>
            <input id="current-password" type="password" bind:value={currentPassword} autocomplete="current-password" required />
          </div>

          <div class="divider" aria-hidden="true"></div>

          <div class="field-row">
            <div class="field">
              <label for="new-password">New password</label>
              <input id="new-password" type="password" bind:value={newPassword} autocomplete="new-password" required />
            </div>
            <div class="field">
              <label for="confirm-password">Confirm new password</label>
              <input id="confirm-password" type="password" bind:value={confirmPassword} autocomplete="new-password" required />
            </div>
          </div>

          {#if passwordError}
            <p class="form-error">{passwordError}</p>
          {/if}

          <div class="form-footer">
            <button class="btn-primary" type="submit" disabled={passwordSaving}>
              {passwordSaving ? 'Updating…' : 'Update password'}
            </button>
          </div>
        </form>
      </div>
    {/if}
  </div>
</AppSecondaryRailLayout>

<style>
  .settings-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--panel);
  }

  .panel-section {
    display: flex;
    flex-direction: column;
  }

  .panel-header {
    padding: 1.5rem 1.75rem 1.25rem;
    border-bottom: 1px solid var(--line);
  }

  .panel-header h2 {
    margin: 0 0 0.3rem;
    font-size: 1.1rem;
    font-weight: 700;
  }

  .panel-header p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
  }

  /* ── Form ───────────────────────────────────────────────────── */

  .panel-form {
    display: grid;
    gap: 1rem;
    width: 100%;
    padding: 1.5rem 1.75rem;
    max-width: 42rem;
  }

  .field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .field {
    display: grid;
    gap: 0.42rem;
  }

  .field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
  }

  .field input {
    width: 100%;
    padding: 0.62rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    background: var(--panel-soft);
    color: var(--text);
    font-size: 0.9rem;
    transition: border-color 140ms ease, box-shadow 140ms ease;
    box-sizing: border-box;
  }

  .field input:focus {
    outline: none;
    border-color: var(--green-deep);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 18%, transparent);
  }

  .divider {
    height: 1px;
    background: var(--line);
    margin: 0.25rem 0;
  }

  .form-error {
    margin: 0;
    padding: 0.65rem 0.85rem;
    background: color-mix(in srgb, #e53e3e 8%, transparent);
    border: 1px solid color-mix(in srgb, #e53e3e 25%, transparent);
    border-radius: 0.6rem;
    color: #c53030;
    font-size: 0.84rem;
  }

  .form-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.25rem;
    border-top: 1px solid var(--line);
    margin-top: 0.5rem;
  }

  .btn-primary {
    padding: 0.58rem 1.4rem;
    background: var(--color-brand);
    color: #fff;
    border: none;
    border-radius: 0.6rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 140ms ease;
  }

  .btn-primary:hover:not(:disabled) {
    opacity: 0.88;
  }

  .btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* ── Responsive ─────────────────────────────────────────────── */

  @media (max-width: 720px) {
    .field-row {
      grid-template-columns: 1fr;
    }
  }
</style>