 <template>
  <div class="settings-page">
    <header class="settings-header">
      <button class="back-btn" type="button" aria-label="返回" @click="router.back()">
        <svg class="back-icon" viewBox="0 0 28 46" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M21 4L6 23L21 42"
            stroke="#111827"
            stroke-width="4"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </button>
      <span class="page-title">设置</span>
    </header>

    <PageFrame section-class="settings-frame">
      <section class="settings-card">
        <aside class="settings-tabs">
          <button
            v-for="tab in tabs"
            :key="tab.value"
            class="tab-btn"
            :class="{ active: activeTab === tab.value }"
            type="button"
            @click="activeTab = tab.value"
          >
            <span class="tab-mark"></span>
            <img
              class="tab-icon"
              :src="activeTab === tab.value ? tab.activeIcon : tab.inactiveIcon"
              :alt="tab.label"
            />
            <span>{{ tab.label }}</span>
          </button>
        </aside>

        <main class="settings-main">
          <template v-if="activeTab === 'account'">
            <section class="settings-panel account-panel">
              <h2>账号</h2>
              <div class="account-line">
                <span>账号：123453147358</span>
                <button
                  class="change-password lx-btn lx-btn--md lx-btn--default"
                  type="button"
                  @click="showPasswordDialog = true"
                >
                  <svg viewBox="0 0 24 24" fill="none">
                    <path
                      d="M4.8 16.7 16.6 4.9a2 2 0 0 1 2.8 0l.2.2a2 2 0 0 1 0 2.8L7.8 19.7l-3.7.7.7-3.7Z"
                      stroke="currentColor"
                      stroke-width="1.7"
                      stroke-linejoin="round"
                    />
                  </svg>
                  修改密码
                </button>
              </div>
            </section>

            <section class="settings-panel switch-panel">
              <h2>切换账号</h2>
              <div class="avatar-list">
                <button
                  v-for="account in accounts"
                  :key="account.id"
                  class="avatar-btn"
                  :class="{ active: currentAccount === account.id }"
                  type="button"
                  :aria-label="`切换到账号${account.id}`"
                  @click="currentAccount = account.id"
                >
                  <span class="avatar-face">
                    <span class="hair hair-left"></span>
                    <span class="hair hair-right"></span>
                    <span class="face"></span>
                    <span class="bangs"></span>
                    <span class="eye eye-left"></span>
                    <span class="eye eye-right"></span>
                    <span class="mouth"></span>
                    <span class="body"></span>
                  </span>
                </button>
                <button class="add-account" type="button" aria-label="添加账号">+</button>
              </div>
            </section>

            <button class="logout-btn lx-btn lx-btn--xl lx-btn--default" type="button">
              <svg viewBox="0 0 24 24" fill="none">
                <path
                  d="M10 6H6.8A1.8 1.8 0 0 0 5 7.8v8.4A1.8 1.8 0 0 0 6.8 18H10"
                  stroke="currentColor"
                  stroke-width="1.8"
                  stroke-linecap="round"
                />
                <path
                  d="M13.5 8.2 17.3 12l-3.8 3.8M8.8 12h8.1"
                  stroke="currentColor"
                  stroke-width="1.8"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
              退出登录
            </button>
          </template>

          <section v-else class="settings-panel speed-panel">
            <h2>播放速率</h2>
            <div class="speed-options">
              <button
                v-for="speed in speeds"
                :key="speed"
                class="speed-btn lx-btn lx-btn--sm lx-btn--short"
                :class="selectedSpeed === speed ? 'lx-btn--primary active' : 'lx-btn--secondary'"
                type="button"
                @click="selectedSpeed = speed"
              >
                {{ speed }}
              </button>
            </div>
          </section>
        </main>
      </section>
    </PageFrame>

    <div v-if="showPasswordDialog" class="dialog-mask">
      <section class="password-dialog" role="dialog" aria-modal="true" aria-labelledby="password-title">
        <h2 id="password-title">修改密码</h2>

        <label v-for="field in passwordFields" :key="field.key" class="password-row">
          <span>{{ field.label }}：</span>
          <input
            v-model="passwordForm[field.key]"
            :type="visiblePasswords[field.key] ? 'text' : 'password'"
            :placeholder="field.placeholder"
          />
          <button
            class="visible-btn"
            type="button"
            :aria-label="visiblePasswords[field.key] ? '隐藏密码' : '显示密码'"
            @click="visiblePasswords[field.key] = !visiblePasswords[field.key]"
          >
            <svg v-if="visiblePasswords[field.key]" viewBox="0 0 24 24" fill="none">
              <path
                d="M2.8 12s3.2-5.4 9.2-5.4S21.2 12 21.2 12 18 17.4 12 17.4 2.8 12 2.8 12Z"
                stroke="currentColor"
                stroke-width="1.7"
              />
              <circle cx="12" cy="12" r="2.6" stroke="currentColor" stroke-width="1.7" />
            </svg>
            <svg v-else viewBox="0 0 24 24" fill="none">
              <path
                d="M3.2 3.6 20.8 20.4M9.7 5.2a10.5 10.5 0 0 1 2.3-.26c6 0 9.2 5.4 9.2 5.4a15 15 0 0 1-3.1 3.55M6.2 7.1A15 15 0 0 0 2.8 12s3.2 5.4 9.2 5.4c1.4 0 2.65-.3 3.73-.76"
                stroke="currentColor"
                stroke-width="1.7"
                stroke-linecap="round"
              />
              <path
                d="M10.2 10.5a2.6 2.6 0 0 0 3.3 3.3"
                stroke="currentColor"
                stroke-width="1.7"
                stroke-linecap="round"
              />
            </svg>
          </button>
        </label>

        <div class="dialog-actions">
          <button
            class="cancel-btn lx-btn lx-btn--sm lx-btn--short lx-btn--default"
            type="button"
            @click="showPasswordDialog = false"
          >
            取消
          </button>
          <button
            class="confirm-btn lx-btn lx-btn--sm lx-btn--short lx-btn--primary"
            type="button"
            @click="showPasswordDialog = false"
          >
            确认
          </button>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import PageFrame from '@/components/layout/PageFrame.vue'
import shengyIcon from '@/assets/icon/shengy.svg'
import shengyNIcon from '@/assets/icon/shengyN.svg'
import zhanghaoIcon from '@/assets/icon/zhanghao.svg'
import zhanghaoNIcon from '@/assets/icon/zhanghaoN.svg'

type TabValue = 'account' | 'sound'
type PasswordKey = 'oldPassword' | 'newPassword' | 'confirmPassword'

const router = useRouter()
const activeTab = ref<TabValue>('account')
const currentAccount = ref(1)
const selectedSpeed = ref('1')
const showPasswordDialog = ref(false)

const tabs: Array<{ label: string; value: TabValue; activeIcon: string; inactiveIcon: string }> = [
  { label: '账号', value: 'account', activeIcon: zhanghaoIcon, inactiveIcon: zhanghaoNIcon },
  { label: '声音', value: 'sound', activeIcon: shengyIcon, inactiveIcon: shengyNIcon },
]

const accounts = [{ id: 1 }, { id: 2 }]
const speeds = ['0.5', '0.75', '1']

const passwordFields: Array<{ key: PasswordKey; label: string; placeholder: string }> = [
  { key: 'oldPassword', label: '旧密码', placeholder: '请输入' },
  { key: 'newPassword', label: '新密码', placeholder: '请输入' },
  { key: 'confirmPassword', label: '确认密码', placeholder: '请输入' },
]

const passwordForm = reactive<Record<PasswordKey, string>>({
  oldPassword: '123456',
  newPassword: '123456',
  confirmPassword: '',
})

const visiblePasswords = reactive<Record<PasswordKey, boolean>>({
  oldPassword: true,
  newPassword: false,
  confirmPassword: true,
})
</script>

<style scoped lang="scss">
.settings-page {
  display: flex;
  min-height: 100%;
  flex: 1;
  flex-direction: column;
  background: #d9e3f8;
}

.settings-header {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 18px 64px 6px;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.back-icon {
  width: 22px;
  height: 36px;
}

.page-title {
  color: #15171c;
  font-size: 24px;
  font-weight: 500;
}

:deep(.settings-frame) {
  height: calc(100vh - 124px);
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.76);
  border-radius: 28px;
  // background: #F2F6FA;
  padding: 28px 34px 32px;
}

.settings-card {
  position: relative;
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-columns: 220px minmax(0, 1fr);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.settings-tabs {
  width: 220px;
  height: 100%;
  display: flex;
  min-height: 0;
  flex-direction: column;
  background: #f4f7fc;
  border-radius: 14px;
  border: 3px solid #fff;
  padding-top: 64px;
}

.tab-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  // height: 90px;
  border: none;
  background: transparent;
  color: #9a9ea7;
  cursor: pointer;
  font-size: 28px;
  justify-content: center;
  padding: 32px 0;
}

.tab-btn.active {
  background: #fff;
  color: #171a1f;
}

.tab-mark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 64px;
  border-radius: 0 4px 4px 0;
  background: transparent;
}

.tab-btn.active .tab-mark {
  background: #2f80ed;
}

.tab-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  object-fit: contain;
}

.settings-main {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 32px;
}

.settings-panel {
  border: 1px solid #edf0f6;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 8px rgba(35, 48, 75, 0.04);

}

.settings-panel h2 {
  color: #0f1115;
  font-size: 32px;
  font-weight: 700;
}

.account-panel {
  min-height: 122px;
  padding: 32px;
}

.account-line {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 16px;
  color: #15171c;
  font-size: 28px;
}

.change-password {
  gap: 5px;
}

.change-password svg {
  width: 17px;
  height: 17px;
}

.switch-panel {
  min-height: 130px;
  margin-top: 32px;
  padding: 32px;
}

.avatar-list {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 22px;
}

.avatar-btn,
.add-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 32px;
}

.avatar-btn {
  border: 5px solid #ebf2ff;
  background: #fff;
  padding: 4px;
}

.avatar-btn.active {
  border-color: #2d76ee;
}

.add-account {
  border: 1px dashed #e0e3ea;
  background: #fbfcff;
  color: #777f8d;
  font-size: 24px;
}

.logout-btn {
  position: absolute;
  left: 50%;
  bottom: 18px;
  gap: 6px;
  transform: translateX(-50%);
}

.logout-btn svg {
  width: 32px;
  height: 32px;
}

.speed-panel {
  min-height: 122px;
  padding: 23px 26px;
}

.speed-options {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
}

.speed-btn.active {
  box-shadow: inset 0 0 0 1px rgba(47, 128, 237, 0.14);
}

.avatar-face {
  position: relative;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 50%;
  background: #9ddff0;
}

.face {
  position: absolute;
  left: 11px;
  top: 14px;
  width: 30px;
  height: 28px;
  border-radius: 44% 44% 50% 50%;
  background: #ffd6cf;
}

.hair {
  position: absolute;
  z-index: 2;
  top: 8px;
  width: 21px;
  height: 29px;
  background: #151113;
}

.hair-left {
  left: 8px;
  border-radius: 15px 6px 11px 12px;
}

.hair-right {
  right: 8px;
  border-radius: 6px 15px 12px 11px;
}

.bangs {
  position: absolute;
  z-index: 3;
  left: 11px;
  top: 10px;
  width: 30px;
  height: 14px;
  border-radius: 11px 11px 5px 5px;
  background: #151113;
}

.eye,
.mouth {
  position: absolute;
  z-index: 4;
}

.eye {
  top: 27px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #201819;
}

.eye-left {
  left: 20px;
}

.eye-right {
  right: 20px;
}

.mouth {
  left: 23px;
  top: 35px;
  width: 6px;
  height: 3px;
  border-bottom: 1px solid #d45d67;
  border-radius: 0 0 8px 8px;
}

.body {
  position: absolute;
  z-index: 3;
  left: 15px;
  bottom: -2px;
  width: 22px;
  height: 15px;
  border-radius: 12px 12px 0 0;
  background: #21a8bd;
}

.dialog-mask {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.56);
}

.password-dialog {
  width: 480px;
  border-radius: 14px;
  background: #fff;
  padding: 34px 30px 30px;
}

.password-dialog h2 {
  margin-bottom: 30px;
  color: #0f1115;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}

.password-row {
  display: flex;
  align-items: center;
  height: 48px;
  margin-top: 16px;
  background: #f6f6f6;
  color: #15171c;
  font-size: 16px;
  padding: 0 12px 0 14px;
}

.password-row span {
  flex: 0 0 auto;
}

.password-row input {
  min-width: 0;
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: #15171c;
  font: inherit;
}

.password-row input::placeholder {
  color: #b8bdc6;
}

.visible-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: #747b86;
  cursor: pointer;
  padding: 0;
}

.visible-btn svg {
  width: 22px;
  height: 22px;
}

.dialog-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 30px;
}

</style>
