<template>
  <Card>
    <CardContent v-if="specs" class="space-y-6 pt-6">
      <!-- Basic Settings -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="space-y-2">
          <Label class="text-xs font-medium text-muted-foreground">Frame Rate</Label>
          <div class="flex items-center gap-2">
            <Clock class="h-4 w-4 text-muted-foreground" />
            <span class="font-medium">{{ specs.frame_rate ? getFrameRateLabel(specs.frame_rate) : 'Not set' }}</span>
          </div>
        </div>
        
        <div class="space-y-2">
          <Label class="text-xs font-medium text-muted-foreground">Delivery Image Resolution</Label>
          <div class="flex items-center gap-2">
            <Monitor class="h-4 w-4 text-muted-foreground" />
            <span class="font-medium">{{ specs.delivery_image_resolution || 'Not set' }}</span>
            <Badge v-if="specs.delivery_image_resolution" variant="outline" class="text-xs">
              {{ getResolutionLabel(specs.delivery_image_resolution) }}
            </Badge>
          </div>
        </div>
      </div>

      <!-- Storage Paths -->
      <div class="space-y-3">
        <h4 class="font-medium text-sm">Storage Paths</h4>
        <div class="grid gap-3">
          <div class="flex items-start gap-3 p-3 bg-muted/50 rounded-lg">
            <HardDrive class="h-4 w-4 text-muted-foreground mt-0.5" />
            <div class="flex-1 min-w-0">
              <Label class="text-xs font-medium text-muted-foreground">Data Drive Path</Label>
              <p class="font-mono text-sm break-all">{{ specs.data_drive_path || 'Not configured' }}</p>
            </div>
            <Button 
              v-if="specs.data_drive_path" 
              variant="ghost" 
              size="sm" 
              @click="copyToClipboard(specs.data_drive_path)"
            >
              <Copy class="h-3 w-3" />
            </Button>
          </div>
          
          <div class="flex items-start gap-3 p-3 bg-muted/50 rounded-lg">
            <Upload class="h-4 w-4 text-muted-foreground mt-0.5" />
            <div class="flex-1 min-w-0">
              <Label class="text-xs font-medium text-muted-foreground">Publish Storage Path</Label>
              <p class="font-mono text-sm break-all">{{ specs.publish_storage_path || 'Not configured' }}</p>
            </div>
            <Button 
              v-if="specs.publish_storage_path" 
              variant="ghost" 
              size="sm" 
              @click="copyToClipboard(specs.publish_storage_path)"
            >
              <Copy class="h-3 w-3" />
            </Button>
          </div>
        </div>
      </div>

      <!-- Delivery Movie Specifications -->
      <div class="space-y-3" v-if="hasMovieSpecs">
        <h4 class="font-medium text-sm">Delivery Movie Specifications</h4>
        <div class="grid gap-3">
          <div 
            v-for="(spec, department) in specs.delivery_movie_specs_by_department" 
            :key="department"
            class="border rounded-lg p-4"
          >
            <div class="flex items-center justify-between mb-3">
              <div class="flex items-center gap-2">
                <component :is="getDepartmentIcon(department)" class="h-4 w-4" />
                <h5 class="font-medium capitalize">{{ formatDepartmentName(department) }}</h5>
              </div>
              <Badge variant="outline" class="text-xs">{{ department }}</Badge>
            </div>
            
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 text-sm">
              <div>
                <Label class="text-xs text-muted-foreground">Resolution</Label>
                <p class="font-medium">{{ spec.resolution }}</p>
              </div>
              <div>
                <Label class="text-xs text-muted-foreground">Format</Label>
                <p class="font-medium uppercase">{{ spec.format }}</p>
              </div>
              <div>
                <Label class="text-xs text-muted-foreground">Codec</Label>
                <p class="font-medium">{{ spec.codec ? spec.codec.toUpperCase() : 'None' }}</p>
              </div>
              <div>
                <Label class="text-xs text-muted-foreground">Quality</Label>
                <p class="font-medium capitalize">{{ spec.quality || 'Default' }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Department-Specific View for Artists -->
      <DepartmentSpecsPanel 
        v-if="userDepartment" 
        :department="userDepartment" 
        :project-specs="specs"
        class="mt-6"
      />
    </CardContent>
    
    <CardContent v-else class="text-center py-8">
      <Settings class="h-8 w-8 mx-auto text-muted-foreground mb-3" />
      <p class="text-muted-foreground">No technical specifications configured</p>
      <Button 
        v-if="canEdit" 
        @click="$emit('edit')" 
        variant="outline" 
        size="sm" 
        class="mt-3"
      >
        Configure Specifications
      </Button>
    </CardContent>
  </Card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { 
  Clock, Monitor, HardDrive, Upload, Copy, Edit, Settings, Star,
  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 } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { useToast } from '@/components/ui/toast/use-toast'
import { useAuthStore } from '@/stores/auth'
import type { ProjectTechnicalSpecs, DeliveryMovieSpec } from '@/services/project'
import DepartmentSpecsPanel from './DepartmentSpecsPanel.vue'

interface Props {
  specs?: ProjectTechnicalSpecs
  userDepartment?: string
  canEdit?: boolean
}

interface Emits {
  (e: 'edit'): void
}

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

const { toast } = useToast()
const authStore = useAuthStore()

// Computed properties
const hasMovieSpecs = computed(() => {
  return props.specs?.delivery_movie_specs_by_department && 
         Object.keys(props.specs.delivery_movie_specs_by_department).length > 0
})

const departmentSpec = computed((): DeliveryMovieSpec | undefined => {
  if (!props.userDepartment || !props.specs?.delivery_movie_specs_by_department) {
    return undefined
  }
  return props.specs.delivery_movie_specs_by_department[props.userDepartment]
})

// Methods
const getResolutionLabel = (resolution: string) => {
  const labels: Record<string, string> = {
    "1280x720": "HD 720p",
    "1920x1080": "HD 1080p",
    "2048x1080": "2K DCI",
    "2560x1440": "QHD",
    "3840x2160": "4K UHD",
    "4096x2160": "4K DCI",
    "7680x4320": "8K UHD"
  }
  return labels[resolution] || resolution
}

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 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 copyToClipboard = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text)
    toast({
      title: 'Copied',
      description: 'Path copied to clipboard'
    })
  } catch (error) {
    console.error('Failed to copy to clipboard:', error)
    toast({
      title: 'Error',
      description: 'Failed to copy to clipboard',
      variant: 'destructive'
    })
  }
}
</script>