<template>
  <Card v-if="departmentSpec" class="border-primary/20 bg-primary/5">
    <CardHeader class="pb-3">
      <div class="flex items-center gap-2">
        <component :is="getDepartmentIcon(department)" class="h-5 w-5 text-primary" />
        <CardTitle class="text-base text-primary">
          {{ formatDepartmentName(department) }} Delivery Requirements
        </CardTitle>
        <Badge variant="outline" class="ml-auto">Your Department</Badge>
      </div>
    </CardHeader>
    
    <CardContent class="space-y-4">
      <!-- Quick Reference Grid -->
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
        <div class="text-center p-3 bg-background/50 rounded-lg">
          <Monitor class="h-4 w-4 mx-auto mb-1 text-muted-foreground" />
          <Label class="text-xs text-muted-foreground block">Resolution</Label>
          <p class="font-semibold text-sm">{{ departmentSpec.resolution }}</p>
        </div>
        
        <div class="text-center p-3 bg-background/50 rounded-lg">
          <FileVideo class="h-4 w-4 mx-auto mb-1 text-muted-foreground" />
          <Label class="text-xs text-muted-foreground block">Format</Label>
          <p class="font-semibold text-sm uppercase">{{ departmentSpec.format }}</p>
        </div>
        
        <div class="text-center p-3 bg-background/50 rounded-lg">
          <Settings class="h-4 w-4 mx-auto mb-1 text-muted-foreground" />
          <Label class="text-xs text-muted-foreground block">Codec</Label>
          <p class="font-semibold text-sm">{{ departmentSpec.codec ? departmentSpec.codec.toUpperCase() : 'None' }}</p>
        </div>
        
        <div class="text-center p-3 bg-background/50 rounded-lg">
          <Star class="h-4 w-4 mx-auto mb-1 text-muted-foreground" />
          <Label class="text-xs text-muted-foreground block">Quality</Label>
          <p class="font-semibold text-sm capitalize">{{ departmentSpec.quality || 'Default' }}</p>
        </div>
      </div>

      <!-- Additional Project Info -->
      <div v-if="projectSpecs" class="pt-3 border-t border-primary/20">
        <div class="grid grid-cols-2 gap-4 text-sm">
          <div class="flex items-center gap-2">
            <Clock class="h-4 w-4 text-muted-foreground" />
            <span class="text-muted-foreground">Frame Rate:</span>
            <span class="font-medium">{{ projectSpecs.frame_rate ? getFrameRateLabel(projectSpecs.frame_rate) : 'Not set' }}</span>
          </div>
          
          <div class="flex items-center gap-2">
            <Image class="h-4 w-4 text-muted-foreground" />
            <span class="text-muted-foreground">Image Resolution:</span>
            <span class="font-medium">{{ projectSpecs.delivery_image_resolution || 'Not set' }}</span>
          </div>
        </div>
      </div>

      <!-- Quick Actions -->
      <div class="flex gap-2 pt-2">
        <Button 
          variant="outline" 
          size="sm" 
          @click="copySpecsToClipboard"
          class="flex-1"
        >
          <Copy class="h-3 w-3 mr-2" />
          Copy Specs
        </Button>
        
        <Button 
          v-if="projectSpecs?.data_drive_path" 
          variant="outline" 
          size="sm" 
          @click="copyToClipboard(projectSpecs.data_drive_path)"
          class="flex-1"
        >
          <FolderOpen class="h-3 w-3 mr-2" />
          Copy Data Path
        </Button>
      </div>
    </CardContent>
  </Card>
  
  <!-- No Department Assigned -->
  <Card v-else-if="!department" class="border-muted">
    <CardContent class="text-center py-6">
      <AlertCircle class="h-8 w-8 mx-auto text-muted-foreground mb-3" />
      <p class="text-muted-foreground">No department role assigned</p>
      <p class="text-xs text-muted-foreground mt-1">Contact your coordinator to assign a department role</p>
    </CardContent>
  </Card>
  
  <!-- No Specs for Department -->
  <Card v-else class="border-muted">
    <CardContent class="text-center py-6">
      <Settings class="h-8 w-8 mx-auto text-muted-foreground mb-3" />
      <p class="text-muted-foreground">No delivery requirements configured for {{ formatDepartmentName(department) }}</p>
      <p class="text-xs text-muted-foreground mt-1">Contact your coordinator to configure department specifications</p>
    </CardContent>
  </Card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { 
  Monitor, FileVideo, Settings, Star, Clock, Image, Copy, FolderOpen, AlertCircle,
  Palette, Zap, Lightbulb, Layers, Box, Wrench, Paintbrush
} from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { useToast } from '@/components/ui/toast/use-toast'
import type { ProjectTechnicalSpecs, DeliveryMovieSpec } from '@/services/project'

interface Props {
  department?: string
  projectSpecs?: ProjectTechnicalSpecs
}

const props = defineProps<Props>()
const { toast } = useToast()

// Computed properties
const departmentSpec = computed((): DeliveryMovieSpec | undefined => {
  if (!props.department || !props.projectSpecs?.delivery_movie_specs_by_department) {
    return undefined
  }
  return props.projectSpecs.delivery_movie_specs_by_department[props.department]
})

// Methods
const formatDepartmentName = (department: string) => {
  return department.charAt(0).toUpperCase() + department.slice(1)
}

const getDepartmentIcon = (department: string) => {
  const icons: Record<string, any> = {
    layout: Layers,
    animation: Zap,
    lighting: Lightbulb,
    composite: Palette,
    modeling: Box,
    rigging: Wrench,
    surfacing: Paintbrush
  }
  return icons[department] || Box
}

const getFrameRateLabel = (frameRate: number) => {
  const labels: Record<number, string> = {
    23.976: "23.976 fps (Cinema)",
    24.0: "24 fps (Cinema)",
    25.0: "25 fps (PAL)",
    29.97: "29.97 fps (NTSC)",
    30.0: "30 fps",
    50.0: "50 fps (PAL High)",
    59.94: "59.94 fps (NTSC High)",
    60.0: "60 fps"
  }
  return labels[frameRate] || `${frameRate} fps`
}

const copyToClipboard = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text)
    toast({
      title: 'Copied',
      description: 'Text copied to clipboard'
    })
  } catch (error) {
    console.error('Failed to copy to clipboard:', error)
    toast({
      title: 'Error',
      description: 'Failed to copy to clipboard',
      variant: 'destructive'
    })
  }
}

const copySpecsToClipboard = async () => {
  if (!departmentSpec.value) return
  
  const specsText = [
    `${formatDepartmentName(props.department!)} Delivery Requirements:`,
    `Resolution: ${departmentSpec.value.resolution}`,
    `Format: ${departmentSpec.value.format.toUpperCase()}`,
    `Codec: ${departmentSpec.value.codec ? departmentSpec.value.codec.toUpperCase() : 'None'}`,
    `Quality: ${departmentSpec.value.quality || 'Default'}`,
    props.projectSpecs?.frame_rate ? `Frame Rate: ${getFrameRateLabel(props.projectSpecs.frame_rate)}` : '',
    props.projectSpecs?.delivery_image_resolution ? `Image Resolution: ${props.projectSpecs.delivery_image_resolution}` : ''
  ].filter(Boolean).join('\n')
  
  await copyToClipboard(specsText)
}
</script>