<!-- components/SectionLayouts/SliderImagesLayout.vue -->
<template>
  <div class="slider-images-layout">
    <!-- Slider Images -->
    <div class="slider-subsection mb-5">
      <div class="subsection-title">
        <VIcon size="18" class="mr-2">bx-slider</VIcon>
        <span>Slider Images</span>
        <VChip
          v-if="
            sectionModel.sliderImages && sectionModel.sliderImages.length > 0
          "
          size="small"
          color="success"
          variant="flat"
          class="ml-2"
        >
          {{ sectionModel.sliderImages.length }} Images
        </VChip>
      </div>

      <!-- Preview Grid -->
      <div
        v-if="sectionModel.sliderImages && sectionModel.sliderImages.length > 0"
        class="images-preview-grid mb-3"
      >
        <div
          v-for="(img, idx) in sectionModel.sliderImages"
          :key="`slider-${idx}`"
          class="image-preview-item"
        >
          <img :src="img" :alt="`Slider ${idx + 1}`" class="preview-img" />
          <VBtn
            icon
            size="x-small"
            color="error"
            class="delete-btn"
            @click="removeSliderImage(idx)"
          >
            <VIcon size="16">bx-x</VIcon>
          </VBtn>
        </div>
      </div>

      <!-- Media Picker Button -->
      <VBtn
        variant="tonal"
        color="primary"
        size="small"
        prepend-icon="bx-images"
        @click="openMediaPickerForSliders"
        :disabled="disabled"
      >
        {{
          sectionModel.sliderImages && sectionModel.sliderImages.length > 0
            ? "Change Images"
            : "Select Images"
        }}
      </VBtn>
    </div>

    <!-- Reverse Slider Images -->
    <div class="slider-subsection">
      <div class="subsection-title">
        <VIcon size="18" class="mr-2">bx-slider-alt</VIcon>
        <span>Reverse Slider Images</span>
        <VChip
          v-if="
            sectionModel.reverseSliderImages &&
            sectionModel.reverseSliderImages.length > 0
          "
          size="small"
          color="info"
          variant="flat"
          class="ml-2"
        >
          {{ sectionModel.reverseSliderImages.length }} Images
        </VChip>
      </div>

      <!-- Preview Grid -->
      <div
        v-if="
          sectionModel.reverseSliderImages &&
          sectionModel.reverseSliderImages.length > 0
        "
        class="images-preview-grid mb-3"
      >
        <div
          v-for="(img, idx) in sectionModel.reverseSliderImages"
          :key="`reverse-slider-${idx}`"
          class="image-preview-item"
        >
          <img
            :src="img"
            :alt="`Reverse Slider ${idx + 1}`"
            class="preview-img"
          />
          <VBtn
            icon
            size="x-small"
            color="error"
            class="delete-btn"
            @click="removeReverseSliderImage(idx)"
          >
            <VIcon size="16">bx-x</VIcon>
          </VBtn>
        </div>
      </div>

      <!-- Media Picker Button -->
      <VBtn
        variant="tonal"
        color="primary"
        size="small"
        prepend-icon="bx-images"
        @click="openMediaPickerForReverseSliders"
        :disabled="disabled"
      >
        {{
          sectionModel.reverseSliderImages &&
          sectionModel.reverseSliderImages.length > 0
            ? "Change Images"
            : "Select Images"
        }}
      </VBtn>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";

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

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

// Remove slider image
const removeSliderImage = (idx) => {
  const updated = [...(props.sectionModel.sliderImages || [])];
  updated.splice(idx, 1);
  emit("update-field", props.sectionKey, "sliderImages", updated);
};

// Remove reverse slider image
const removeReverseSliderImage = (idx) => {
  const updated = [...(props.sectionModel.reverseSliderImages || [])];
  updated.splice(idx, 1);
  emit("update-field", props.sectionKey, "reverseSliderImages", updated);
};

// Open media picker for slider images
const openMediaPickerForSliders = () => {
  emit("open-media-picker", {
    sectionKey: props.sectionKey,
    fieldKey: "sliderImages",
    mediaCategory: "about_sliders",
    multiple: true,
  });
};

// Open media picker for reverse slider images
const openMediaPickerForReverseSliders = () => {
  emit("open-media-picker", {
    sectionKey: props.sectionKey,
    fieldKey: "reverseSliderImages",
    mediaCategory: "about_sliders",
    multiple: true,
  });
};
</script>

<style scoped>
.slider-images-layout {
  background: #ffffff;
  padding: 4px;
}

.slider-subsection {
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 12px;
}

.subsection-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 12px;
}

.images-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.image-preview-item {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #f3f4f6;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #d1d5db;
  transition: all 0.2s ease;
}

.image-preview-item:hover {
  border-color: #003b6f;
  box-shadow: 0 4px 12px rgba(0, 59, 111, 0.15);
}

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

.delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(239, 68, 68, 0.95) !important;
  color: white !important;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.image-preview-item:hover .delete-btn {
  opacity: 1;
}

.mr-2 {
  margin-right: 8px;
}

.ml-2 {
  margin-left: 8px;
}

.mb-3 {
  margin-bottom: 12px;
}

.mb-5 {
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .slider-images-layout {
    padding: 4px;
  }

  .slider-subsection {
    padding: 12px;
  }

  .images-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}
</style>
