<script setup lang="ts">
usePageTitle('Account')

const tab = ref('profile')

const tabItems = [
  { label: 'Profile', value: 'profile', icon: 'i-heroicons-user', slot: 'profile' },
  { label: 'Theme & appearance', value: 'theme', icon: 'i-heroicons-swatch', slot: 'theme' },
  { label: 'Preferences', value: 'prefs', icon: 'i-heroicons-adjustments-horizontal', slot: 'prefs' }
]
</script>

<template>
  <div class="mx-auto max-w-3xl space-y-8">
    <div class="flex flex-wrap items-center gap-x-3 gap-y-2 text-sm">
      <NuxtLink
        to="/"
        class="inline-flex items-center gap-1.5 font-medium text-[var(--text-muted)] transition hover:text-[var(--text-primary)]"
      >
        <UIcon name="i-heroicons-home" class="h-4 w-4" />
        Home
      </NuxtLink>
      <span class="text-[var(--text-muted)] opacity-50" aria-hidden="true">|</span>
      <span class="text-[var(--text-muted)]">Signed-in user (mock)</span>
    </div>

    <div>
      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Your account</h1>
      <p class="mt-2 max-w-2xl text-[14px] leading-relaxed text-[var(--text-muted)]">
        Profile, photo, and how the app looks for you. Software-wide configuration stays under Settings; company branding
        is managed separately by a tenant administrator.
      </p>
    </div>

    <UTabs v-model="tab" :items="tabItems" variant="link" color="primary" class="w-full">
      <template #profile>
        <div class="space-y-8 pt-4">
          <div class="flex flex-col gap-6 sm:flex-row sm:items-start">
            <div class="flex shrink-0 flex-col items-center gap-2">
              <div
                class="flex h-24 w-24 items-center justify-center rounded-full border border-[var(--sidebar-border)] bg-[var(--brand-faint)] text-[var(--brand)] ring-2 ring-[var(--brand)]/20"
              >
                <UIcon name="i-heroicons-user" class="h-14 w-14" />
              </div>
              <UButton size="sm" color="neutral" variant="soft" disabled>Change photo (soon)</UButton>
              <p class="max-w-[12rem] text-center text-[11px] text-[var(--text-muted)]">Avatar syncs when directory login is connected.</p>
            </div>
            <div class="min-w-0 flex-1 space-y-4">
              <UFormField label="Display name" description="Shown in the top bar when profiles are wired up.">
                <UInput placeholder="Your name" disabled class="max-w-md" />
              </UFormField>
              <UFormField label="Email" description="From your identity provider (not editable here yet).">
                <UInput model-value="you@company.com" type="email" disabled class="max-w-md" />
              </UFormField>
            </div>
          </div>
        </div>
      </template>

      <template #theme>
        <div class="pt-4">
          <AccountThemeSection />
        </div>
      </template>

      <template #prefs>
        <div class="space-y-4 pt-4">
          <p class="text-sm text-[var(--text-muted)]">Locale, density, and defaults will live here when account APIs exist.</p>
          <div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/5">
            <UFormField label="Language" class="max-w-md">
              <USelect
                model-value="en"
                disabled
                :items="[
                  { label: 'English (default)', value: 'en' },
                  { label: 'Español (soon)', value: 'es' }
                ]"
                value-key="value"
                label-key="label"
                class="w-full"
              />
            </UFormField>
          </div>
        </div>
      </template>
    </UTabs>
  </div>
</template>
