<template>
  <div class="space-y-6">
    <!-- Header -->
    <div>
      <h3 class="text-lg font-semibold">Upload Location Configuration</h3>
      <p class="text-sm text-muted-foreground mt-1">
        Configure the storage location for project file uploads
      </p>
    </div>

    <!-- Upload Data Location -->
    <div class="space-y-2">
      <Label for="upload_location">Upload Data Location</Label>
      <div class="flex gap-2">
        <Input
          id="upload_location"
          v-model="uploadLocation"
          placeholder="e.g., /mnt/projects/project-name/uploads"
          class="flex-1"
        />
        <Button variant="outline" size="icon" @click="clearLocation" v-if="uploadLocation">
          <X class="h-4 w-4" />
        </Button>
      </div>
      <p class="text-xs text-muted-foreground">
        Specify the file system path where uploaded files will be stored for this project
      </p>
    </div>

    <!-- Info Box -->
    <div class="bg-muted/50 rounded-lg p-4 space-y-2">
      <div class="flex items-start gap-2">
        <Info class="h-4 w-4 text-muted-foreground mt-0.5" />
        <div class="text-sm text-muted-foreground space-y-1">
          <p>
            <strong>Note:</strong> This path should be accessible by the server and have appropriate write permissions.
          </p>
          <p>
            If left empty, the system will use the default upload location configured in the server settings.
          </p>
        </div>
      </div>
    </div>

    <!-- Example Paths -->
    <div class="space-y-2">
      <Label class="text-sm font-medium">Example Paths</Label>
      <div class="space-y-1 text-xs text-muted-foreground">
        <div class="flex items-center gap-2">
          <Badge variant="outline" class="font-mono">Windows</Badge>
          <code>D:\Projects\ProjectName\Uploads</code>
        </div>
        <div class="flex items-center gap-2">
          <Badge variant="outline" class="font-mono">Linux/Mac</Badge>
          <code>/mnt/storage/projects/project-name/uploads</code>
        </div>
        <div class="flex items-center gap-2">
          <Badge variant="outline" class="font-mono">Network</Badge>
          <code>\\server\projects\project-name\uploads</code>
        </div>
      </div>
    </div>

    <!-- Action Buttons -->
    <div class="flex items-center justify-end gap-2 pt-4">
      <Button variant="outline" @click="$emit('cancel')">
        Cancel
      </Button>
      <Button @click="handleSave" :disabled="isSaving">
        <div v-if="isSaving" class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
        Save Configuration
      </Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Info, X } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Badge } from '@/components/ui/badge'

interface Props {
  initialLocation?: string
  isSaving?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  initialLocation: '',
  isSaving: false
})

const emit = defineEmits<{
  save: [location: string]
  cancel: []
}>()

// State
const uploadLocation = ref(props.initialLocation || '')

// Methods
const clearLocation = () => {
  uploadLocation.value = ''
}

const handleSave = () => {
  emit('save', uploadLocation.value)
}

// Watch for prop changes
watch(() => props.initialLocation, (newVal) => {
  uploadLocation.value = newVal || ''
})
</script>
