<!-- components/SectionLayouts/VideoSliderLayout.vue -->
<template>
  <div class="video-slider-layout">
    <!-- Main Heading -->
    

    <!-- Video Items (Repeater) -->
    <div v-if="section.fields.videos" class="video-items-list">
      <DraggableList
        :model-value="videosArray"
        :disabled="disabled"
        row-class="mb-4"
        @update:model-value="onReorder"
      >
        <template #item="{ element: item, index: idx }">
          <div class="video-item-card">
        <div class="video-item-header">
          <span class="video-item-index">Video #{{ idx + 1 }}</span>
          <VBtn
            icon
            size="x-small"
            variant="text"
            color="error"
            @click="removeItem(idx)"
            :disabled="disabled"
          >
            <VIcon size="18">bx-trash</VIcon>
          </VBtn>
        </div>

        <div class="video-item-fields">
          <!-- Title (Program Name) - Compact Text Field -->
          <div class="field-col">
            <VTextField
              :model-value="item.title || ''"
              @update:model-value="updateItem(idx, 'title', $event)"
              label="Program Name"
              placeholder="e.g. Robotics Workshop"
              variant="outlined"
              density="compact"
              hide-details
              class="compact-input"
              :disabled="disabled"
            />
          </div>

          <!-- Thumbnail - Small Image Picker -->
          <div class="field-col thumbnail-col">
             <div class="d-flex align-center gap-2">
                <VBtn
                  color="primary"
                  variant="outlined"
                  size="small"
                  prepend-icon="bx-image"
                  @click="openMedia(idx, 'thumbnail')"
                  :disabled="disabled"
                  class="action-btn"
                >
                  {{ item.thumbnail ? 'Change' : 'Thumbnail' }}
                </VBtn>
                <div v-if="item.thumbnail" class="thumbnail-preview">
                   <img :src="item.thumbnail" alt="Preview"/>
                </div>
             </div>
          </div>

          <!-- Video URL - Compact Text Field -->
          <div class="field-col">
            <VTextField
              :model-value="item.video_url || ''"
              @update:model-value="updateItem(idx, 'video_url', $event)"
              label="Video URL"
              placeholder="YouTube/Vimeo link"
              variant="outlined"
              density="compact"
              hide-details
              class="compact-input"
              :disabled="disabled"
            />
          </div>
        </div>
          </div>
        </template>
      </DraggableList>

      <VBtn
        variant="tonal"
        color="primary"
        size="small"
        prepend-icon="bx-plus"
        @click="addItem"
        :disabled="disabled"
        class="mt-2"
      >
        Add Video
      </VBtn>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import DraggableList from "@/components/DraggableList.vue";

const props = defineProps({
  section: Object,
  sectionKey: String,
  sectionModel: Object,
  userRole: String,
  disabled: Boolean,
  isSuperAdmin: Boolean,
});

const emit = defineEmits(["update-field", "open-media-picker"]);

const videosArray = computed(() => props.sectionModel?.videos || []);

const emitUpdate = (sectionKey, fieldKey, value) => {
  emit("update-field", sectionKey, fieldKey, value);
};

const addItem = () => {
  const current = [...videosArray.value];
  current.push({ title: "", thumbnail: "", video_url: "" });
  emitUpdate(props.sectionKey, "videos", current);
};

const removeItem = (idx) => {
  const current = [...videosArray.value];
  current.splice(idx, 1);
  emitUpdate(props.sectionKey, "videos", current);
};

const updateItem = (idx, field, value) => {
  const current = [...videosArray.value];
  current[idx] = { ...current[idx], [field]: value };
  emitUpdate(props.sectionKey, "videos", current);
};

// Persist a drag-reordered video list.
const onReorder = (newArray) => {
  emitUpdate(props.sectionKey, "videos", newArray);
};

const openMedia = (idx, field) => {
  // We manually handle this if we don't want to use SectionField for every sub-field
  // But SectionField handles the global @open-media-picker.
  // We need to pass enough info for the parent to update the right index.
  // Actually, the easiest way is to use SectionField with a custom path, 
  // but let's stick to the parent's handler and just emit what it expects.
  
  emit("open-media-picker", {
    sectionKey: props.sectionKey,
    fieldKey: `videos.${idx}.${field}`, // We'll need DynamicTemplateForm to handle nested paths or we adjust handleMediaSelect
    mediaCategory: "home_video",
    multiple: false
  });
};
</script>

<style scoped>
.video-slider-layout {
  width: 100%;
}

.video-item-card {
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.video-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.video-item-index {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}

.video-item-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 12px;
  align-items: flex-end;
}

.field-col {
  display: flex;
  flex-direction: column;
}

.thumbnail-preview {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.thumbnail-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compact-input :deep(.v-field__input) {
  min-height: 36px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

@media (max-width: 960px) {
  .video-item-fields {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
</style>
