<template>
  <Card class="cursor-pointer hover:shadow-md transition-shadow" @click="$emit('select', episode)">
    <CardHeader class="pb-3">
      <div class="flex items-start justify-between">
        <div class="flex items-center gap-3">
          <div class="p-2 rounded-lg bg-primary/10">
            <Film class="h-5 w-5 text-primary" />
          </div>
          <div>
            <CardTitle class="text-lg">{{ episode.name }}</CardTitle>
            <div class="flex items-center gap-2 mt-1">
              <Badge variant="outline" class="text-xs">
                Episode {{ episode.episode_number }}
              </Badge>
              <Badge :variant="getStatusVariant(episode.status)">
                {{ formatStatus(episode.status) }}
              </Badge>
            </div>
          </div>
        </div>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="sm" @click.stop>
              <MoreHorizontal class="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem @click.stop="$emit('edit', episode)">
              <Edit class="h-4 w-4 mr-2" />
              Edit Episode
            </DropdownMenuItem>
            <DropdownMenuItem @click.stop="$emit('view-shots', episode)">
              <Camera class="h-4 w-4 mr-2" />
              View Shots
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem 
              @click.stop="$emit('delete', episode)"
              class="text-destructive"
              v-if="canDelete"
            >
              <Trash2 class="h-4 w-4 mr-2" />
              Delete Episode
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </CardHeader>
    <CardContent>
      <p class="text-sm text-muted-foreground mb-4" v-if="episode.description">
        {{ episode.description }}
      </p>
      
      <!-- Progress Indicators -->
      <div class="space-y-3">
        <div class="flex items-center justify-between text-sm">
          <span class="text-muted-foreground">Shots</span>
          <span class="font-medium">{{ episode.shot_count || 0 }}</span>
        </div>
        
        <!-- Progress Bar -->
        <div class="space-y-2">
          <div class="flex items-center justify-between text-xs">
            <span class="text-muted-foreground">Progress</span>
            <span class="font-medium">{{ progressPercentage }}%</span>
          </div>
          <div class="w-full bg-secondary rounded-full h-2">
            <div 
              class="bg-primary h-2 rounded-full transition-all duration-300"
              :style="{ width: `${progressPercentage}%` }"
            ></div>
          </div>
        </div>
      </div>

      <!-- Dates -->
      <div class="mt-4 pt-4 border-t">
        <div class="flex items-center justify-between text-xs text-muted-foreground">
          <span>Created {{ formatDate(episode.created_at) }}</span>
          <span v-if="episode.updated_at !== episode.created_at">
            Updated {{ formatDate(episode.updated_at) }}
          </span>
        </div>
      </div>
    </CardContent>
  </Card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Film, MoreHorizontal, Edit, Camera, Trash2 } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, 
  DropdownMenuSeparator, DropdownMenuTrigger
} from '@/components/ui/dropdown-menu'
import type { Episode } from '@/services/episode'

interface Props {
  episode: Episode
  canDelete?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  canDelete: false
})

defineEmits<{
  select: [episode: Episode]
  edit: [episode: Episode]
  'view-shots': [episode: Episode]
  delete: [episode: Episode]
}>()

const progressPercentage = computed(() => {
  // For now, return a mock progress based on status
  // In a real implementation, this would be calculated from shot completion
  switch (props.episode.status) {
    case 'planning': return 0
    case 'in_progress': return 45
    case 'on_hold': return 30
    case 'completed': return 100
    case 'cancelled': return 0
    default: return 0
  }
})

const getStatusVariant = (status: string) => {
  switch (status) {
    case 'planning': return 'secondary'
    case 'in_progress': return 'default'
    case 'on_hold': return 'outline'
    case 'completed': return 'success'
    case 'cancelled': return 'destructive'
    default: return 'secondary'
  }
}

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

const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString()
}
</script>

<script lang="ts">
export default {
  name: 'EpisodeCard'
}
</script>