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

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

const stageRef = ref<HTMLElement | null>(null)
const openAmount = ref(0)
const reduceMotion = usePreferredReducedMotion()

usePointerSwipe(stageRef, {
  disableTextSelect: true,
  onSwipeEnd(_e, direction) {
    if (reduceMotion.value === 'reduce') return
    if (direction === 'left') {
      openAmount.value = Math.min(1, openAmount.value + 0.28)
    } else if (direction === 'right') {
      openAmount.value = Math.max(0, openAmount.value - 0.28)
    }
  },
})

const openDeg = computed(() => openAmount.value * 78)
const bodyHtml = computed(() => renderMarkdown(props.memory.main_text))
const isOpen = computed(() => openAmount.value > 0.4)
const statusText = computed(() =>
  isOpen.value ? '心窗已经被推开，光会落进来。' : '如果不开心，就把这一页轻轻打开。',
)
const finaleTags = ['不开心时', '想说话时', '只想被陪着时']

function toggleDoors() {
  openAmount.value = isOpen.value ? 0 : 0.92
}
</script>

<template>
  <div
    class="relative mx-auto max-w-lg overflow-hidden rounded-[2rem] bg-gradient-to-br from-[#fff5ef] via-[#fde8ef] to-[#eef8f8] px-3 py-6 sm:px-4 sm:py-7"
  >
    <div
      class="pointer-events-none absolute -left-16 top-4 h-44 w-44 rounded-full bg-rose-300/24 blur-[3rem]"
      aria-hidden="true"
    />
    <div
      class="pointer-events-none absolute -right-10 bottom-6 h-52 w-52 rounded-full bg-cyan-300/20 blur-[3.5rem]"
      aria-hidden="true"
    />

    <header class="relative z-[1] text-center">
      <p class="text-[10px] font-semibold uppercase tracking-[0.34em] text-lokta-deep/48">
        Finale / Open When You Need Me
      </p>
      <h2 class="mt-3 font-brush text-[2rem] leading-none text-lokta-deep sm:text-[2.35rem]">
        心墙与窗 · 终章
      </h2>
      <p class="mx-auto mt-3 max-w-sm text-sm leading-relaxed text-ink-muted sm:text-[15px]">
        这一页不再讲相遇或争执，而是把“我会在你身边”做成一扇真的能被推开的窗。
      </p>
    </header>

    <div
      ref="stageRef"
      class="relative z-[1] mx-auto mt-8 max-w-md touch-none select-none [perspective:1200px]"
      style="touch-action: none"
    >
      <div
        class="mb-3 flex items-center justify-between gap-3 rounded-full border border-white/60 bg-white/72 px-4 py-2 text-[11px] text-ink-muted shadow-[0_10px_25px_rgba(30,53,80,0.08)] backdrop-blur-md"
      >
        <span class="font-semibold tracking-[0.18em] text-lokta-deep/70">心窗机关</span>
        <span>{{ statusText }}</span>
      </div>

      <div
        class="relative flex min-h-[285px] items-stretch justify-center overflow-visible rounded-[1.8rem] border border-[#b97d87]/26 bg-[linear-gradient(180deg,#e7cfc5_0%,#dcc0b4_100%)] p-3 shadow-[0_24px_60px_-20px_rgba(115,64,79,0.35)] ring-1 ring-white/70 sm:min-h-[320px]"
      >
        <div
          class="pointer-events-none absolute inset-3 rounded-[1.35rem] bg-[linear-gradient(180deg,rgba(255,255,255,0.42),rgba(255,255,255,0)_22%,rgba(138,85,104,0.08)_100%)]"
          aria-hidden="true"
        />
        <div
          class="pointer-events-none absolute left-1/2 top-3 h-4 w-24 -translate-x-1/2 rounded-full bg-white/40 blur-md"
          aria-hidden="true"
        />
        <div
          class="relative flex h-[260px] w-full items-stretch justify-center overflow-hidden rounded-[1.45rem] border-[3px] border-white/75 bg-[#f5e4d8] shadow-[inset_0_1px_0_rgba(255,255,255,0.8),0_8px_18px_rgba(115,64,79,0.12)] sm:h-[292px]"
        >
          <HeartMangaBackdrop />

          <div
            class="pointer-events-none absolute inset-[0.6rem] z-[2] rounded-[1.05rem] border border-white/40 bg-gradient-to-b from-white/55 via-transparent to-black/5"
            aria-hidden="true"
          />

          <div
            class="pointer-events-none absolute inset-x-[13%] bottom-[1.1rem] top-[1.1rem] z-[2] overflow-hidden rounded-[1.2rem] border border-[#dfc3b8] bg-[linear-gradient(180deg,#fffaf6_0%,#f7ede7_100%)] p-4 text-center shadow-[0_15px_35px_rgba(124,74,89,0.12)] sm:inset-x-[15%] sm:p-5"
          >
            <div class="mx-auto mb-3 h-1 w-14 rounded-full bg-gradient-to-r from-rose-300 to-cyan-300" />
            <p class="text-[10px] font-semibold uppercase tracking-[0.28em] text-[#9b6f67]">
              Open When You Need Me
            </p>
            <div
              class="mt-3 text-left text-[13px] leading-[1.82] text-[#5a4339] [&_blockquote]:border-l-4 [&_blockquote]:border-[#d28f86] [&_blockquote]:bg-[#fff2ec] [&_blockquote]:py-1 [&_blockquote]:pl-3 [&_blockquote]:text-[#7a5b50] [&_em]:text-[#9a3d4a] [&_strong]:text-[#7b3240] [&_p+p]:mt-3 sm:text-[14px]"
              v-html="bodyHtml"
            />
          </div>

          <div
            class="pointer-events-none absolute inset-y-[1.2rem] left-[50%] z-[2] w-px -translate-x-1/2 bg-gradient-to-b from-transparent via-white/65 to-transparent"
            aria-hidden="true"
          />

          <div
            class="pointer-events-none relative z-[3] flex h-full w-1/2 origin-left flex-col justify-between rounded-l-[1.2rem] border border-[#b35f6f]/22 bg-[linear-gradient(135deg,rgba(255,255,255,0.94)_0%,rgba(247,231,225,0.96)_36%,rgba(241,188,207,0.46)_100%)] p-4 shadow-[inset_-10px_0_20px_rgba(154,61,74,0.08)] will-change-transform"
            :class="reduceMotion === 'reduce' ? '' : 'transition-transform duration-300 ease-out'"
            :style="{
              transform: `rotateY(${-openDeg}deg)`,
              transformStyle: 'preserve-3d',
            }"
          >
            <div class="flex items-start justify-between">
              <span class="rounded-full bg-white/72 px-2.5 py-1 text-[10px] font-semibold tracking-[0.22em] text-rose-deep/70">
                心墙
              </span>
              <span class="text-lg text-rose-deep/55">✦</span>
            </div>
            <div class="flex flex-1 items-center justify-center">
              <div
                class="grid h-28 w-24 place-items-center rounded-t-[45%] rounded-b-[1rem] border border-white/75 bg-white/36 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.4)]"
              >
                <div class="grid h-20 w-16 place-items-center rounded-t-[45%] rounded-b-[0.8rem] border border-rose-200/70 bg-gradient-to-b from-white/72 to-rose-50/55">
                  <span class="text-3xl text-rose-deep/70">♡</span>
                </div>
              </div>
            </div>
            <div class="flex justify-end">
              <span class="rounded-full border border-white/70 bg-white/55 px-2.5 py-1 text-[10px] text-rose-deep/75">
                推开一点
              </span>
            </div>
          </div>

          <div
            class="pointer-events-none relative z-[3] flex h-full w-1/2 origin-right flex-col justify-between rounded-r-[1.2rem] border border-[#72b9c7]/22 bg-[linear-gradient(225deg,rgba(255,255,255,0.94)_0%,rgba(239,246,244,0.96)_36%,rgba(168,228,235,0.48)_100%)] p-4 shadow-[inset_10px_0_20px_rgba(78,196,212,0.08)] will-change-transform"
            :class="reduceMotion === 'reduce' ? '' : 'transition-transform duration-300 ease-out'"
            :style="{
              transform: `rotateY(${openDeg}deg)`,
              transformStyle: 'preserve-3d',
            }"
          >
            <div class="flex items-start justify-between">
              <span class="text-lg text-lokta-teal/65">✦</span>
              <span class="rounded-full bg-white/72 px-2.5 py-1 text-[10px] font-semibold tracking-[0.22em] text-lokta-deep/65">
                心窗
              </span>
            </div>
            <div class="flex flex-1 items-center justify-center">
              <div
                class="grid h-28 w-24 place-items-center rounded-t-[45%] rounded-b-[1rem] border border-white/75 bg-white/36 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.4)]"
              >
                <div class="grid h-20 w-16 place-items-center rounded-t-[45%] rounded-b-[0.8rem] border border-cyan-200/70 bg-gradient-to-b from-white/72 to-cyan-50/55">
                  <span class="text-3xl text-lokta-teal/70">✿</span>
                </div>
              </div>
            </div>
            <div class="flex justify-start">
              <span class="rounded-full border border-white/70 bg-white/55 px-2.5 py-1 text-[10px] text-lokta-deep/72">
                我在这里
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-4 flex flex-col items-center gap-2">
        <button
          type="button"
          class="rounded-full border border-white/70 bg-white/86 px-5 py-2.5 text-xs font-medium text-lokta-deep shadow-[0_10px_25px_rgba(30,53,80,0.1)] transition hover:-translate-y-px hover:bg-white"
          @click="toggleDoors"
        >
          {{ isOpen ? '轻轻合上心窗' : '把心窗推开一点' }}
        </button>
        <p class="text-center text-[11px] leading-relaxed text-ink-muted">
          左右轻扫也可以开合这一扇窗。
        </p>
      </div>
    </div>

    <section class="relative z-[1] mt-8 grid gap-5 md:grid-cols-[minmax(0,250px)_1fr] md:items-start">
      <PolaroidCard :memory="memory" :index="memory.story_order" compact />

      <div class="space-y-4">
        <div
          class="rounded-[1.5rem] border border-white/65 bg-white/82 px-4 py-4 text-ink shadow-[0_14px_32px_rgba(30,53,80,0.08)] backdrop-blur-md sm:px-5"
        >
          <p class="text-[10px] font-semibold uppercase tracking-[0.3em] text-lokta-deep/50">
            Promise Window
          </p>
          <h3 class="mt-2 font-display-cn text-[1.45rem] leading-tight text-lokta-deep">
            你需要我的时候，
            <span class="text-rose-deep">这一页永远能打开</span>
          </h3>
          <p class="mt-3 text-sm leading-relaxed text-ink-muted">
            终章不是结束，而是留下一种使用方式：难过的时候、想说话的时候、什么都不想解释的时候，都可以来敲这扇窗。
          </p>
          <div class="mt-4 flex flex-wrap gap-2">
            <span
              v-for="tag in finaleTags"
              :key="tag"
              class="rounded-full border border-rose-100 bg-rose-50/72 px-3 py-1.5 text-[11px] font-medium text-rose-deep/88"
            >
              {{ tag }}
            </span>
          </div>
        </div>

        <div
          class="relative rounded-[1.55rem] border border-[#cc9097]/30 bg-[linear-gradient(135deg,#fffdf9_0%,#fff4f0_46%,#f2fbfb_100%)] p-3 shadow-[0_18px_42px_-16px_rgba(154,61,74,0.24)]"
        >
          <div class="absolute left-1/2 top-2 h-5 w-24 -translate-x-1/2 rotate-[1.5deg] bg-rose-200/35 shadow-sm" aria-hidden="true" />
          <div class="rounded-[1.2rem] border border-white/75 bg-white/76 p-4">
            <p class="text-center text-[10px] font-semibold uppercase tracking-[0.3em] text-rose-deep/52">
              Keepsake Ticket
            </p>
            <div
              class="relative mx-auto mt-3 overflow-hidden rounded-[1.2rem] border border-rose-200/55 bg-gradient-to-br from-[#fff1f4] via-[#ffe0ea] to-[#fff5df] px-4 py-4 shadow-[0_12px_24px_rgba(190,80,120,0.12)]"
            >
              <div class="pointer-events-none absolute inset-y-0 left-3 w-px border-l-2 border-dashed border-rose-300/55" aria-hidden="true" />
              <div class="pointer-events-none absolute -left-2 top-1/2 h-4 w-4 -translate-y-1/2 rounded-full bg-white shadow-[inset_1px_0_3px_rgba(0,0,0,0.08)]" aria-hidden="true" />
              <div class="pointer-events-none absolute -right-2 top-1/2 h-4 w-4 -translate-y-1/2 rounded-full bg-white shadow-[inset_-1px_0_3px_rgba(0,0,0,0.08)]" aria-hidden="true" />

              <p class="pl-3 text-[10px] font-semibold uppercase tracking-[0.26em] text-rose-deep/58">
                Love 520 · 非流通纪念券
              </p>
              <p class="mt-2 pl-3 font-brush text-[2rem] leading-none text-rose-deep sm:text-[2.2rem]">
                壹佰份喜欢
              </p>
              <p class="mt-2 pl-3 text-sm leading-relaxed text-[#7d5d54]">
                使用规则：情绪低落时可无限次兑换陪伴、拥抱、安静地在身边。
              </p>
              <p class="mt-3 pl-3 text-[11px] tracking-[0.16em] text-[#9d6b63]">
                open when you need me
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
