<template>
  <div class="space-y-3">
    <!-- Compact Technical Specs Display -->
    <div
      v-if="specs"
      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 text-sm"
    >
      <!-- Frame Rate -->
      <div
        v-if="specs.frame_rate"
        class="flex items-center gap-2 p-2 bg-muted/50 rounded"
      >
        <Clock class="h-4 w-4 text-muted-foreground" />
        <span class="text-muted-foreground">Frame Rate:</span>
        <span class="font-medium">{{
          getFrameRateLabel(specs.frame_rate)
        }}</span>
      </div>

      <!-- Image Resolution -->
      <div
        v-if="specs.delivery_image_resolution"
        class="flex items-center gap-2 p-2 bg-muted/50 rounded"
      >
        <Monitor class="h-4 w-4 text-muted-foreground" />
        <span class="text-muted-foreground">Resolution:</span>
        <span class="font-medium">{{ specs.delivery_image_resolution }}</span>
      </div>

      <!-- Department Spec -->
      <div
        v-if="departmentSpec"
        class="flex items-center gap-2 p-2 bg-primary/10 rounded border border-primary/20"
      >
        <component
          :is="getDepartmentIcon(userDepartment)"
          class="h-4 w-4 text-primary"
        />
        <span class="text-primary font-medium">{{
          departmentSpec.format.toUpperCase()
        }}</span>
        <span class="text-primary">{{ departmentSpec.resolution }}</span>
      </div>
    </div>

    <!-- Department-Specific Requirements (Expanded) -->
    <Collapsible v-if="departmentSpec && showDepartmentDetails">
      <CollapsibleTrigger asChild>
        <Button variant="ghost" class="w-full justify-between p-2 h-auto">
          <div class="flex items-center gap-2">
            <component
              :is="getDepartmentIcon(userDepartment)"
              class="h-4 w-4"
            />
            <span class="font-medium"
              >{{ formatDepartmentName(userDepartment) }} Requirements</span
            >
          </div>
          <ChevronDown class="h-4 w-4" />
        </Button>
      </CollapsibleTrigger>

      <CollapsibleContent class="px-2 pb-2">
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-2 text-xs">
          <div class="text-center p-2 bg-background border rounded">
            <Label class="text-muted-foreground block">Resolution</Label>
            <p class="font-medium">{{ departmentSpec.resolution }}</p>
          </div>
          <div class="text-center p-2 bg-background border rounded">
            <Label class="text-muted-foreground block">Format</Label>
            <p class="font-medium uppercase">{{ departmentSpec.format }}</p>
          </div>
          <div class="text-center p-2 bg-background border rounded">
            <Label class="text-muted-foreground block">Codec</Label>
            <p class="font-medium">
              {{
                departmentSpec.codec
                  ? departmentSpec.codec.toUpperCase()
                  : "None"
              }}
            </p>
          </div>
          <div class="text-center p-2 bg-background border rounded">
            <Label class="text-muted-foreground block">Quality</Label>
            <p class="font-medium capitalize">
              {{ departmentSpec.quality || "Default" }}
            </p>
          </div>
        </div>
      </CollapsibleContent>
    </Collapsible>

    <!-- Storage Paths (if needed) -->
    <div
      v-if="
        showPaths && (specs?.data_drive_path || specs?.publish_storage_path)
      "
      class="space-y-2"
    >
      <div
        v-if="specs.data_drive_path"
        class="flex items-start gap-2 p-2 bg-muted/30 rounded text-xs"
      >
        <HardDrive class="h-3 w-3 text-muted-foreground mt-0.5" />
        <div class="flex-1 min-w-0">
          <Label class="text-muted-foreground">Data Drive:</Label>
          <p class="font-mono break-all">{{ specs.data_drive_path }}</p>
        </div>
        <Button
          variant="ghost"
          size="sm"
          @click="copyToClipboard(specs.data_drive_path)"
        >
          <Copy class="h-3 w-3" />
        </Button>
      </div>

      <div
        v-if="specs.publish_storage_path"
        class="flex items-start gap-2 p-2 bg-muted/30 rounded text-xs"
      >
        <Upload class="h-3 w-3 text-muted-foreground mt-0.5" />
        <div class="flex-1 min-w-0">
          <Label class="text-muted-foreground">Publish Path:</Label>
          <p class="font-mono break-all">{{ specs.publish_storage_path }}</p>
        </div>
        <Button
          variant="ghost"
          size="sm"
          @click="copyToClipboard(specs.publish_storage_path)"
        >
          <Copy class="h-3 w-3" />
        </Button>
      </div>
    </div>

    <!-- No Specs Message -->
    <div v-if="!specs" class="text-center py-4 text-muted-foreground text-sm">
      <Settings class="h-6 w-6 mx-auto mb-2" />
      <p>No technical specifications configured</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import {
  Clock,
  Monitor,
  HardDrive,
  Upload,
  Copy,
  Settings,
  ChevronDown,
  Palette,
  Zap,
  Lightbulb,
  Layers,
  Box,
  Wrench,
  Paintbrush,
} from "lucide-vue-next";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { useToast } from "@/components/ui/toast/use-toast";
import type {
  ProjectTechnicalSpecs,
  DeliveryMovieSpec,
} from "@/services/project";

interface Props {
  specs?: ProjectTechnicalSpecs;
  userDepartment?: string;
  showDepartmentDetails?: boolean;
  showPaths?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  showDepartmentDetails: true,
  showPaths: false,
});

const { toast } = useToast();

// Computed properties
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 formatDepartmentName = (department?: string) => {
  if (!department) return "";
  return department.charAt(0).toUpperCase() + department.slice(1);
};

const getDepartmentIcon = (department?: string) => {
  if (!department) return Box;

  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: "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>