<!-- components/SectionLayouts/CheckoutPageSectionLayout.vue -->
<template>
  <div class="checkout-page-layout">
    <!-- Hero -->
    <div v-if="section.fields.registerMainHeading" class="hero-fields-row">
      <div class="hero-field-item">
        <SectionField
          :field="section.fields.registerMainHeading"
          field-key="registerMainHeading"
          :section-key="sectionKey"
          :section-model="sectionModel"
          :model-value="sectionModel"
          :user-role="userRole"
          :disabled="disabled"
          :is-super-admin="isSuperAdmin"
          :is-hero-field="true"
          @update-field="emitUpdate"
        />
      </div>
    </div>

    <div class="fields-container">
      <div class="dense-grid mb-3">
        <SectionField
          v-if="section.fields.registerSubHeading"
          :field="section.fields.registerSubHeading"
          field-key="registerSubHeading"
          :section-key="sectionKey"
          :section-model="sectionModel"
          :model-value="sectionModel"
          :user-role="userRole"
          :disabled="disabled"
          :is-super-admin="isSuperAdmin"
          @update-field="emitUpdate"
        />
      </div>

      <VDivider class="my-3" />

      <!-- Parent Details -->
      <div class="section-subtitle mb-2">
        <VIcon icon="bx-user" class="me-2" color="primary" size="18" />
        <span class="text-caption font-weight-bold grey-900 uppercase">Parent Details</span>
      </div>

      <div class="dense-grid mb-3">
        <SectionField
          v-for="key in ['parentDetailText','nameText','lastNameText','emailText','phoneText']"
          v-show="section.fields[key]"
          :key="key"
          :field="section.fields[key]"
          :field-key="key"
          :section-key="sectionKey"
          :section-model="sectionModel"
          :model-value="sectionModel"
          :user-role="userRole"
          :disabled="disabled"
          :is-super-admin="isSuperAdmin"
          @update-field="emitUpdate"
        />
      </div>

      <VDivider class="my-3" />

      <!-- Child Details -->
      <div class="section-subtitle mb-2">
        <VIcon icon="bx-child" class="me-2" color="primary" size="18" />
        <span class="text-caption font-weight-bold grey-900 uppercase">Child Details</span>
      </div>

      <div class="dense-grid mb-3">
        <SectionField
          v-for="key in ['childDetailText','childFirstNameText','childLastNameText','ageText','schoolTypeText']"
          v-show="section.fields[key]"
          :key="key"
          :field="section.fields[key]"
          :field-key="key"
          :section-key="sectionKey"
          :section-model="sectionModel"
          :model-value="sectionModel"
          :user-role="userRole"
          :disabled="disabled"
          :is-super-admin="isSuperAdmin"
          @update-field="emitUpdate"
        />
      </div>

      <VDivider class="my-3" />

      <!-- Coupon -->
      <div class="section-subtitle mb-2">
        <VIcon icon="bx-purchase-tag" class="me-2" color="primary" size="18" />
        <span class="text-caption font-weight-bold grey-900 uppercase">Coupon Section</span>
      </div>

      <div class="dense-grid mb-3">
        <SectionField
          v-for="key in ['couponSectionTitleText','couponInputPlaceholderText','couponApplyButtonText']"
          v-show="section.fields[key]"
          :key="key"
          :field="section.fields[key]"
          :field-key="key"
          :section-key="sectionKey"
          :section-model="sectionModel"
          :model-value="sectionModel"
          :user-role="userRole"
          :disabled="disabled"
          :is-super-admin="isSuperAdmin"
          @update-field="emitUpdate"
        />
      </div>

      <VDivider class="my-3" />

      <!-- Payment Options -->
      <div class="section-subtitle mb-2">
        <VIcon icon="bx-credit-card" class="me-2" color="primary" size="18" />
        <span class="text-caption font-weight-bold grey-900 uppercase">Payment Options</span>
      </div>

      <div class="dense-grid mb-3">
        <SectionField
          v-for="key in ['paymentSectionTitleText','paymentByCardText','paymentPayLaterText']"
          v-show="section.fields[key]"
          :key="key"
          :field="section.fields[key]"
          :field-key="key"
          :section-key="sectionKey"
          :section-model="sectionModel"
          :model-value="sectionModel"
          :user-role="userRole"
          :disabled="disabled"
          :is-super-admin="isSuperAdmin"
          @update-field="emitUpdate"
        />
      </div>

      <VDivider class="my-3" />

      <!-- CTAs & Policy -->
      <div class="section-subtitle mb-2">
        <VIcon icon="bx-check-circle" class="me-2" color="primary" size="18" />
        <span class="text-caption font-weight-bold grey-900 uppercase">CTAs &amp; Policy</span>
      </div>

      <!-- CTA Register & Pay (full width, with variable inserter) -->
      <div v-if="section.fields.ctaRegisterAndPayText" class="cta-field-wrapper mb-3">
        <SectionField
          :field="section.fields.ctaRegisterAndPayText"
          field-key="ctaRegisterAndPayText"
          :section-key="sectionKey"
          :section-model="sectionModel"
          :model-value="sectionModel"
          :user-role="userRole"
          :disabled="disabled"
          :is-super-admin="isSuperAdmin"
          @update-field="emitUpdate"
        />
        <div
          v-if="ctaVariables.length"
          class="variable-chip-row mt-1"
        >
          <span class="variable-chip-label">Insert:</span>
          <VChip
            v-for="variable in ctaVariables"
            :key="variable"
            size="small"
            color="primary"
            variant="tonal"
            class="me-1 cursor-pointer"
            :disabled="disabled"
            @click="insertVariable(variable)"
          >
            {{ variable }}
          </VChip>
        </div>
      </div>

      <div class="dense-grid mb-3">
        <SectionField
          v-for="key in ['ctaPayLaterButtonText','policyAgreementPrefixText','policyAgreementLinkText']"
          v-show="section.fields[key]"
          :key="key"
          :field="section.fields[key]"
          :field-key="key"
          :section-key="sectionKey"
          :section-model="sectionModel"
          :model-value="sectionModel"
          :user-role="userRole"
          :disabled="disabled"
          :is-super-admin="isSuperAdmin"
          @update-field="emitUpdate"
        />
      </div>

      <VDivider class="my-3" />

      <!-- Sidebar (Order Details) -->
      <div class="section-subtitle mb-2">
        <VIcon icon="bx-list-ul" class="me-2" color="primary" size="18" />
        <span class="text-caption font-weight-bold grey-900 uppercase">Sidebar (Order Details)</span>
      </div>

      <div class="dense-grid mb-3">
        <SectionField
          v-for="key in [
            'sidebarTitleText',
            'classInfoTitleText','studyPeriodLabel','daysLabel','classTimeLabel',
            'numberOfLessonsLabel','classScheduleLabel','startDateLabel',
            'paymentInfoTitleText','totalValueLabel','pricePerClassLabel',
            'paymentFrequencyLabel','feeTypeLabel',
            'paymentScheduleLabel','nextPaymentLabel','lastPaymentLabel',
            'noFuturePlansText','paymentAmountLabel',
          ]"
          v-show="section.fields[key]"
          :key="key"
          :field="section.fields[key]"
          :field-key="key"
          :section-key="sectionKey"
          :section-model="sectionModel"
          :model-value="sectionModel"
          :user-role="userRole"
          :disabled="disabled"
          :is-super-admin="isSuperAdmin"
          @update-field="emitUpdate"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import SectionField from "../SectionField.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 emitUpdate = (sectionKey, fieldKey, value) => {
  emit("update-field", sectionKey, fieldKey, value);
};

const ctaVariables = computed(
  () => props.section?.fields?.ctaRegisterAndPayText?.variables || []
);

const insertVariable = (variable) => {
  if (props.disabled) return;
  const current = props.sectionModel?.ctaRegisterAndPayText || "";
  const needsSpace = current.length > 0 && !/\s$/.test(current);
  const next = `${current}${needsSpace ? " " : ""}${variable}`;
  emit("update-field", props.sectionKey, "ctaRegisterAndPayText", next);
};
</script>

<style scoped>
.checkout-page-layout {
  background: #ffffff;
}

.hero-fields-row {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 12px;
}

.hero-field-item {
  width: 100%;
}

.fields-container {
  padding: 12px 20px;
}

.dense-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}

.cta-field-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.variable-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.variable-chip-label {
  font-size: 12px;
  color: #6b7280;
  margin-right: 4px;
}

.cursor-pointer {
  cursor: pointer;
}

.section-subtitle {
  display: flex;
  align-items: center;
}

.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (min-width: 900px) {
  .dense-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .fields-container {
    padding: 12px 18px;
  }
  .dense-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
</style>
