<!-- components/SectionVisualGuide.vue -->
<template>
  <VDialog v-model="show" max-width="800px">
    <VCard class="fixed-modal">
      <!-- Header -->
      <VCardTitle
        class="custom-header d-flex justify-space-between align-center pa-3"
      >
        <div>
          <h3 class="text-white mb-0">{{ sectionName }} - Guide</h3>
        </div>
        <VBtn
          icon
          variant="text"
          size="small"
          @click="closeDialog"
          class="text-white"
        >
          <VIcon class="text-white">bx-x</VIcon>
        </VBtn>
      </VCardTitle>

      <VCardText class="pa-3">
        <!-- Current Guide Image -->
        <div v-if="currentGuideImage" class="mb-4">
          <VLabel class="mb-2 font-weight-medium">Current Guide Image</VLabel>
          <VCard elevation="2">
            <VImg
              :src="currentGuideImage"
              :alt="sectionName + ' Guide'"
              class="guide-image"
              max-height="400"
              contain
            >
              <template #placeholder>
                <div class="d-flex align-center justify-center fill-height">
                  <VProgressCircular indeterminate color="primary" size="40" />
                </div>
              </template>
            </VImg>
          </VCard>
        </div>

        <!-- Upload Section - Only for Super Admin -->
        <div v-if="isSuperAdmin" class="upload-section">
          <VDivider class="mb-4" />
          <VLabel class="mb-2 font-weight-medium text-h7">
            Upload Guide Image
          </VLabel>
          <p class="text-caption text-medium-emphasis mb-3">
            Upload a new guide image for {{ sectionName }}
          </p>
          <VBtn
            color="primary"
            prepend-icon="bx-upload"
            @click="openMediaPicker"
            :loading="uploading"
          >
            Select & Upload Image
          </VBtn>
        </div>

        <!-- View Only for Franchisee -->
        <div v-else class="view-only-badge">
          <VAlert type="info" icon="bx-info-circle" density="compact">
            <strong>View Only:</strong> Only super admins can upload guide
            images.
          </VAlert>
        </div>

        <!-- Empty State -->
        <div v-if="!currentGuideImage" class="empty-state text-center">
          <VIcon size="60" color="grey-lighten-2">bx-image-alt</VIcon>
          <p class="text-body-2 mt-3 text-medium-emphasis">
            No guide image available yet
          </p>
          <p v-if="isSuperAdmin" class="text-caption text-medium-emphasis">
            Upload one to help franchisees understand this section
          </p>
        </div>
      </VCardText>

      <!-- Footer -->
      <VCardActions class="pa-3 justify-end bg-grey-lighten-5">
        <VBtn color="primary" @click="closeDialog"> Close </VBtn>
      </VCardActions>
    </VCard>
  </VDialog>

  <!-- Media Picker Modal -->
  <MediaPickerModal
    v-model="showMediaPicker"
    :multiple="false"
    filter-type="image"
    :media-category="mediaCategory"
    @select="handleImageSelect"
  />
</template>

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

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  sectionName: {
    type: String,
    required: true,
  },
  sectionKey: {
    type: String,
    required: true,
  },
  guideImage: {
    type: String,
    default: null,
  },
  userRole: {
    type: String,
    default: "franchisee",
  },
  templateSlug: {
    type: String,
    required: true,
  },
});

const emit = defineEmits(["update:modelValue", "image-upload"]);

const show = computed({
  get: () => props.modelValue,
  set: (val) => emit("update:modelValue", val),
});

const isSuperAdmin = computed(() => props.userRole === "super_admin");
const showMediaPicker = ref(false);
const uploading = ref(false);

// Generate media category dynamically based on section
// e.g., for banner section -> page_guide_banner
// for ownermsg section -> page_guide_ownermsg
const mediaCategory = computed(() => {
  return `page_guide_${props.sectionKey}`;
});

// Current guide image
const currentGuideImage = computed(() => props.guideImage || null);

const closeDialog = () => {
  show.value = false;
};

const openMediaPicker = () => {
  showMediaPicker.value = true;
};

const handleImageSelect = async (selectedMedia) => {
  if (selectedMedia) {
    uploading.value = true;
    try {
      // Emit the selected image to parent
      emit("image-upload", {
        sectionKey: props.sectionKey,
        imageUrl: selectedMedia.url,
        mediaId: selectedMedia.id,
        fileName: selectedMedia.filename,
      });
      showMediaPicker.value = false;
    } catch (error) {
      console.error("Error selecting guide image:", error);
    } finally {
      uploading.value = false;
    }
  }
};
</script>

<style scoped>
/* ✅ Compact modal - no scrolling */
.fixed-modal {
  width: 100%;
  max-width: 800px;
  max-height: 85vh;
  overflow: hidden;
}

/* Header styling */
.custom-header {
  background: var(--ye-hero-bg, linear-gradient(135deg, #003b6f 0%, #004d8f 100%)) !important;
  min-height: 56px;
  flex-shrink: 0;
}

.text-white {
  color: white !important;
}

/* ✅ Compact image - max 400px height */
.guide-image {
  width: 100%;
  object-fit: contain;
  border-radius: 4px;
  background: #f9fafb;
}

/* Remove any borders from Vuetify */
:deep(.v-img) {
  border: none !important;
  box-shadow: none !important;
}

/* Upload section styling */
.upload-section {
  background: #f8fafc;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

/* View only badge */
.view-only-badge {
  margin-top: 16px;
}

/* Empty state */
.empty-state {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Text styling */
.text-h7 {
  font-size: 0.95rem;
  font-weight: 600;
}

/* Responsive - even more compact on mobile */
@media (max-width: 768px) {
  .fixed-modal {
    max-width: 95%;
    max-height: 90vh;
  }

  .guide-image {
    max-height: 350px !important;
  }

  .custom-header {
    min-height: 50px;
  }

  .upload-section {
    padding: 12px;
  }
}
</style>
