<template>
  <div class="w-full">
    <div v-if="!isDetail"
      class="border border-[rgba(226,232,240,0.72)] shadow-[0_14px_34px_rgba(15,23,42,0.05)] bg-white rounded-[24px] overflow-hidden py-6 px-[26px] box-border">
      <div class="flex items-center min-w-0">
        <div
          class="flex items-center justify-center rounded-full shrink-0 w-[34px] h-[34px] mr-3 border border-[#fde68a] text-[#f59e0b] text-[22px] leading-none bg-[#fffbeb] box-border">
          {{ data.icon }}
        </div>
        <div class="text-[#1e293b] text-[18px] font-bold truncate flex-1 min-w-0 leading-6">
          {{ data.title }}
        </div>
      </div>

      <div class="grid grid-cols-2 gap-[16px] mt-7">
        <div v-for="item in items" :key="item.id || item.name" class="min-w-0 active:opacity-[0.86]"
          :class="{ 'opacity-[0.55]': disabled }" @click="handleSelect(item)">
          <img class="block w-full h-[140px] rounded-[18px]" :src="item.image" />
          <div v-for="field in item.fields" :key="field.label" class="mt-3">
            <div class="text-[#94A3B8] text-[12px] font-bold leading-4">
              {{ field.label }}
            </div>
            <div v-if="field.tone"
              class="inline-flex items-center min-h-[22px] mt-[5px] px-[10px] rounded-full leading-[22px] text-[12px] font-bold"
              :class="getToneClass(field.tone)">
              {{ field.value }}
            </div>
            <div v-else class="mt-[5px] leading-[18px] text-[#1e293b] text-[14px] font-bold">
              {{ field.value }}
            </div>
          </div>
        </div>
      </div>

      <div
        class="flex items-center justify-center bg-0F172A text-white text-[15px] font-bold h-[52px] mt-7 rounded-[16px] active:opacity-[0.86]"
        :class="{ 'opacity-[0.55]': disabled }" @click="openDetail">
        {{ data.detailButtonText }}
      </div>
    </div>

    <div v-else
      class="border border-[rgba(226,232,240,0.72)] shadow-[0_14px_34px_rgba(15,23,42,0.05)] bg-white rounded-[24px] overflow-hidden">
      <div class="flex items-center min-w-0 h-[70px] px-7 border-b border-[#f1f5f9] box-border">
        <div
          class="flex items-center justify-center rounded-full shrink-0 w-[34px] h-[34px] mr-[14px] text-[#64748b] text-[28px] leading-none bg-[#f8fafc]"
          @click="closeDetail">
          <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
        </div>
        <div class="text-[#1e293b] font-size-20 font-bold flex-1 min-w-0 leading-6">
          {{ detail.title }}
        </div>
        <div class="text-[#94A3B8] text-[12px] font-bold max-w-[142px] text-right leading-4">
          {{ detail.compareLabel }}
        </div>
      </div>

      <div class="pt-[18px] px-3 pb-0">
        <div class="grid grid-cols-[29%_35.5%_35.5%] items-stretch min-h-9">
          <div></div>
          <div v-for="item in items" :key="item.id || item.name"
            class="flex items-center justify-center leading-[18px] text-[#1e293b] text-[14px] font-bold">
            {{ item.name }}
          </div>
        </div>
        <div v-for="row in detail.rows" :key="row.label"
          class="grid grid-cols-[29%_35.5%_35.5%] items-stretch border-t border-[#f1f5f9]">
          <div
            class="flex items-center min-h-[52px] pl-[14px] bg-white leading-[18px] box-border text-[#94A3B8] text-[12px] font-bold">
            {{ row.label }}
          </div>
          <div v-for="cell in row.values" :key="row.label + '-' + cell.text"
            class="flex items-center justify-center min-h-[52px] text-center leading-[18px] bg-[#f8fafc] text-[#1e293b] text-[14px] font-bold"
            :class="getCellClass(cell.tone)">
            {{ cell.text }}
          </div>
        </div>
      </div>

      <div class="pt-5 px-[30px]">
        <div class="text-[#94A3B8] text-[12px] font-bold leading-4">
          {{ detail.recommendTitle }}
        </div>
        <div class="mt-5 py-[18px] px-4 border border-[#e2e8f0] rounded-[16px] bg-[#f8fafc] flex flex-col gap-[14px]">
          <div v-for="tip in detail.tips" :key="tip.text" class="flex gap-10">
            <div class="rounded-full shrink-0 w-2 h-2 mt-2" :class="getDotClass(tip.tone)" />
            <div class="text-[#334155] text-[14px] font-bold leading-[22px]">
              {{ tip.text }}
            </div>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-2 gap-14 py-[26px] px-[30px]">
        <div v-for="action in detail.actions" :key="action.id || action.text"
          class="flex items-center justify-center text-[15px] font-bold h-[54px] rounded-[16px] box-border active:opacity-[0.86]"
          :class="[action.primary ? 'bg-0F172A text-white' : 'border border-[#e2e8f0] bg-white text-[#334155]', { 'opacity-[0.55]': disabled }]"
          @click="handleAction(action)">
          <span class="mr-2 text-[18px] leading-[18px]">{{ action.icon }}</span>
          <span>{{ action.text }}</span>
        </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 isDetail = ref(false);
const items = computed(() => props.data.items || []);
const detail = computed(() => props.data.detail || {});

const getToneClass = (tone) => {
  const toneMap = {
    green: "shadow-[inset_0_0_0_1px_rgba(16,185,129,0.02)] text-[#047857] bg-[#ecfdf5]",
    amber: "shadow-[inset_0_0_0_1px_rgba(245,158,11,0.02)] text-[#D97706] bg-[#FFFBEB]",
  };
  return toneMap[tone] || "";
};

const getCellClass = (tone) => {
  if (tone === "green") return "bg-[#ecfdf5]";
  return "";
};

const getDotClass = (tone) => {
  if (tone === "blue") return "bg-[#3b82f6]";
  return "bg-[#10b981]";
};

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

const openDetail = () => {
  if (props.disabled) return;
  isDetail.value = true;
  emit("select", { type: "detail", items: items.value });
};

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

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