<template>
  <UPageSection
    id="contacts"
    :ui="{ container: '!p-0' }"
  >
    <template #body>
      <div class="contacts">
        <div class="contacts__info">
          <div class="text-sm text-gray-400">
            Свяжитесь с нами
          </div>

          <div class="text-2xl font-semibold">
            Начните работу с AT Golden
          </div>

          <div class="text-base text-gray-300 mt-2">
            Оставьте заявку, и наш менеджер свяжется с вами в течение 15 минут<br>
            для обсуждения ваших потребностей.
          </div>

          <div class="flex flex-col gap-4 mt-4">
            <div
              v-for="contact in contacts"
              :key="contact.label"
              class="flex items-center gap-4"
            >
              <div class="bg-gray-800 p-4 flex items-center rounded-lg">
                <UIcon :name="contact.icon" />
              </div>

              <div>
                <div class="text-sm text-gray-400">
                  {{ contact.label }}
                </div>

                <div class="text-base">
                  {{ contact.value }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <UCard variant="subtle" class="w-full" :ui="{ root: 'max-w-[500px]' }">
          <form name="contacts" method="POST" @submit.prevent="onSubmit">
            <div class="flex flex-col gap-4">
              <div class="flex flex-col gap-2">
                Как к вам обращаться ?
                <UInput
                  id="name"
                  v-model="name"
                  v-bind="nameAttrs"
                  name="name"
                  placeholder="Имя"
                  size="xl"
                  class="w-full"
                />

                <div v-if="errors?.name" style="color: #ff6467">
                  {{ errors?.name }}
                </div>
              </div>

              <div class="flex flex-col gap-2">
                Телефон
                <UInput
                  id="phone"
                  v-model="phone"
                  v-maska="'+7 (###) ###-##-##'"
                  name="phone"
                  v-bind="phoneAttrs"
                  placeholder="+7 (___) __-__-__"
                  size="xl"
                  class="w-full"
                />

                <div v-if="errors?.phone" style="color: #ff6467">
                  {{ errors?.phone }}
                </div>
              </div>

              <div class="flex flex-col gap-2">
                Что вас интересует ?
                <div>
                  <USelect
                    id="service"
                    v-model="service"
                    v-bind="serviceAttrs"
                    name="service"
                    :items="services"
                    class="w-full"
                    size="xl"
                    placeholder="Выберите услугу"
                    :ui="{ content: 'max-h-70' }"
                    :overlay="{ scrollLock: false }"
                  />

                  <div v-if="errors?.service" style="color: #ff6467">
                    {{ errors?.service }}
                  </div>
                </div>
              </div>

              <div class="flex flex-col gap-2">
                Комментарий
                <UTextarea
                  id="comment"
                  v-model="comment"
                  v-bind="commentAttrs"
                  name="comment"
                  size="xl"
                  placeholder="Расскажите о ваших требованиях..."
                />
              </div>

              <div>
                <UButton
                  size="xl"
                  class="flex place-content-center w-full"
                  label="Отправить заявку"
                  type="submit"
                  :disabled="errors && Object.keys(errors).length > 0"
                />
              </div>
            </div>
          </form>
        </UCard>
      </div>
    </template>
  </UPageSection>
</template>

<script setup lang="ts">
import { useSessionStorage } from '@vueuse/core'

const toast = useToast()
const route = useRoute()

const contacts = [
  {
    label: 'Телефон',
    value: '+9 (965) 042-80-490',
    icon: 'i-lucide:phone',
  },
  {
    label: 'Email',
    value: 'atgoldenkg@gmail.com',
    icon: 'i-lucide:mail',
  },
  {
    label: 'Адрес',
    value: 'Адрес Бишкек, Свердловский район ул. Ибраимова, дом 115/4',
    icon: 'i-lucide:map-pin',
  },
]

const services = [
  'Покупка авто',
  'Продажа авто',
  'Аренда авто',
  'Покупка недвижимости',
  'Продажа недвижимости',
  'Аренда недвижимости',
]

const state = useSessionStorage('contacts', {
  contacts:
      {
        name: '',
        phone: '',
        service: '',
        comment: '',
      },
})

const { errors, handleSubmit, defineField } = useForm({
  initialValues: {
    name: '',
    phone: '',
    service: state?.value?.contacts?.service || '',
    comment: '',
  },
  validationSchema: {
    name(value: string) {
      if (!value)
        return 'Укажите имя'
      if (value.trim().length < 2)
        return 'Минимум 2 символа'
      if (/\d/.test(value)) {
        return 'Укажите корректное имя'
      }
      return true
    },
    phone(value: string) {
      if (!value)
        return 'Укажите телефон'
      const digits = (value || '').replace(/\D/g, '')
      if (digits.length < 11)
        return 'Введите корректный телефон'
      return true
    },
    service(value: string) {
      if (!value)
        return 'Укажите услугу'
      return true
    },
  },
})

const [name, nameAttrs] = defineField('name')
const [phone, phoneAttrs] = defineField('phone')
const [service, serviceAttrs] = defineField('service')
const [comment, commentAttrs] = defineField('comment')

const onSubmit = handleSubmit(async (values) => {
  const res = await $fetch('/api/send_mail', {
    method: 'POST',
    body: {
      ...values,
      route: route.path,
    },
  })

  if (res.ok) {
    toast.add({
      title: 'Заявка успешно отправлена!',
    })
  }
})

watch(() => state.value, () => {
  if (state.value.contacts.service)
    service.value = state.value.contacts.service
})
</script>

<style lang="scss">
.contacts {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  @include mobile {
    flex-direction: column;
    gap: 60px;
  }

  &__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
}
</style>
