<script setup lang="ts">
import type { QRScanResult } from "@/composables/useQRScanner";
import { CapacitorBarcodeScanner } from "@capacitor/barcode-scanner";
import { closeOutline, flashlightOutline, imagesOutline } from "ionicons/icons";

interface Props {
  title?: string;
}

interface Emits {
  scanSuccess: [result: QRScanResult];
  scanFromGallery: [];
  cancel: [];
}

const props = withDefaults(defineProps<Props>(), {
  title: "扫描二维码",
});

const emit = defineEmits<Emits>();

const { t } = useI18n();
const { vibrate } = useHaptics();
const isScanning = ref(false);
const isTorchEnabled = ref(false);

// 开始扫描
async function startScanning() {
  try {
    isScanning.value = true;

    // 开始扫描 - Google Barcode Scanner 会打开原生UI
    const result = await CapacitorBarcodeScanner.scanBarcode({
      hint: 17, // ALL - 扫描所有格式
      scanInstructions: props.title,
      scanButton: false,
      cameraDirection: 1, // BACK camera
    });

    if (result.ScanResult) {
      // 震动反馈
      vibrate();

      // 发送扫描结果
      emit("scanSuccess", {
        text: result.ScanResult,
        format: result.format?.toString() || "UNKNOWN",
        rawValue: result.ScanResult,
        displayValue: result.ScanResult,
      });
    }
    else {
      // 用户取消了扫描
      emit("cancel");
    }
  }
  catch (error: any) {
    console.error("Start scanning failed:", error);
    if (error.message !== "User cancelled") {
      emit("cancel");
    }
  }
  finally {
    await stopScanning();
  }
}

// 停止扫描
async function stopScanning() {
  try {
    document.querySelector("body")?.classList.remove("barcode-scanner-active");
    isScanning.value = false;
    isTorchEnabled.value = false;
  }
  catch (error) {
    console.error("Stop scanning failed:", error);
  }
}

// 切换手电筒
async function toggleTorch() {
  try {
    // Google Barcode Scanner 不支持手电筒控制
    // 此功能在使用 Google Scanner UI 时不可用
    vibrate();
  }
  catch (error) {
    console.error("Toggle torch failed:", error);
  }
}

// 从相册选择
function handleGalleryClick() {
  stopScanning();
  emit("scanFromGallery");
}

// 取消扫描
function handleCancel() {
  stopScanning();
  emit("cancel");
}

// 组件挂载后自动开始扫描
onMounted(() => {
  startScanning();
});

// 组件卸载前停止扫描
onUnmounted(() => {
  stopScanning();
});
</script>

<template>
  <div class="qr-scanner-container">
    <!-- 顶部操作栏 -->
    <div class="qr-scanner-header">
      <IonButton fill="clear" class="header-btn" @click="handleCancel">
        <IonIcon slot="icon-only" :icon="closeOutline" />
      </IonButton>

      <div class="header-title">
        {{ title }}
      </div>

      <IonButton fill="clear" class="header-btn" @click="toggleTorch">
        <IonIcon slot="icon-only" :icon="flashlightOutline" :class="{ 'torch-on': isTorchEnabled }" />
      </IonButton>
    </div>

    <!-- 扫描区域 -->
    <div class="qr-scanner-content">
      <!-- 扫描框 -->
      <div class="scan-frame">
        <!-- 四个角的装饰 -->
        <div class="corner corner-tl" />
        <div class="corner corner-tr" />
        <div class="corner corner-bl" />
        <div class="corner corner-br" />

        <!-- 扫描线 -->
        <div v-if="isScanning" class="scan-line" />
      </div>

      <!-- 提示文字 -->
      <div class="scan-hint">
        {{ t("scanner.hint") }}
      </div>
    </div>

    <!-- 底部操作区 -->
    <div class="qr-scanner-footer">
      <IonButton expand="block" fill="clear" class="footer-btn" @click="handleGalleryClick">
        <IonIcon slot="start" :icon="imagesOutline" />
        {{ t("scanner.fromGallery") }}
      </IonButton>
    </div>
  </div>
</template>

<style scoped>
.qr-scanner-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

/* 顶部操作栏 */
.qr-scanner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: env(safe-area-inset-top) 8px 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  z-index: 10;
}

.header-btn {
  --color: white;
  --padding-start: 8px;
  --padding-end: 8px;
  margin: 0;
}

.header-title {
  color: white;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.torch-on {
  color: #fbbf24 !important;
}

/* 扫描内容区 */
.qr-scanner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
}

/* 扫描框 */
.scan-frame {
  width: 260px;
  height: 260px;
  position: relative;
  margin-bottom: 40px;
}

/* 四个角 */
.corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: #00d4ff;
  border-style: solid;
}

.corner-tl {
  top: 0;
  left: 0;
  border-width: 3px 0 0 3px;
  border-radius: 4px 0 0 0;
}

.corner-tr {
  top: 0;
  right: 0;
  border-width: 3px 3px 0 0;
  border-radius: 0 4px 0 0;
}

.corner-bl {
  bottom: 0;
  left: 0;
  border-width: 0 0 3px 3px;
  border-radius: 0 0 0 4px;
}

.corner-br {
  bottom: 0;
  right: 0;
  border-width: 0 3px 3px 0;
  border-radius: 0 0 4px 0;
}

/* 扫描线动画 */
.scan-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00d4ff, transparent);
  box-shadow: 0 0 10px #00d4ff;
  animation: scan 2s linear infinite;
  top: 0;
}

@keyframes scan {
  0% {
    top: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* 提示文字 */
.scan-hint {
  color: white;
  font-size: 15px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
}

/* 底部操作区 */
.qr-scanner-footer {
  padding: 0 20px env(safe-area-inset-bottom);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  padding-top: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

.footer-btn {
  --color: white;
  --border-radius: 12px;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  height: 50px;
}

.footer-btn ion-icon {
  font-size: 24px;
  margin-right: 8px;
}
</style>

<style>
/* 全局样式：隐藏 body 内容以显示相机 */
body.barcode-scanner-active {
  background: transparent !important;
  --ion-background-color: transparent !important;
}

body.barcode-scanner-active ion-app,
body.barcode-scanner-active ion-content {
  background: transparent !important;
  --background: transparent !important;
}

/* Modal 样式 */
.qr-scanner-modal {
  --background: transparent;
  --backdrop-opacity: 0;
}

.qr-scanner-modal ion-modal {
  --background: transparent;
}
</style>
