<template>
  <div class="file-selector">
    <label for="file-select">Select File:</label>
    <select
      id="file-select"
      v-model="selectedFile"
      :disabled="isLoading || uniqueFiles.length === 0"
    >
      <option value="">-- Choose a file --</option>
      <option
        v-for="file in uniqueFiles"
        :key="file.filename"
        :value="getFileType(file.filename)"
      >
        {{ formatFileName(file.filename) }} ({{ formatSize(file.size) }})
      </option>
    </select>

    <span v-if="fileContent" class="file-info">
      {{ fileLines.length.toLocaleString() }} lines
      <template v-if="selectedFileMeta">
        • {{ formatSize(selectedFileMeta.size) }}
      </template>
    </span>

    <span v-if="isLoading" class="file-status">Loading...</span>
    <span v-if="fileError" class="file-error">{{ fileError }}</span>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue';
import { useGamemasterFiles } from '../../composables/useGamemasterFiles.js';

const props = defineProps({
  client: {
    type: Object,
    required: true
  }
});

const {
  selectedFile,
  fileContent,
  fileLines,
  uniqueFiles,
  isLoading,
  fileError,
  loadStatus,
  formatSize,
  formatFileName,
  getFileType
} = useGamemasterFiles(props.client);

const selectedFileMeta = computed(() => {
  if (!selectedFile.value) return null;
  return uniqueFiles.value.find(
    file => getFileType(file.filename) === selectedFile.value
  );
});

onMounted(() => {
  loadStatus();
});
</script>

<style scoped>
.file-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.file-selector label {
  font-weight: 600;
  color: #333;
}

.file-selector select {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: white;
}

.file-selector select:disabled {
  background: #f5f5f5;
  color: #999;
}

.file-info {
  font-size: 13px;
  color: #666;
}

.file-status {
  font-size: 13px;
  color: #666;
}

.file-error {
  font-size: 13px;
  color: #d9534f;
}
</style>
