<template>
  <div>
    <h2><UsersIcon :size="22" :stroke-width="1.8" style="vertical-align:-4px" /> {{ i18n.t('users') }}</h2>

    <div class="card guide">
      <strong><Info :size="17" :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>เลือกสิทธิ์: <strong>user</strong> = ผู้เข้าฝึกขาย, <strong>admin</strong> = จัดการระบบ</li>
        <li>กด <strong>สร้าง</strong> — นำชื่อผู้ใช้ + รหัสผ่านไปแจ้งให้ผู้ใช้นั้นเข้าสู่ระบบได้เลย</li>
      </ol>
    </div>

    <div class="card" style="margin-bottom:16px">
      <h4 style="margin-top:0"><UserPlus :size="18" :stroke-width="1.8" style="vertical-align:-3px" /> ＋ {{ i18n.t('create') }} {{ i18n.t('users').toLowerCase() }}</h4>
      <div class="row">
        <input v-model="form.username" placeholder="ชื่อผู้ใช้ (เข้าสู่ระบบ)" style="flex:1" />
        <input v-model="form.name" placeholder="ชื่อจริง" style="flex:1" />
        <input v-model="form.password" type="password" placeholder="รหัสผ่านเริ่มต้น" style="flex:1" />
      </div>
      <div class="row" style="margin-top:10px">
        <select v-model="form.role" style="flex:1">
          <option value="user">🙂 user — ผู้เข้าฝึก</option>
          <option value="admin">🛠 admin — ผู้ดูแลระบบ</option>
        </select>
        <button class="primary" @click="create" :disabled="!form.username || !form.password">＋ {{ i18n.t('create') }}</button>
      </div>
      <div class="error" v-if="error">{{ error }}</div>
    </div>

    <div v-if="users.length === 0" class="card empty-state">
      <strong>ยังไม่มีผู้ใช้งาน</strong><span>สร้างผู้ใช้งานคนแรกด้วยฟอร์มด้านบน</span>
    </div>
    <div class="card" v-for="u in users" :key="u.id" style="margin-bottom:8px;display:flex;align-items:center;gap:12px">
      <strong style="flex:1">{{ u.name }} ({{ u.username }})</strong>
      <span class="badge">{{ u.role }}</span>
      <span class="badge" :class="u.active ? 'won' : 'lost'">{{ u.active ? 'active' : 'inactive' }}</span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { Users as UsersIcon, UserPlus, Info } from 'lucide-vue-next'
import { api } from '../api'
import { i18n } from '../i18n'

const users = ref([])
const error = ref('')
const form = ref({ username: '', name: '', password: '', role: 'user' })

async function load() { users.value = (await api.adminListUsers()).users }
async function create() {
  error.value = ''
  try {
    await api.adminCreateUser({ ...form.value })
    form.value = { username: '', name: '', password: '', role: 'user' }
    await load()
  } catch (e) { error.value = e.message }
}
onMounted(load)
</script>

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