<!-- 创建店铺页（入驻申请） -->
<template>
  <view class="shop-create-page">
    <view class="page-header">
      <text class="page-title">申请入驻</text>
      <text class="page-subtitle">填写以下信息提交店铺申请</text>
    </view>

    <!-- 店铺类型 -->
    <view class="form-card">
      <view class="card-title"><text class="required">*</text><text>店铺类型</text></view>
      <view class="shop-type-list">
        <view
          v-for="(item, index) in shopTypes"
          :key="index"
          class="shop-type-item"
          :class="{ selected: shopType === item.value }"
          @click="shopType = item.value"
        >
          <text class="type-icon">{{ item.icon }}</text>
          <text class="type-name">{{ item.label }}</text>
          <text class="type-desc">{{ item.desc }}</text>
          <view v-if="shopType === item.value" class="check-mark"><text>✓</text></view>
        </view>
      </view>
    </view>

    <!-- 基础信息 -->
    <view class="form-card">
      <view class="card-title">基础信息</view>

      <view class="form-item">
        <view class="form-label"><text class="required">*</text><text>店铺名称</text></view>
        <input class="form-input" v-model="shopName" placeholder="请输入店铺名称（2-50字）" maxlength="50" />
      </view>

      <view class="form-item">
        <view class="form-label">店铺 Logo</view>
        <view class="upload-area" @click="pickLogoImage">
          <image v-if="shopLogoLocal" :src="shopLogoLocal" class="preview-img" mode="aspectFill" />
          <view v-else class="upload-placeholder">
            <text class="upload-icon">+</text>
            <text class="upload-txt">上传 Logo</text>
          </view>
        </view>
        <text class="form-tip">建议尺寸 200×200，支持 jpg/png，不超过 2MB</text>
      </view>

      <view class="form-item">
        <view class="form-label">店铺简介</view>
        <textarea
          class="form-textarea"
          v-model="description"
          placeholder="请简要介绍店铺（不超过200字）"
          maxlength="200"
        ></textarea>
      </view>
    </view>

    <!-- 联系方式 -->
    <view class="form-card">
      <view class="card-title">联系方式</view>

      <view class="form-item">
        <view class="form-label">联系人</view>
        <input class="form-input" v-model="contactName" placeholder="请输入联系人姓名" maxlength="50" />
      </view>

      <view class="form-item">
        <view class="form-label">联系电话</view>
        <input class="form-input" v-model="contactPhone" placeholder="请输入手机号" maxlength="20" type="number" />
      </view>
    </view>

    <!-- 资质信息 -->
    <view class="form-card">
      <view class="card-title">资质信息</view>

      <view class="form-item">
        <view class="form-label">营业执照号</view>
        <input
          class="form-input"
          v-model="businessLicense"
          placeholder="请输入营业执照注册号（个人店可不填）"
          maxlength="50"
        />
      </view>

      <view class="form-item">
        <view class="form-label">身份证正面</view>
        <view class="upload-area" @click="pickIdCardFront">
          <image v-if="idCardFrontLocal" :src="idCardFrontLocal" class="preview-img cert-img" mode="aspectFill" />
          <view v-else class="upload-placeholder">
            <text class="upload-icon">+</text>
            <text class="upload-txt">上传身份证正面</text>
          </view>
        </view>
      </view>

      <view class="form-item">
        <view class="form-label">身份证反面</view>
        <view class="upload-area" @click="pickIdCardBack">
          <image v-if="idCardBackLocal" :src="idCardBackLocal" class="preview-img cert-img" mode="aspectFill" />
          <view v-else class="upload-placeholder">
            <text class="upload-icon">+</text>
            <text class="upload-txt">上传身份证反面</text>
          </view>
        </view>
      </view>

      <view
        class="form-item"
        v-if="shopType !== 'personal'"
      >
        <view class="form-label">营业执照图片</view>
        <view class="upload-area" @click="pickLicenseImage">
          <image v-if="licenseImageLocal" :src="licenseImageLocal" class="preview-img cert-img" mode="aspectFill" />
          <view v-else class="upload-placeholder">
            <text class="upload-icon">+</text>
            <text class="upload-txt">上传营业执照</text>
          </view>
        </view>
      </view>

      <view
        class="form-item"
        v-if="shopType === 'flagship' || shopType === 'exclusive' || shopType === 'specialty'"
      >
        <view class="form-label">品牌授权书</view>
        <view class="upload-area" @click="pickBrandAuth">
          <image v-if="brandAuthLocal" :src="brandAuthLocal" class="preview-img cert-img" mode="aspectFill" />
          <view v-else class="upload-placeholder">
            <text class="upload-icon">+</text>
            <text class="upload-txt">上传品牌授权书</text>
          </view>
        </view>
        <text class="form-tip">旗舰店/专卖店/专营店必须提供品牌授权书</text>
      </view>
    </view>

    <!-- 协议勾选 -->
    <view class="form-card agreement-card">
      <view class="agreement-row" @click="agreed = !agreed">
        <view class="checkbox" :class="{ checked: agreed }">
          <text v-if="agreed" class="check-icon">✓</text>
        </view>
        <text class="agreement-text">
          我已阅读并同意
          <text class="agreement-link">《平台合作协议》</text>
          和
          <text class="agreement-link">《商家入驻规范》</text>
        </text>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-area">
      <button
        class="btn-submit"
        :class="{ disabled: submitting }"
        :disabled="submitting"
        @click="handleSubmit"
      >
        <text>{{ submitting ? '提交中...' : '提交申请' }}</text>
      </button>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'
import supa from '@/components/supadb/aksupainstance.uts'
import { SUPA_URL } from '@/ak/config.uts'
import { openRoute } from '@/layouts/admin/store/adminNavStore.uts'

// ===== 表单字段 =====
const shopType = ref('personal')
const shopName = ref('')
const shopLogoLocal = ref('')
const description = ref('')
const contactName = ref('')
const contactPhone = ref('')
const businessLicense = ref('')
const idCardFrontLocal = ref('')
const idCardBackLocal = ref('')
const licenseImageLocal = ref('')
const brandAuthLocal = ref('')
const agreed = ref(false)
const submitting = ref(false)

// ===== 店铺类型配置 =====
const shopTypes = [
  { value: 'personal',    label: '个人店',       icon: '👤', desc: '个人经营，无需工商注册' },
  { value: 'individual',  label: '个体工商户',   icon: '🏪', desc: '持有个体工商营业执照' },
  { value: 'enterprise',  label: '普通企业店',   icon: '🏢', desc: '持有企业营业执照' },
  { value: 'flagship',    label: '旗舰店',       icon: '🏆', desc: '品牌官方旗舰，需品牌授权' },
  { value: 'exclusive',   label: '专卖店',       icon: '⭐', desc: '单一品牌授权经营' },
  { value: 'specialty',   label: '专营店',       icon: '🎯', desc: '多品牌品类授权经营' },
]

// ===== 图片选择 =====
function pickLogoImage() {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const paths = res.tempFilePaths as string[]
      if (paths.length > 0) shopLogoLocal.value = paths[0]
    }
  })
}

function pickIdCardFront() {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const paths = res.tempFilePaths as string[]
      if (paths.length > 0) idCardFrontLocal.value = paths[0]
    }
  })
}

function pickIdCardBack() {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const paths = res.tempFilePaths as string[]
      if (paths.length > 0) idCardBackLocal.value = paths[0]
    }
  })
}

function pickLicenseImage() {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const paths = res.tempFilePaths as string[]
      if (paths.length > 0) licenseImageLocal.value = paths[0]
    }
  })
}

function pickBrandAuth() {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const paths = res.tempFilePaths as string[]
      if (paths.length > 0) brandAuthLocal.value = paths[0]
    }
  })
}

// ===== 上传单张图片到 Supabase storage =====
async function uploadImage(localPath: string, folder: string): Promise<string> {
  if (!localPath) return ''
  if (localPath.startsWith('http') && !localPath.startsWith('blob:')) return localPath

  const extMatch = localPath.match(/\.(\w+)$/)
  const ext = extMatch ? extMatch[1] : 'jpg'
  const uuid = Math.random().toString(36).substring(2, 10)
  const remotePath = `shop/${folder}_${Date.now()}_${uuid}.${ext}`

  const res = await supa.storage.from('zhipao').upload(remotePath, localPath, {})
  if (res.error != null) throw new Error('图片上传失败')

  return `${SUPA_URL}/storage/v1/object/public/zhipao/${remotePath}`
}

// ===== 表单校验 =====
function validate(): boolean {
  if (!shopName.value.trim()) {
    uni.showToast({ title: '请输入店铺名称', icon: 'none' })
    return false
  }
  if (shopName.value.trim().length < 2) {
    uni.showToast({ title: '店铺名称至少2个字符', icon: 'none' })
    return false
  }
  if (!agreed.value) {
    uni.showToast({ title: '请阅读并同意平台协议', icon: 'none' })
    return false
  }
  return true
}

// ===== 提交 =====
async function handleSubmit() {
  if (!validate()) return

  const userId = supa.getSession().user?.getString('id')
  if (!userId) {
    uni.showToast({ title: '未获取到登录信息，请重新登录', icon: 'none' })
    return
  }

  submitting.value = true
  uni.showLoading({ title: '提交中...' })

  try {
    // 1. 上传所有图片，拿到正式 URL
    const [shopLogoUrl, idCardFrontUrl, idCardBackUrl, licenseImageUrl, brandAuthUrl] =
      await Promise.all([
        shopLogoLocal.value ? uploadImage(shopLogoLocal.value, 'logo') : Promise.resolve(''),
        idCardFrontLocal.value ? uploadImage(idCardFrontLocal.value, 'id_front') : Promise.resolve(''),
        idCardBackLocal.value ? uploadImage(idCardBackLocal.value, 'id_back') : Promise.resolve(''),
        licenseImageLocal.value ? uploadImage(licenseImageLocal.value, 'license') : Promise.resolve(''),
        brandAuthLocal.value ? uploadImage(brandAuthLocal.value, 'brand_auth') : Promise.resolve(''),
      ])

    // 2. 写入 ml_shops（仅写表中真实存在的字段）
    const shopPayload = {
      merchant_id: userId,
      shop_name: shopName.value.trim(),
      status: 1
    } as UTSJSONObject
    if (shopLogoUrl) shopPayload['shop_logo'] = shopLogoUrl
    if (description.value.trim()) shopPayload['description'] = description.value.trim()
    if (businessLicense.value.trim()) shopPayload['business_license'] = businessLicense.value.trim()
    if (contactName.value.trim()) shopPayload['contact_name'] = contactName.value.trim()
    if (contactPhone.value.trim()) shopPayload['contact_phone'] = contactPhone.value.trim()

    const shopRes = await supa.from('ml_shops').insert(shopPayload).execute()

    if (shopRes.error != null) {
      console.error('[ShopCreate] 创建店铺失败:', shopRes.error)
      const errMsg = shopRes.error?.getString ? shopRes.error.getString('message') ?? '创建失败' : '创建失败'
      uni.showToast({ title: '创建失败：' + errMsg, icon: 'none' })
      return
    }

    if (!shopRes.data) {
      uni.showToast({ title: '未收到服务器返回数据，请重试', icon: 'none' })
      return
    }

    // 3. 确认拿到 merchant_id（来自 ml_shops 返回）
    const dataArr = shopRes.data as Array<UTSJSONObject>
    let createdMerchantId = ''
    if (dataArr.length > 0) {
      const row = dataArr[0] as UTSJSONObject
      createdMerchantId = row.getString('merchant_id') ?? userId
      console.log('[ShopCreate] 店铺创建成功，merchant_id:', createdMerchantId)
    }

    // 4. 写入扩展资质到 ml_user_profiles.verification_data（JSONB）
    const extData = {
      shop_type: shopType.value,
      id_card_front: idCardFrontUrl,
      id_card_back: idCardBackUrl,
      license_image: licenseImageUrl,
      brand_authorization: brandAuthUrl,
      updated_at: new Date().toISOString()
    } as UTSJSONObject

    // 先查询是否已存在该用户的 profile
    const existRes = await supa.from('ml_user_profiles')
      .select('id')
      .eq('user_id', userId)
      .single()
      .execute()

    const profileExists = existRes.data != null && !existRes.error

    if (profileExists) {
      await supa.from('ml_user_profiles')
        .update({ verification_data: extData } as UTSJSONObject)
        .eq('user_id', userId)
        .execute()
    } else {
      await supa.from('ml_user_profiles')
        .insert({ user_id: userId, verification_data: extData } as UTSJSONObject)
        .execute()
    }

    uni.showToast({ title: '申请已提交', icon: 'success' })
    setTimeout(() => {
      openRoute('shop_manage')
    }, 1200)
  } catch (e: any) {
    console.error('[ShopCreate] 异常:', e)
    uni.showToast({ title: e?.message ?? '提交失败，请重试', icon: 'none' })
  } finally {
    submitting.value = false
    uni.hideLoading()
  }
}
</script>

<style scoped lang="scss">
.shop-create-page {
  padding: 0;
  background: transparent;
}

.page-header {
  margin-bottom: 20px;
}
.page-title {
  display: block;
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}
.page-subtitle {
  display: block;
  font-size: 13px;
  color: #999;
}

.form-card {
  background: #fff;
  border-radius: 4px;
  padding: 20px 24px;
  margin-bottom: 16px;
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
}

.required {
  color: #ff4d4f;
  margin-right: 4px;
}

/* 店铺类型网格 */
.shop-type-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}
.shop-type-item {
  position: relative;
  width: 140px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  padding: 14px 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shop-type-item.selected {
  border-color: #1890ff;
  background: #e6f4ff;
}
.type-icon {
  font-size: 24px;
  margin-bottom: 6px;
}
.type-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}
.type-desc {
  font-size: 11px;
  color: #999;
  text-align: center;
}
.check-mark {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  background: #1890ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text { font-size: 11px; color: #fff; }
}

/* 表单项 */
.form-item {
  margin-bottom: 18px;
  &:last-child { margin-bottom: 0; }
}
.form-label {
  font-size: 13px;
  color: #606266;
  margin-bottom: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
}
.form-input {
  width: 100%;
  height: 36px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 12px;
  font-size: 13px;
  color: #333;
  background: #fff;
  box-sizing: border-box;
}
.form-textarea {
  width: 100%;
  height: 90px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  color: #333;
  background: #fff;
  box-sizing: border-box;
  resize: none;
}
.form-tip {
  display: block;
  font-size: 11px;
  color: #aaa;
  margin-top: 4px;
}

/* 上传区域 */
.upload-area {
  width: 120px;
  height: 90px;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  &:hover { border-color: #1890ff; }
}
.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.upload-icon {
  font-size: 22px;
  color: #c0c4cc;
}
.upload-txt {
  font-size: 11px;
  color: #aaa;
}
.preview-img {
  width: 100%;
  height: 100%;
}
.cert-img {
  width: 200px;
  height: 120px;
}

/* 协议 */
.agreement-card { padding: 16px 24px; }
.agreement-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.checkbox.checked {
  background: #1890ff;
  border-color: #1890ff;
}
.check-icon { font-size: 11px; color: #fff; }
.agreement-text { font-size: 13px; color: #606266; }
.agreement-link { color: #1890ff; }

/* 提交 */
.submit-area {
  padding: 20px 0;
}
.btn-submit {
  width: 100%;
  height: 44px;
  background: #1890ff;
  color: #fff;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-submit.disabled {
  background: #a0cfff;
  cursor: not-allowed;
}
</style>
