<template>
  <el-dialog
    v-model="visible"
    :title="dialogTitle"
    width="420px"
    :close-on-click-modal="false"
    @closed="handleClosed"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="72px"
      label-position="left"
      @submit.prevent="handleSubmit"
    >
      <!-- 房间名称（可选） -->
      <el-form-item label="房间名" prop="name">
        <el-input
          v-model="form.name"
          placeholder="留空自动生成桌号"
          maxlength="20"
          show-word-limit
          clearable
        />
        <div class="create-room-dialog__hint">留空将自动生成"桌 XX"编号</div>
      </el-form-item>

      <!-- 游戏模式 -->
      <el-form-item label="模式" prop="mode">
        <el-select v-model="form.mode" placeholder="请选择模式">
          <el-option v-for="m in gameConfig?.modes ?? []" :key="m" :label="m" :value="m" />
        </el-select>
      </el-form-item>

      <!-- 底注金额 -->
      <el-form-item label="底注" prop="stakes">
        <el-select v-model="form.stakes" placeholder="请选择底注">
          <el-option
            v-for="s in gameConfig?.stakesOptions ?? []"
            :key="s"
            :label="`${s} 金币`"
            :value="s"
          />
        </el-select>
      </el-form-item>

      <!-- 房间密码（可选） -->
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="form.password"
          type="password"
          placeholder="留空为公开房间"
          maxlength="16"
          show-password
          clearable
        />
        <div class="create-room-dialog__hint">设置密码后，其他玩家需输入密码才能加入</div>
      </el-form-item>

      <!-- 是否允许观战 -->
      <el-form-item label="观战">
        <el-switch v-model="form.allowSpectate" />
        <div class="create-room-dialog__hint">开启后，其他玩家可旁观对局</div>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" :loading="submitting" @click="handleSubmit"> 确认创建 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import { useBaseLayoutStore } from '@/stores'
import { storeToRefs } from 'pinia'
import type { GameConfig } from '@/api/modules/game'
import { createRoom } from '@/api/modules/game'

/** 创建房间表单数据 */
interface CreateRoomForm {
  name: string
  mode: string
  stakes: number | undefined
  password: string
  allowSpectate: boolean
}

const props = defineProps<{
  modelValue: boolean
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'created'): void
}>()

const router = useRouter()
const baseLayoutStore = useBaseLayoutStore()
const { activeGameName, activeGameConfig } = storeToRefs(baseLayoutStore)

const formRef = ref<FormInstance>()
const submitting = ref(false)

/** 对话框可见性（双向绑定） */
const visible = computed({
  get: () => props.modelValue,
  set: (val: boolean) => emit('update:modelValue', val)
})

/** 对话框标题 */
const dialogTitle = computed(() => `创建房间 — ${activeGameName.value}`)

/** 当前游戏配置（只读） */
const gameConfig = computed<GameConfig | null>(() => activeGameConfig.value)

/** 表单数据 */
const form = reactive<CreateRoomForm>({
  name: '',
  mode: '',
  stakes: undefined,
  password: '',
  allowSpectate: true
})

/** 初始化默认值：取当前游戏配置的第一个选项 */
function initDefaults() {
  if (gameConfig.value) {
    form.mode = gameConfig.value.modes[0] ?? ''
    form.stakes = gameConfig.value.stakesOptions[0]
  }
  form.name = ''
  form.password = ''
  form.allowSpectate = true
}

/** 弹窗打开时设置默认值 */
watch(
  () => props.modelValue,
  (val) => {
    if (val) initDefaults()
  }
)

/** 切换游戏时重置默认值 */
watch(activeGameConfig, () => {
  if (props.modelValue) initDefaults()
})

const rules: FormRules = {
  mode: [{ required: true, message: '请选择游戏模式', trigger: 'change' }],
  stakes: [{ required: true, message: '请选择底注金额', trigger: 'change' }],
  name: [{ max: 20, message: '房间名不超过 20 个字符', trigger: 'blur' }],
  password: [{ max: 16, message: '密码不超过 16 个字符', trigger: 'blur' }]
}

/** 提交创建房间 */
async function handleSubmit() {
  const valid = await formRef.value?.validate().catch(() => false)
  if (!valid) return

  submitting.value = true
  try {
    const res = await createRoom({
      gameId: baseLayoutStore.activeGameId,
      name: form.name.trim() || undefined,
      password: form.password || undefined,
      mode: form.mode,
      stakes: form.stakes!,
      maxPlayers: gameConfig.value?.maxPlayers ?? 0,
      allowSpectate: form.allowSpectate
    })
    visible.value = false
    emit('created')
    // 跳转到新创建的房间
    router.push(`/room/${res.data.room.id}`)
  } finally {
    submitting.value = false
  }
}

/** 弹窗关闭动画结束后重置表单 */
function handleClosed() {
  initDefaults()
  formRef.value?.resetFields()
}
</script>

<style scoped lang="scss">
.create-room-dialog__hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
  line-height: 1.4;
}
</style>
