<template>
  <div>
    <router-link to="/training" class="btn-back"><ArrowLeft :size="16" :stroke-width="2" /> {{ i18n.t('training') }}</router-link>

    <!-- Step guidance -->
    <div class="card guide">
      <strong><ListChecks :size="18" :stroke-width="1.8" style="vertical-align:-3px" /> วิธีสร้างกลุ่มบุคคลต้นแบบ</strong>
      <ol style="margin:8px 0 0;padding-left:20px;line-height:1.8">
        <li>กรอก <strong>ชื่อ/รายละเอียดสินค้าหรือบริการ</strong> ที่อยากให้ทีมฝึกขาย (ช่องด้านล่าง)</li>
        <li>(ไม่บังคับ) ระบุกลุ่มลูกค้าเป้าหมาย หรืออัปโหลดไฟล์เอกสารสินค้า .pdf/.md/.txt</li>
        <li>กด <strong>สร้าง</strong> — ระบบจะพาไปหน้าสร้างบุคคลต้นแบบ (ลูกค้าจำลอง)</li>
      </ol>
    </div>

    <div class="card">
      <h2 style="margin-top:0"><Box :size="22" :stroke-width="1.8" style="vertical-align:-4px" /> {{ i18n.t('addProduct') }}</h2>
      <label>{{ i18n.t('product') }} <span class="req">*</span></label>
      <textarea v-model="form.product" rows="3" placeholder="เช่น ระบบ POS สำหรับร้านอาหาร Cloud POS for small restaurants"></textarea>

      <label>{{ i18n.t('segment') }}</label>
      <input v-model="form.segment" placeholder="เช่น SMEs ร้านอาหารในกรุงเทพ" />

      <label>{{ i18n.t('description') }}</label>
      <textarea v-model="form.description" rows="3" placeholder="รายละเอียดเพิ่มเติม เช่น จุดเด่นสินค้า ราคา ฯลฯ (ไม่บังคับ)"></textarea>

      <div class="row">
        <div style="flex:1">
          <label>{{ i18n.t('channel') }}</label>
          <select v-model="form.channel">
            <option value="facebook">{{ i18n.t('facebook') }}</option>
            <option value="line">{{ i18n.t('line') }}</option>
          </select>
        </div>
        <div style="flex:1">
          <label>{{ i18n.t('language') }}</label>
          <select v-model="form.language">
            <option value="th">{{ i18n.t('thai') }}</option>
            <option value="en">{{ i18n.t('english') }}</option>
          </select>
        </div>
      </div>

      <label><Paperclip :size="15" :stroke-width="1.8" style="vertical-align:-2px" /> ไฟล์เอกสารสินค้า (.pdf/.md/.txt) — ใช้เป็นข้อมูลให้ระบบได้</label>
      <input type="file" multiple accept=".pdf,.md,.txt" @change="onFiles" />

      <div class="error" v-if="error">{{ error }}</div>
      <button class="primary" style="margin-top:16px;display:inline-flex;align-items:center;gap:6px" :disabled="busy || (!form.product && !files.length)" @click="create">
        <PlusCircle :size="18" :stroke-width="2" /> {{ busy ? 'กำลังสร้าง…' : i18n.t('create') }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Box, ListChecks, Paperclip, PlusCircle, ArrowLeft } from 'lucide-vue-next'
import { api } from '../api'
import { i18n } from '../i18n'

const router = useRouter()
const form = ref({ product: '', segment: '', description: '', channel: 'facebook', language: 'th' })
const files = ref([])
const error = ref('')
const busy = ref(false)

function onFiles(e) {
  files.value = Array.from(e.target.files || [])
}
async function create() {
  busy.value = true
  error.value = ''
  try {
    const fd = new FormData()
    fd.append('product', form.value.product)
    fd.append('segment', form.value.segment)
    fd.append('description', form.value.description)
    fd.append('channel', form.value.channel)
    fd.append('language', form.value.language)
    files.value.forEach((f) => fd.append('files', f))
    const data = await api.createGroup(fd)
    const gid = data.group.id
    router.push(`/admin/groups/${gid}/edit`)
  } catch (e) {
    error.value = e.message
  } finally {
    busy.value = false
  }
}
</script>

<style scoped>
.guide { background: #eef2ff; border-color: #c7d2fe; margin-bottom: 16px; }
.req { color: var(--red); }
</style>
