<template>
  <Card>
    <CardHeader>
      <CardTitle class="flex items-center gap-2">
        <Upload class="h-5 w-5" />
        Global Upload Limit
      </CardTitle>
      <CardDescription>
        Set the maximum file size limit for movie uploads across all projects
      </CardDescription>
    </CardHeader>
    <CardContent class="space-y-4">
      <div class="space-y-2">
        <Label for="upload-limit">Upload Limit (MB)</Label>
        <div class="flex items-center gap-2">
          <Input
            id="upload-limit"
            v-model.number="uploadLimitMB"
            type="number"
            :min="1"
            :max="10000"
            class="w-32"
            :disabled="loading"
          />
          <span class="text-sm text-muted-foreground">MB</span>
          <Button 
            @click="updateLimit" 
            :disabled="loading || !hasChanged"
            size="sm"
          >
            <Loader2 v-if="loading" class="h-4 w-4 animate-spin mr-2" />
            Update
          </Button>
        </div>
        <p class="text-xs text-muted-foreground">
          Current limit: {{ formatFileSize(currentLimitBytes) }}
        </p>
      </div>

      <div v-if="error" class="text-sm text-destructive">
        {{ error }}
      </div>

      <div class="space-y-2">
        <Label>Quick Presets</Label>
        <div class="flex flex-wrap gap-2">
          <Button
            v-for="preset in presets"
            :key="preset.value"
            variant="outline"
            size="sm"
            @click="uploadLimitMB = preset.value"
            :disabled="loading"
          >
            {{ preset.label }}
          </Button>
        </div>
      </div>

      <div class="rounded-lg bg-muted p-3 text-sm">
        <p class="font-medium mb-1">Note:</p>
        <p class="text-muted-foreground">
          This limit applies to all movie file uploads (mov, mp4, etc.) across all projects. 
          Artists will see this limit during file submission and uploads exceeding this size will be rejected.
        </p>
      </div>
    </CardContent>
  </Card>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } 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 { useSettingsStore } from '@/stores/settings'
import { useToast } from '@/components/ui/toast/use-toast'

const settingsStore = useSettingsStore()
const { toast } = useToast()

const uploadLimitMB = ref(1000)
const loading = ref(false)

const presets = [
  { label: '500 MB', value: 500 },
  { label: '1 GB', value: 1000 },
  { label: '2 GB', value: 2000 },
  { label: '5 GB', value: 5000 },
  { label: '10 GB', value: 10000 }
]

const currentLimitBytes = computed(() => settingsStore.uploadLimitBytes)
const hasChanged = computed(() => uploadLimitMB.value !== settingsStore.uploadLimitMB)
const error = computed(() => settingsStore.error)

function formatFileSize(bytes: number): string {
  if (bytes === 0) return '0 Bytes'
  
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

async function updateLimit() {
  if (!hasChanged.value) return
  
  try {
    loading.value = true
    await settingsStore.updateUploadLimit(uploadLimitMB.value)
    
    toast({
      title: 'Upload limit updated',
      description: `Global upload limit set to ${formatFileSize(uploadLimitMB.value * 1024 * 1024)}`
    })
  } catch (error) {
    toast({
      title: 'Error',
      description: 'Failed to update upload limit',
      variant: 'destructive'
    })
  } finally {
    loading.value = false
  }
}

onMounted(async () => {
  await settingsStore.fetchUploadLimit()
  uploadLimitMB.value = settingsStore.uploadLimitMB
})
</script>