<script setup lang="ts">
import { useForm } from '@inertiajs/vue3'
import ProfileSettingsPanel from '@/components/profile/ProfileSettingsPanel.vue'
import { useAuth } from '@/composables/useAuth'
import DashboardLayout from '@/layouts/DashboardLayout.vue'

defineOptions({
  layout: DashboardLayout,
})

const { flash, user } = useAuth()

const form = useForm({
  first_name: user.value?.first_name ?? '',
  last_name: user.value?.last_name ?? '',
  username: user.value?.username ?? '',
  email: user.value?.email ?? '',
})

function updateProfile() {
  form.patch('/profile', {
    preserveScroll: true,
    onSuccess: () => form.defaults(),
  })
}
</script>

<template>
  <ProfileSettingsPanel>
    <UAlert
      v-if="flash.success"
      color="success"
      icon="i-lucide-check-circle"
      :title="flash.success"
    />

    <form @submit.prevent="updateProfile">
      <UPageCard
        title="Profile"
        description="Manage the personal information used for your account."
        variant="naked"
        orientation="horizontal"
        class="mb-4"
      >
        <UButton
          type="submit"
          label="Save changes"
          color="neutral"
          class="w-fit lg:ms-auto"
          :loading="form.processing"
          :disabled="!form.isDirty"
        />
      </UPageCard>

      <UPageCard variant="subtle">
        <UFormField
          label="Avatar"
          description="Generated from your account name until avatar uploads are configured."
          class="flex items-center justify-between gap-4"
        >
          <UAvatar :alt="user?.full_name" size="lg" />
        </UFormField>

        <USeparator />

        <UFormField
          label="First name"
          name="first_name"
          description="Used to personalize your account."
          required
          :error="form.errors.first_name"
          class="flex max-sm:flex-col items-start justify-between gap-4"
        >
          <UInput
            v-model="form.first_name"
            autocomplete="given-name"
            class="w-full sm:w-64"
          />
        </UFormField>

        <USeparator />

        <UFormField
          label="Last name"
          name="last_name"
          description="Displayed together with your first name."
          required
          :error="form.errors.last_name"
          class="flex max-sm:flex-col items-start justify-between gap-4"
        >
          <UInput
            v-model="form.last_name"
            autocomplete="family-name"
            class="w-full sm:w-64"
          />
        </UFormField>

        <USeparator />

        <UFormField
          label="Username"
          name="username"
          description="Your unique username for signing in."
          required
          :error="form.errors.username"
          class="flex max-sm:flex-col items-start justify-between gap-4"
        >
          <UInput
            v-model="form.username"
            autocomplete="username"
            class="w-full sm:w-64"
          />
        </UFormField>

        <USeparator />

        <UFormField
          label="Email"
          name="email"
          description="Changing it requires email verification again when enabled."
          required
          :error="form.errors.email"
          class="flex max-sm:flex-col items-start justify-between gap-4"
        >
          <div class="flex w-full flex-col items-end gap-2 sm:w-64">
            <UInput
              v-model="form.email"
              type="email"
              autocomplete="email"
              class="w-full"
            />
            <UBadge
              :color="user?.email_verified_at ? 'success' : 'warning'"
              variant="subtle"
              :icon="user?.email_verified_at ? 'i-lucide-badge-check' : 'i-lucide-circle-alert'"
            >
              {{ user?.email_verified_at ? 'Email verified' : 'Email not verified' }}
            </UBadge>
          </div>
        </UFormField>
      </UPageCard>
    </form>
  </ProfileSettingsPanel>
</template>
