<template>
  <BaseDialog
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    :title="$t('csvImport.title')"
    size="small"
    @close="handleClose"
  >
    <form @submit.prevent="handleSubmit" class="import-form">
      <div class="form-group">
        <label for="csvFile">{{ $t('csvImport.uploadCsvFile') }}:</label>
        <input 
          type="file" 
          id="csvFile" 
          @change="handleFileChange" 
          accept=".csv" 
          required 
          class="file-input" 
          ref="fileInput"
        />
        <div v-if="selectedFile" class="file-info">
          <span class="file-icon">📄</span>
          <span class="file-name">{{ selectedFile.name }}</span>
          <span class="file-size">({{ formatFileSize(selectedFile.size) }})</span>
        </div>
      </div>
    </form>
    
    <template #footer>
      <button @click="handleClose" class="btn-secondary">{{ $t('csvImport.cancel') }}</button>
      <button @click="handleSubmit" class="btn-primary" :disabled="!selectedFile">{{ $t('csvImport.import') }}</button>
    </template>
  </BaseDialog>
</template>

<script>
import BaseDialog from './BaseDialog.vue';

export default {
  name: 'CsvImportDialog',
  components: {
    BaseDialog
  },
  props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue', 'close', 'import'],
  data() {
    return {
      selectedFile: null
    };
  },
  methods: {
    handleClose() {
      this.selectedFile = null;
      if (this.$refs.fileInput) {
        this.$refs.fileInput.value = '';
      }
      this.$emit('update:modelValue', false);
      this.$emit('close');
    },
    handleFileChange(event) {
      this.selectedFile = event.target.files && event.target.files[0] ? event.target.files[0] : null;
    },
    handleSubmit() {
      if (this.selectedFile) {
        this.$emit('import', this.selectedFile);
      }
    },
    formatFileSize(bytes) {
      if (bytes < 1024) return bytes + ' B';
      if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
      return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
    }
  },
  watch: {
    modelValue(newVal) {
      if (!newVal) {
        // Dialog geschlossen - Reset
        this.selectedFile = null;
      }
    }
  }
};
</script>

<style scoped>
.import-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 600;
  color: var(--text-color);
}

.file-input {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  background: var(--surface-muted);
  color: var(--text-color);
}

.file-input::-webkit-file-upload-button {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--surface-color);
  color: var(--text-color);
  cursor: pointer;
  margin-right: 0.5rem;
}

.file-input::-webkit-file-upload-button:hover {
  background: var(--surface-muted);
}

.file-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  background: var(--surface-muted);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 0.875rem;
}

.file-icon {
  font-size: 1.5rem;
}

.file-name {
  flex: 1;
  font-weight: 500;
}

.file-size {
  color: var(--text-muted);
}

.btn-primary,
.btn-secondary {
  padding: 0.65rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  color: var(--text-on-primary);
}

.btn-primary:hover:not(:disabled) {
  opacity: 0.9;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--surface-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

.btn-secondary:hover {
  background: var(--surface-muted);
  border-color: var(--primary-soft);
}
</style>
