<script setup lang="ts">
import { usePreferredReducedMotion } from '@vueuse/core'
import { computed, ref } from 'vue'
import type { Memory } from '../api/client'
import { getStandardNepalTheme } from '../constants/nepalThemes'
import PolaroidCard from './PolaroidCard.vue'
import { renderMarkdown } from '../utils/renderMarkdown'

const props = defineProps<{
  memory: Memory
}>()

const bodyHtml = computed(() => renderMarkdown(props.memory.main_text))
const theme = computed(() => getStandardNepalTheme(props.memory.nepal_art_style))
const reduceMotion = usePreferredReducedMotion()
const homeUnlocked = ref(false)
</script>

<template>
  <div
    class="relative mx-auto max-w-lg overflow-hidden rounded-3xl bg-gradient-to-br px-3 pb-8 pt-6 sm:px-5 sm:pb-10 sm:pt-8"
    :class="theme.gradient"
  >
    <div
      class="pointer-events-none absolute -left-12 top-10 h-48 w-48 rounded-full bg-amber-300/24 blur-[3rem]"
      aria-hidden="true"
    />
    <div
      class="pointer-events-none absolute -right-10 bottom-8 h-56 w-56 rounded-full bg-orange-300/18 blur-[3.8rem]"
      aria-hidden="true"
    />

    <div
      class="relative z-[1] mx-auto mb-7 max-w-[min(100%,398px)] overflow-hidden rounded-[2rem] border border-amber-200/65 bg-[linear-gradient(180deg,#fff9ef_0%,#fff0dc_100%)] shadow-[0_24px_56px_-18px_rgba(217,119,6,0.24)]"
    >
      <div class="pointer-events-none absolute inset-0 nepal-fiber opacity-[0.14] mix-blend-multiply" />

      <div class="relative px-5 pb-5 pt-5 sm:px-6 sm:pb-6">
        <div class="flex items-start justify-between gap-4">
          <div>
            <p class="text-[10px] font-semibold uppercase tracking-[0.3em] text-amber-700/68">
              Tiny Home / 05.08
            </p>
            <h3 class="mt-2 font-display-cn text-[1.9rem] leading-none text-amber-950">
              一起租了房
            </h3>
          </div>
          <div
            class="rounded-2xl border border-amber-200/70 bg-white/88 px-3 py-2 text-right shadow-[0_8px_18px_rgba(245,158,11,0.14)]"
          >
            <p class="text-[9px] font-semibold tracking-[0.22em] text-amber-700/70">
              新家标签
            </p>
            <p class="mt-1 font-brush text-xl text-amber-950">小宇宙</p>
          </div>
        </div>

        <div class="mt-6 rounded-[1.8rem] border border-amber-200/60 bg-white/72 p-4 shadow-inner">
          <div class="relative h-[228px] overflow-hidden rounded-[1.5rem] bg-gradient-to-b from-[#fff6df] via-[#fff1d0] to-[#f4dcb5]">
            <div class="absolute inset-y-0 right-0 w-[42%] bg-gradient-to-l from-amber-100/85 to-transparent" aria-hidden="true" />
            <div
              class="window-beam absolute right-[18%] top-0 h-full w-20 -skew-x-[18deg] bg-gradient-to-b from-white/70 via-amber-100/45 to-transparent blur-sm"
              :class="[
                reduceMotion === 'reduce' ? '' : 'window-beam--move',
                homeUnlocked ? 'opacity-100' : '',
              ]"
              aria-hidden="true"
            />

            <div class="absolute left-6 top-7 flex gap-4">
              <div class="h-20 w-20 rounded-[1.4rem] border border-amber-300/55 bg-white/70 shadow-[0_10px_20px_rgba(180,83,9,0.08)]" />
              <div class="mt-5 h-14 w-20 rounded-[1.2rem] border border-amber-300/55 bg-white/65 shadow-[0_10px_20px_rgba(180,83,9,0.08)]" />
            </div>

            <div class="absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-amber-300/30 to-transparent" aria-hidden="true" />
            <div class="absolute bottom-4 left-5 right-5">
              <div class="flex items-end justify-between gap-5">
                <div class="rounded-[1.3rem] border border-amber-300/60 bg-white/78 px-4 py-4 shadow-[0_14px_26px_rgba(180,83,9,0.08)]">
                  <p class="text-[10px] font-semibold uppercase tracking-[0.24em] text-amber-700/65">
                    Balcony
                  </p>
                  <p class="mt-2 max-w-[9rem] text-sm leading-relaxed text-amber-950/88">
                    阳台晒进来的光，像新生活按下了开始键。
                  </p>
                </div>

                <button
                  type="button"
                  class="relative flex shrink-0 flex-col items-center rounded-[1.4rem] px-1 py-1 transition hover:-translate-y-0.5"
                  @click="homeUnlocked = !homeUnlocked"
                >
                  <div class="h-9 w-1 rounded-full bg-amber-700/55" aria-hidden="true" />
                  <div class="relative flex h-20 w-20 items-center justify-center rounded-full bg-[#2d8cff] shadow-[0_12px_22px_rgba(45,140,255,0.25)] ring-4 ring-white/65" :class="homeUnlocked ? 'scale-[1.03]' : ''">
                    <div class="absolute bottom-4 h-7 w-7 rounded-full bg-[#f7d34b] shadow-inner ring-2 ring-[#c99113]" />
                    <div class="absolute top-5 h-7 w-11 rounded-full bg-white" />
                    <div class="absolute top-8 h-7 w-12 rounded-b-[1rem] rounded-t-[0.5rem] bg-white" />
                    <div class="absolute left-5 top-[2.15rem] h-1.5 w-1.5 rounded-full bg-slate-900" />
                    <div class="absolute right-5 top-[2.15rem] h-1.5 w-1.5 rounded-full bg-slate-900" />
                  </div>
                  <p class="mt-2 text-[10px] font-medium tracking-[0.2em] text-blue-700/75">
                    {{ homeUnlocked ? '门开啦' : '钥匙圈' }}
                  </p>
                </button>
              </div>
            </div>
          </div>

          <div class="mt-4 flex flex-wrap justify-center gap-2">
            <span
              v-for="tag in ['钥匙圈', '阳台的光', '共同生活']"
              :key="tag"
              class="rounded-full border border-amber-200 bg-white/88 px-3 py-1.5 text-[11px] font-medium text-amber-900/80"
            >
              {{ tag }}
            </span>
          </div>

          <div class="mt-4 rounded-[1.25rem] border border-amber-200/70 bg-white/85 px-4 py-3 text-center text-sm leading-relaxed text-amber-950/82">
            {{ homeUnlocked ? '钥匙轻轻一转，这个“共同生活”的按钮就真的按下去了。' : '点一下钥匙圈，试着把这间小屋先打开。' }}
          </div>
        </div>
      </div>
    </div>

    <div class="relative z-[1] flex flex-col gap-6 sm:gap-8">
      <PolaroidCard :memory="memory" :index="memory.story_order" compact />

      <div
        class="nepal-torn-panel mx-auto max-w-md border border-amber-200/70 bg-gradient-to-b from-[#fffefa] to-amber-50/65 px-5 py-6 shadow-[0_16px_36px_-12px_rgba(217,119,6,0.18)] ring-1 ring-white/80 sm:px-6 sm:py-7"
      >
        <div class="mb-4 h-1 w-14 rounded-full bg-gradient-to-r from-amber-400 to-orange-400" aria-hidden="true" />
        <div
          class="text-[15px] leading-[1.82] tracking-wide text-amber-950/88 [&_a]:font-bold [&_a]:text-orange-700 [&_a]:underline [&_a]:underline-offset-4 [&_blockquote]:border-l-4 [&_blockquote]:border-amber-300/60 [&_blockquote]:bg-amber-50/55 [&_blockquote]:py-1 [&_blockquote]:pl-3 [&_blockquote]:text-amber-900/72 [&_code]:rounded [&_code]:bg-amber-100/50 [&_code]:px-1.5 [&_strong]:text-amber-950 [&_p+p]:mt-4"
          v-html="bodyHtml"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.window-beam {
  opacity: 0.8;
}

.window-beam--move {
  animation: window-beam-move 6s ease-in-out infinite;
}

@keyframes window-beam-move {
  0%,
  100% {
    transform: translateX(-8px) skewX(-18deg);
    opacity: 0.55;
  }
  50% {
    transform: translateX(10px) skewX(-18deg);
    opacity: 0.88;
  }
}
</style>
