<script setup>
import { usePanel } from "@/composables/useAccordionGroup";
import { ref, watch } from "vue";

const props = defineProps({
  mode: { type: String, default: "create" },
  record: { type: Object, default: null },
  recordKey: { type: String, default: "program_details" },
  loading: Boolean,
  panelKey: { type: String, default: "testimonial-banner-0" },
  panelInjectionKey: { type: String, default: "activeProgramPanel" },
});

const form = ref({
  main_heading: "",
  sub_heading: "",
  feature1: "",
  feature2: "",
  feature3: "",
  feature4: "",
});

const ensureForm = (raw) => ({
  main_heading: raw?.main_heading ?? "",
  sub_heading: raw?.sub_heading ?? "",
  feature1: raw?.feature1 ?? "",
  feature2: raw?.feature2 ?? "",
  feature3: raw?.feature3 ?? "",
  feature4: raw?.feature4 ?? "",
});

const panel = usePanel(props.panelInjectionKey, props.panelKey);

// Load only when a different record is opened (id + language), never on every
// nested mutation — mirrors the AI feature form to avoid wiping local edits.
watch(
  () =>
    props.record
      ? `${props.record.id ?? ""}|${props.record.language ?? ""}`
      : "",
  () => {
    if (props.mode !== "edit" || !props.record) return;
    const details = props.record?.[props.recordKey] || {};
    form.value = ensureForm(details.testimonials_section);
  },
  { immediate: true },
);

const update = (key, value) => {
  form.value = { ...form.value, [key]: value };
};

// Return the section object, or null when nothing meaningful was entered so an
// empty banner is never saved (the public site then falls back to defaults).
const getValues = () => {
  const v = {
    main_heading: (form.value.main_heading || "").trim(),
    sub_heading: (form.value.sub_heading || "").trim(),
    feature1: (form.value.feature1 || "").trim(),
    feature2: (form.value.feature2 || "").trim(),
    feature3: (form.value.feature3 || "").trim(),
    feature4: (form.value.feature4 || "").trim(),
  };
  const hasContent =
    v.main_heading ||
    v.sub_heading ||
    v.feature1 ||
    v.feature2 ||
    v.feature3 ||
    v.feature4;
  return hasContent ? v : null;
};

defineExpose({ getValues });
</script>

<template>
  <div class="testimonial-banner-form-container">
    <VExpansionPanels
      v-model="panel"
      variant="accordion"
      class="custom-accordion-panels"
      elevation="0"
    >
      <VExpansionPanel class="form-panel-card" elevation="0">
        <VExpansionPanelTitle class="section-header" hide-actions>
          <div class="section-header-content">
            <div class="section-left">
              <div class="section-icon-wrapper">
                <VIcon color="white" size="20">bx-conversation</VIcon>
              </div>
              <div class="section-text">
                <h3 class="section-name">Testimonials Banner</h3>
                <p class="section-subtitle">
                  Banner text above the testimonials on this program's detail
                  page (leave empty to use the default text)
                </p>
              </div>
            </div>
            <div class="section-right">
              <div class="chevron-wrapper">
                <VIcon size="24" class="custom-chevron">bx-chevron-down</VIcon>
              </div>
            </div>
          </div>
        </VExpansionPanelTitle>

        <VExpansionPanelText>
          <div class="panel-body-content">
            <VTextField
              :model-value="form.main_heading"
              @update:model-value="update('main_heading', $event)"
              label="Main Heading"
              placeholder="e.g. Trusted by Parents Worldwide"
              variant="outlined"
              density="comfortable"
              :maxlength="120"
              :counter="120"
              :disabled="loading"
              hide-details="auto"
            />

            <VTextarea
              :model-value="form.sub_heading"
              @update:model-value="update('sub_heading', $event)"
              label="Sub Heading"
              placeholder="e.g. What parents often notice in their children after our classes"
              variant="outlined"
              density="comfortable"
              rows="2"
              auto-grow
              :maxlength="200"
              :counter="200"
              :disabled="loading"
              hide-details="auto"
            />

            <div class="feature-row">
              <VTextField
                :model-value="form.feature1"
                @update:model-value="update('feature1', $event)"
                label="Highlight 1"
                placeholder="e.g. More confidence"
                variant="outlined"
                density="comfortable"
                :maxlength="80"
                :disabled="loading"
                hide-details="auto"
                class="feature-col"
              />
              <VTextField
                :model-value="form.feature2"
                @update:model-value="update('feature2', $event)"
                label="Highlight 2"
                placeholder="e.g. Better focus"
                variant="outlined"
                density="comfortable"
                :maxlength="80"
                :disabled="loading"
                hide-details="auto"
                class="feature-col"
              />
            </div>

            <div class="feature-row">
              <VTextField
                :model-value="form.feature3"
                @update:model-value="update('feature3', $event)"
                label="Highlight 3"
                placeholder="e.g. Teamwork skills"
                variant="outlined"
                density="comfortable"
                :maxlength="80"
                :disabled="loading"
                hide-details="auto"
                class="feature-col"
              />
              <VTextField
                :model-value="form.feature4"
                @update:model-value="update('feature4', $event)"
                label="Highlight 4"
                placeholder="e.g. Creative problem-solving"
                variant="outlined"
                density="comfortable"
                :maxlength="80"
                :disabled="loading"
                hide-details="auto"
                class="feature-col"
              />
            </div>
          </div>
        </VExpansionPanelText>
      </VExpansionPanel>
    </VExpansionPanels>
  </div>
</template>

<style scoped>
.testimonial-banner-form-container {
  width: 100%;
  margin-top: 8px;
}

.form-panel-card {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  transition: all 0.2s ease;
  overflow: hidden;
  margin-bottom: 0;
}
.form-panel-card::before {
  box-shadow: none !important;
}
.form-panel-card.v-expansion-panel--active {
  border-color: #2196f3;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1) !important;
}

.section-header {
  padding: 8px 16px !important;
  min-height: 56px !important;
  background-color: #fff;
}
.form-panel-card.v-expansion-panel--active .section-header {
  background-color: #f8fbff;
}

.section-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.section-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #003b6f, #00569e);
  box-shadow: 0 4px 10px rgba(0, 59, 111, 0.2);
}

.section-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.section-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}
.section-subtitle {
  margin: 2px 0 0;
  font-size: 12px;
  color: #64748b;
}

.section-right {
  display: flex;
  align-items: center;
}
.chevron-wrapper {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
}
.form-panel-card.v-expansion-panel--active .chevron-wrapper {
  transform: rotate(180deg);
}
.custom-chevron {
  color: #94a3b8;
}
.form-panel-card.v-expansion-panel--active .custom-chevron {
  color: #2196f3;
}

.panel-body-content {
  padding: 20px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.field-label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.feature-row {
  display: flex;
  gap: 12px;
}
.feature-col {
  flex: 1;
  min-width: 0;
}

@media (max-width: 600px) {
  .feature-row {
    flex-direction: column;
  }
}
</style>
