<script lang="ts" setup>
import { computed, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import * as select from '@zag-js/select'
import { AlertRoot, AlertTitle, AlertDescription } from '@/components/ui/alert'
import { Box } from '@/components/ui/box'
import { Button } from '@/components/ui/button'
import { Field, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'
import {
  SelectRoot,
  SelectControl,
  SelectTrigger,
  SelectValueText,
  SelectContent,
  SelectItemGroup,
  SelectItemGroupLabel,
  SelectItem,
  SelectItemText,
} from '@/components/ui/select'
import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
import { createUser } from '../services/user.service'

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' },
]

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
}

const statusCollection = createSelectCollection(STATUS_OPTIONS)
const genderCollection = createSelectCollection(GENDER_OPTIONS)
const marriageStatusCollection = createSelectCollection(MARRIAGE_STATUS_OPTIONS)
const memberTypeCollection = createSelectCollection(MEMBER_TYPE_OPTIONS)

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

const statusInitial = ref<string[]>(['Pending'])

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
}

const router = useRouter()

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

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

function requireSelectValue(label: string | undefined, fieldName: string): string {
  if (!label) {
    throw new Error(`${fieldName} diperlukan.`)
  }
  return label
}

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

  try {
    const status = labelToApiValue(STATUS_OPTIONS, statusValue.value[0])
    const gender = labelToApiValue(GENDER_OPTIONS, genderValue.value[0])
    const marriageStatus = labelToApiValue(MARRIAGE_STATUS_OPTIONS, marriageStatusValue.value[0])
    const memberType = labelToApiValue(MEMBER_TYPE_OPTIONS, memberTypeValue.value[0])

    if (!status) throw new Error('Status pengguna diperlukan.')
    requireSelectValue(genderValue.value[0], 'Jantina')
    requireSelectValue(marriageStatusValue.value[0], 'Status perkahwinan')
    requireSelectValue(memberTypeValue.value[0], 'Jenis anggota')

    if (!form.member_number) throw new Error('Nombor anggota diperlukan.')
    if (!form.join_date) throw new Error('Tarikh sertai diperlukan.')
    if (!form.birth_date) throw new Error('Tarikh lahir diperlukan.')
    if (!form.birth_place.trim()) throw new Error('Tempat lahir diperlukan.')

    await createUser({
      name: form.name.trim(),
      email: form.email.trim(),
      ic_number: form.ic_number.trim(),
      position: form.position.trim(),
      phone_number: form.phone_number.trim() || null,
      status,
      gender: gender!,
      marriage_status: marriageStatus!,
      member_number: Number(form.member_number),
      member_type: memberType!,
      join_date: form.join_date,
      birth_date: form.birth_date,
      birth_place: form.birth_place.trim(),
    })

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

const formDisabled = computed(() => saving.value)
</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">Daftar 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
            />
          </Field>

          <Field>
            <FieldLabel for="user-email">Emel</FieldLabel>
            <Input
              id="user-email"
              v-model="form.email"
              class="w-full"
              type="email"
              placeholder="emel@example.com"
              :disabled="formDisabled"
              required
            />
          </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"
              placeholder="Nombor kad pengenalan"
              :disabled="formDisabled"
              required
            />
          </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"
              required
            />
          </Field>

          <Field>
            <FieldLabel>Status Pengguna</FieldLabel>
            <SelectRoot
              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
              class="w-full"
              :collection="genderCollection"
              :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
              class="w-full"
              :collection="marriageStatusCollection"
              :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"
              required
            />
          </Field>

          <Field>
            <FieldLabel>Jenis Anggota</FieldLabel>
            <SelectRoot
              class="w-full"
              :collection="memberTypeCollection"
              :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"
              required
            />
          </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"
              required
            />
          </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"
            required
          />
        </Field>

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