<template>
  <Card>
    <CardHeader>
      <div class="flex items-center justify-between">
        <CardTitle class="text-base capitalize">{{ formatTaskType(taskType) }}</CardTitle>
        <div class="flex items-center gap-2">
          <Label :for="`${taskType}_required`" class="text-xs text-muted-foreground">Required</Label>
          <Switch
            :id="`${taskType}_required`"
            :model-value="config.required"
            @update:model-value="(val) => (config.required = !!val)"
          />
        </div>
      </div>
    </CardHeader>
    <CardContent class="space-y-4">
      <div>
        <Label class="text-xs">Allowed File Types</Label>
        <div class="flex flex-wrap gap-3 mt-1">
          <label
            v-for="ext in ALLOWED_EXTENSIONS"
            :key="ext"
            class="flex items-center gap-1.5 text-sm"
          >
            <Checkbox
              :model-value="config.allowed_extensions.includes(ext)"
              @update:model-value="(val) => toggleExtension(ext, !!val)"
            />
            {{ ext }}
          </label>
        </div>
        <p class="text-xs text-muted-foreground mt-1">Leave all unchecked to accept any supported file type</p>
      </div>

      <div>
        <div class="flex items-center justify-between">
          <Label :for="`${taskType}_pattern`" class="text-xs">Naming Pattern</Label>
          <div class="flex items-center gap-3">
            <label class="flex items-center gap-1.5 text-xs text-muted-foreground">
              <Checkbox
                :model-value="config.naming_pattern_is_regex"
                @update:model-value="(val) => (config.naming_pattern_is_regex = !!val)"
              />
              Regex
            </label>
            <div class="flex items-center gap-2">
              <Label :for="`${taskType}_check_naming`" class="text-xs text-muted-foreground">Check</Label>
              <Switch
                :id="`${taskType}_check_naming`"
                :model-value="config.check_naming"
                @update:model-value="(val) => (config.check_naming = !!val)"
              />
            </div>
          </div>
        </div>
        <Input
          :id="`${taskType}_pattern`"
          v-model="config.naming_pattern"
          :placeholder="config.naming_pattern_is_regex ? 'e.g. ^[A-Z]+\\d{3}_layout_v\\d{3}$' : 'e.g. {project_code}_{name}_{task_type}_v{version}'"
          class="h-8 font-mono"
        />
        <p v-if="config.naming_pattern_is_regex" class="text-xs text-muted-foreground mt-1">
          Matched as a regular expression against the filename (without extension)
        </p>
        <p v-else class="text-xs text-muted-foreground mt-1">
          Tokens: <code>{name}</code> (shot/asset name), <code>{task_name}</code>, <code>{task_type}</code>,
          <code>{project_name}</code>, <code>{project_code}</code>, <code>{version}</code> (auto 3-digit)
        </p>
      </div>

      <div>
        <div class="flex items-center justify-between">
          <Label class="text-xs">Movie Spec</Label>
          <div class="flex items-center gap-2">
            <Label :for="`${taskType}_check_movie_spec`" class="text-xs text-muted-foreground">Check</Label>
            <Switch
              :id="`${taskType}_check_movie_spec`"
              :model-value="config.check_movie_spec"
              @update:model-value="(val) => (config.check_movie_spec = !!val)"
            />
          </div>
        </div>
        <div v-if="config.check_movie_spec" class="grid grid-cols-4 gap-3 mt-1">
          <div>
            <Input
              v-model="config.movie_resolution"
              placeholder="e.g. 1920x1080"
              class="h-8"
            />
          </div>
          <div>
            <Select
              :model-value="config.movie_format || undefined"
              @update:model-value="(val) => (config.movie_format = val ? String(val) : '')"
            >
              <SelectTrigger class="h-8">
                <SelectValue placeholder="Format" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem v-for="fmt in MOVIE_FORMATS" :key="fmt" :value="fmt">{{ fmt }}</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div>
            <Select
              :model-value="config.movie_codec || undefined"
              @update:model-value="(val) => (config.movie_codec = val ? String(val) : '')"
            >
              <SelectTrigger class="h-8">
                <SelectValue placeholder="Codec" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem v-for="codec in MOVIE_CODECS" :key="codec" :value="codec">{{ codec }}</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div>
            <Select
              :model-value="config.movie_frame_rate ? String(config.movie_frame_rate) : undefined"
              @update:model-value="(val) => (config.movie_frame_rate = val ? Number(val) : null)"
            >
              <SelectTrigger class="h-8">
                <SelectValue placeholder="Frame rate" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem v-for="rate in MOVIE_FRAME_RATES" :key="rate" :value="String(rate)">{{ rate }} fps</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
        <p class="text-xs text-muted-foreground mt-1">Checks resolution/format/codec/frame rate for video submissions only, in-browser before upload</p>
      </div>
    </CardContent>
  </Card>
</template>

<script setup lang="ts">
import { Label } from '@/components/ui/label'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Checkbox } from '@/components/ui/checkbox'
import { Switch } from '@/components/ui/switch'
import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import type { SubmissionTypeConfig } from '@/services/project'

const props = defineProps<{
  taskType: string
  config: SubmissionTypeConfig
}>()

// Mirrors backend's file_handler.SUPPORTED_FORMATS - kept for the picker only; the actual check happens client-side at submit time
const ALLOWED_EXTENSIONS = [
  '.mov', '.mp4', '.avi', '.mkv', '.webm', '.mxf',
  '.exr', '.jpg', '.jpeg', '.png', '.tiff', '.tif', '.dpx', '.hdr',
  '.pdf', '.txt', '.doc', '.docx',
  '.zip', '.rar', '.7z',
  '.ma', '.usd', '.usda', '.usdc'
]

const MOVIE_FORMATS = ['mov', 'mp4', 'avi', 'mkv', 'webm', 'mxf']
const MOVIE_CODECS = ['h264', 'h265', 'mjpeg', 'dnxhd', 'dnxhr', 'prores', 'uncompressed', 'avid', 'cineform']
const MOVIE_FRAME_RATES = [23.976, 24, 30, 48, 60]

const formatTaskType = (taskType: string) => taskType.replace(/_/g, ' ')

function toggleExtension(ext: string, checked: boolean) {
  if (checked) {
    if (!props.config.allowed_extensions.includes(ext)) props.config.allowed_extensions.push(ext)
  } else {
    props.config.allowed_extensions = props.config.allowed_extensions.filter(e => e !== ext)
  }
}
</script>
