<template>
  <Card>
    <CardHeader>
      <CardTitle>File Upload Example</CardTitle>
      <CardDescription>
        Example showing how to integrate upload limit display and validation
      </CardDescription>
    </CardHeader>
    <CardContent class="space-y-4">
      <!-- Upload Limit Display -->
      <UploadLimitDisplay />
      
      <!-- File Upload -->
      <div class="space-y-2">
        <Label for="file-upload">Select File</Label>
        <Input
          id="file-upload"
          type="file"
          @change="handleFileSelect"
          :disabled="uploading"
          accept=".mov,.mp4,.avi,.mkv,.webm,.jpg,.jpeg,.png,.exr,.tiff"
        />
      </div>
      
      <!-- File Info -->
      <div v-if="selectedFile" class="text-sm space-y-1">
        <p><strong>File:</strong> {{ selectedFile.name }}</p>
        <p><strong>Size:</strong> {{ formatFileSize(selectedFile.size) }}</p>
        <p><strong>Type:</strong> {{ getFileType(selectedFile.name) }}</p>
      </div>
      
      <!-- Validation Errors -->
      <div v-if="validationError" class="text-sm text-destructive">
        {{ validationError }}
      </div>
      
      <!-- Upload Button -->
      <Button 
        @click="uploadFile" 
        :disabled="!selectedFile || !!validationError || uploading"
        class="w-full"
      >
        <Loader2 v-if="uploading" class="h-4 w-4 animate-spin mr-2" />
        <Upload v-else class="h-4 w-4 mr-2" />
        {{ uploading ? 'Uploading...' : 'Upload File' }}
      </Button>
      
      <!-- Success Message -->
      <div v-if="uploadSuccess" class="text-sm text-green-600">
        File uploaded successfully!
      </div>
    </CardContent>
  </Card>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Upload, Loader2 } from 'lucide-vue-next'
import UploadLimitDisplay from '@/components/settings/UploadLimitDisplay.vue'
import { validateFile, formatFileSize, isMovieFile, isImageFile } from '@/utils/fileValidation'

const selectedFile = ref<File | null>(null)
const validationError = ref<string | null>(null)
const uploading = ref(false)
const uploadSuccess = ref(false)

function getFileType(fileName: string): string {
  if (isMovieFile(fileName)) return 'Movie'
  if (isImageFile(fileName)) return 'Image'
  return 'Other'
}

async function handleFileSelect(event: Event) {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  
  if (!file) {
    selectedFile.value = null
    validationError.value = null
    return
  }
  
  selectedFile.value = file
  uploadSuccess.value = false
  
  // Validate file
  const result = await validateFile(file)
  validationError.value = result.isValid ? null : result.error || 'Invalid file'
}

async function uploadFile() {
  if (!selectedFile.value || validationError.value) return
  
  uploading.value = true
  
  try {
    // Simulate upload delay
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    // Here you would make the actual API call to upload the file
    // const formData = new FormData()
    // formData.append('file', selectedFile.value)
    // await api.post('/tasks/123/attachments', formData)
    
    uploadSuccess.value = true
    selectedFile.value = null
    validationError.value = null
    
    // Reset file input
    const fileInput = document.getElementById('file-upload') as HTMLInputElement
    if (fileInput) fileInput.value = ''
    
  } catch (error) {
    validationError.value = 'Upload failed. Please try again.'
  } finally {
    uploading.value = false
  }
}
</script>