<template>
  <div class="w-full">
    <div v-if="mode === 'list'" class="w-full">
      <div v-for="item in cards" :key="item.id"
        class="min-h-[178px] mb-4 pt-[28px] px-[26px] pb-[22px] border border-slate-900/5 [box-shadow:0_12px_28px_rgba(15,23,42,0.04)] [transition:transform_0.15s_ease,opacity_0.15s_ease] bg-white rounded-[24px] active:scale-985"
        :class="{ 'opacity-55': disabled }" @click="openDetail(item)">
        <div
          class="inline-flex items-center justify-center min-h-[26px] px-[10px] border border-transparent rounded-full leading-[18px] text-[12px] font-bold text-emerald-600 bg-emerald-50 border-emerald-200 border">
          {{ item.badge }}
        </div>
        <div class="mt-[18px] leading-[24px] text-[#1e293b] text-[18px] font-bold">
          {{ item.title }}
        </div>
        <div class="mt-[10px] leading-[22px] text-[#94A3B8] text-[14px] font-medium ellipsis-2">
          {{ item.summary }}
        </div>
        <div class="mt-[24px] flex items-center justify-between">
          <text class="text-[#cbd5e1] text-[12px] font-bold">{{ item.footer }}</text>
          <van-icon name="arrow" size="16" color="#CBD5E1"></van-icon>
        </div>
      </div>
    </div>

    <div v-else class="border border-slate-900/5 bg-white rounded-[24px] overflow-hidden">
      <div class="min-h-[70px] py-0 pr-[18px] pl-5 flex items-center border-b border-ink-200">
        <div
          class="w-[34px] h-[34px] mr-3 text-slate-500 bg-[#f2f4f6] text-2xl leading-none flex items-center justify-center rounded-full font-bold"
          @click="closeDetail">
          <van-icon name="arrow-left" size="16" color="#CBD5E1"></van-icon>
        </div>
        <div class="flex-1 min-w-0 text-[#1e293b] text-[18px] font-bold truncate">
          {{ activeItem.title }}
        </div>
        <div
          class="inline-flex items-center justify-center min-h-[26px] px-[10px] border border-transparent rounded-full leading-[18px] ml-[12px] text-[12px] font-bold text-emerald-600 bg-emerald-50 border-emerald-200 border">
          {{ activeItem.badge }}
        </div>
      </div>

      <div class="pt-[24px] px-[22px] pb-[26px]">
        <div v-for="(paragraph, paragraphIndex) in paragraphsBeforeImage" :key="`before-${paragraphIndex}`"
          class="mb-[20px] leading-[30px] text-[#475569] text-[15px] font-medium">
          <template v-for="(segment, segmentIndex) in getSegments(paragraph)"
            :key="`${paragraphIndex}-${segmentIndex}`">
            <span v-if="segment.highlight"
              class="text-emerald-800 bg-emerald-50 px-[6px] py-[1px] rounded text-xs font-bold">
              {{ segment.text }}
            </span>
            <span v-else>{{ segment.text }}</span>
          </template>
        </div>

        <img v-if="activeItem.image" class="h-[198px] mb-[24px] w-full rounded-14 block" :src="activeItem.image" />

        <div class="mb-[12px] leading-[22px] text-[#1e293b] text-[16px] font-bold">
          {{ activeItem.sectionTitle }}
        </div>
        <div class="mb-[22px] px-[18px] py-3 border-l-3 border-l-emerald-400 rounded-xl bg-[#ecfdf5]">
          <div v-for="(tip, index) in activeItem.tips || []" :key="tip"
            class="leading-[24px] text-[#047857] text-[14px] font-bold">
            {{ index + 1 }} {{ tip }}
          </div>
        </div>

        <div v-for="(paragraph, paragraphIndex) in paragraphsAfterTips" :key="`after-${paragraphIndex}`"
          class="mb-[20px] leading-[30px] text-[#475569] text-[15px] font-medium">
          <template v-for="(segment, segmentIndex) in getSegments(paragraph)"
            :key="`${paragraphIndex}-${segmentIndex}`">
            <span v-if="segment.highlight"
              class="text-emerald-800 bg-emerald-50 px-[6px] py-[1px] rounded text-xs font-bold">
              {{ segment.text }}
            </span>
            <span v-else>{{ segment.text }}</span>
          </template>
        </div>
      </div>

      <div v-if="activeItem.action?.type === 'map'" class="border-t border-slate-100 pt-4 px-5 pb-5">
        <div class="mb-[10px] tracking-[0.6px] text-[#94A3B8] text-[11px] font-bold">
          {{ activeItem.action.label }}
        </div>
        <div class="border border-slate-100 rounded-[16px] overflow-hidden">
          <div class="relative">
            <img class="h-[138px] w-full block" :src="activeItem.action.image" />
            <div
              class="absolute left-[14px] bottom-[12px] px-[8px] py-[4px] rounded-full bg-[#0f172a]/[0.72] text-white text-[10px] font-bold">
              {{ activeItem.action.tag }}
            </div>
          </div>
          <div class="py-[14px] px-[16px] flex items-center bg-white">
            <div class="flex-1">
              <div class="text-[#1e293b] text-[15px] font-bold">{{ activeItem.action.title }}</div>
              <div class="text-[#94A3B8] text-[12px] font-bold mt-2">{{ activeItem.action.subtitle }}</div>
            </div>
            <div class="py-[12px] px-[18px] rounded-[14px] text-white bg-0F172A text-[14px] font-bold"
              @click="handleAction(activeItem)">
              {{ activeItem.action.buttonText }}
            </div>
          </div>
        </div>
      </div>

      <div v-else-if="activeItem.action?.type === 'image'" class="border-t border-slate-100 pt-4 px-5 pb-5">
        <div class="mb-[10px] tracking-[0.6px] text-[#94A3B8] text-[11px] font-bold">
          {{ activeItem.action.label }}
        </div>
        <div class="min-h-[178px] overflow-hidden rounded-2xl bg-slate-50 relative" @click="handleAction(activeItem)">
          <img class="h-[178px] w-full block" :src="activeItem.action.image" />
          <div
            class="absolute right-[14px] bottom-[14px] w-[38px] h-[38px] bg-[#0f172a]/[0.36] flex items-center justify-center rounded-full text-white text-[18px] font-bold">
            ↗
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["select", "back", "action"]);

const selected = ref(null);
const cards = computed(() => props.data.cards || []);
const activeItem = computed(() => selected.value || cards.value[0] || {});
const mode = computed(() => (selected.value ? "detail" : "list"));
const paragraphsBeforeImage = computed(() => activeItem.value.paragraphs?.slice(0, 1) || []);
const paragraphsAfterTips = computed(() => activeItem.value.paragraphs?.slice(1) || []);

const openDetail = (item) => {
  if (props.disabled) return;
  selected.value = item;
  emit("select", item);
};

const closeDetail = () => {
  selected.value = null;
  emit("back");
};

const handleAction = (item) => {
  if (props.disabled) return;
  emit("action", item);
};

const getSegments = (paragraph) => {
  const text = paragraph?.text || "";
  const highlights = paragraph?.highlights || [];
  if (!highlights.length) return [{ text, highlight: false }];

  const segments = [];
  let cursor = 0;

  highlights.forEach((highlight) => {
    const start = text.indexOf(highlight, cursor);
    if (start < 0) return;
    if (start > cursor) {
      segments.push({ text: text.slice(cursor, start), highlight: false });
    }
    segments.push({ text: highlight, highlight: true });
    cursor = start + highlight.length;
  });

  if (cursor < text.length) {
    segments.push({ text: text.slice(cursor), highlight: false });
  }

  return segments.length ? segments : [{ text, highlight: false }];
};
</script>
