<template>
  <div class="mt-4">
    <label class="block text-sm font-medium leading-6 text-gray-900">{{ label }}</label>
    <div class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10" :class="{'bg-gray-50': isDragging}" @dragover.prevent="isDragging = true" @dragleave.prevent="isDragging = false" @drop.prevent="handleDrop">
      <div class="text-center">
        <svg class="mx-auto h-12 w-12 text-gray-300" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 6v12a2.25 2.25 0 01-2.25 2.25H3.75A2.25 2.25 0 011.5 18V6zM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0021 18v-1.94l-2.69-2.689a1.5 1.5 0 00-2.12 0l-.88.879.97.97a.75.75 0 11-1.06 1.06l-5.16-5.159a1.5 1.5 0 00-2.12 0L3 16.061zm10.125-7.81a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0z" clip-rule="evenodd" />
        </svg>
        <div class="mt-4 flex text-sm leading-6 text-gray-600 justify-center">
          <label :for="inputId" class="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500">
            <span>Upload a file</span>
            <input :id="inputId" name="file-upload" type="file" class="sr-only" @change="handleFileChange">
          </label>
          <p class="pl-1">or drag and drop</p>
        </div>
        <p class="text-xs leading-5 text-gray-600">PNG, JPG, PDF up to 10MB</p>
      </div>
    </div>
    <div v-if="uploading" class="mt-2 text-sm text-blue-500">Uploading...</div>
    <div v-if="error" class="mt-2 text-sm text-red-500">{{ error }}</div>
    <div v-if="success" class="mt-2 text-sm text-green-500">File uploaded successfully!</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const props = defineProps({
  label: String,
  type: String, // document type key
  expiryDate: String, // optional binding
});

const emit = defineEmits(['uploaded']);

const inputId = `file-upload-${Math.random().toString(36).substring(7)}`;
const isDragging = ref(false);
const uploading = ref(false);
const error = ref(null);
const success = ref(false);

const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) uploadFile(file);
};

const handleDrop = (e) => {
    isDragging.value = false;
    const file = e.dataTransfer.files[0];
    if (file) uploadFile(file);
};

const uploadFile = async (file) => {
    uploading.value = true;
    error.value = null;
    success.value = false;

    const formData = new FormData();
    formData.append('file', file);
    formData.append('type', props.type);
    if(props.expiryDate) formData.append('expiry_date', props.expiryDate);

    try {
        const response = await axios.post('/api/documents', formData, {
            headers: { 'Content-Type': 'multipart/form-data' }
        });
        success.value = true;
        emit('uploaded', response.data);
    } catch (err) {
        error.value = err.response?.data?.message || 'Upload failed';
    } finally {
        uploading.value = false;
    }
};
</script>
