<template>
  <Card 
    class="group hover:shadow-md transition-all duration-200 cursor-pointer border-border/50 hover:border-border"
    @dblclick="$emit('select', asset)"
  >
    <!-- Thumbnail Section -->
    <div v-if="showThumbnail" class="w-full h-32 bg-muted flex items-center justify-center border-b">
      <component 
        :is="getCategoryIcon(asset.category)" 
        class="h-12 w-12 text-muted-foreground/30"
      />
    </div>

    <CardHeader class="pb-2 pt-3 px-3">
      <div class="flex items-start justify-between">
        <div class="flex items-center gap-2 min-w-0 flex-1">
          <div v-if="!showThumbnail" class="flex-shrink-0">
            <component 
              :is="getCategoryIcon(asset.category)" 
              class="h-4 w-4 text-muted-foreground"
            />
          </div>
          <div class="min-w-0 flex-1">
            <CardTitle class="text-sm truncate">{{ asset.name }}</CardTitle>
            <p class="text-xs text-muted-foreground capitalize">
              {{ formatCategory(asset.category) }}
            </p>
          </div>
        </div>
        
        <!-- Actions Menu -->
        <DropdownMenu>
          <DropdownMenuTrigger asChild @click.stop>
            <Button variant="ghost" size="sm" class="h-6 w-6 p-0 opacity-0 group-hover:opacity-100 transition-opacity">
              <MoreHorizontal class="h-3 w-3" />
              <span class="sr-only">Asset actions</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem @click.stop="$emit('edit', asset)">
              <Edit class="h-4 w-4 mr-2" />
              Edit Asset
            </DropdownMenuItem>
            <DropdownMenuItem @click.stop="$emit('view-tasks', asset)">
              <ListTodo class="h-4 w-4 mr-2" />
              View Tasks
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem 
              @click.stop="$emit('delete', asset)"
              class="text-destructive focus:text-destructive"
            >
              <Trash2 class="h-4 w-4 mr-2" />
              Delete Asset
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </CardHeader>

    <CardContent class="pt-0 px-3 pb-3">
      <!-- Status Badge -->
      <div class="flex items-center justify-between mb-2">
        <Badge :variant="getStatusVariant(asset.status)" class="text-[10px] px-1.5 py-0">
          <div 
            class="w-1.5 h-1.5 rounded-full mr-1" 
            :class="getStatusColor(asset.status)"
          ></div>
          {{ formatStatus(asset.status) }}
        </Badge>
        
        <!-- Task Count -->
        <div class="flex items-center gap-1 text-xs text-muted-foreground">
          <ListTodo class="h-3 w-3" />
          <span>{{ asset.task_count }}</span>
        </div>
      </div>

      <!-- Task Types and Status -->
      <div v-if="asset.task_details && asset.task_details.length > 0" class="mb-2">
        <div class="flex flex-wrap gap-1">
          <Badge 
            v-for="task in asset.task_details" 
            :key="task.task_type"
            :variant="getTaskStatusVariant(task.status)"
            class="text-[10px] px-1.5 py-0"
          >
            <div 
              class="w-1 h-1 rounded-full mr-1" 
              :class="getTaskStatusColor(task.status)"
            ></div>
            {{ formatTaskType(task.task_type) }}
          </Badge>
        </div>
      </div>

      <!-- Description -->
      <p 
        v-if="asset.description" 
        class="text-xs text-muted-foreground line-clamp-2 mb-2"
      >
        {{ asset.description }}
      </p>

      <!-- Metadata -->
      <div class="text-[10px] text-muted-foreground">
        <span>{{ formatDate(asset.created_at) }}</span>
      </div>
    </CardContent>
  </Card>
</template>

<script setup lang="ts">
import { Users, Package, Building, Car, MoreHorizontal, Edit, ListTodo, Trash2 } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { AssetCategory, AssetStatus, TaskStatus, type Asset } from '@/services/asset'

interface Props {
  asset: Asset
  showThumbnail?: boolean
}

interface Emits {
  (e: 'select', asset: Asset): void
  (e: 'edit', asset: Asset): void
  (e: 'delete', asset: Asset): void
  (e: 'view-tasks', asset: Asset): void
}

withDefaults(defineProps<Props>(), {
  showThumbnail: false
})
defineEmits<Emits>()

// Methods
const getCategoryIcon = (category: AssetCategory) => {
  switch (category) {
    case AssetCategory.CHARACTERS:
      return Users
    case AssetCategory.PROPS:
      return Package
    case AssetCategory.SETS:
      return Building
    case AssetCategory.VEHICLES:
      return Car
    default:
      return Package
  }
}

const formatCategory = (category: AssetCategory) => {
  return category.replace('_', ' ')
}

const formatStatus = (status: AssetStatus) => {
  return status.split('_').map(word => 
    word.charAt(0).toUpperCase() + word.slice(1)
  ).join(' ')
}

const getStatusVariant = (status: AssetStatus) => {
  switch (status) {
    case AssetStatus.NOT_STARTED:
      return 'secondary'
    case AssetStatus.IN_PROGRESS:
      return 'default'
    case AssetStatus.ON_HOLD:
      return 'outline'
    case AssetStatus.COMPLETED:
      return 'default'
    case AssetStatus.APPROVED:
      return 'default'
    default:
      return 'secondary'
  }
}

const getStatusColor = (status: AssetStatus) => {
  switch (status) {
    case AssetStatus.NOT_STARTED:
      return 'bg-gray-400'
    case AssetStatus.IN_PROGRESS:
      return 'bg-blue-500'
    case AssetStatus.ON_HOLD:
      return 'bg-yellow-500'
    case AssetStatus.COMPLETED:
      return 'bg-green-500'
    case AssetStatus.APPROVED:
      return 'bg-emerald-600'
    default:
      return 'bg-gray-400'
  }
}

const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('en-US', {
    month: 'short',
    day: 'numeric',
    year: 'numeric'
  })
}

const formatTaskType = (taskType: string) => {
  return taskType.split('_').map(word => 
    word.charAt(0).toUpperCase() + word.slice(1)
  ).join(' ')
}

const getTaskStatusVariant = (status: TaskStatus) => {
  switch (status) {
    case TaskStatus.NOT_STARTED:
      return 'secondary'
    case TaskStatus.IN_PROGRESS:
      return 'default'
    case TaskStatus.SUBMITTED:
      return 'default'
    case TaskStatus.APPROVED:
      return 'default'
    case TaskStatus.RETAKE:
      return 'destructive'
    default:
      return 'secondary'
  }
}

const getTaskStatusColor = (status: TaskStatus) => {
  switch (status) {
    case TaskStatus.NOT_STARTED:
      return 'bg-gray-400'
    case TaskStatus.IN_PROGRESS:
      return 'bg-blue-500'
    case TaskStatus.SUBMITTED:
      return 'bg-purple-500'
    case TaskStatus.APPROVED:
      return 'bg-green-500'
    case TaskStatus.RETAKE:
      return 'bg-red-500'
    default:
      return 'bg-gray-400'
  }
}
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>