<script lang='ts' setup>
import { toastController } from "@ionic/vue";
import { cardOutline, checkmarkCircleOutline, logoAlipay, personOutline } from "ionicons/icons";
import zod from "zod";

const router = useRouter();
const route = useRoute();

const paymentType = ref<"bank" | "alipay">("bank");

const bankFormData = ref({
  name: "",
  bankName: "",
  bankBranch: "",
  cardNumber: "",
  isDefault: false,
});

const alipayFormData = ref({
  name: "",
  account: "",
  isDefault: false,
});

const isSubmitting = ref(false);
const isEditMode = computed(() => !!route.query.id);

// 银行卡表单验证 Schema
const BankSchema = zod.object({
  name: zod
    .string()
    .min(2, "请输入持卡人姓名")
    .max(20, "姓名长度不能超过20个字符"),

  bankName: zod
    .string()
    .min(2, "请输入银行名称")
    .max(50, "银行名称长度不能超过50个字符"),

  bankBranch: zod
    .string()
    .min(2, "请输入开户行")
    .max(100, "开户行长度不能超过100个字符"),

  cardNumber: zod
    .string()
    .min(1, "请输入银行卡号")
    .regex(/^\d{16,19}$/, "请输入正确的银行卡号（16-19位数字）"),
});

// 支付宝表单验证 Schema
const AlipaySchema = zod.object({
  name: zod
    .string()
    .min(2, "请输入真实姓名")
    .max(20, "姓名长度不能超过20个字符"),

  account: zod
    .string()
    .min(1, "请输入支付宝账号")
    .refine(
      (val) => {
        // 支持手机号或邮箱
        const phoneRegex = /^1[3-9]\d{9}$/;
        const emailRegex = /^[^\s@]+@[^\s@][^\s.@]*\.[^\s@]+$/;
        return phoneRegex.test(val) || emailRegex.test(val);
      },
      "请输入正确的支付宝账号（手机号或邮箱）",
    ),
});

async function showToast(message: string, color: "success" | "danger" | "warning" = "danger") {
  const toast = await toastController.create({
    message,
    duration: 2000,
    position: "top",
    color,
  });
  await toast.present();
}

// 如果是编辑模式，加载数据
onMounted(() => {
  if (isEditMode.value) {
    // TODO: 根据 route.query.id 加载收款方式数据
    // 模拟数据
    paymentType.value = "bank";
    bankFormData.value = {
      name: "张三",
      bankName: "中国工商银行",
      bankBranch: "北京朝阳支行",
      cardNumber: "6222021234567891234",
      isDefault: true,
    };
  }
});

async function handleSubmit() {
  let result;

  if (paymentType.value === "bank") {
    result = BankSchema.safeParse(bankFormData.value);
  }
  else {
    result = AlipaySchema.safeParse(alipayFormData.value);
  }

  if (!result.success) {
    const first = result.error.issues[0];
    await showToast(first.message);
    return;
  }

  isSubmitting.value = true;
  try {
    // TODO: 调用添加/编辑收款方式 API
    // const formData = paymentType.value === "bank" ? bankFormData.value : alipayFormData.value;
    // if (isEditMode.value) {
    //   await safeClient(client.api.payment[route.query.id].put({ ...formData, type: paymentType.value }));
    // } else {
    //   await safeClient(client.api.payment.post({ ...formData, type: paymentType.value }));
    // }

    // 模拟 API 调用
    await new Promise(resolve => setTimeout(resolve, 1000));

    await showToast(isEditMode.value ? "收款方式修改成功" : "收款方式添加成功", "success");
    router.back();
  }
  catch (error) {
    await showToast("操作失败，请重试", "danger");
  }
  finally {
    isSubmitting.value = false;
  }
}
</script>

<template>
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar class="ion-toolbar">
        <ion-buttons slot="start">
          <back-button />
        </ion-buttons>
        <ion-title>{{ isEditMode ? '编辑收款方式' : '添加收款方式' }}</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding">
      <div class="space-y-5">
        <!-- 提示信息 -->
        <div class="info-card">
          <ion-icon :icon="checkmarkCircleOutline" class="text-2xl text-[#c41e3a]" />
          <div class="text-sm text-[#666] leading-relaxed">
            请填写准确的收款信息，确保能够正常收款。
          </div>
        </div>

        <!-- 类型选择 -->
        <div v-if="!isEditMode" class="type-selector">
          <div class="type-title">
            选择收款方式类型
          </div>
          <div class="type-buttons">
            <div
              class="type-button"
              :class="{ active: paymentType === 'bank' }"
              @click="paymentType = 'bank'"
            >
              <ion-icon :icon="cardOutline" class="type-icon" />
              <span>银行卡</span>
            </div>
            <div
              class="type-button"
              :class="{ active: paymentType === 'alipay' }"
              @click="paymentType = 'alipay'"
            >
              <ion-icon :icon="logoAlipay" class="type-icon" />
              <span>支付宝</span>
            </div>
          </div>
        </div>

        <!-- 银行卡表单 -->
        <div v-if="paymentType === 'bank'" class="form-card">
          <div class="space-y-4">
            <!-- 持卡人姓名 -->
            <div class="form-item">
              <div class="flex items-center gap-2 mb-2">
                <ion-icon :icon="personOutline" class="text-lg text-primary" />
                <label class="form-label">持卡人姓名</label>
              </div>
              <ion-item lines="none" class="input-item">
                <ion-input
                  v-model="bankFormData.name"
                  type="text"
                  placeholder="请输入持卡人姓名"
                  class="custom-input"
                  :maxlength="20"
                />
              </ion-item>
            </div>

            <!-- 银行名称 -->
            <div class="form-item">
              <div class="flex items-center gap-2 mb-2">
                <ion-icon :icon="cardOutline" class="text-lg text-primary" />
                <label class="form-label">银行名称</label>
              </div>
              <ion-item lines="none" class="input-item">
                <ion-input
                  v-model="bankFormData.bankName"
                  type="text"
                  placeholder="例如：中国工商银行"
                  class="custom-input"
                  :maxlength="50"
                />
              </ion-item>
            </div>

            <!-- 开户行 -->
            <div class="form-item">
              <div class="flex items-center gap-2 mb-2">
                <ion-icon :icon="cardOutline" class="text-lg text-primary" />
                <label class="form-label">开户行</label>
              </div>
              <ion-item lines="none" class="input-item">
                <ion-input
                  v-model="bankFormData.bankBranch"
                  type="text"
                  placeholder="例如：北京朝阳支行"
                  class="custom-input"
                  :maxlength="100"
                />
              </ion-item>
            </div>

            <!-- 银行卡号 -->
            <div class="form-item">
              <div class="flex items-center gap-2 mb-2">
                <ion-icon :icon="cardOutline" class="text-lg text-primary" />
                <label class="form-label">银行卡号</label>
              </div>
              <ion-item lines="none" class="input-item">
                <ion-input
                  v-model="bankFormData.cardNumber"
                  type="tel"
                  placeholder="请输入银行卡号"
                  class="custom-input"
                  :maxlength="19"
                />
              </ion-item>
            </div>

            <!-- 设为默认 -->
            <div class="form-item">
              <div class="flex items-center justify-between">
                <label class="form-label">设为默认收款方式</label>
                <ion-toggle v-model="bankFormData.isDefault" color="danger" />
              </div>
            </div>
          </div>
        </div>

        <!-- 支付宝表单 -->
        <div v-else class="form-card">
          <div class="space-y-4">
            <!-- 支付宝姓名 -->
            <div class="form-item">
              <div class="flex items-center gap-2 mb-2">
                <ion-icon :icon="personOutline" class="text-lg text-[#1677ff]" />
                <label class="form-label">支付宝姓名</label>
              </div>
              <ion-item lines="none" class="input-item">
                <ion-input
                  v-model="alipayFormData.name"
                  type="text"
                  placeholder="请输入支付宝实名姓名"
                  class="custom-input"
                  :maxlength="20"
                />
              </ion-item>
            </div>

            <!-- 支付宝账号 -->
            <div class="form-item">
              <div class="flex items-center gap-2 mb-2">
                <ion-icon :icon="logoAlipay" class="text-lg text-[#1677ff]" />
                <label class="form-label">支付宝账号</label>
              </div>
              <ion-item lines="none" class="input-item">
                <ion-input
                  v-model="alipayFormData.account"
                  type="text"
                  placeholder="请输入手机号或邮箱"
                  class="custom-input"
                />
              </ion-item>
              <div class="text-xs text-[#999] mt-1 ml-1">
                支持手机号或邮箱格式
              </div>
            </div>

            <!-- 设为默认 -->
            <div class="form-item">
              <div class="flex items-center justify-between">
                <label class="form-label">设为默认收款方式</label>
                <ion-toggle v-model="alipayFormData.isDefault" color="danger" />
              </div>
            </div>
          </div>
        </div>

        <!-- 提交按钮 -->
        <ion-button
          expand="block"
          class="submit-button"
          :disabled="isSubmitting"
          @click="handleSubmit"
        >
          <ion-spinner v-if="isSubmitting" name="crescent" />
          <span v-else>{{ isEditMode ? '保存修改' : '保存收款方式' }}</span>
        </ion-button>

        <!-- 安全提示 -->
        <div class="notice-card">
          <div class="text-sm font-semibold text-[#333] mb-2">
            安全提示：
          </div>
          <ul class="text-xs text-[#666] space-y-1 pl-4">
            <li>• 请确保填写的收款信息准确无误</li>
            <li>• 收款信息仅用于提现和收款，我们会严格保密</li>
            <li>• 银行卡需与实名认证信息一致</li>
            <li>• 如需修改收款方式，请联系客服</li>
          </ul>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<style lang='css' scoped>
.info-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
  border-radius: 12px;
  border: 1px solid #ffe0e0;
}

.type-selector {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.type-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.type-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.type-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: #f7f8fa;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.type-button.active {
  background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
  border-color: #c41e3a;
}

.type-button:active {
  transform: scale(0.98);
}

.type-icon {
  font-size: 32px;
  color: #666;
  margin-bottom: 8px;
}

.type-button.active .type-icon {
  color: #c41e3a;
}

.type-button span {
  font-size: 14px;
  font-weight: 600;
  color: #666;
}

.type-button.active span {
  color: #c41e3a;
}

.form-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.form-item {
  margin-bottom: 20px;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-label {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.input-item {
  --background: #f7f8fa;
  --border-radius: 12px;
  --padding-start: 16px;
  --padding-end: 16px;
  --min-height: 48px;
}

.custom-input {
  --placeholder-color: #999;
  --placeholder-opacity: 1;
  font-size: 15px;
}

.submit-button {
  --background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
  --background-activated: linear-gradient(135deg, #8b1a2e 0%, #c41e3a 100%);
  --border-radius: 12px;
  --padding-top: 14px;
  --padding-bottom: 14px;
  font-weight: 600;
  font-size: 16px;
  margin-top: 8px;
  text-transform: none;
  letter-spacing: 0.5px;
}

.notice-card {
  background: #f9fafb;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e5e7eb;
}

.notice-card ul li {
  line-height: 1.8;
}
</style>
