<script lang='ts' setup>
import { Clipboard } from "@capacitor/clipboard";
import {
  checkmarkCircleOutline,
  copyOutline,
  downloadOutline,
  linkOutline,
  peopleOutline,
  qrCodeOutline,
  shareOutline,
  ticketOutline,
} from "ionicons/icons";

// 邀请信息
const inviteInfo = ref({
  inviteCode: "ABCD1234",
  inviteLink: "https://example.com/invite?code=ABCD1234",
  downloadLink: "https://example.com/download",
  qrCodeUrl: "https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://example.com/invite?code=ABCD1234",
  totalInvites: 28,
  todayInvites: 3,
});

// 复制状态
const copyStatus = ref({
  link: false,
  code: false,
  download: false,
});

async function handleCopy(text: string, type: "link" | "code" | "download") {
  try {
    await Clipboard.write({
      string: text,
    });

    // 显示复制成功状态
    copyStatus.value[type] = true;

    // 2秒后恢复
    setTimeout(() => {
      copyStatus.value[type] = false;
    }, 2000);

    console.log(`已复制${type}:`, text);
  }
  catch (error) {
    console.error("复制失败:", error);
    // 降级方案：使用浏览器API
    try {
      await navigator.clipboard.writeText(text);
      copyStatus.value[type] = true;
      setTimeout(() => {
        copyStatus.value[type] = false;
      }, 2000);
    }
    catch (err) {
      console.error("浏览器复制也失败:", err);
    }
  }
}

function handleInvite() {
  console.log("立即邀请");
  // TODO: 实现分享功能
}

function handleDownloadQR() {
  console.log("下载二维码");
  // TODO: 实现下载二维码功能
}
</script>

<template>
  <ion-page>
    <ion-content :fullscreen="true">
      <!-- 顶部横幅 -->
      <img src="@/assets/images/invite-banner.jpg" class="w-full object-cover" alt="邀请横幅">

      <div class="ion-padding-horizontal">
        <!-- 邀请统计卡片 -->
        <section class="mb-4">
          <div class="card rounded-2xl shadow-lg p-6">
            <div class="flex items-center justify-center gap-2 mb-4">
              <ion-icon :icon="peopleOutline" class="text-3xl" />
              <div class="text-xl font-bold text-[#1a1a1a]">
                邀请统计
              </div>
            </div>

            <div class="grid grid-cols-2 gap-4 mb-4">
              <div class="bg-white/20 backdrop-blur-sm rounded-xl p-4 text-center">
                <div class="text-xs opacity-90 mb-1">
                  累计邀请
                </div>
                <div class="text-4xl font-bold mb-1">
                  {{ inviteInfo.totalInvites }}
                </div>
                <div class="text-xs opacity-80">
                  人
                </div>
              </div>
              <div class="bg-white/20 backdrop-blur-sm rounded-xl p-4 text-center">
                <div class="text-xs opacity-90 mb-1">
                  今日邀请
                </div>
                <div class="text-4xl font-bold mb-1">
                  {{ inviteInfo.todayInvites }}
                </div>
                <div class="text-xs opacity-80">
                  人
                </div>
              </div>
            </div>

            <!-- 立即邀请按钮 -->
            <ion-button
              expand="block"
              @click="handleInvite"
            >
              <ion-icon slot="start" :icon="shareOutline" class="text-xl" />
              立即邀请好友
            </ion-button>
          </div>
        </section>

        <section class="mb-4">
          <div class="flex items-center gap-2 mb-3">
            <img src="@/assets/images/icon.png" class="size-7">
            <div class="text-lg font-bold text-[#1a1a1a]">
              我的邀请码
            </div>
          </div>

          <!-- 邀请码 -->
          <div class="mb-5 flex items-center justify-between bg-gradient-to-r from-[#fff7f0] to-[#ffe8e8] rounded-xl p-4">
            <div class="flex items-center gap-3">
              <div class="bg-white rounded-lg p-2 shadow-sm">
                <ion-icon :icon="ticketOutline" class="text-2xl text-[#c41e3a]" />
              </div>
              <div>
                <div class="text-xs text-[#999] mb-1">
                  邀请码
                </div>
                <div class="text-xl font-bold text-[#c41e3a] tracking-wider">
                  {{ inviteInfo.inviteCode }}
                </div>
              </div>
            </div>
            <ion-button
              fill="clear"
              class="copy-btn"
              @click="handleCopy(inviteInfo.inviteCode, 'code')"
            >
              <ion-icon
                slot="icon-only"
                :icon="copyStatus.code ? checkmarkCircleOutline : copyOutline"
                :class="copyStatus.code ? 'text-green-500' : 'text-[#c41e3a]'"
                class="text-2xl"
              />
            </ion-button>
          </div>

          <div class="flex items-center gap-2 mb-3">
            <img src="@/assets/images/icon.png" class="size-7">
            <div class="text-lg font-bold text-[#1a1a1a]">
              推广链接
            </div>
          </div>
          <div class="mb-5 bg-gray-50 rounded-xl p-4">
            <div class="flex items-center justify-between gap-3">
              <div class="flex-1 overflow-hidden">
                <div class="text-xs text-[#999] mb-1">
                  分享此链接邀请好友
                </div>
                <div class="text-sm text-[#333] truncate">
                  {{ inviteInfo.inviteLink }}
                </div>
              </div>
              <ion-button
                fill="solid"
                size="small"
                class="copy-link-btn"
                @click="handleCopy(inviteInfo.inviteLink, 'link')"
              >
                <ion-icon
                  slot="icon-only"
                  :icon="copyStatus.link ? checkmarkCircleOutline : copyOutline"
                  class="text-lg"
                />
              </ion-button>
            </div>
          </div>

          <div class="flex items-center gap-2 mb-3">
            <img src="@/assets/images/icon.png" class="size-7">
            <div class="text-lg font-bold text-[#1a1a1a]">
              下载链接
            </div>
          </div>
          <div class="mb-5 bg-gray-50 rounded-xl p-4">
            <div class="flex items-center justify-between gap-3">
              <div class="flex-1 overflow-hidden">
                <div class="text-xs text-[#999] mb-1">
                  分享下载地址
                </div>
                <div class="text-sm text-[#333] truncate">
                  {{ inviteInfo.downloadLink }}
                </div>
              </div>
              <ion-button
                fill="solid"
                size="small"
                class="copy-link-btn"
                @click="handleCopy(inviteInfo.downloadLink, 'download')"
              >
                <ion-icon
                  slot="icon-only"
                  :icon="copyStatus.download ? checkmarkCircleOutline : copyOutline"
                  class="text-lg"
                />
              </ion-button>
            </div>
          </div>
        </section>

        <!-- 邀请二维码 -->
        <section class="mb-5">
          <div class="card rounded-2xl shadow-lg p-5">
            <div class="flex items-center gap-2 mb-3">
              <img src="@/assets/images/icon.png" class="size-7">
              <div class="text-lg font-bold text-[#1a1a1a]">
                邀请二维码
              </div>
            </div>

            <div class="flex flex-col items-center">
              <div class="bg-white p-4 rounded-2xl shadow-md mb-4 border-4 border-[#c41e3a]/20">
                <img
                  :src="inviteInfo.qrCodeUrl"
                  alt="邀请二维码"
                  class="w-50 h-50"
                >
              </div>
              <p class="text-xs text-[#999] text-center mb-3">
                扫描二维码或长按保存分享给好友
              </p>
              <ion-button
                expand="block"
                fill="outline"
                class="download-qr-btn w-full"
                @click="handleDownloadQR"
              >
                <ion-icon slot="start" :icon="downloadOutline" />
                下载二维码
              </ion-button>
            </div>
          </div>
        </section>

        <!-- 邀请说明 -->
        <section class="mb-5">
          <div class="bg-gradient-to-br from-[#fff7f0] to-[#ffe8e8] rounded-2xl p-5">
            <h4 class="text-base font-bold text-[#c41e3a] mb-3">
              邀请奖励说明
            </h4>
            <div class="space-y-2 text-sm text-[#666]">
              <div class="flex items-start gap-2">
                <div class="w-1.5 h-1.5 rounded-full bg-[#c41e3a] mt-1.5 flex-shrink-0" />
                <span>每邀请1位好友注册，即可获得10积分奖励</span>
              </div>
              <div class="flex items-start gap-2">
                <div class="w-1.5 h-1.5 rounded-full bg-[#c41e3a] mt-1.5 flex-shrink-0" />
                <span>好友完成首次申购，您将获得额外20积分</span>
              </div>
              <div class="flex items-start gap-2">
                <div class="w-1.5 h-1.5 rounded-full bg-[#c41e3a] mt-1.5 flex-shrink-0" />
                <span>邀请越多，奖励越丰厚，上不封顶</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </ion-content>
  </ion-page>
</template>

<style lang='css' scoped>
.card {
  background: linear-gradient(180deg, #ffeef1, #ffffff 15%);
}
.invite-btn {
  --background: white;
  --color: #c41e3a;
  --border-radius: 12px;
  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-weight: 700;
  font-size: 16px;
  height: 50px;
  text-transform: none;
}

.invite-btn::part(native) {
  font-weight: 700;
}

.copy-btn {
  --padding-start: 8px;
  --padding-end: 8px;
  margin: 0;
}

.copy-link-btn {
  --background: #c41e3a;
  --background-activated: #8b1a2e;
  --border-radius: 8px;
  --padding-start: 12px;
  --padding-end: 12px;
  height: 36px;
  min-width: 36px;
}

.download-qr-btn {
  --border-color: #c41e3a;
  --color: #c41e3a;
  --border-radius: 12px;
  --border-width: 2px;
  font-weight: 600;
  font-size: 14px;
  height: 44px;
  text-transform: none;
}

.download-qr-btn::part(native) {
  font-weight: 600;
}
</style>
