<template>
  <div class="setting-wrapper mini-scrollbar">
    <div class="banner">
      <div class="title">{{ t('Settings.title') }}</div>
      <div class="slogan">{{ t('Settings.slogan') }}</div>
    </div>

    <div class="setting-content">
      <ProfileSection
        v-model:first-name="draftData.firstName"
        v-model:last-name="draftData.lastName"
        v-model:username="draftData.username"
        v-model:role-model="roleModel"
        :display-data="displayData"
        :full-name="fullName"
        :is-editing="isEditing"
        :role-options="roleList"
      />

      <div class="gap" />

      <SecuritySection
        v-model:new-email="securityDraft.newEmail"
        v-model:new-password="securityDraft.newPassword"
        v-model:current-password="securityDraft.currentPassword"
        :email="displayData.email"
        :is-editing="isEditing"
        :is-email-verified="isEmailVerified"
        @reset-email="resetSecurityEmail"
        @reset-password="resetSecurityPassword"
        @verify-email="handleVerifyEmail"
      />

      <div class="gap" />

      <RegionSection
        v-model:language="draftData.language"
        v-model:region="draftData.region"
        :display-language-label="displayLanguageLabel"
        :display-region-label="displayRegionLabel"
        :is-editing="isEditing"
        :language-options="languageList"
        :region-options="regionList"
      />

      <div class="gap bottom-gap" />

      <SettingsActions
        :is-editing="isEditing"
        :saving="saving"
        @edit="handleEdit"
        @save="handleSave"
        @discard="handleDiscard"
      />
    </div>

    <Footer />

    <EmailVerificationDialog
      :visible="isVerificationDialogVisible"
      :email="verificationTargetEmail"
      :saving="saving"
      @close="closeVerificationDialog"
      @resend="handleSendVerifyCode"
      @submit="handleVerificationSubmit"
    />
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import EmailVerificationDialog from './components/EmailVerificationDialog.vue'
import ProfileSection from './components/ProfileSection.vue'
import RegionSection from './components/RegionSection.vue'
import SecuritySection from './components/SecuritySection.vue'
import SettingsActions from './components/SettingsActions.vue'
import { useSettingsForm } from './useSettingsForm'

const { t, locale } = useI18n({ useScope: 'global' })

const {
  draftData,
  securityDraft,
  isEditing,
  saving,
  isVerificationDialogVisible,
  verificationTargetEmail,
  roleList,
  languageList,
  regionList,
  displayData,
  isEmailVerified,
  displayLanguageLabel,
  displayRegionLabel,
  fullName,
  roleModel,
  handleEdit,
  handleDiscard,
  handleSave,
  resetSecurityEmail,
  resetSecurityPassword,
  handleVerifyEmail,
  handleSendVerifyCode,
  handleVerificationSubmit,
  closeVerificationDialog
} = useSettingsForm({ t, locale })
</script>

<style lang="less" scoped>
.setting-wrapper {
  height: 100%;
  overflow-y: auto;
  background: #ffffff;
}

.banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 14.8rem;
  row-gap: 1.2rem;
  background: linear-gradient(rgba(255, 255, 255, 0.91), rgba(255, 255, 255, 0.91)),
    linear-gradient(90deg, #f2eee8 0%, #fbfaf8 40%, #f1ede7 100%);
}

.title {
  font-family: 'KaiseiOpti-Bold';
  font-size: 4rem;
  line-height: 3.6rem;
  color: #232323;
}

.slogan {
  font-family: 'KaiseiOpti-Regular';
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: #585858;
}

.setting-content {
  padding: 4rem 18rem 7rem;
}

.gap {
  height: 0.05rem;
  margin-top: 6rem;
  margin-bottom: 4rem;
  background-color: #c4c4c4;

  &.bottom-gap {
    margin-top: 4rem;
  }
}

:deep(.el-select-dropdown__item) {
  padding: 0 2rem !important;
}
</style>
