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

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

const stageRef = ref<HTMLElement | null>(null)
const split = ref(0)
const reduceMotion = usePreferredReducedMotion()
const bodyHtml = computed(() => renderMarkdown(props.memory.main_text))
const panelShift = computed(() => `${split.value * 72}%`)

const hurtFacts = [
  '我把你和前任之间的事情告诉了别人',
  '本该被保护的隐私，被我轻率地说了出去',
  '于是别人开始对你评头论足',
]

const judgmentClouds = [
  '那些不属于他们的评价',
  '被误读、被讨论、被围观',
  '我知道这件事最先伤到的是你',
]

const apologyTags = ['越界了', '在认错', '也在解释']

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

const isOpen = computed(() => split.value > 0.35)

function toggleSplit() {
  split.value = isOpen.value ? 0 : 1
}

const splitHint = computed(() =>
  isOpen.value
    ? '裂缝拉开后，露出那封迟来的长信。'
    : '左右轻扫，把我没说完的道歉从裂缝里拉出来。',
)

const fracturePulseClass = computed(() => {
  if (reduceMotion.value === 'reduce' || isOpen.value) return ''
  return 'fissure-fracture-pulse'
})
</script>

<template>
  <div
    class="relative mx-auto max-w-lg overflow-hidden rounded-3xl bg-gradient-to-br from-[#2b1118] via-[#5f2430] to-[#f1dfd5] px-3 py-7 text-white sm:px-5 sm:py-9"
  >
    <div
      class="pointer-events-none absolute -left-20 top-0 h-56 w-56 rounded-full bg-rose-400/28 blur-3xl"
      aria-hidden="true"
    />
    <div
      class="pointer-events-none absolute -right-16 bottom-0 h-48 w-48 rounded-full bg-amber-200/22 blur-3xl"
      aria-hidden="true"
    />

    <header class="relative z-[1] mb-5 text-center">
      <p
        class="mb-2 text-[10px] font-semibold uppercase tracking-[0.32em] text-white/60"
      >
        裂缝 / 失言 / 道歉信
      </p>
      <h2
        v-if="memory.event_title"
        class="font-brush text-2xl text-white sm:text-[2rem]"
      >
        {{ memory.event_title }}
      </h2>
      <p class="mx-auto mt-3 max-w-sm text-sm leading-relaxed text-white/78">
        这次裂开的，不只是情绪，而是我把不该说出去的事说给了别人听。
      </p>
    </header>

    <div
      ref="stageRef"
      class="relative z-[1] mx-auto min-h-[390px] max-w-md touch-none select-none overflow-hidden rounded-[1.55rem] border border-white/15 bg-[#140c12] shadow-[0_24px_70px_-18px_rgba(0,0,0,0.58)] ring-1 ring-white/8 sm:min-h-[430px]"
      style="touch-action: none"
      role="application"
      :aria-label="`吵架页裂缝，左右滑动拉开。当前${isOpen ? '已拉开' : '合上'}`"
    >
      <div class="pointer-events-none absolute inset-0 nepal-fiber opacity-[0.08] mix-blend-screen" />
      <div
        class="pointer-events-none absolute inset-0"
        aria-hidden="true"
        style="
          background:
            radial-gradient(circle at 16% 18%, rgb(255 255 255 / 0.07) 0 2px, transparent 3px),
            radial-gradient(circle at 82% 14%, rgb(255 255 255 / 0.06) 0 2px, transparent 3px),
            linear-gradient(180deg, rgb(255 255 255 / 0.04), transparent 26%);
          background-size: 120px 120px, 140px 140px, 100% 100%;
        "
      />

      <div
        class="absolute inset-[14px] overflow-hidden rounded-[1.25rem] border border-white/10 bg-[linear-gradient(180deg,#f6ebe3_0%,#f0ddd2_100%)]"
      >
        <article
          class="absolute inset-x-[17%] bottom-5 top-5 z-[1] overflow-hidden rounded-[1.25rem] border border-[#d8c2b4] bg-[linear-gradient(180deg,#fffaf5_0%,#f8efe7_100%)] px-4 py-4 text-[#4c342c] shadow-[0_18px_32px_rgba(76,52,44,0.12)] sm:inset-x-[18%] sm:px-5 sm:py-5"
          :class="reduceMotion === 'reduce' ? '' : 'fissure-letter-rise'"
        >
          <div class="mb-4 flex items-center justify-between gap-3 border-b border-dashed border-[#d4b9aa] pb-3">
            <div>
              <p class="text-[10px] font-semibold uppercase tracking-[0.28em] text-[#9a6754]">
                Long Apology
              </p>
              <h3 class="mt-1 font-brush text-2xl text-[#7a2f39]">
                对不起
              </h3>
            </div>
            <div class="text-right">
              <p class="text-[10px] font-semibold tracking-[0.24em] text-[#9a6754]">
                我写了很长的小作文
              </p>
              <div class="mt-2 flex gap-1.5">
                <span
                  v-for="tag in apologyTags"
                  :key="tag"
                  class="rounded-full bg-[#f7e3d8] px-2 py-1 text-[10px] font-medium text-[#8d4d40]"
                >
                  {{ tag }}
                </span>
              </div>
            </div>
          </div>

          <div
            class="max-h-full overflow-hidden text-[13px] leading-[1.82] tracking-wide text-[#5c4339] [&_blockquote]:border-l-4 [&_blockquote]:border-[#d48d7e] [&_blockquote]:bg-[#fff2eb] [&_blockquote]:py-1 [&_blockquote]:pl-3 [&_blockquote]:text-[#7b5348] [&_strong]:text-[#732f39] [&_p+p]:mt-3"
            v-html="bodyHtml"
          />

          <div
            class="pointer-events-none absolute -bottom-10 left-1/2 h-28 w-44 -translate-x-1/2 rounded-full bg-[#f5d7c7]/45 blur-2xl"
            aria-hidden="true"
          />
        </article>

        <div class="absolute inset-0 flex">
          <!-- 左半 · 说出去的事 -->
        <div
            class="relative z-[3] flex-1 overflow-hidden border-r border-white/6 bg-[linear-gradient(180deg,#4b1522_0%,#241017_100%)]"
          :class="reduceMotion === 'reduce' ? '' : 'transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]'"
            :style="{ transform: `translateX(-${panelShift})` }"
        >
          <div
              class="pointer-events-none absolute inset-0 opacity-[0.16]"
              aria-hidden="true"
              style="
                background-image:
                  linear-gradient(130deg, transparent 0 44%, rgb(255 255 255 / 0.07) 44% 46%, transparent 46% 100%),
                  radial-gradient(circle at 24% 28%, rgb(255 255 255 / 0.08) 0 2px, transparent 3px);
                background-size: 100% 100%, 120px 120px;
              "
          />
          <div
              class="pointer-events-none absolute inset-y-0 right-0 w-10 bg-gradient-to-l from-black/35 to-transparent"
          />
          <div
              class="relative z-[1] flex h-full min-h-[360px] flex-col justify-between px-4 py-5 sm:px-5 sm:py-6"
          >
              <div>
                <p class="text-[10px] font-semibold uppercase tracking-[0.28em] text-rose-200/62">
                  The Mistake
                </p>
                <h3 class="mt-2 max-w-[10rem] font-display-cn text-[1.6rem] leading-tight text-white">
                  我说了
                  <span class="text-rose-200">不该说的事</span>
                </h3>
              </div>

              <div class="space-y-2.5">
                <div
                  v-for="fact in hurtFacts"
                  :key="fact"
                  class="rounded-[1.15rem] border border-white/10 bg-white/8 px-3 py-3 text-sm leading-relaxed text-white/88 shadow-[0_10px_20px_rgba(0,0,0,0.16)]"
                >
                  {{ fact }}
                </div>
              </div>

              <div class="rounded-[1.2rem] border border-rose-200/12 bg-black/18 px-3 py-3 text-[11px] leading-relaxed text-white/68">
                那些原本只属于你的过去，不该被我拿出去换成别人的一句两句评价。
              </div>
            </div>
          </div>

          <!-- 裂缝光带 -->
          <div
            class="relative z-20 flex w-[8px] shrink-0 flex-col items-center justify-stretch py-5"
            :class="fracturePulseClass"
            aria-hidden="true"
          >
            <div
              class="pointer-events-none absolute inset-y-4 -left-3 -right-3 rounded-full bg-gradient-to-b from-transparent via-rose-400/25 to-transparent blur-lg"
            />
            <div
              class="pointer-events-none absolute inset-y-6 -left-2 -right-2 rounded-full bg-gradient-to-b from-transparent via-orange-200/24 to-transparent blur-md"
            />
            <div
              class="relative h-full w-px flex-1 rounded-full bg-gradient-to-b from-transparent via-white/85 to-transparent shadow-[0_0_12px_rgba(255,255,255,0.3)]"
            />
          </div>

          <!-- 右半 · 别人的目光 -->
          <div
            class="relative z-[3] flex-1 overflow-hidden border-l border-white/6 bg-[linear-gradient(180deg,#2a1317_0%,#120d10_100%)]"
            :class="reduceMotion === 'reduce' ? '' : 'transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]'"
            :style="{ transform: `translateX(${panelShift})` }"
          >
            <div
              class="pointer-events-none absolute inset-0 opacity-[0.16]"
              aria-hidden="true"
              style="
                background-image:
                  linear-gradient(230deg, transparent 0 44%, rgb(255 255 255 / 0.07) 44% 46%, transparent 46% 100%),
                  radial-gradient(circle at 80% 30%, rgb(255 255 255 / 0.08) 0 2px, transparent 3px);
                background-size: 100% 100%, 120px 120px;
              "
            />
            <div
              class="pointer-events-none absolute inset-y-0 left-0 w-10 bg-gradient-to-r from-black/35 to-transparent"
            />
            <div
              class="relative z-[1] flex h-full min-h-[360px] flex-col justify-between px-4 py-5 sm:px-5 sm:py-6"
            >
              <div class="text-right">
                <p class="text-[10px] font-semibold uppercase tracking-[0.28em] text-orange-100/60">
                  Their Voices
                </p>
                <h3 class="mt-2 ml-auto max-w-[10rem] font-display-cn text-[1.6rem] leading-tight text-white">
                  不是你的错，
                  <span class="text-orange-100">却落在你身上</span>
                </h3>
              </div>

              <div class="space-y-2.5">
                <div
                  v-for="line in judgmentClouds"
                  :key="line"
                  class="rounded-[1.15rem] border border-white/10 bg-white/8 px-3 py-3 text-sm leading-relaxed text-white/82 shadow-[0_10px_20px_rgba(0,0,0,0.16)] backdrop-blur-sm"
                  :class="reduceMotion === 'reduce' ? '' : 'fissure-cloud-drift'"
                >
                  {{ line }}
                </div>
              </div>

              <div class="rounded-[1.2rem] border border-orange-100/12 bg-black/18 px-3 py-3 text-[11px] leading-relaxed text-white/68">
                我后来才反应过来，我最该做的是护着你，而不是让你被别人看见、议论、定义。
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

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

      <div
        class="rounded-[1.45rem] border border-white/14 bg-white/8 px-4 py-4 text-white shadow-[0_14px_32px_rgba(0,0,0,0.18)] backdrop-blur-md sm:px-5"
      >
        <p class="text-[10px] font-semibold uppercase tracking-[0.3em] text-white/55">
          Photo Evidence
        </p>
        <h3 class="mt-2 font-display-cn text-[1.35rem] leading-tight text-white">
          把那天也留在这一页
        </h3>
        <p class="mt-3 text-sm leading-relaxed text-white/78">
          这张照片不只是记录当时的场景，也提醒我，这一页里有真实发生过的伤害，也有我认真写下的道歉。
        </p>
        <div class="mt-4 flex flex-wrap gap-2">
          <span
            class="rounded-full border border-white/12 bg-black/14 px-3 py-1.5 text-[11px] font-medium text-white/78"
          >
            争执那天
          </span>
          <span
            class="rounded-full border border-white/12 bg-black/14 px-3 py-1.5 text-[11px] font-medium text-white/78"
          >
            真实现场
          </span>
          <span
            class="rounded-full border border-white/12 bg-black/14 px-3 py-1.5 text-[11px] font-medium text-white/78"
          >
            道歉也被记住
          </span>
        </div>
      </div>
    </section>

    <div class="relative z-[1] mt-5 flex flex-col items-center gap-2 sm:mt-6">
      <button
        type="button"
        class="rounded-full border border-white/18 bg-white/12 px-5 py-2.5 text-xs font-semibold text-white shadow-[0_12px_30px_rgba(0,0,0,0.2)] backdrop-blur-md transition hover:-translate-y-px hover:bg-white/16 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-2 focus-visible:ring-offset-[#5f2430]"
        :aria-pressed="isOpen"
        @click="toggleSplit"
      >
        {{ isOpen ? '先把裂缝合上' : '拉开那封道歉信' }}
      </button>
      <p class="max-w-xs text-center text-[11px] leading-relaxed text-white/70">
        {{ splitHint }}
      </p>
    </div>

    <div class="relative z-[1] mt-6 grid gap-3 sm:grid-cols-3">
      <div
        class="rounded-[1.3rem] border border-white/12 bg-white/8 px-4 py-3 text-center text-sm leading-relaxed text-white/82 backdrop-blur-sm"
      >
        隐私被说出去了
      </div>
      <div
        class="rounded-[1.3rem] border border-white/12 bg-white/8 px-4 py-3 text-center text-sm leading-relaxed text-white/82 backdrop-blur-sm"
      >
        别人开始评头论足
      </div>
      <div
        class="rounded-[1.3rem] border border-white/12 bg-white/8 px-4 py-3 text-center text-sm leading-relaxed text-white/82 backdrop-blur-sm"
      >
        我写了很长的解释和道歉
      </div>
    </div>
  </div>
</template>

<style scoped>
.fissure-fracture-pulse {
  animation: fissure-fracture-pulse 2.8s ease-in-out infinite;
}

@keyframes fissure-fracture-pulse {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.88;
    filter: brightness(1.12);
  }
}

.fissure-letter-rise {
  animation: fissure-letter-rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fissure-letter-rise {
  0% {
    opacity: 0.75;
    transform: translateY(12px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fissure-cloud-drift {
  animation: fissure-cloud-drift 5.8s ease-in-out infinite;
}

@keyframes fissure-cloud-drift {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-4px);
  }
}
</style>
