<template>
  <view class="product-edit-page">
    <view class="page-header">
      <view class="back-link" @click="goBack">
        <text class="arrow"><</text>
        <text class="back-txt">返回</text>
      </view>
      <text class="header-title">编辑商品</text>
    </view>

    <!-- 步骤层 -->
    <view class="steps-card">
      <view class="step-items">
        <view v-for="(step, index) in steps" :key="index" class="step-item" :class="{ active: activeStep === index }">
          <text class="step-txt">{{ step }}</text>
          <view v-if="index < steps.length - 1" class="step-line"></view>
        </view>
      </view>
    </view>

    <!-- 表单内容 -->
    <view class="form-card">
      <view class="form-item align-center">
        <view class="label"><text class="required">*</text><text>商品类型：</text></view>
        <view class="input-wrap">
          <view class="radio-group">
            <view class="radio-item active">
              <text class="radio-circle on"></text>
              <view class="radio-txt">
                <text class="main">普通商品</text>
                <text class="sub">(物流发货)</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="form-item align-center">
        <view class="label"><text class="required">*</text><text>商品名称：</text></view>
        <view class="input-wrap">
          <view class="input-box">
            <input class="real-input" v-model="formData.name" placeholder="请输入商品名称" />
          </view>
        </view>
      </view>

      <view class="form-item align-center">
        <view class="label"><text class="required">*</text><text>单位：</text></view>
        <view class="input-wrap">
          <view class="input-box small">
            <input class="real-input" v-model="formData.attributes.unit" placeholder="例: 件" />
          </view>
        </view>
      </view>

      <view class="form-item multi-line">
        <view class="label"><text class="required">*</text><text>商品轮播图：</text></view>
        <view class="input-wrap">
          <view class="image-uploader">
            <view v-for="(img, i) in formData.image_urls" :key="i" class="img-item">
              <image :src="img" mode="aspectFill" />
              <view v-if="i === 0" class="main-tag">主图</view>
              <view class="img-close" @click="removeImage(i)">×</view>
            </view>
            <view class="upload-btn" @click="uploadImage" v-if="formData.image_urls.length < 10">
              <text class="icon">+</text>
              <text class="upload-txt">添加图片</text>
            </view>
          </view>
          <text class="tip">建议尺寸：800*800，默认首张图为主图，最多上传10张</text>
        </view>
      </view>

      <view class="form-item multi-line">
        <view class="label"><text>添加视频：</text></view>
        <view class="input-wrap">
          <view class="image-uploader">
            <view v-for="(vid, i) in formData.video_urls" :key="i" class="img-item video-item">
              <video :src="vid" style="width: 100%; height: 100%; border-radius: 4px;" :controls="false"></video>
              <view class="img-close" @click="removeVideo(i)">×</view>
            </view>
            <view class="upload-btn v-btn" @click="uploadVideo" v-if="formData.video_urls.length < 1">
              <text class="v-icon">📹</text>
              <text class="upload-txt">上传视频</text>
            </view>
          </view>
          <text class="tip">建议时长：9~30秒，视频宽高比16:9</text>
        </view>
      </view>

      <view class="form-item align-center">
        <view class="label"><text class="required">*</text><text>商品分类：</text></view>
        <view class="input-wrap">
          <picker :range="categories" @change="onCategoryChange">
            <view class="mock-btn-select">
              <text>{{ categoryName || '请选择分类' }}</text>
            </view>
          </picker>
        </view>
      </view>

      <view class="form-item align-center">
        <view class="label"><text class="required">*</text><text>商品售价：</text></view>
        <view class="input-wrap">
          <view class="input-box small">
            <input class="real-input" type="number" v-model="formData.base_price" placeholder="请输入售价" />
            <text class="unit">元</text>
          </view>
        </view>
      </view>

      <view class="form-item align-center">
        <view class="label"><text class="required">*</text><text>商品库存：</text></view>
        <view class="input-wrap">
          <view class="input-box small">
            <input class="real-input" type="number" v-model="formData.available_stock" placeholder="请输入库存" />
            <text class="unit">件</text>
          </view>
        </view>
      </view>

      <view class="form-item align-center">
        <view class="label"><text>商品标签：</text></view>
        <view class="input-wrap">
          <view class="tag-selector">
            <view v-for="(tg, index) in formData.tags" :key="index" class="tag-item">
              <text>{{ tg }}</text>
              <text class="close" @click="removeTag(index)">×</text>
            </view>
            <text class="add-link" @click="addTag">＋添加标签</text>
          </view>
        </view>
      </view>

      <view class="form-item align-center">
        <view class="label"><text>商品状态：</text></view>
        <view class="input-wrap">
          <view class="radio-group-simple">
            <view class="radio-simple" :class="{ on: formData.status === 1 }" @click="formData.status = 1">
              <text class="dot"></text>
              <text>上架</text>
            </view>
            <view class="radio-simple" :class="{ on: formData.status === 2 }" @click="formData.status = 2">
              <text class="dot"></text>
              <text>下架</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="footer-btns">
      <button class="btn-save" @click="saveDraftProduct">草稿箱</button>
      <button class="btn-next" @click="saveAndNext">下一步</button>
    </view>
  </view>
</template>

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

const activeStep = ref(0)
const steps = ['基础信息', '规格库存', '商品详情', '物流设置', '会员价/佣金', '营销设置', '其他设置']

interface CategoryOption {
  id: string
  name: string
}
const categoryOptions = ref<CategoryOption[]>([])
const categories = ref<string[]>([])
const categoryName = ref('')

const formData = ref({
  id: '', 
  merchant_id: '',
  category_id: '',
  name: '', 
  base_price: 0,
  available_stock: 0,
  total_stock: 0,
  main_image_url: '',
  image_urls: [] as string[],
  video_urls: [] as string[],
  status: 1, // 1上架 2下架 3草稿 4删除
  tags: [] as string[],
  attributes: { unit: '件' } as Record<string, any>,
  published_at: null as string | null
})

onMounted(async () => {
  await ensureSupabaseReady()
  const mId = supa.getSession().user?.getString('id') ?? null
  if (!mId) {
    uni.showToast({ title: '商家未获取到信息，请重新登录', icon: 'none' })
    return
  }
  formData.value.merchant_id = mId

  // 加载真实分类
  await loadCategoryOptions()

  const editId = uni.getStorageSync('edit_product_id') as string | null
  if (editId) {
    uni.removeStorageSync('edit_product_id')
    await fetchProductDetail(editId, mId)
  }
})

async function loadCategoryOptions() {
  try {
    const res = await supa.from('ml_categories')
      .select('id, name')
      .eq('is_active', true)
      .order('sort_order', { ascending: true })
      .execute()
      
    if (res.data != null) {
      const data = res.data as Array<UTSJSONObject>
      categoryOptions.value = data.map((item: UTSJSONObject): CategoryOption => ({
        id: item.get('id') as string,
        name: item.get('name') as string
      }))
      categories.value = categoryOptions.value.map((item: CategoryOption): string => item.name)
    }
  } catch (e) {
    console.error('加载分类失败', e)
  }
}

async function fetchProductDetail(id: string, mId: string) {
  try {
    const res = await supa
      .from('ml_products')
      .select('*')
      .eq('id', id)
      .eq('merchant_id', mId)
      .single()
      .execute()

    if (res.error != null) {
      console.error('[ProductEdit] 查询失败:', res.error)
      uni.showToast({ title: '获取商品信息失败，或者无权限编辑', icon: 'none' })
      return
    }

    // .single() 返回时 data 可能是 UTSJSONObject 或包含一条记录的数组，兼容处理
    let row : UTSJSONObject | null = null
    if (res.data != null) {
      const raw = res.data
      if (Array.isArray(raw)) {
        const arr = raw as Array<UTSJSONObject>
        if (arr.length > 0) row = arr[0] as UTSJSONObject
      } else {
        row = raw as UTSJSONObject
      }
    }

    if (row == null) {
      uni.showToast({ title: '未找到该商品', icon: 'none' })
      return
    }

    formData.value.id            = row.getString('id') ?? ''
    formData.value.name          = row.getString('name') ?? ''
    formData.value.base_price    = row.getNumber('base_price') ?? 0
    formData.value.available_stock = row.getNumber('available_stock') ?? 0
    formData.value.total_stock   = row.getNumber('total_stock') ?? row.getNumber('available_stock') ?? 0
    formData.value.status        = row.getNumber('status') ?? 1
    formData.value.main_image_url = row.getString('main_image_url') ?? ''
    formData.value.category_id   = row.getString('category_id') ?? ''

    // image_urls / video_urls / tags 是 JSONB 数组，用 .get() 取原始值再强转
    const imgRaw = row.get('image_urls')
    if (imgRaw != null && Array.isArray(imgRaw)) {
      formData.value.image_urls = imgRaw as string[]
    }
    const vidRaw = row.get('video_urls')
    if (vidRaw != null && Array.isArray(vidRaw)) {
      formData.value.video_urls = vidRaw as string[]
    }
    const tagsRaw = row.get('tags')
    if (tagsRaw != null && Array.isArray(tagsRaw)) {
      formData.value.tags = tagsRaw as string[]
    }

    // attributes JSONB 是对象，用 getJSON 取
    const attrsRaw = row.getJSON('attributes')
    if (attrsRaw != null) {
      formData.value.attributes.unit = attrsRaw.getString('unit') ?? '件'
    }

    // 同步分类名称
    if (formData.value.category_id) {
      const cat = categoryOptions.value.find((c: CategoryOption): boolean => c.id === formData.value.category_id)
      categoryName.value = cat ? cat.name : ''
    }

    console.log('[ProductEdit] 加载成功，id=', formData.value.id, 'name=', formData.value.name)
  } catch (e : any) {
    console.error('[ProductEdit] 获取详情异常:', e)
    uni.showToast({ title: '获取商品信息失败', icon: 'none' })
  }
}

function onCategoryChange(e: any) {
  const v = e.detail.value as number
  const selected = categoryOptions.value[v]
  categoryName.value = selected.name
  formData.value.category_id = selected.id
}

function addTag() {
  uni.showModal({
    title: '添加标签',
    editable: true,
    success: (res) => {
      if (res.confirm && res.content) {
        formData.value.tags.push(res.content)
      }
    }
  })
}

function removeTag(index: number) {
  formData.value.tags.splice(index, 1)
}

function uploadImage() {
  const maxCount = 10 - formData.value.image_urls.length
  if (maxCount <= 0) return
  uni.chooseImage({
    count: maxCount,
    success: (res) => {
      const paths = res.tempFilePaths as string[]
      formData.value.image_urls.push(...paths)
    }
  })
}

function removeImage(index: number) {
  formData.value.image_urls.splice(index, 1)
}

function uploadVideo() {
  uni.chooseVideo({
    sourceType: ['camera', 'album'],
    success: (res) => {
      formData.value.video_urls.push(res.tempFilePath as string)
    }
  })
}

function removeVideo(index: number) {
  formData.value.video_urls.splice(index, 1)
}

function goBack() {
  openRoute('product_productList')
}

// 通用上传方法
async function uploadToSupabase(filePath: string): Promise<string> {
  if (filePath.startsWith('http') && !filePath.startsWith('blob:')) {
    return filePath
  }
  const extMatch = filePath.match(/\.(\w+)$/)
  const ext = extMatch ? extMatch[1] : 'png'
  const uuid = Math.random().toString(36).substring(2, 10)
  const remotePath = `products/${formData.value.merchant_id}_${Date.now()}_${uuid}.${ext}`
  
  uni.showLoading({ title: '上传中...' })
  try {
    const res = await supa.storage.from('zhipao').upload(remotePath, filePath, {})
    if (res.error != null) {
       throw res.error
    }
    
    return `${SUPA_URL}/storage/v1/object/public/zhipao/${remotePath}`

  } catch (e: any) {
    console.error('上传文件失败:', e)
    throw new Error(e.message || '上传异常')
  } finally {
    uni.hideLoading()
  }
}

async function uploadAllCurrentFiles() {
  const newImages = [] as string[]
  for (const p of formData.value.image_urls) {
    const u = await uploadToSupabase(p)
    if(u) newImages.push(u)
  }
  formData.value.image_urls = newImages

  const newVideos = [] as string[]
  for (const p of formData.value.video_urls) {
    const u = await uploadToSupabase(p)
    if(u) newVideos.push(u)
  }
  formData.value.video_urls = newVideos
}

async function doSaveProduct(targetStatus: number) {
  if (!formData.value.name) return uni.showToast({ title: '请输入商品名称', icon: 'none' })
  if (!formData.value.category_id) return uni.showToast({ title: '请选择商品分类', icon: 'none' })
  if (formData.value.image_urls.length === 0) return uni.showToast({ title: '请至少上传一张商品图', icon: 'none' })
  
  // 必须获取正确的 merchant_id，并且存在
  if (!formData.value.merchant_id || formData.value.merchant_id.startsWith('merchant_123')) {
    const mId = supa.getSession().user?.getString('id') ?? null
    if (!mId) {
      uni.showToast({ title: '未获取到商家信息，请重新登录', icon: 'none' })
      return
    }
    formData.value.merchant_id = mId
  }

  uni.showLoading({ title: '保存中...' })

  try {
    // 1. 上传文件拿到正式 URL
    await uploadAllCurrentFiles()

    // 2. 组装 Payload
    // 根据 CRMEB: 1:上架 2:下架 3:草稿 4:删除
    formData.value.status = targetStatus
    if (targetStatus === 1) {
      formData.value.published_at = new Date().toISOString()
    } else if (targetStatus === 3) {
      formData.value.published_at = null
    }

    const payload : UTSJSONObject = {
      merchant_id: formData.value.merchant_id,
      name: formData.value.name,
      category_id: formData.value.category_id,
      base_price: Number(formData.value.base_price),
      main_image_url: formData.value.image_urls.length > 0 ? formData.value.image_urls[0] : '', // 首图同步
      image_urls: formData.value.image_urls,
      video_urls: formData.value.video_urls,
      available_stock: Number(formData.value.available_stock),
      total_stock: Number(formData.value.total_stock) || Number(formData.value.available_stock),
      status: formData.value.status,
      tags: formData.value.tags,
      attributes: formData.value.attributes,
      published_at: formData.value.published_at
    }
    // 新建商品时自动生成唯一的 product_code
    if (!formData.value.id) {
      const uid = Math.random().toString(36).substring(2, 10).toUpperCase()
      payload['product_code'] = `P${Date.now()}${uid}`
    }

    let result;
    if (formData.value.id) {
      // 必须加上 merchant_id 检查，防止越权串数据
      result = await supa.from('ml_products')
        .update(payload)
        .eq('id', formData.value.id)
        .eq('merchant_id', formData.value.merchant_id)
        .execute()
    } else {
      result = await supa.from('ml_products').insert([payload]).execute()
    }

    uni.hideLoading()

    if (result && result.error) {
       console.error('Save Product DB Error:', result.error)
       uni.showToast({ title: '保存失败: ' + result.error.message, icon: 'none' })
    } else {
       uni.showToast({ title: '保存成功', icon: 'success' })
       uni.$emit('REFRESH_PRODUCT_LIST')
       setTimeout(() => goBack(), 1000)
    }
  } catch (error: any) {
    uni.hideLoading()
    console.error('保存报错:', error)
    uni.showToast({ title: '发生错误: ' + (error.message || ''), icon: 'none' })
  }
}

// 草稿箱
function saveDraftProduct() {
  doSaveProduct(3) // 3 表示草稿
}

// 下一步/发布
function saveAndNext() {
  // 这里如果原本要求点击下一步是发布上架，则传入 1
  doSaveProduct(1)
}
</script>

<style scoped lang="scss">
.product-edit-page {
  padding: 0;
  background-color: transparent;
  min-height: auto;
}

.page-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  .back-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    color: #666;
    cursor: pointer;
    .arrow { font-size: 14px; }
    .back-txt { font-size: 14px; }
  }
  .header-title { font-size: 16px; font-weight: bold; color: #333; }
}

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

.step-items {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.step-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  .step-txt {
    font-size: 14px;
    color: #999;
    padding: 0 16px;
  }
  &.active .step-txt {
    color: #1890ff;
    font-weight: bold;
    border-bottom: 2px solid #1890ff;
    padding-bottom: 4px;
  }
  .step-line {
    width: 20px;
    height: 1px;
    background: #e8e8e8;
  }
}

.form-card {
  background: #fff;
  padding: 40px;
  border-radius: 4px;
}

.form-item {
  display: flex;
  flex-direction: row;
  margin-bottom: 30px;
  
  &.align-center {
    align-items: center;
  }
  &.multi-line {
    align-items: flex-start;
  }
  
  .label {
    width: 120px;
    text-align: right;
    font-size: 14px;
    color: #333;
    margin-right: 20px;
    line-height: 20px;
    .required { color: #f5222d; margin-right: 4px; }
  }
  
  &.multi-line .label {
    padding-top: 8px; /* 顶部对齐缓冲 */
  }

  .input-wrap { flex: 1; }
}

.radio-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border: 1px solid #1890ff;
  border-radius: 4px;
  padding: 10px 16px;
  width: 160px;
  position: relative;
  .radio-circle {
    width: 14px; height: 14px; border: 1px solid #d9d9d9; border-radius: 50%;
    &.on { border-color: #1890ff; background: #1890ff; }
  }
  .radio-txt {
    display: flex;
    flex-direction: column;
    .main { font-size: 14px; color: #333; }
    .sub { font-size: 12px; color: #999; }
  }
  &::after {
    content: '✓';
    position: absolute;
    right: 0; bottom: 0;
    background: #1890ff; color: #fff; font-size: 10px; padding: 0 2px;
  }
}

.input-box {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 12px;
  width: 400px;
  height: 36px;
  &.small { width: 150px; }
  .real-input { flex: 1; font-size: 14px; color: #333; }
  .count, .unit { font-size: 14px; color: #666; margin-left: 8px; }
}

.image-uploader {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
  .img-item {
    width: 100px; height: 100px; position: relative; border-radius: 4px; overflow: visible;
    border: 1px solid #e8e8e8;
    background-color: #f9f9f9;
    image { width: 100%; height: 100%; border-radius: 4px; }
    .img-close {
      position: absolute; right: -8px; top: -8px; width: 20px; height: 20px;
      background: rgba(0,0,0,0.5); color: #fff; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; font-size: 12px;
      cursor: pointer; z-index: 2;
    }
    .main-tag {
      position: absolute; left: 0; bottom: 0; background: rgba(24,144,255,0.8);
      color: #fff; font-size: 12px; padding: 2px 6px; border-top-right-radius: 4px; border-bottom-left-radius: 4px;
    }
  }
  .video-item {
    width: 150px; height: 100px;
  }
}

.upload-btn {
  width: 100px; height: 100px; border: 1px dashed #d9d9d9; border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer;
  background-color: #fafafa;
  &:hover { border-color: #1890ff; }
  .icon { font-size: 28px; color: #999; margin-bottom: 4px; }
  .upload-txt { font-size: 12px; color: #666; }
  &.v-btn { 
    width: 150px; height: 100px;
    .v-icon { font-size: 24px; color: #999; margin-bottom: 4px; }
  }
}

.tip { font-size: 12px; color: #999; }

.tag-selector {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  .tag-item {
    background: #f5f5f5; border: 1px solid #d9d9d9; padding: 4px 10px; border-radius: 4px;
    display: flex; flex-direction: row; align-items: center; gap: 6px;
    font-size: 14px; color: #666;
    .close { color: #999; cursor: pointer; font-size: 16px; margin-left: 2px; }
  }
  .add-link { font-size: 14px; color: #1890ff; cursor: pointer; padding: 4px 0; }
}

.mock-btn-select {
  border: 1px solid #d9d9d9; border-radius: 4px; padding: 0 16px; height: 36px;
  font-size: 14px; color: #333; display: flex; align-items: center; cursor: pointer;
}

.radio-group-simple {
  display: flex;
  flex-direction: row;
  gap: 20px;
  .radio-simple {
    display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: #666; cursor: pointer;
    .dot { width: 14px; height: 14px; border: 1px solid #d9d9d9; border-radius: 50%; position: relative; }
    &.on {
      color: #1890ff;
      .dot { border-color: #1890ff; }
      .dot::after {
        content: ''; position: absolute; left: 3px; top: 3px; width: 6px; height: 6px;
        background: #1890ff; border-radius: 50%;
      }
    }
  }
}

.footer-btns {
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 16px;
  padding-bottom: 40px;
  .btn-next { background: #1890ff; color: #fff; border: none; padding: 0 24px; height: 40px; border-radius: 4px; cursor: pointer; font-size: 14px; }
  .btn-save { background: #fff; color: #333; border: 1px solid #d9d9d9; padding: 0 24px; height: 40px; border-radius: 4px; cursor: pointer; font-size: 14px; }
  .btn-save:hover { color: #1890ff; border-color: #1890ff; }
}
</style>
