<template>
  <v-app class="bg-background">
    <v-container>
      <v-row justify="center" no-gutters>
        <v-col class="text-center" cols="12" sm="6">
          <!-- Logo 與品牌名稱 -->
          <v-card class="bg-transparent" variant="flat">
            <BrandAvatar />

            <v-card-title class="text-primary font-weight-bold">運動玩轉健康力</v-card-title>
            <v-card-subtitle class="text-primary">Taipei Masters Hub</v-card-subtitle>
          </v-card>

          <!-- 登入卡片 -->
          <v-card class="rounded-lg mt-4" color="surface">
            <v-card-title> 市民登入 </v-card-title>
            <v-card-text> 請輸入您的手機號碼或信箱 </v-card-text>
            <!-- 表單 -->
            <v-form class="pa-4" @submit.prevent="handleLogin">
              <v-text-field
                v-model="account"
                class="mb-4"
                color="primary"
                hide-details="auto"
                label="手機號碼 / 信箱"
                placeholder="例如: 0912345678"
                prepend-inner-icon="mdi-cellphone-android"
                required
                rounded="lg"
                variant="outlined"
              />

              <v-text-field
                v-model="password"
                class="mb-6"
                color="primary"
                hide-details="auto"
                label="密碼"
                placeholder="請輸入密碼"
                prepend-inner-icon="mdi-lock-outline"
                rounded="lg"
                type="password"
                variant="outlined"
              />

              <v-btn
                block
                class="glow-sweep-button rounded-lg font-weight-bold elevation-2 mb-4"
                color="secondary"
                :loading="loading"
                type="submit"
              >
                登入健康平台
              </v-btn>

              <v-btn
                block
                class="rounded-lg font-weight-bold"
                color="primary"
                prepend-icon="mdi-clipboard-text-search"
                to="/self-assessment"
                variant="outlined"
              >
                不登入，先做線上自評
              </v-btn>
            </v-form>
            <!-- <div class="d-flex align-center justify-center my-4">
              <v-divider class="mr-3" />
              <span class="text-caption text-grey font-weight-bold">或使用以下方式快捷登入</span>
              <v-divider class="ml-3" />
            </div> -->

            <!-- LINE 一鍵登入 (高齡場景極度實用) -->
            <!-- <v-btn
              block
              class="rounded-lg font-weight-bold text-white mb-4 text-button d-flex align-center justify-center"
              color="#06C755"
              :loading="lineLoading"
              size="large"
              style="text-transform: none"
              variant="flat"
              @click="handleLineLogin"
            >
              <v-icon class="mr-2" icon="mdi-message-text" />
              使用 LINE 帳號一鍵登入
            </v-btn> -->

            <v-card-actions class="justify-center">
              <span class="text-body-small text-grey">
                登入即表示您同意本平台的
                <a class="text-accent text-decoration-none font-weight-bold" href="#">
                  個資授權條款
                </a>
              </span>
            </v-card-actions>
          </v-card>

          <!-- 版權 -->
          <div class="mt-8 text-body-small text-grey-darken-1">
            <p>© 2026 SKYTEK</p>
          </div>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import BrandAvatar from '@/components/BrandAvatar.vue'
import { useAppStore } from '@/stores/app'

const store = useAppStore()
const router = useRouter()

const account = ref('0912-345-678')
const password = ref('')
const loading = ref(false)
const lineLoading = ref(false)

function handleLogin () {
  if (!account.value) return
  loading.value = true
  setTimeout(() => {
    store.login(account.value)
    loading.value = false
    router.push('/')
  }, 1000)
}

function _handleLineLogin () {
  lineLoading.value = true
  setTimeout(() => {
    store.login('0912-345-678') // LINE 模擬登入預設手機
    lineLoading.value = false
    router.push('/')
  }, 1200)
}
</script>

<style scoped>
.glow-sweep-button {
  overflow: hidden;
  position: relative;
}

.glow-sweep-button::after {
  position: absolute;
  top: -50%;
  left: -70%;
  width: 45%;
  height: 200%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 35%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.15) 65%,
    transparent 100%
  );
  content: '';
  transform: rotate(18deg);
  animation: glow-sweep 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glow-sweep {
  0% {
    left: -70%;
  }

  45%,
  100% {
    left: 125%;
  }
}

</style>
