<template>
  <div class="room-detail">
    <el-page-header @back="goBack" title="返回" :content="`房间 ${roomId}`" />
    <el-card v-if="loading" class="info-card">
      <el-skeleton :rows="4" animated />
    </el-card>
    <el-card v-else-if="notFound" class="info-card">
      <el-result icon="warning" title="房间不存在" sub-title="该房间号不存在或已被删除">
        <template #extra>
          <el-button type="primary" @click="goBack">返回列表</el-button>
        </template>
      </el-result>
    </el-card>
    <template v-else-if="room">
      <el-card class="info-card">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="房间号">{{ room.roomId }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <StatusTag :status="room.status" />
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ formatDateTime(room.createdAt) }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ formatDateTime(room.updatedAt) }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card class="sessions-card">
        <template #header>历史游戏局</template>
        <el-table v-if="sessions.length > 0" :data="sessions" stripe>
          <el-table-column prop="id" label="局ID" width="80" />
          <el-table-column prop="score" label="得分" width="100" />
          <el-table-column prop="duration" label="时长(秒)" width="100" />
          <el-table-column label="开始时间" min-width="160">
            <template #default="{ row }">{{ formatDateTime(row.startedAt) }}</template>
          </el-table-column>
          <el-table-column label="结束时间" min-width="160">
            <template #default="{ row }">{{ formatDateTime(row.endedAt) }}</template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="80">
            <template #default="{ row }">
              <StatusTag :status="row.status" />
            </template>
          </el-table-column>
        </el-table>
        <el-empty v-else description="暂无游戏局记录" />
      </el-card>
    </template>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useRoomsStore } from '../stores/rooms'
import StatusTag from '../components/common/StatusTag.vue'
import { formatDateTime } from '../utils/format'

const route = useRoute()
const router = useRouter()
const roomId = computed(() => route.params.roomId)
const roomsStore = useRoomsStore()
const room = computed(() => roomsStore.currentRoom)
const loading = ref(true)
const notFound = ref(false)
const sessions = computed(() => room.value?.sessions ?? [])

function goBack() {
  router.push({ name: 'Rooms' })
}

onMounted(async () => {
  loading.value = true
  notFound.value = false
  try {
    await roomsStore.fetchRoomDetail(roomId.value)
  } catch {
    notFound.value = true
  } finally {
    loading.value = false
  }
})

onUnmounted(() => {
  roomsStore.clearCurrentRoom()
})
</script>

<style scoped>
.room-detail {
  padding: 0;
}
.info-card {
  margin-top: 20px;
}
.sessions-card {
  margin-top: 20px;
}
</style>
