<script setup>
import GlassCard from './GlassCard.vue'
import LocalIcon from './LocalIcon.vue'

defineProps({
  roomCodeInput: {
    type: String,
    required: true,
  },
  isWaiting: {
    type: Boolean,
    required: true,
  },
  generatedCode: {
    type: String,
    required: true,
  },
  pendingDownloads: {
    type: Array,
    required: true,
  },
})

const emit = defineEmits(['update-room-code', 'create-room', 'join-room', 'cancel-room'])

function handleInput(event) {
  emit('update-room-code', event.target.value)
}

function handleEnter() {
  emit('join-room')
}
</script>

<template>
  <GlassCard title="远程直连">
    <div v-if="!isWaiting" class="room-action-area">
      <button class="btn-create" type="button" @click="$emit('create-room')">
        <LocalIcon name="add_circle" size="22" />
        创建专属传输房间
      </button>

      <div class="divider">或</div>

      <div class="room-input-group">
        <input
          class="room-code"
          inputmode="numeric"
          maxlength="4"
          pattern="\d*"
          placeholder="输入4位房间号"
          type="text"
          :value="roomCodeInput"
          @input="handleInput"
          @keyup.enter="handleEnter"
        />
        <button class="btn-primary" type="button" @click="$emit('join-room')">加入房间</button>
      </div>

      <div v-if="pendingDownloads.length" class="pending-downloads">
        <div class="pending-downloads-head">
          <span>待领取文件</span>
          <span>{{ pendingDownloads.length }}</span>
        </div>

        <a
          v-for="item in pendingDownloads"
          :key="item.transfer_id"
          class="pending-download-item"
          :href="item.download_path"
          target="_blank"
          rel="noopener noreferrer"
        >
          <div class="pending-download-copy">
            <strong :title="item.name">{{ item.name }}</strong>
            <p>{{ item.size_label }} · {{ item.created_label }}</p>
          </div>
          <span class="pending-download-icon" aria-hidden="true">
            <LocalIcon name="download" size="18" />
          </span>
        </a>
      </div>
    </div>

    <div v-else class="waiting-area">
      <p class="waiting-subtitle">您的房间号码</p>
      <div class="huge-code">{{ generatedCode }}</div>
      <div class="spinner"></div>
      <p class="waiting-tip">等待对方加入...</p>
      <button class="btn-cancel" type="button" @click="$emit('cancel-room')">取消建房</button>
    </div>
  </GlassCard>
</template>
