<template>
  <Dialog :open="open" @update:open="$emit('update:open', $event)">
    <DialogContent class="sm:max-w-md">
      <DialogHeader>
        <DialogTitle>Confirm Asset Creation</DialogTitle>
        <DialogDescription>
          Review the asset and tasks that will be created.
        </DialogDescription>
      </DialogHeader>
      
      <div class="space-y-4">
        <!-- Asset Details -->
        <div class="space-y-2">
          <h4 class="text-sm font-medium">Asset Details</h4>
          <div class="rounded-md bg-muted p-3 space-y-1">
            <div class="flex justify-between text-sm">
              <span class="text-muted-foreground">Name:</span>
              <span class="font-medium">{{ assetData.name }}</span>
            </div>
            <div class="flex justify-between text-sm">
              <span class="text-muted-foreground">Category:</span>
              <span class="font-medium">{{ formatCategory(assetData.category) }}</span>
            </div>
            <div v-if="assetData.description" class="flex justify-between text-sm">
              <span class="text-muted-foreground">Description:</span>
              <span class="font-medium">{{ assetData.description }}</span>
            </div>
          </div>
        </div>

        <!-- Tasks to be Created -->
        <div v-if="assetData.create_default_tasks && taskList.length > 0" class="space-y-2">
          <h4 class="text-sm font-medium">Tasks to be Created ({{ taskList.length }})</h4>
          <div class="rounded-md bg-muted p-3">
            <ul class="space-y-1">
              <li 
                v-for="taskType in taskList" 
                :key="taskType"
                class="flex items-center gap-2 text-sm"
              >
                <div class="w-1.5 h-1.5 rounded-full bg-primary"></div>
                {{ assetData.name }} - {{ formatTaskType(taskType) }}
              </li>
            </ul>
          </div>
        </div>

        <!-- No Tasks Message -->
        <div v-else-if="assetData.create_default_tasks && taskList.length === 0" class="space-y-2">
          <h4 class="text-sm font-medium text-muted-foreground">No Tasks Selected</h4>
          <p class="text-sm text-muted-foreground">
            The asset will be created without any default tasks.
          </p>
        </div>
      </div>

      <DialogFooter class="flex gap-2">
        <Button 
          variant="outline" 
          @click="$emit('cancel')"
          :disabled="loading"
        >
          Cancel
        </Button>
        <Button 
          @click="$emit('confirm')"
          :disabled="loading"
        >
          <div v-if="loading" class="flex items-center gap-2">
            <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
            Creating...
          </div>
          <span v-else>Create Asset</span>
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { AssetCategory, type AssetCreate } from '@/services/asset'

interface Props {
  open: boolean
  assetData: AssetCreate
  taskList: string[]
  loading?: boolean
}

interface Emits {
  (e: 'update:open', value: boolean): void
  (e: 'confirm'): void
  (e: 'cancel'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const formatCategory = (category: AssetCategory) => {
  const categoryMap = {
    [AssetCategory.CHARACTERS]: 'Characters',
    [AssetCategory.PROPS]: 'Props',
    [AssetCategory.SETS]: 'Sets',
    [AssetCategory.VEHICLES]: 'Vehicles'
  }
  return categoryMap[category] || category
}

const formatTaskType = (taskType: string) => {
  return taskType.charAt(0).toUpperCase() + taskType.slice(1)
}
</script>