<script lang="ts" setup>
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import dayjs from 'dayjs'
import * as select from '@zag-js/select'
import Swal from 'sweetalert2'
import { AlertRoot, AlertTitle, AlertDescription } from '@/components/ui/alert'
import { Badge } from '@/components/ui/badge'
import { Box } from '@/components/ui/box'
import { Button } from '@/components/ui/button'
import { CheckboxRoot, CheckboxControl, CheckboxLabel } from '@/components/ui/checkbox'
import { Field, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'
import { Lucide } from '@/components/ui/lucide'
import {
  SelectRoot,
  SelectControl,
  SelectTrigger,
  SelectValueText,
  SelectContent,
  SelectItemGroup,
  SelectItemGroupLabel,
  SelectItem,
  SelectItemText,
} from '@/components/ui/select'
import { getApiErrorMessage, getApiValidationErrors } from '@/core/utils/getApiErrorMessage'
import type { Employment, EmploymentPayload } from '@/modules/profile/types/employment.types'
import { sanitizeIcNumberInput, sanitizeNameInput } from '@/utils/form-input.utils'
import {
  createUserEmployment,
  deleteUserEmployment,
  updateUserEmployment,
} from '../services/userEmployment.service'
import { getUser, updateUser } from '../services/user.service'
import { EMPLOYERS } from '@/constants/employers'

type SelectOption = { label: string; value: string }

const STATUS_OPTIONS: SelectOption[] = [
  { label: 'Active', value: 'active' },
  { label: 'Inactive', value: 'inactive' },
  { label: 'Pending', value: 'pending' },
]

const GENDER_OPTIONS: SelectOption[] = [
  { label: 'Lelaki', value: 'Lelaki' },
  { label: 'Perempuan', value: 'Perempuan' },
]

const MARRIAGE_STATUS_OPTIONS: SelectOption[] = [
  { label: 'Belum Berkahwin', value: 'Belum Berkahwin' },
  { label: 'Berkahwin', value: 'Berkahwin' },
  { label: 'Bercerai', value: 'Bercerai' },
  { label: 'Balu', value: 'Balu' },
  { label: 'Duda', value: 'Duda' },
]

const MEMBER_TYPE_OPTIONS: SelectOption[] = [
  { label: 'Anggota', value: 'Anggota' },
  { label: 'Pesara', value: 'Pesara' },
]

const EMPLOYMENT_TYPE_OPTIONS: SelectOption[] = [
  { label: 'Tetap', value: 'Permanent' },
  { label: 'Kontrak', value: 'Contract' },
  { label: 'Percubaan', value: 'Trial' },
  { label: 'Sambilan', value: 'Part-time' },
]

const COMPANY_OPTIONS: SelectOption[] = EMPLOYERS.map((employer) => ({
  label: employer.name,
  value: employer.name,
}))

type EmploymentFieldKey =
  | 'company_name'
  | 'job_title'
  | 'employment_type'
  | 'salary'
  | 'start_date'
  | 'end_date'
  | 'is_current'

const EMPLOYMENT_FIELD_KEYS: EmploymentFieldKey[] = [
  'company_name',
  'job_title',
  'employment_type',
  'salary',
  'start_date',
  'end_date',
  'is_current',
]

function createSelectCollection(options: SelectOption[]) {
  return select.collection({
    items: options,
    itemToValue: (item) => item.label,
  })
}

function labelToApiValue(options: SelectOption[], label: string | undefined): string | null {
  if (!label) return null
  return options.find((option) => option.label === label)?.value ?? null
}

function apiValueToLabel(options: SelectOption[], value: string | null | undefined): string[] {
  if (!value) return []
  const option = options.find((item) => item.value === value)
  return option ? [option.label] : []
}

const statusCollection = createSelectCollection(STATUS_OPTIONS)
const genderCollection = createSelectCollection(GENDER_OPTIONS)
const marriageStatusCollection = createSelectCollection(MARRIAGE_STATUS_OPTIONS)
const memberTypeCollection = createSelectCollection(MEMBER_TYPE_OPTIONS)
const employmentTypeCollection = createSelectCollection(EMPLOYMENT_TYPE_OPTIONS)
const companyNameCollection = createSelectCollection(COMPANY_OPTIONS)

const statusValue = ref<string[]>([])
const genderValue = ref<string[]>([])
const marriageStatusValue = ref<string[]>([])
const memberTypeValue = ref<string[]>([])

const statusInitial = ref<string[]>([])
const genderInitial = ref<string[]>([])
const marriageStatusInitial = ref<string[]>([])
const memberTypeInitial = ref<string[]>([])

const employmentTypeValue = ref<string[]>([])
const employmentTypeInitial = ref<string[]>([])
const companyNameValue = ref<string[]>([])
const companyNameInitial = ref<string[]>([])

const employments = ref<Employment[]>([])
const savingEmployment = ref(false)
const deletingEmploymentId = ref<string | null>(null)
const editingEmploymentId = ref<string | null>(null)
const employmentErrors = reactive<Partial<Record<EmploymentFieldKey, string>>>({})

function emptyEmploymentForm() {
  return {
    company_name: '',
    job_title: '',
    employment_type: '',
    salary: '',
    start_date: '',
    end_date: '',
    is_current: true,
  }
}

const employmentForm = reactive(emptyEmploymentForm())

function setStatusValue(details: { value: string[] }) {
  statusValue.value = details.value
}

function setGenderValue(details: { value: string[] }) {
  genderValue.value = details.value
}

function setMarriageStatusValue(details: { value: string[] }) {
  marriageStatusValue.value = details.value
}

function setMemberTypeValue(details: { value: string[] }) {
  memberTypeValue.value = details.value
}

function setEmploymentTypeValue(details: { value: string[] }) {
  employmentTypeValue.value = details.value
  clearEmploymentFieldError('employment_type')
  employmentForm.employment_type =
    labelToApiValue(EMPLOYMENT_TYPE_OPTIONS, details.value[0]) ?? ''
}

function setCompanyNameValue(details: { value: string[] }) {
  companyNameValue.value = details.value
  clearEmploymentFieldError('company_name')
  employmentForm.company_name = details.value[0] ?? ''
}

function clearEmploymentFieldError(field: EmploymentFieldKey) {
  delete employmentErrors[field]
}

function clearEmploymentErrors() {
  for (const field of EMPLOYMENT_FIELD_KEYS) {
    delete employmentErrors[field]
  }
}

function setEmploymentErrorsFromApi(error: unknown): boolean {
  const apiErrors = getApiValidationErrors(error)
  if (!apiErrors) return false

  for (const [field, messages] of Object.entries(apiErrors)) {
    if (EMPLOYMENT_FIELD_KEYS.includes(field as EmploymentFieldKey) && messages[0]) {
      employmentErrors[field as EmploymentFieldKey] = messages[0]
    }
  }

  return Object.keys(employmentErrors).length > 0
}

function syncEmploymentSelectValues() {
  employmentTypeValue.value = apiValueToLabel(
    EMPLOYMENT_TYPE_OPTIONS,
    employmentForm.employment_type,
  )
  employmentTypeInitial.value = [...employmentTypeValue.value]
  companyNameValue.value = apiValueToLabel(COMPANY_OPTIONS, employmentForm.company_name)
  companyNameInitial.value = [...companyNameValue.value]
}

function resetEmploymentForm() {
  Object.assign(employmentForm, emptyEmploymentForm())
  editingEmploymentId.value = null
  clearEmploymentErrors()
  syncEmploymentSelectValues()
}

const router = useRouter()
const route = useRoute()

const userId = computed(() => String(route.params.id ?? ''))

const loading = ref(false)
const saving = ref(false)
const error = ref<string | null>(null)
const successMessage = ref<string | null>(null)

const email = ref('')

const form = reactive({
  name: '',
  ic_number: '',
  position: '',
  phone_number: '',
  member_number: '',
  join_date: '',
  leave_date: '',
  birth_date: '',
  birth_place: '',
})

function handleNameInput() {
  form.name = sanitizeNameInput(form.name)
}

function handleIcNumberInput() {
  form.ic_number = sanitizeIcNumberInput(form.ic_number)
}

function toDateInputValue(value: string | null | undefined): string {
  if (!value) return ''
  return value.slice(0, 10)
}

function syncFormFromUser(user: Awaited<ReturnType<typeof getUser>>['data']) {
  email.value = user.email ?? ''
  form.name = user.name ?? ''
  form.ic_number = user.ic_number ?? ''
  form.position = user.position ?? ''
  form.phone_number = user.phone_number ?? ''
  form.member_number = user.member_number != null ? String(user.member_number) : ''
  form.join_date = toDateInputValue(user.join_date)
  form.leave_date = toDateInputValue(user.leave_date)
  form.birth_date = toDateInputValue(user.birth_date)
  form.birth_place = user.birth_place ?? ''
  statusValue.value = apiValueToLabel(STATUS_OPTIONS, user.status ?? 'active')
  genderValue.value = apiValueToLabel(GENDER_OPTIONS, user.gender)
  marriageStatusValue.value = apiValueToLabel(MARRIAGE_STATUS_OPTIONS, user.marriage_status)
  memberTypeValue.value = apiValueToLabel(MEMBER_TYPE_OPTIONS, user.member_type)
  statusInitial.value = [...statusValue.value]
  genderInitial.value = [...genderValue.value]
  marriageStatusInitial.value = [...marriageStatusValue.value]
  memberTypeInitial.value = [...memberTypeValue.value]
  employments.value = user.employments ?? []
}

const employmentTypeLabel = computed(() =>
  Object.fromEntries(EMPLOYMENT_TYPE_OPTIONS.map((option) => [option.value, option.label])),
)

const isEditingEmployment = computed(() => editingEmploymentId.value !== null)

const canAddEmployment = computed(() => !loading.value && employments.value.length === 0)

const showEmploymentForm = computed(() => isEditingEmployment.value || canAddEmployment.value)

function formatSalary(value: number | string | null | undefined): string {
  const amount = Number(value)
  if (Number.isNaN(amount)) return '-'
  return new Intl.NumberFormat('ms-MY', {
    style: 'currency',
    currency: 'MYR',
    minimumFractionDigits: 2,
  }).format(amount)
}

function formatDateLabel(value: string | null | undefined): string {
  if (!value) return ''
  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return value
  return new Intl.DateTimeFormat('ms-MY', {
    day: 'numeric',
    month: 'short',
    year: 'numeric',
  }).format(date)
}

function formatEmploymentPeriod(employment: Employment): string {
  const start = formatDateLabel(employment.start_date)
  if (employment.is_current) {
    return `${start} - Kini`
  }
  const end = formatDateLabel(employment.end_date)
  return end ? `${start} - ${end}` : start
}

function validateEmploymentForm(): boolean {
  clearEmploymentErrors()

  let valid = true

  if (!companyNameValue.value[0]?.trim()) {
    employmentErrors.company_name = 'Nama syarikat diperlukan.'
    valid = false
  }

  if (!employmentForm.job_title.trim()) {
    employmentErrors.job_title = 'Jawatan diperlukan.'
    valid = false
  }

  if (
    !employmentTypeValue.value[0] ||
    !labelToApiValue(EMPLOYMENT_TYPE_OPTIONS, employmentTypeValue.value[0])
  ) {
    employmentErrors.employment_type = 'Jenis kerja diperlukan.'
    valid = false
  }

  const salary = Number(employmentForm.salary)
  if (!employmentForm.salary.toString().trim() || Number.isNaN(salary) || salary < 0) {
    employmentErrors.salary = 'Gaji diperlukan.'
    valid = false
  }

  if (!employmentForm.start_date) {
    employmentErrors.start_date = 'Tarikh mula diperlukan.'
    valid = false
  }

  if (!employmentForm.is_current && !employmentForm.end_date) {
    employmentErrors.end_date = 'Tarikh tamat diperlukan jika bukan pekerjaan semasa.'
    valid = false
  }

  if (
    !employmentForm.is_current &&
    employmentForm.start_date &&
    employmentForm.end_date &&
    employmentForm.end_date < employmentForm.start_date
  ) {
    employmentErrors.end_date = 'Tarikh tamat mesti selepas tarikh mula.'
    valid = false
  }

  return valid
}

function buildEmploymentPayload(): EmploymentPayload {
  return {
    company_name: employmentForm.company_name.trim(),
    job_title: employmentForm.job_title.trim(),
    employment_type:
      labelToApiValue(EMPLOYMENT_TYPE_OPTIONS, employmentTypeValue.value[0]) ??
      employmentForm.employment_type,
    salary: Number(employmentForm.salary),
    start_date: employmentForm.start_date,
    end_date: employmentForm.is_current ? null : employmentForm.end_date || null,
    is_current: employmentForm.is_current,
  }
}

async function refreshEmployments() {
  const response = await getUser(userId.value)
  employments.value = response.data.employments ?? []
}

function startEditEmployment(employment: Employment) {
  clearEmploymentErrors()
  editingEmploymentId.value = employment.id
  employmentForm.company_name = employment.company_name
  employmentForm.job_title = employment.job_title
  employmentForm.employment_type = employment.employment_type
  employmentForm.salary = String(employment.salary)
  employmentForm.start_date = toDateInputValue(employment.start_date)
  employmentForm.end_date = toDateInputValue(employment.end_date)
  employmentForm.is_current = employment.is_current
  syncEmploymentSelectValues()
}

async function onSaveEmployment() {
  if (!validateEmploymentForm()) {
    return
  }

  savingEmployment.value = true
  const wasEditing = isEditingEmployment.value
  const payload = buildEmploymentPayload()

  try {
    const res = wasEditing
      ? await updateUserEmployment(userId.value, editingEmploymentId.value!, payload)
      : await createUserEmployment(userId.value, payload)

    if (!res.success) {
      throw new Error(res.message ?? 'Gagal menyimpan pekerjaan.')
    }

    await refreshEmployments()
    resetEmploymentForm()

    await Swal.fire({
      toast: true,
      position: 'top-end',
      icon: 'success',
      title: wasEditing ? 'Pekerjaan berjaya dikemas kini.' : 'Pekerjaan berjaya ditambah.',
      showConfirmButton: false,
      timer: 3000,
    })
  } catch (err) {
    if (!setEmploymentErrorsFromApi(err)) {
      await Swal.fire({
        icon: 'error',
        title: 'Ralat',
        text: getApiErrorMessage(err, 'Gagal menyimpan pekerjaan.'),
      })
    }
  } finally {
    savingEmployment.value = false
  }
}

async function onDeleteEmployment(employment: Employment) {
  const result = await Swal.fire({
    icon: 'warning',
    title: 'Padam pekerjaan?',
    text: 'Tindakan ini tidak boleh dibatalkan.',
    showCancelButton: true,
    confirmButtonText: 'Padam',
    cancelButtonText: 'Batal',
  })

  if (!result.isConfirmed) return

  deletingEmploymentId.value = employment.id

  try {
    const res = await deleteUserEmployment(userId.value, employment.id)

    if (!res.success) {
      throw new Error(res.message ?? 'Gagal memadam pekerjaan.')
    }

    if (editingEmploymentId.value === employment.id) {
      resetEmploymentForm()
    }

    await refreshEmployments()

    await Swal.fire({
      toast: true,
      position: 'top-end',
      icon: 'success',
      title: 'Pekerjaan berjaya dipadam.',
      showConfirmButton: false,
      timer: 3000,
    })
  } catch (err) {
    await Swal.fire({
      icon: 'error',
      title: 'Ralat',
      text: getApiErrorMessage(err, 'Gagal memadam pekerjaan.'),
    })
  } finally {
    deletingEmploymentId.value = null
  }
}

async function fetchUser() {
  loading.value = true
  error.value = null
  successMessage.value = null

  try {
    const response = await getUser(userId.value)
    syncFormFromUser(response.data)
  } catch (err) {
    error.value = getApiErrorMessage(err, 'Gagal memuatkan maklumat pengguna.')
  } finally {
    loading.value = false
  }
}

const selectedStatus = computed(
  () => labelToApiValue(STATUS_OPTIONS, statusValue.value[0]) ?? 'active',
)
const isInactiveStatus = computed(() => selectedStatus.value === 'inactive')

watch(selectedStatus, (newStatus, oldStatus) => {
  if (newStatus === 'inactive' && oldStatus !== 'inactive' && !form.leave_date) {
    form.leave_date = dayjs().format('YYYY-MM-DD')
  }
})

watch(
  () => employmentForm.is_current,
  (isCurrent) => {
    if (isCurrent) {
      employmentForm.end_date = ''
      clearEmploymentFieldError('end_date')
    }
  },
)

async function handleSubmit() {
  saving.value = true
  error.value = null
  successMessage.value = null

  try {
    await updateUser(userId.value, {
      name: form.name.trim(),
      ic_number: form.ic_number.trim(),
      position: form.position.trim(),
      phone_number: form.phone_number.trim() || null,
      status: labelToApiValue(STATUS_OPTIONS, statusValue.value[0]) ?? 'active',
      gender: labelToApiValue(GENDER_OPTIONS, genderValue.value[0]),
      marriage_status: labelToApiValue(MARRIAGE_STATUS_OPTIONS, marriageStatusValue.value[0]),
      member_number: form.member_number ? Number(form.member_number) : null,
      member_type: labelToApiValue(MEMBER_TYPE_OPTIONS, memberTypeValue.value[0]),
      join_date: form.join_date || null,
      leave_date: isInactiveStatus.value ? form.leave_date || null : null,
      birth_date: form.birth_date || null,
      birth_place: form.birth_place.trim() || null,
    })

    successMessage.value = 'Pengguna berjaya dikemaskini.'
    setTimeout(() => {
      router.push({ name: 'list-users' })
    }, 300)
  } catch (err) {
    error.value = getApiErrorMessage(err, 'Gagal mengemaskini pengguna.')
  } finally {
    saving.value = false
  }
}

const formDisabled = computed(() => loading.value || saving.value)

onMounted(() => {
  syncEmploymentSelectValues()
  fetchUser()
})
</script>

<template>
  <div class="w-full space-y-6">
    <div class="flex flex-wrap items-center gap-3">
      <h2 class="mr-auto text-lg font-medium">Kemaskini Pengguna</h2>
      <Button look="outline" variant="secondary" type="button" :disabled="saving"
        @click="router.push({ name: 'list-users' })">
        Kembali
      </Button>
    </div>

    <AlertRoot v-if="error" variant="danger">
      <AlertTitle>Ralat</AlertTitle>
      <AlertDescription>{{ error }}</AlertDescription>
    </AlertRoot>

    <AlertRoot v-if="successMessage" variant="success">
      <AlertTitle>Berjaya</AlertTitle>
      <AlertDescription>{{ successMessage }}</AlertDescription>
    </AlertRoot>

    <Box>
      <form class="space-y-4" @submit.prevent="handleSubmit">
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <Field>
            <FieldLabel for="user-name">Nama</FieldLabel>
            <Input id="user-name" v-model="form.name" class="w-full" type="text" placeholder="Nama penuh"
              :disabled="formDisabled" required @input="handleNameInput" />
          </Field>

          <Field>
            <FieldLabel for="user-email">Emel</FieldLabel>
            <Input id="user-email" v-model="email" class="w-full" type="email" disabled />
          </Field>
        </div>

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <Field>
            <FieldLabel for="user-ic">Nombor Kad Pengenalan</FieldLabel>
            <Input id="user-ic" v-model="form.ic_number" class="w-full" type="text" inputmode="numeric" maxlength="15"
              placeholder="Contoh: 900101011234" :disabled="formDisabled" required @input="handleIcNumberInput" />
          </Field>

          <Field>
            <FieldLabel for="user-phone">Nombor Telefon</FieldLabel>
            <Input id="user-phone" v-model="form.phone_number" class="w-full" type="text" placeholder="Nombor telefon"
              :disabled="formDisabled" />
          </Field>
        </div>

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <Field>
            <FieldLabel for="user-position">Jawatan</FieldLabel>
            <Input id="user-position" v-model="form.position" class="w-full" type="text" placeholder="Jawatan"
              :disabled="formDisabled" />
          </Field>

          <Field>
            <FieldLabel>Status Pengguna</FieldLabel>
            <SelectRoot v-if="!loading" class="w-full" :collection="statusCollection" :default-value="statusInitial"
              :disabled="formDisabled" @value-change="setStatusValue">
              <SelectControl>
                <SelectTrigger>
                  <SelectValueText placeholder="Pilih status" />
                </SelectTrigger>
              </SelectControl>
              <SelectContent>
                <SelectItemGroup>
                  <SelectItemGroupLabel>Status</SelectItemGroupLabel>
                  <SelectItem v-for="item in statusCollection.items" :key="item.label" :item="item">
                    <SelectItemText>{{ item.label }}</SelectItemText>
                  </SelectItem>
                </SelectItemGroup>
              </SelectContent>
            </SelectRoot>
          </Field>
        </div>

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <Field>
            <FieldLabel>Jantina</FieldLabel>
            <SelectRoot v-if="!loading" class="w-full" :collection="genderCollection" :default-value="genderInitial"
              :disabled="formDisabled" @value-change="setGenderValue">
              <SelectControl>
                <SelectTrigger>
                  <SelectValueText placeholder="Pilih jantina" />
                </SelectTrigger>
              </SelectControl>
              <SelectContent>
                <SelectItemGroup>
                  <SelectItemGroupLabel>Jantina</SelectItemGroupLabel>
                  <SelectItem v-for="item in genderCollection.items" :key="item.label" :item="item">
                    <SelectItemText>{{ item.label }}</SelectItemText>
                  </SelectItem>
                </SelectItemGroup>
              </SelectContent>
            </SelectRoot>
          </Field>

          <Field>
            <FieldLabel>Status Perkahwinan</FieldLabel>
            <SelectRoot v-if="!loading" class="w-full" :collection="marriageStatusCollection"
              :default-value="marriageStatusInitial" :disabled="formDisabled" @value-change="setMarriageStatusValue">
              <SelectControl>
                <SelectTrigger>
                  <SelectValueText placeholder="Pilih status perkahwinan" />
                </SelectTrigger>
              </SelectControl>
              <SelectContent>
                <SelectItemGroup>
                  <SelectItemGroupLabel>Status Perkahwinan</SelectItemGroupLabel>
                  <SelectItem v-for="item in marriageStatusCollection.items" :key="item.label" :item="item">
                    <SelectItemText>{{ item.label }}</SelectItemText>
                  </SelectItem>
                </SelectItemGroup>
              </SelectContent>
            </SelectRoot>
          </Field>
        </div>

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <Field>
            <FieldLabel for="user-member-number">Nombor Anggota</FieldLabel>
            <Input id="user-member-number" v-model="form.member_number" class="w-full" type="number" min="0"
              placeholder="Nombor anggota" :disabled="formDisabled" />
          </Field>

          <Field>
            <FieldLabel>Jenis Anggota</FieldLabel>
            <SelectRoot v-if="!loading" class="w-full" :collection="memberTypeCollection"
              :default-value="memberTypeInitial" :disabled="formDisabled" @value-change="setMemberTypeValue">
              <SelectControl>
                <SelectTrigger>
                  <SelectValueText placeholder="Pilih jenis anggota" />
                </SelectTrigger>
              </SelectControl>
              <SelectContent>
                <SelectItemGroup>
                  <SelectItemGroupLabel>Jenis Anggota</SelectItemGroupLabel>
                  <SelectItem v-for="item in memberTypeCollection.items" :key="item.label" :item="item">
                    <SelectItemText>{{ item.label }}</SelectItemText>
                  </SelectItem>
                </SelectItemGroup>
              </SelectContent>
            </SelectRoot>
          </Field>
        </div>

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <Field>
            <FieldLabel for="user-join-date">Tarikh Sertai</FieldLabel>
            <Input id="user-join-date" v-model="form.join_date" class="w-full" type="date" :disabled="formDisabled" />
          </Field>

          <Field v-if="isInactiveStatus">
            <FieldLabel for="user-leave-date">Tarikh Berhenti Menjadi Anggota</FieldLabel>
            <Input id="user-leave-date" v-model="form.leave_date" class="w-full" type="date" :disabled="formDisabled" />
          </Field>

          <Field>
            <FieldLabel for="user-birth-date">Tarikh Lahir</FieldLabel>
            <Input id="user-birth-date" v-model="form.birth_date" class="w-full" type="date" :disabled="formDisabled" />
          </Field>
        </div>

        <Field>
          <FieldLabel for="user-birth-place">Tempat Lahir</FieldLabel>
          <Input id="user-birth-place" v-model="form.birth_place" class="w-full" type="text" placeholder="Tempat lahir"
            :disabled="formDisabled" />
        </Field>

        <div class="flex items-center justify-end gap-2 pt-2">
          <Button type="submit" variant="primary" look="outline" :disabled="formDisabled">
            {{ saving ? 'Menyimpan...' : 'Simpan' }}
          </Button>
        </div>
      </form>
    </Box>

    <Box>
      <div class="space-y-6">
        <div>
          <h3 class="text-lg font-semibold text-slate-900">Pekerjaan</h3>
          <p class="mt-1 text-sm text-slate-500">Urus maklumat pekerjaan pengguna.</p>
        </div>

        <div v-if="loading" class="text-sm text-slate-500">Memuatkan pekerjaan...</div>

        <div v-else-if="employments.length" class="space-y-3">
          <div v-for="employment in employments" :key="employment.id"
            class="flex flex-col gap-4 rounded-lg border border-foreground/10 p-4 sm:flex-row sm:items-start sm:justify-between">
            <div class="min-w-0 flex-1">
              <div class="flex flex-wrap items-center gap-2">
                <span class="font-medium text-slate-900">{{ employment.company_name }}</span>
                <Badge v-if="employment.is_current" class="bg-green-500 text-white">Semasa</Badge>
                <Badge look="outline">
                  {{ employmentTypeLabel[employment.employment_type] ?? employment.employment_type }}
                </Badge>
              </div>
              <p class="mt-1 text-sm font-medium text-slate-700">{{ employment.job_title }}</p>
              <p class="mt-1 text-sm text-slate-500">{{ formatEmploymentPeriod(employment) }}</p>
              <p class="mt-1 text-sm text-slate-500">{{ formatSalary(employment.salary) }}</p>
            </div>
            <div class="flex shrink-0 gap-2">
              <Button type="button" variant="ghost" class="border border-foreground/15 shadow-none"
                :disabled="deletingEmploymentId === employment.id || saving" @click="startEditEmployment(employment)">
                <Lucide class="mr-2 size-4" icon="Pencil" />
                Kemaskini
              </Button>
              <Button type="button" variant="ghost" class="border border-foreground/15 shadow-none text-danger"
                :disabled="deletingEmploymentId === employment.id || saving" @click="onDeleteEmployment(employment)">
                <Lucide class="mr-2 size-4" :icon="deletingEmploymentId === employment.id ? 'LoaderCircle' : 'Trash'"
                  :class="{ 'animate-spin': deletingEmploymentId === employment.id }" />
                Padam
              </Button>
            </div>
          </div>
        </div>

        <div v-else class="rounded-lg border border-dashed border-foreground/15 p-6 text-center text-sm text-slate-500">
          Tiada pekerjaan direkodkan.
        </div>

        <form v-if="showEmploymentForm" class="space-y-6 border-t border-foreground/10 pt-6"
          @submit.prevent="onSaveEmployment">
          <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <h4 class="text-base font-semibold text-slate-900">
                {{ isEditingEmployment ? 'Kemaskini Pekerjaan' : 'Tambah Pekerjaan' }}
              </h4>
              <p class="mt-1 text-sm text-slate-500">
                {{
                  isEditingEmployment
                    ? 'Kemas kini maklumat pekerjaan yang dipilih.'
                    : 'Tambah rekod pekerjaan baharu untuk pengguna ini.'
                }}
              </p>
            </div>
            <div class="flex gap-2">
              <Button v-if="isEditingEmployment" type="button" variant="ghost"
                class="border border-foreground/15 shadow-none" :disabled="savingEmployment"
                @click="resetEmploymentForm">
                Batal
              </Button>
              <Button type="submit" variant="primary" :disabled="savingEmployment || saving">
                {{ savingEmployment ? 'Menyimpan...' : isEditingEmployment ? 'Kemaskini' : 'Tambah' }}
              </Button>
            </div>
          </div>

          <FieldGroup>
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
              <Field>
                <FieldLabel>Nama Syarikat</FieldLabel>
                <SelectRoot :key="`company-name-${editingEmploymentId ?? 'new'}`" class="w-full"
                  :collection="companyNameCollection" :default-value="companyNameInitial"
                  :disabled="savingEmployment || saving" @value-change="setCompanyNameValue">
                  <SelectControl>
                    <SelectTrigger :aria-invalid="!!employmentErrors.company_name">
                      <SelectValueText placeholder="Pilih syarikat" />
                    </SelectTrigger>
                  </SelectControl>
                  <SelectContent>
                    <SelectItemGroup>
                      <SelectItemGroupLabel>Nama Syarikat</SelectItemGroupLabel>
                      <SelectItem v-for="item in companyNameCollection.items" :key="item.label" :item="item">
                        <SelectItemText>{{ item.label }}</SelectItemText>
                      </SelectItem>
                    </SelectItemGroup>
                  </SelectContent>
                </SelectRoot>
                <FieldError v-if="employmentErrors.company_name">
                  {{ employmentErrors.company_name }}
                </FieldError>
              </Field>

              <Field>
                <FieldLabel for="employment-job-title">Jawatan</FieldLabel>
                <Input id="employment-job-title" v-model="employmentForm.job_title" type="text" placeholder="Jawatan"
                  :disabled="savingEmployment || saving" :aria-invalid="!!employmentErrors.job_title"
                  @input="clearEmploymentFieldError('job_title')" />
                <FieldError v-if="employmentErrors.job_title">
                  {{ employmentErrors.job_title }}
                </FieldError>
              </Field>

              <Field>
                <FieldLabel>Jenis Kerja</FieldLabel>
                <SelectRoot :key="`employment-type-${editingEmploymentId ?? 'new'}`" class="w-full"
                  :collection="employmentTypeCollection" :default-value="employmentTypeInitial"
                  :disabled="savingEmployment || saving" @value-change="setEmploymentTypeValue">
                  <SelectControl>
                    <SelectTrigger :aria-invalid="!!employmentErrors.employment_type">
                      <SelectValueText placeholder="Pilih jenis kerja" />
                    </SelectTrigger>
                  </SelectControl>
                  <SelectContent>
                    <SelectItemGroup>
                      <SelectItemGroupLabel>Jenis Kerja</SelectItemGroupLabel>
                      <SelectItem v-for="item in employmentTypeCollection.items" :key="item.label" :item="item">
                        <SelectItemText>{{ item.label }}</SelectItemText>
                      </SelectItem>
                    </SelectItemGroup>
                  </SelectContent>
                </SelectRoot>
                <FieldError v-if="employmentErrors.employment_type">
                  {{ employmentErrors.employment_type }}
                </FieldError>
              </Field>

              <Field>
                <FieldLabel for="employment-salary">Gaji (RM)</FieldLabel>
                <Input id="employment-salary" v-model="employmentForm.salary" type="number" min="0" step="0.01"
                  placeholder="0.00" :disabled="savingEmployment || saving" :aria-invalid="!!employmentErrors.salary"
                  @input="clearEmploymentFieldError('salary')" />
                <FieldError v-if="employmentErrors.salary">{{ employmentErrors.salary }}</FieldError>
              </Field>

              <Field>
                <FieldLabel for="employment-start-date">Tarikh Mula</FieldLabel>
                <Input id="employment-start-date" v-model="employmentForm.start_date" type="date"
                  :disabled="savingEmployment || saving" :aria-invalid="!!employmentErrors.start_date"
                  @input="clearEmploymentFieldError('start_date')" />
                <FieldError v-if="employmentErrors.start_date">
                  {{ employmentErrors.start_date }}
                </FieldError>
              </Field>

              <Field>
                <FieldLabel for="employment-end-date">Tarikh Tamat</FieldLabel>
                <Input id="employment-end-date" v-model="employmentForm.end_date" type="date"
                  :disabled="employmentForm.is_current || savingEmployment || saving"
                  :aria-invalid="!!employmentErrors.end_date" @input="clearEmploymentFieldError('end_date')" />
                <FieldError v-if="employmentErrors.end_date">
                  {{ employmentErrors.end_date }}
                </FieldError>
              </Field>

              <Field class="md:col-span-2">
                <CheckboxRoot :checked="employmentForm.is_current" :disabled="savingEmployment || saving"
                  @checked-change="({ checked }) => (employmentForm.is_current = checked === true)">
                  <CheckboxControl />
                  <CheckboxLabel>Pekerjaan semasa</CheckboxLabel>
                </CheckboxRoot>
              </Field>
            </div>
          </FieldGroup>
        </form>
      </div>
    </Box>
  </div>
</template>
