<script setup>
import { ref, watch } from "vue";
import { useMultiPanel } from "@/composables/useAccordionGroup";
import AccordionSection from "@/components/AccordionSection.vue"; // Adjust path if needed
import DraggableList from "@/components/DraggableList.vue";

const props = defineProps({
  mode: { type: String, default: "create" },
  programDetails: { type: Object, default: null },
  loading: Boolean,
  slug: { type: String, default: "" },
});

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

// One key per AccordionSection rendered below (in DOM order). Bound as a
// multi-open panel group so sections can be expanded independently.
const DETAIL_PANEL_KEYS = Array.from({ length: 8 }, (_, i) => `details-${i}`);
const panels = useMultiPanel("activeProgramPanel", DETAIL_PANEL_KEYS);

const formData = ref({
  objectives: { heading: "", items: [] },
  action_text: { title: "", text: "", signup_cta: "" },
  discover_section: { heading: "", points: [] },
  slider_texts: [], // ✅ New field for the scrolling marquee text
  video_url: "", // ✅ Video URL section
  program_highlights: { heading: "", items: [] },
  sliders: { sliderImages: [], reverseSliderImages: [] },
  gallery_slides: [], // ✅ Objectives robots gallery (tag + robot image)
});

const resetForm = () => {
  formData.value = {
    objectives: { heading: "", items: [] },
    action_text: { title: "", text: "", signup_cta: "" },
    discover_section: { heading: "", points: [] },
    slider_texts: [], // ✅ Reset
    video_url: "", // ✅ Reset
    program_highlights: { heading: "", items: [] },
    sliders: { sliderImages: [], reverseSliderImages: [] },
    gallery_slides: [], // ✅ Reset
  };
};

/* ---- Per-section "Cancel without saving" ----
 * originalFormData holds the last-loaded (saved) values. Cancel restores a single
 * section from it while the other sections keep their edits. Defined before the
 * watch below so the immediate run can snapshot safely.
 */
const originalFormData = ref({});
const snapshotOriginal = () => {
  originalFormData.value = JSON.parse(JSON.stringify(formData.value));
};
const hasSectionChanges = (key) =>
  JSON.stringify(formData.value[key]) !== JSON.stringify(originalFormData.value[key]);
const cancelSection = (key) => {
  formData.value[key] = JSON.parse(JSON.stringify(originalFormData.value[key]));
};

watch(
  () => props.programDetails,
  (newDetails) => {
    if (newDetails && props.mode === "edit" && !Array.isArray(newDetails)) {
      formData.value = JSON.parse(JSON.stringify(newDetails));

      // Safety checks for nested structures
      if (!formData.value.objectives) formData.value.objectives = {};
      if (!formData.value.objectives.items)
        formData.value.objectives.items = [];

      if (!formData.value.action_text) formData.value.action_text = {};
      if (!formData.value.action_text.title)
        formData.value.action_text.title = "";
      if (!formData.value.action_text.text)
        formData.value.action_text.text = "";
      if (!formData.value.action_text.signup_cta)
        formData.value.action_text.signup_cta = "";

      if (!formData.value.discover_section)
        formData.value.discover_section = {};
      if (!formData.value.discover_section.points)
        formData.value.discover_section.points = [];

      if (!formData.value.slider_texts) formData.value.slider_texts = []; // ✅ Initialize array
      if (!formData.value.video_url) formData.value.video_url = ""; // ✅ Initialize

      if (!formData.value.program_highlights)
        formData.value.program_highlights = {};
      if (!formData.value.program_highlights.items)
        formData.value.program_highlights.items = [];

      if (!formData.value.sliders) formData.value.sliders = {};
      if (!formData.value.sliders.sliderImages)
        formData.value.sliders.sliderImages = [];
      if (!formData.value.sliders.reverseSliderImages)
        formData.value.sliders.reverseSliderImages = [];

      if (!Array.isArray(formData.value.gallery_slides))
        formData.value.gallery_slides = [];

      snapshotOriginal();
    } else if (props.mode === "create") {
      resetForm();
      snapshotOriginal();
    }
  },
  { immediate: true, deep: true },
);

// Helpers
const addObjective = () => formData.value.objectives.items.push("");
const removeObjective = (i) => formData.value.objectives.items.splice(i, 1);

const addDiscoverPoint = () => formData.value.discover_section.points.push("");
const removeDiscoverPoint = (i) =>
  formData.value.discover_section.points.splice(i, 1);

// ✅ Helpers for new Slider Texts
const addSliderText = () => formData.value.slider_texts.push("");
const removeSliderText = (i) => formData.value.slider_texts.splice(i, 1);

const addHighlight = () =>
  formData.value.program_highlights.items.push({ question: "", answer: "" });
const removeHighlight = (i) =>
  formData.value.program_highlights.items.splice(i, 1);

const removeSliderImage = (i) =>
  formData.value.sliders.sliderImages.splice(i, 1);
const removeReverseSliderImage = (i) =>
  formData.value.sliders.reverseSliderImages.splice(i, 1);

const openMediaPickerForSliders = () =>
  emit("open-media-picker", {
    fieldKey: "sliderImages",
    mediaCategory: `program-${props.slug || "temp"}`,
    multiple: true,
  });
const openMediaPickerForReverseSliders = () =>
  emit("open-media-picker", {
    fieldKey: "reverseSliderImages",
    mediaCategory: `program-${props.slug || "temp"}`,
    multiple: true,
  });

// ── Objectives robots gallery (tag + robot image) ──
const addGallerySlide = () =>
  formData.value.gallery_slides.push({ tag: "", robot_image: "" });
const removeGallerySlide = (i) =>
  formData.value.gallery_slides.splice(i, 1);
const openMediaPickerForGalleryRobot = (index) =>
  emit("open-media-picker", {
    // Gallery has its own per-program robot pool, separate from the footer robots.
    fieldKey: "gallery_slide_robot",
    index,
    mediaCategory: props.slug ? `programgallery_${props.slug}` : "program_sliders",
    multiple: false,
  });

// Real-Time Shaking Logic
const isShaking = ref(false);
const repeaterShakes = ref({});

const triggerShake = () => {
  isShaking.value = true;
  setTimeout(() => {
    isShaking.value = false;
  }, 400);
};

const triggerRepeaterShake = (key) => {
  repeaterShakes.value[key] = true;
  setTimeout(() => {
    repeaterShakes.value[key] = false;
  }, 400);
};

// Sanitization function
const sanitizeInput = (val, maxLength, type = "text") => {
  if (typeof val !== "string") return val;
  let originalValue = val;
  let cleanValue = val;

  if (type === "alphanumeric") {
    cleanValue = cleanValue.replace(/[^a-zA-Z0-9\s.,!?'"\-]/g, "");
  } else if (type === "numeric") {
    cleanValue = cleanValue.replace(/[^0-9+]/g, "");
  }

  if (maxLength && cleanValue.length > maxLength) {
    cleanValue = cleanValue.slice(0, maxLength);
  }

  return { cleanValue, wasModified: cleanValue !== originalValue };
};

const handleInput = (targetObj, key, val, maxLength, type = "text") => {
  if (typeof val !== "string") return;
  const { cleanValue, wasModified } = sanitizeInput(val, maxLength, type);

  targetObj[key] = cleanValue;
  if (wasModified) triggerShake();

  if (wasModified) {
    setTimeout(() => {
      targetObj[key] = cleanValue;
    }, 0);
  }
};

const handleRepeaterInput = (
  targetArray,
  index,
  keyPath,
  val,
  maxLength,
  type = "text",
) => {
  if (typeof val !== "string") return;
  const { cleanValue, wasModified } = sanitizeInput(val, maxLength, type);

  if (keyPath === null) {
    targetArray[index] = cleanValue;
  } else {
    targetArray[index][keyPath] = cleanValue;
  }

  if (wasModified) {
    const shakeKey = keyPath ? `${index}-${keyPath}` : `${index}`;
    triggerRepeaterShake(shakeKey);

    setTimeout(() => {
      if (keyPath === null) {
        targetArray[index] = cleanValue;
      } else {
        targetArray[index][keyPath] = cleanValue;
      }
    }, 0);
  }
};

defineExpose({ values: formData, formData });
</script>

<template>
  <div class="program-details-container">
    <VExpansionPanels
      v-model="panels"
      multiple
      variant="accordion"
      class="custom-accordion-panels"
      elevation="0"
    >
      <AccordionSection
        title="Program Objectives"
        :show-cancel="hasSectionChanges('objectives')"
        @cancel="cancelSection('objectives')"
        subtitle="Learning goals"
        icon="bx-target-lock"
        iconColorClass="icon-teal"
        :badgeCount="formData.objectives.items.length"
      >
        <VTextField
          v-model="formData.objectives.heading"
          @update:model-value="
            handleInput(formData.objectives, 'heading', $event, 100)
          "
          label="Section Heading"
          placeholder="e.g. Program Objectives"
          variant="outlined"
          density="comfortable"
          :counter="100"
          :class="['mb-4', { 'shake-animation': isShaking }]"
        />
        <DraggableList v-model="formData.objectives.items" row-class="mb-3">
          <template #item="{ index: idx }">
            <div class="d-flex align-center gap-2">
              <VTextField
                v-model="formData.objectives.items[idx]"
                @update:model-value="
                  handleRepeaterInput(
                    formData.objectives.items,
                    idx,
                    null,
                    $event,
                    100,
                  )
                "
                placeholder="Enter objective..."
                variant="outlined"
                density="compact"
                hide-details
                :maxlength="100"
                :class="{ 'shake-animation': repeaterShakes[`${idx}`] }"
              />
              <VBtn
                icon
                size="small"
                variant="text"
                color="error"
                @click="removeObjective(idx)"
                ><VIcon>bx-trash</VIcon></VBtn
              >
            </div>
          </template>
        </DraggableList>
        <VBtn
          variant="tonal"
          color="primary"
          size="small"
          prepend-icon="bx-plus"
          @click="addObjective"
          >Add Objective</VBtn
        >
      </AccordionSection>

      <AccordionSection
        title="Objectives Gallery (Robots)"
        :show-cancel="hasSectionChanges('gallery_slides')"
        @cancel="cancelSection('gallery_slides')"
        subtitle="Robot image + tag shown in the objectives slider"
        icon="bx-images"
        iconColorClass="icon-teal"
        :badgeCount="formData.gallery_slides.length"
      >
        <DraggableList v-model="formData.gallery_slides">
          <template #item="{ element: slide, index: idx }">
            <div class="gallery-slide-row">
              <div
                class="gallery-robot-box"
                @click="openMediaPickerForGalleryRobot(idx)"
              >
                <img
                  v-if="slide.robot_image"
                  :src="slide.robot_image"
                  alt="Robot"
                  class="gallery-robot-img"
                />
                <VIcon v-else size="22" color="#94a3b8">bx-image-add</VIcon>
              </div>
              <VTextField
                v-model="slide.tag"
                placeholder="e.g. Security patrol robot"
                variant="outlined"
                density="compact"
                :maxlength="60"
                hide-details
                class="gallery-tag-field"
              />
              <VBtn
                variant="tonal"
                color="primary"
                size="small"
                prepend-icon="bx-image-add"
                @click="openMediaPickerForGalleryRobot(idx)"
              >
                {{ slide.robot_image ? "Change" : "Select" }}
              </VBtn>
              <VBtn
                icon
                size="small"
                variant="text"
                color="error"
                @click="removeGallerySlide(idx)"
              ><VIcon>bx-trash</VIcon></VBtn>
            </div>
          </template>
        </DraggableList>
        <VBtn
          variant="tonal"
          color="primary"
          size="small"
          prepend-icon="bx-plus"
          @click="addGallerySlide"
          >Add Robot</VBtn
        >
      </AccordionSection>

      <AccordionSection
        title="Action Text"
        :show-cancel="hasSectionChanges('action_text')"
        @cancel="cancelSection('action_text')"
        subtitle="Call-to-action section"
        icon="bx-bulb"
        iconColorClass="icon-purple"
      >
        <VTextField
          v-model="formData.action_text.title"
          @update:model-value="
            handleInput(formData.action_text, 'title', $event, 100)
          "
          label="Section Title"
          placeholder="e.g. See it in Action"
          variant="outlined"
          density="comfortable"
          :counter="100"
          :class="['mb-4', { 'shake-animation': isShaking }]"
        />
        <VTextarea
          v-model="formData.action_text.text"
          @update:model-value="
            handleInput(formData.action_text, 'text', $event, 300)
          "
          label="Section Text"
          placeholder="Describe the action..."
          variant="outlined"
          rows="3"
          density="comfortable"
          :counter="300"
          class="mb-4"
          :class="{ 'shake-animation': isShaking }"
        />
        <VTextField
          v-model="formData.action_text.signup_cta"
          @update:model-value="
            handleInput(formData.action_text, 'signup_cta', $event, 50)
          "
          label="Signup CTA Text"
          placeholder="e.g. Sign Up Now"
          variant="outlined"
          density="comfortable"
          :counter="50"
          :class="{ 'shake-animation': isShaking }"
        />
      </AccordionSection>

      <AccordionSection
        title="Discover Section"
        :show-cancel="hasSectionChanges('discover_section')"
        @cancel="cancelSection('discover_section')"
        subtitle="What kids discover"
        icon="bx-compass"
        iconColorClass="icon-orange"
        :badgeCount="formData.discover_section.points.length"
      >
        <VTextField
          v-model="formData.discover_section.heading"
          @update:model-value="
            handleInput(formData.discover_section, 'heading', $event, 100)
          "
          label="Section Heading"
          placeholder="e.g. What Kids Discover"
          variant="outlined"
          density="comfortable"
          :counter="100"
          :class="['mb-4', { 'shake-animation': isShaking }]"
        />
        <DraggableList v-model="formData.discover_section.points" row-class="mb-3">
          <template #item="{ index: idx }">
            <div class="d-flex align-center gap-2">
              <VTextField
                v-model="formData.discover_section.points[idx]"
                @update:model-value="
                  handleRepeaterInput(
                    formData.discover_section.points,
                    idx,
                    null,
                    $event,
                    100,
                  )
                "
                placeholder="Discovery point..."
                variant="outlined"
                density="compact"
                hide-details
                :maxlength="100"
                :class="{ 'shake-animation': repeaterShakes[`${idx}`] }"
              />
              <VBtn
                icon
                size="small"
                variant="text"
                color="error"
                @click="removeDiscoverPoint(idx)"
                ><VIcon>bx-trash</VIcon></VBtn
              >
            </div>
          </template>
        </DraggableList>
        <VBtn
          variant="tonal"
          color="primary"
          size="small"
          prepend-icon="bx-plus"
          @click="addDiscoverPoint"
          >Add Point</VBtn
        >
      </AccordionSection>

      <AccordionSection
        title="Slider Texts"
        :show-cancel="hasSectionChanges('slider_texts')"
        @cancel="cancelSection('slider_texts')"
        subtitle="Scrolling banner words"
        icon="bx-align-left"
        :badgeCount="formData.slider_texts.length"
      >
        <DraggableList v-model="formData.slider_texts" row-class="mb-3">
          <template #item="{ index: idx }">
            <div class="d-flex align-center gap-2">
              <VTextField
                v-model="formData.slider_texts[idx]"
                @update:model-value="
                  handleRepeaterInput(formData.slider_texts, idx, null, $event, 50)
                "
                placeholder="e.g. Great Opportunity"
                variant="outlined"
                density="compact"
                hide-details
                :maxlength="50"
                :class="{
                  'shake-animation': repeaterShakes[`slider-text-${idx}`],
                }"
              />
              <VBtn
                icon
                size="small"
                variant="text"
                color="error"
                @click="removeSliderText(idx)"
                ><VIcon>bx-trash</VIcon></VBtn
              >
            </div>
          </template>
        </DraggableList>
        <VBtn
          variant="tonal"
          color="primary"
          size="small"
          prepend-icon="bx-plus"
          @click="addSliderText"
          >Add Text</VBtn
        >
      </AccordionSection>

      <AccordionSection
        title="Program Video"
        :show-cancel="hasSectionChanges('video_url')"
        @cancel="cancelSection('video_url')"
        subtitle="Single video URL"
        icon="bx-video"
        iconColorClass="icon-red"
      >
        <VTextField
          v-model="formData.video_url"
          @update:model-value="handleInput(formData, 'video_url', $event, 500)"
          label="Video URL"
          placeholder="e.g. https://www.youtube.com/watch?v=..."
          variant="outlined"
          density="comfortable"
          hint="Paste the direct video link here"
          persistent-hint
          :class="['mb-2', { 'shake-animation': isShaking }]"
        >
          <template #prepend-inner>
            <VIcon size="20" class="mr-1">bx-link</VIcon>
          </template>
        </VTextField>
      </AccordionSection>
      <AccordionSection
        title="Q&A"
        :show-cancel="hasSectionChanges('program_highlights')"
        @cancel="cancelSection('program_highlights')"
        subtitle="FAQ / Q&A"
        icon="bx-star"
        iconColorClass="icon-pink"
        :badgeCount="formData.program_highlights.items.length"
      >
        <VTextField
          v-model="formData.program_highlights.heading"
          @update:model-value="
            handleInput(formData.program_highlights, 'heading', $event, 100)
          "
          label="Section Heading"
          variant="outlined"
          density="comfortable"
          :counter="100"
          :class="['mb-4', { 'shake-animation': isShaking }]"
        />
        <DraggableList
          v-model="formData.program_highlights.items"
          row-class="mb-3"
        >
          <template #item="{ element: item, index: idx }">
            <div class="highlight-box">
              <div class="d-flex justify-space-between mb-2">
                <span class="text-caption font-weight-bold"
                  >Q&A #{{ idx + 1 }}</span
                >
                <VBtn
                  icon
                  size="x-small"
                  variant="text"
                  color="error"
                  @click="removeHighlight(idx)"
                  ><VIcon>bx-trash</VIcon></VBtn
                >
              </div>
              <VTextField
                v-model="item.question"
                @update:model-value="
                  handleRepeaterInput(
                    formData.program_highlights.items,
                    idx,
                    'question',
                    $event,
                    100,
                  )
                "
                label="Question"
                variant="outlined"
                density="compact"
                class="mb-3"
                :counter="100"
                :class="{ 'shake-animation': repeaterShakes[`${idx}-question`] }"
              />
              <VTextarea
                v-model="item.answer"
                @update:model-value="
                  handleRepeaterInput(
                    formData.program_highlights.items,
                    idx,
                    'answer',
                    $event,
                    300,
                  )
                "
                label="Answer"
                variant="outlined"
                rows="2"
                density="compact"
                :counter="300"
                :class="{ 'shake-animation': repeaterShakes[`${idx}-answer`] }"
              />
            </div>
          </template>
        </DraggableList>
        <VBtn
          variant="tonal"
          color="primary"
          size="small"
          prepend-icon="bx-plus"
          @click="addHighlight"
          >Add Q&A</VBtn
        >
      </AccordionSection>

      <AccordionSection
        title="Sliders & Images"
        :show-cancel="hasSectionChanges('sliders')"
        @cancel="cancelSection('sliders')"
        subtitle="Image sliders for program showcase"
        icon="bx-image"
        iconColorClass="icon-indigo"
      >
        <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="formData.sliders.sliderImages.length > 0"
              size="small"
              color="success"
              variant="flat"
              class="ml-2"
            >
              {{ formData.sliders.sliderImages.length }} Images
            </VChip>
          </div>
          <div
            v-if="formData.sliders.sliderImages.length > 0"
            class="images-preview-grid mb-3"
          >
            <div
              v-for="(img, idx) in formData.sliders.sliderImages"
              :key="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>
          <VBtn
            variant="tonal"
            color="primary"
            size="small"
            prepend-icon="bx-images"
            @click="openMediaPickerForSliders"
          >
            {{
              formData.sliders.sliderImages.length > 0
                ? "Change Images"
                : "Select Images"
            }}
          </VBtn>
        </div>

        <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="formData.sliders.reverseSliderImages.length > 0"
              size="small"
              color="info"
              variant="flat"
              class="ml-2"
            >
              {{ formData.sliders.reverseSliderImages.length }} Images
            </VChip>
          </div>
          <div
            v-if="formData.sliders.reverseSliderImages.length > 0"
            class="images-preview-grid mb-3"
          >
            <div
              v-for="(img, idx) in formData.sliders.reverseSliderImages"
              :key="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>
          <VBtn
            variant="tonal"
            color="primary"
            size="small"
            prepend-icon="bx-images"
            @click="openMediaPickerForReverseSliders"
          >
            {{
              formData.sliders.reverseSliderImages.length > 0
                ? "Change Images"
                : "Select Images"
            }}
          </VBtn>
        </div>
      </AccordionSection>
    </VExpansionPanels>
  </div>
</template>

<style scoped>
/* ========== OBJECTIVES GALLERY (ROBOTS) ========== */
.gallery-slide-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.gallery-robot-box {
  width: 72px;
  height: 64px;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.gallery-robot-box:hover {
  border-color: #2196f3;
}
.gallery-robot-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Fill the remaining width of the section */
.gallery-tag-field {
  flex: 1;
  min-width: 0;
}
/* Keep every control vertically centered on one line */
.gallery-slide-row :deep(.v-field) {
  align-items: center;
}

/* ========== REAL-TIME SHAKE ANIMATION ========== */
.shake-animation {
  animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.shake-animation :deep(.v-field) {
  background-color: #fff0f0 !important;
  transition: background-color 0.1s ease;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* Only the internal content CSS needs to stay here */
.highlight-box {
  background: rgba(var(--v-theme-on-surface), 0.03);
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  padding: 12px;
  border-radius: 8px;
}
.slider-subsection {
  padding: 16px;
  background: rgba(var(--v-theme-on-surface), 0.03);
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  border-radius: 8px;
  margin-bottom: 12px;
}
.subsection-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--v-theme-on-surface));
  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: rgba(var(--v-theme-on-surface), 0.05);
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(var(--v-border-color), var(--v-border-opacity));
  transition: all 0.2s ease;
}
.image-preview-item:hover {
  border-color: rgb(var(--v-theme-primary));
  box-shadow: 0 4px 12px rgba(var(--v-theme-primary), 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;
}

/* Optional icon color classes */
.icon-teal {
  color: #14b8a6;
}
.icon-purple {
  color: #a855f7;
}
.icon-orange {
  color: #f97316;
}
.icon-red {
  color: #ef4444;
}
.icon-pink {
  color: #ec4899;
}
.icon-indigo {
  color: #6366f1;
}
</style>
