<template>
  <div class="w-full">
    <div v-if="!detailOpen"
      class="min-h-[108px] px-[20px] py-[16px] flex items-center bg-white rounded-[24px] overflow-hidden w-full border border-slate-200/72 [box-shadow:0_10px_28px_rgba(15,23,42,0.05)] active:opacity-86"
      :class="{ 'opacity-55': disabled }" @click="openDetail">
      <img class="w-[76px] h-[76px] rounded-[10px] block shrink-0" :src="data.image" />
      <div class="min-w-0 ml-[18px] flex-1">
        <div class="leading-[24px] text-[#1e293b] text-[18px] font-bold truncate">
          {{ data.title }}
        </div>
        <div class="min-w-0 mt-[10px] flex items-center space-x-2">
          <div v-for="tag in summaryTags" :key="tag.id || tag.text"
            class="h-[24px] px-[11px] rounded-full leading-[24px] text-[12px] font-bold whitespace-nowrap"
            :class="getTagClass(tag.tone)">
            {{ tag.text }}
          </div>
        </div>
      </div>
      <div class="shrink-0">
        <van-icon name="arrow" size="16" color="#CBD5E1"></van-icon>
      </div>
    </div>

    <div v-else
      class="bg-white rounded-[24px] overflow-hidden w-full border border-slate-200/72 [box-shadow:0_10px_28px_rgba(15,23,42,0.05)]">
      <div class="min-w-0 h-[70px] px-[22px] border-b border-slate-100 flex items-center">
        <div
          class="w-[34px] h-[34px] mr-3.5 text-slate-500 text-[28px] leading-none bg-slate-50 flex items-center justify-center rounded-full shrink-0"
          @click="closeDetail">
          <van-icon name="arrow-left" size="16" color="#CBD5E1"></van-icon>
        </div>
        <div class="min-w-0 leading-[24px] text-[#1e293b] text-[18px] font-bold truncate flex-1">
          {{ data.title }}
        </div>
        <div
          class="h-[26px] ml-3 px-3 rounded-full leading-[26px] whitespace-nowrap text-[#047857] bg-[#ecfdf5] text-[12px] font-bold">
          {{ detail.badge }}
        </div>
      </div>

      <div class="pt-[26px] py-[18px]">
        <template v-for="(node, index) in nodes" :key="node.id || node.title">
          <div class="active:opacity-86 relative" :class="{ 'opacity-55': disabled }" @click="handleSelect(node)">
            <div
              class="absolute left-5 top-1/2 z-10 w-[26px] h-[26px] -translate-y-1/2 flex items-center justify-center rounded-full text-[#047857] bg-[#ecfdf5] text-[12px] font-bold">
              {{ index + 1 }}
            </div>
            <div
              class="min-h-[88px] pt-3 pr-4 pb-3 pl-[56px] border border-gray-200 bg-white rounded-[20px] flex items-center">
              <img class="w-16 h-16 mr-3.5 rounded-[10px] object-cover block shrink-0" :src="node.image" />
              <div class="min-w-0 flex-1">
                <div class="leading-[22px] text-[#1e293b] text-[16px] font-bold truncate">
                  {{ node.title }}
                </div>
                <div class="mt-[4px] leading-[18px] text-[#94A3B8] text-[12px] font-bold truncate">
                  {{ node.description }}
                </div>
                <div v-if="node.tag"
                  class="inline-flex items-center h-[22px] mt-1.5 px-[9px] border border-amber-200 rounded-full leading-[22px] text-[#D97706] bg-[#FFFBEB] text-[12px] font-bold">
                  {{ node.tag }}
                </div>
              </div>
            </div>
          </div>

          <div v-if="connectors[index]" class="relative h-[56px]">
            <div class="absolute left-1/2 top-0 w-[2px] h-[52px] -translate-x-1/2 rounded-[2px] bg-green-200"></div>
            <div
              class="absolute left-1/2 top-[42px] w-2.5 h-2.5 border-r-2 border-r-[#86efac] border-b-2 border-b-[#86efac] [-translate-x-4px] rotate-45">
            </div>
            <div
              class="absolute right-0 top-3.5 h-7 px-3 border border-gray-200 leading-7 text-gray-600 flex items-center bg-[#f8fafc] rounded-full text-[#64748B] text-[12px] font-bold">
              <span class="mr-[5px]">{{ connectors[index].icon }}</span>
              <span>{{ connectors[index].text }}</span>
            </div>
          </div>
        </template>
      </div>

      <div v-if="tips.length"
        class="mt-[26px] mx-5 pt-4.5 pr-4.5 pb-4.5 pl-5 border border-slate-200 bg-[#f8fafc] rounded-[20px]">
        <div class="mb-[14px] leading-[18px] text-[#64748B] text-[14px] font-bold">
          {{ detail.tipsTitle }}
        </div>
        <div v-for="tip in tips" :key="tip"
          class="min-h-[22px] leading-[22px] mt-[4px] flex items-center text-[#334155] text-[13px] font-bold">
          <div class="w-[5px] h-[5px] mr-[12px] bg-[#cbd5e1] rounded-full shrink-0"></div>
          <div>{{ tip }}</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"]);

const detailOpen = ref(false);
const detail = computed(() => props.data.detail || {});
const summaryTags = computed(() => props.data.summaryTags || []);
const nodes = computed(() => detail.value.nodes || []);
const connectors = computed(() => detail.value.connectors || []);
const tips = computed(() => detail.value.tips || []);

const getTagClass = (tone) => {
  if (tone === "green") return "text-[#047857] bg-[#ecfdf5]";
  return "text-[#64748B] bg-[#f1f5f9]";
};

const openDetail = () => {
  if (props.disabled) return;
  detailOpen.value = true;
  emit("select", props.data);
};

const closeDetail = () => {
  detailOpen.value = false;
  emit("back");
};

const handleSelect = (node) => {
  if (props.disabled) return;
  emit("select", node);
};
</script>
