<script lang="ts" setup>
import { number, object, string, ref as yref, type InferType } from 'yup'
import type { FormSubmitEvent } from '#ui/types'

const toast = useToast()
const route = useRoute()
const router = useRouter()
const loginState = useLoginState()

const tabs = [
  {
    slot: 'info',
    label: '基本资料',
    icon: 'tabler:user-square-rounded',
  },
  {
    slot: 'security',
    label: '账号安全',
    icon: 'tabler:shield-half-filled',
  },
]

const currentTab = computed({
  get() {
    const index = tabs.findIndex((item) => item.slot === route.query.tab)
    if (index === -1) {
      return 0
    }

    return index
  },
  set(value) {
    // Hash is specified here to prevent the page from scrolling to the top
    router.replace({
      query: { tab: tabs[value].slot },
    })
  },
})

const editProfileSchema = object({
  nickname: string(),
  email: string().notRequired().email('请输入正确的邮箱地址'),
  sex: number().required('请选择性别'),
  company: string().required('请输入公司名称'),
})

type EditProfileSchema = InferType<typeof editProfileSchema>

const editProfileState = reactive({
  nickname: loginState.user?.nickname || '',
  email: loginState.user?.email || '',
  sex: loginState.user.sex || 0,
  company: loginState.user?.company || '',
})

const isEditProfileModified = ref(false)

const onEditProfileSubmit = (event: FormSubmitEvent<EditProfileSchema>) => {
  useFetchWrapped<Partial<UserSchema> & AuthedRequest, BaseResponse<{}>>(
    'App.User_User.EditProfile',
    {
      token: loginState.token!,
      user_id: loginState.user.id,
      ...(event.data as UserSchema),
    }
  )
    .then((res) => {
      if (res.ret === 200) {
        toast.add({
          title: '个人资料已更新',
          description: '您的个人资料已更新成功',
          color: 'green',
        })
        loginState.updateProfile()
        isEditProfileModified.value = false
      } else {
        toast.add({
          title: '更新失败',
          description: res.msg || '未知错误',
          color: 'red',
        })
      }
    })
    .catch((err) => {
      toast.add({
        title: '更新失败',
        description: err.message || '未知错误',
        color: 'red',
      })
    })
}

const changePasswordState = reactive({
  old_password: '',
  new_password: '',
  confirm_password: '',
})

const changePasswordSchema = object({
  old_password: string().required('请输入旧密码'),
  new_password: string().required('请输入新密码').min(6, '密码长度至少为6位'),
  confirm_password: string()
    .required('请再次输入新密码')
    .oneOf([yref('new_password')], '两次输入的密码不一致'),
})

type ChangePasswordSchema = InferType<typeof changePasswordSchema>

const onChangePasswordSubmit = (
  event: FormSubmitEvent<ChangePasswordSchema>
) => {
  useFetchWrapped<req.user.ChangePassword & AuthedRequest, BaseResponse<{}>>(
    'App.User_User.ChangePassword',
    {
      token: loginState.token!,
      user_id: loginState.user.id,
      username: loginState.user.username,
      old_password: event.data.old_password,
      new_password: event.data.new_password,
    }
  )
    .then((res) => {
      if (res.ret === 200) {
        toast.add({
          title: '密码已修改',
          description: '请重新登录',
          color: 'green',
        })
        setTimeout(() => {
          loginState.logout()
          window.location.reload()
        }, 2000)
      } else {
        toast.add({
          title: '修改密码失败',
          description: res.msg || '未知错误',
          color: 'red',
        })
      }
    })
    .catch((err) => {
      toast.add({
        title: '修改密码失败',
        description: err.message || '未知错误',
        color: 'red',
      })
    })
}
</script>

<template>
  <LoginNeededContent
    content-class="w-full h-full bg-white dark:bg-neutral-900 p-4 sm:p-0"
  >
    <div class="container max-w-[1280px] mx-auto pt-12 flex flex-col gap-12">
      <h1 class="text-2xl font-medium inline-flex items-center gap-2">
        <UIcon
          name="line-md:person"
          class="text-3xl"
        />
        <span>个人中心</span>
      </h1>
      <div class="flex flex-col gap-12">
        <div class="flex items-center gap-4 px-1">
          <UAvatar
            size="xl"
            icon="tabler:user"
            :src="loginState.user?.avatar"
            :alt="loginState.user?.nickname || loginState.user?.username"
            :ui="{
              rounded: 'rounded-xl',
              size: {
                huge: 'w-48 h-48 text-4xl',
              },
            }"
          />
          <div>
            <h2 class="text-xl font-medium">
              {{ loginState.user?.username }}
              <span
                v-if="loginState.user?.nickname"
                class="text-neutral-500 dark:text-neutral-400"
              >
                ({{ loginState.user?.nickname }})
              </span>
            </h2>
            <p class="text-sm text-neutral-500 dark:text-neutral-400">
              {{ loginState.user?.company || '未填写公司' }}
            </p>
          </div>
        </div>
        <div>
          <UTabs
            v-model="currentTab"
            :items="tabs"
            orientation="vertical"
            :ui="{
              wrapper:
                'w-full flex flex-col sm:flex-row items-start gap-4 sm:gap-16',
              list: {
                width: 'w-full sm:w-48 h-fit',
                background: 'bg-transparent',
                tab: { active: 'bg-neutral-100 dark:bg-neutral-700' },
              },
            }"
          >
            <template #info>
              <div class="tab-content space-y-4">
                <UForm
                  class="max-w-96 space-y-6"
                  :state="editProfileState"
                  :schema="editProfileSchema"
                  @submit="onEditProfileSubmit"
                  @change="isEditProfileModified = true"
                >
                  <UFormGroup
                    name="username"
                    label="账户名"
                  >
                    <p class="text-sm text-neutral-500 dark:text-neutral-400">
                      {{ loginState.user?.username }}
                    </p>
                    <!-- <UInput v-model="editProfileState.username" /> -->
                  </UFormGroup>
                  <UFormGroup
                    name="mobile"
                    label="手机号码"
                  >
                    <p class="text-sm text-neutral-500 dark:text-neutral-400">
                      {{ loginState.user?.mobile }}
                    </p>
                    <!-- <UInput v-model="editProfileState.mobile" /> -->
                  </UFormGroup>
                  <UFormGroup
                    name="nickname"
                    label="姓名"
                    help="您的真实姓名，便于系统管理员联系您"
                  >
                    <UInput v-model="editProfileState.nickname" />
                  </UFormGroup>
                  <UFormGroup
                    name="sex"
                    label="性别"
                  >
                    <USelect
                      v-model="editProfileState.sex"
                      :options="[
                        { label: '男', value: 1 },
                        { label: '女', value: 2 },
                        { label: '保密', value: 0 },
                      ]"
                    />
                  </UFormGroup>
                  <UFormGroup
                    name="email"
                    label="电子邮箱"
                  >
                    <UInput v-model="editProfileState.email" />
                  </UFormGroup>
                  <UFormGroup
                    name="company"
                    label="公司/学校/组织名称"
                    help="您所在的公司或组织名称"
                  >
                    <UInput v-model="editProfileState.company" />
                  </UFormGroup>

                  <div>
                    <UButton
                      type="submit"
                      :disabled="!isEditProfileModified"
                    >
                      保存更改
                    </UButton>
                  </div>
                </UForm>
              </div>
            </template>
            <template #security>
              <div class="tab-content space-y-4">
                <UForm
                  class="max-w-96 space-y-6"
                  :schema="changePasswordSchema"
                  :state="changePasswordState"
                  @submit="onChangePasswordSubmit"
                >
                  <UFormGroup
                    name="old_password"
                    label="旧密码"
                  >
                    <UInput
                      type="password"
                      v-model="changePasswordState.old_password"
                    />
                  </UFormGroup>
                  <UFormGroup
                    name="new_password"
                    label="新密码"
                  >
                    <UInput
                      type="password"
                      v-model="changePasswordState.new_password"
                    />
                  </UFormGroup>
                  <UFormGroup
                    name="confirm_password"
                    label="确认新密码"
                  >
                    <UInput
                      type="password"
                      v-model="changePasswordState.confirm_password"
                    />
                  </UFormGroup>

                  <div>
                    <UButton type="submit">修改密码</UButton>
                  </div>
                </UForm>
                <!-- <UDivider /> -->
              </div>
            </template>
          </UTabs>
        </div>
      </div>
    </div>
  </LoginNeededContent>
</template>

<style scoped>
.tab-content {
  @apply bg-neutral-50 dark:bg-neutral-800 rounded-lg p-6;
}
</style>
