<script setup lang="ts">
/**
 * 扫码页面
 *
 * 使用 Bridge 层 scanCode 能力进行二维码/条形码扫描，
 * 扫描成功后跳转到结果 URL 或展示结果文本。
 */
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { bridge } from '@/bridge'

const router = useRouter()

/** 扫码结果文本 */
const scanResult = ref('')

/** 是否正在扫码 */
const scanning = ref(false)

/**
 * 返回上一页
 */
function goBack(): void {
  router.back()
}

/**
 * 开始扫码
 */
async function startScan(): Promise<void> {
  scanning.value = true
  scanResult.value = ''

  try {
    const res = await bridge.scanCode({ type: 'all' })

    scanResult.value = res.result

    // 如果扫描结果是一个链接，直接跳转
    if (res.result && /^https?:\/\//i.test(res.result)) {
      window.location.href = res.result
    }
  } catch (err) {
    const msg = err instanceof Error ? err.message : '扫码失败'
    showToast(msg)
  } finally {
    scanning.value = false
  }
}

onMounted(() => {
  startScan()
})

onUnmounted(() => {
  // 清理
})
</script>

<template>
  <div class="scan-code-page">
    <van-nav-bar
      title="扫一扫"
      left-text="返回"
      left-arrow
      @click-left="goBack"
      fixed
      placeholder
    />

    <div class="scan-content">
      <div class="scan-area">
        <div class="scan-frame">
          <div v-if="scanning" class="scan-line"></div>
          <p class="scan-hint">将二维码/条形码放入框内，即可自动扫描</p>
        </div>
      </div>

      <div v-if="scanResult" class="scan-result">
        <p class="result-label">扫描结果：</p>
        <p class="result-text">{{ scanResult }}</p>
      </div>

      <div class="rescan-wrapper">
        <van-button
          v-if="!scanning"
          round
          block
          type="primary"
          @click="startScan"
        >
          重新扫描
        </van-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.scan-code-page {
  min-height: 100vh;
  background: #000;
}

.scan-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  min-height: calc(100vh - 46px);
}

.scan-area {
  width: 100%;
  max-width: 300px;
  margin-top: 40px;
}

.scan-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid var(--color-primary, #1989fa);
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary, #1989fa);
  animation: scan 2s linear infinite;
}

@keyframes scan {
  0% { top: 0; }
  100% { top: 100%; }
}

.scan-hint {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  padding: 12px;
  text-align: center;
}

.scan-result {
  margin-top: 24px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  width: 100%;
  max-width: 300px;

  .result-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin-bottom: 4px;
  }

  .result-text {
    color: #fff;
    font-size: 14px;
    word-break: break-all;
  }
}

.rescan-wrapper {
  margin-top: 24px;
  width: 100%;
  max-width: 300px;
}
</style>
