<template>
    <div class="flex flex-col items-center space-y-4 p-6 bg-base-100 rounded-xl shadow-lg mt-2 max-w-sm mx-auto backdrop-blur-xl glass">

        <div class="p-3 bg-white rounded-lg shadow-inner cursor-pointer" @click="toggleQRCode">
            <qrcode-vue :value="currentValue" :size="size" level="H" />
        </div>

        <div class="relative w-full p-4 ">
            <p
                class="text-sm break-all whitespace-pre-wrap m-1 p-1 pr-5 text-base-content border border-dashed border-base-content rounded-lg">
                {{ currentValue }}
            </p>
            <button @click="copyValue" class="absolute top-2 right-2 btn btn-xs btn-ghost bg-gray-100">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2M16 8h2a2 2 0 012 2v8a2 2 0 01-2-2h-8a2 2 0 01-2-2v-2" />
                </svg>
            </button>
            <div v-if="showCopied"
                class="absolute -top-5 -right-2 bg-neutral text-neutral-content px-2 py-1 rounded text-xs opacity-100 transition-opacity duration-300">
                Copied
            </div>
        </div>

        <div class="grid grid-cols-2 gap-2 w-full">
            <button v-for="app in applist" :key="app.name" 
                    class="btn btn-sm btn-outline btn-ghost flex items-center justify-center"
                    @click="applyPrefix(app.name)">
                <img :src="app.url" alt="" class="w-5 h-5 mr-1">
                <span>{{ app.name }}</span>
            </button>
        </div>
        
        <div class="w-full">
            <button class="btn btn-outline btn-sm w-full" @click="resetValue">
                Reset
            </button>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import QrcodeVue from 'qrcode.vue';

// 定义组件接收的 props
const props = defineProps({
    value: { // 二维码的原始值
        type: String,
        required: true
    },
    size: { // 二维码的尺寸 (像素)
        type: Number,
        default: 160 // 默认大小
    }
});

// 使用 ref 创建一个响应式变量，用于存储当前显示的二维码值
// 初始值是来自 props 的 value
const currentValue = ref(props.value);

// 监听 props.value 的变化，如果外部传入的 value 改变，更新 currentValue
watch(() => props.value, (newValue) => {
    currentValue.value = newValue;
});


const showCopied = ref(false);

const copyValue = async () => {
    try {
        await navigator.clipboard.writeText(currentValue.value);

        showCopied.value = true;
        setTimeout(() => {
            showCopied.value = false;
        }, 1500); // 1.5 秒后恢复
    } catch (err) {
        console.error('Failed to copy: ', err);
        // 可以在这里添加错误提示
    }
};

const applist = reactive([
    // { name: 'openteam', url: '/assets/logo.svg' },
    { name: 'botgem', url: 'https://botgem.com/favicon.ico' },
    { name: 'opencat', url: 'https://opencat.app/favicon.ico' },
])

const applyPrefix = (name) => {
    let origin = window.location.origin;
    
    switch (name) {
        case 'botgem':
            currentValue.value = `ama://set-api-key?server=${origin}&key=${props.value}`;
            break;
        case 'opencat':
            currentValue.value = `opencat://team/join?domain=${origin}&token=${props.value}`;
            break;
        default:
            currentValue.value = name + props.value;
            break;
    }
};

const toggleQRCode = () => {
    if (currentValue.value.startsWith('sk-')) {
        return
    } else {
        window.open(currentValue.value, '_blank')
    }
}

// 清除前缀，恢复到原始值
const resetValue = () => {
    currentValue.value = props.value;
};
</script>