<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  contenSec: Object, // <-- accept from parent
});
const emit = defineEmits(["update:contenSec"]);

// Local copy
const localContent = ref({ ...props.contenSec });

// Sync changes back to parent
watch(
  localContent,
  (val) => {
    emit("update:contenSec", val);
  },
  { deep: true },
);

const handleImageUpload = (event, type, sec) => {
  const file = event?.target?.files?.[0];
  if (!file) return;
  const previewUrl = URL.createObjectURL(file);

  if (type === "desktop") {
    localContent.value.banner.desktopImage = file;
    localContent.value.banner.desktopPreview = previewUrl;
  } else if (type === "mobile") {
    localContent.value.banner.mobileImage = file;
    localContent.value.banner.mobilePreview = previewUrl;
  } else if (type === "both") {
    localContent.value[sec].bgimage = file;
    localContent.value[sec].bgimagePreview = previewUrl;
  }
};
const getImageUrl = (preview, savedPath) => {
  if (preview) {
    return preview; // already blob: or base64 for newly uploaded image
  }
  if (savedPath) {
    return `/storage/${savedPath}`; // from Laravel public storage
  }
  return ""; // fallback
};
</script>

<template>
  <VCard title="Banner Section" class="mb-1" v-if="contenSec.banner">
    <VCardText>
      <!-- Heading -->
      <VTextField
        v-model="localContent.banner.heading"
        label="Banner Heading"
        placeholder="Banner Heading"
        outlined
        density="comfortable"
        class="mb-4"
      />

      <!-- CTA Text & Link -->
      <VRow class="mb-2">
        <VCol cols="12" md="6">
          <VTextField
            v-model="localContent.banner.ctaText"
            label="Banner CTA Text"
            placeholder="Banner CTA Text"
            outlined
            density="comfortable"
          />
        </VCol>
        <VCol cols="12" md="6">
          <VTextField
            v-model="localContent.banner.ctaLink"
            label="Banner CTA Link"
            placeholder="Banner CTA Link"
            outlined
            density="comfortable"
          />
        </VCol>
      </VRow>

      <!-- Desktop & Mobile Banner Uploads in One Row -->
      <VRow class="mb-2" dense>
        <VCol cols="12" md="6">
          <VFileInput
            accept="image/*"
            label="Desktop Banner Image"
            show-size
            variant="outlined"
            @change="(e) => handleImageUpload(e, 'desktop', 'banner')"
          />
          <VImg
            v-if="
              localContent.banner.desktopPreview ||
              localContent.banner.desktopImage
            "
            :src="
              getImageUrl(
                localContent.banner.desktopPreview,
                localContent.banner.desktopImage,
              )
            "
            alt="Desktop Banner Preview"
            max-width="300"
            class="mt-2 rounded"
            cover
          />
        </VCol>

        <VCol cols="12" md="6">
          <VFileInput
            accept="image/*"
            label="Mobile Banner Image"
            show-size
            variant="outlined"
            @change="(e) => handleImageUpload(e, 'mobile', 'banner')"
          />
          <VImg
            v-if="
              localContent.banner.mobilePreview ||
              localContent.banner.mobileImage
            "
            :src="
              getImageUrl(
                localContent.banner.mobilePreview,
                localContent.banner.mobileImage,
              )
            "
            alt="Mobile Banner Preview"
            max-width="300"
            class="mt-2 rounded"
            cover
          />
        </VCol>
      </VRow>
    </VCardText>
  </VCard>

  <VCard title="Owners Message" class="mb-1">
    <VCardText>
      <!-- Heading -->
      <VTextField
        v-model="localContent.ownermsg.heading"
        label="Heading"
        placeholder="Heading"
        outlined
        density="comfortable"
        class="mb-4"
      />

      <!-- CTA Text & Link -->
      <VTextarea
        v-model="localContent.ownermsg.description"
        label="Description"
        placeholder="Description"
        outlined
        density="comfortable"
      />

      <!-- Desktop & Mobile Banner Uploads in One Row -->
      <VRow class="mt-2" dense>
        <VCol cols="12" md="6">
          <VFileInput
            accept="image/*"
            label="Background Image"
            show-size
            variant="outlined"
            @change="(e) => handleImageUpload(e, 'both', 'ownermsg')"
          />
          <VImg
            v-if="
              localContent.ownermsg.bgimagePreview ||
              localContent.ownermsg.bgimage
            "
            :src="
              getImageUrl(
                localContent.ownermsg.bgimagePreview,
                localContent.ownermsg.bgimage,
              )
            "
            alt="Mobile Banner Preview"
            max-width="300"
            class="mt-2 rounded"
            cover
          />
        </VCol>
      </VRow>
    </VCardText>
  </VCard>

  <VCard title="Programs" class="mb-1">
    <VCardText>
      <!-- Heading -->
      <VTextField
        v-model="localContent.program.heading"
        label="Heading"
        placeholder="Heading"
        outlined
        density="comfortable"
        class="mb-4"
      />

      <!-- CTA Text & Link -->
      <VTextarea
        v-model="localContent.program.description"
        label="Description"
        placeholder="Description"
        outlined
        density="comfortable"
      />

      <!-- Desktop & Mobile Banner Uploads in One Row -->
      <VRow class="mt-2" dense>
        <VCol cols="12" md="6">
          <VFileInput
            accept="image/*"
            label="Image"
            show-size
            variant="outlined"
            @change="(e) => handleImageUpload(e, 'both', 'program')"
          />
          <VImg
            v-if="
              localContent.program.bgimagePreview ||
              localContent.program.bgimage
            "
            :src="
              getImageUrl(
                localContent.program.bgimagePreview,
                localContent.program.bgimage,
              )
            "
            alt="Mobile Banner Preview"
            max-width="300"
            class="mt-2 rounded"
            cover
          />
        </VCol>
      </VRow>
    </VCardText>
  </VCard>

  <VCard title="About US" class="mb-1">
    <VCardText>
      <!-- Heading -->
      <VTextField
        v-model="localContent.aboutus.heading"
        label="Heading"
        placeholder="Heading"
        outlined
        density="comfortable"
        class="mb-4"
      />

      <!-- CTA Text & Link -->
      <VTextarea
        v-model="localContent.aboutus.description"
        label="Description"
        placeholder="Description"
        outlined
        density="comfortable"
      />

      <!-- Desktop & Mobile Banner Uploads in One Row -->
      <VRow class="mt-2" dense>
        <VCol cols="12" md="6">
          <VFileInput
            accept="image/*"
            label="Background Image"
            show-size
            variant="outlined"
            @change="(e) => handleImageUpload(e, 'both', 'aboutus')"
          />
          <VImg
            v-if="
              localContent.aboutus.bgimagePreview ||
              localContent.aboutus.bgimage
            "
            :src="
              getImageUrl(
                localContent.aboutus.bgimagePreview,
                localContent.aboutus.bgimage,
              )
            "
            alt="Mobile Banner Preview"
            max-width="300"
            class="mt-2 rounded"
            cover
          />
        </VCol>
      </VRow>
    </VCardText>
  </VCard>
</template>
