<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 morseEntries = [
  { code: '-- .- -.--', text: '别怕，我在听' },
  { code: '.. / .... . .- .-. -..', text: '我听见你的害怕了' },
  { code: '.- .-.. .-.. / -. .. --. .... -', text: '聊到很晚也没关系' },
]
const activeMorse = ref(0)
</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-16 top-12 h-48 w-48 rounded-full bg-cyan-400/15 blur-[3.5rem]"
      aria-hidden="true"
    />
    <div
      class="pointer-events-none absolute -right-12 bottom-10 h-52 w-52 rounded-full bg-fuchsia-400/16 blur-[3.5rem]"
      aria-hidden="true"
    />

    <p
      class="relative z-[1] mb-4 flex items-center justify-center gap-3 text-[11px] font-bold tracking-[0.34em] text-slate-500/80"
    >
      <span class="h-px w-6 bg-gradient-to-r from-transparent to-cyan-400/60" aria-hidden="true" />
      深夜漫游
      <span class="h-px w-6 bg-gradient-to-l from-transparent to-fuchsia-400/60" aria-hidden="true" />
    </p>

    <div
      class="relative z-[1] mx-auto mb-7 max-w-[min(100%,390px)] overflow-hidden rounded-[2rem] border border-slate-800/80 bg-[#08111f] shadow-[0_25px_60px_-18px_rgba(15,23,42,0.62)]"
    >
      <div
        class="pointer-events-none absolute inset-0 opacity-90"
        aria-hidden="true"
        style="
          background-image:
            radial-gradient(circle at 15% 16%, rgb(255 255 255 / 0.8) 0 1.2px, transparent 1.6px),
            radial-gradient(circle at 74% 22%, rgb(255 255 255 / 0.75) 0 1.1px, transparent 1.5px),
            radial-gradient(circle at 42% 12%, rgb(255 255 255 / 0.7) 0 1px, transparent 1.4px);
          background-size: 120px 120px, 150px 150px, 130px 130px;
        "
      />

      <div class="relative h-[320px] overflow-hidden px-4 pb-4 pt-5 sm:h-[340px] sm:px-5">
        <div class="flex items-start justify-between gap-3">
          <div>
            <p class="text-[10px] font-semibold uppercase tracking-[0.32em] text-cyan-300/70">
              04.22 / 02:00
            </p>
            <h3 class="mt-2 font-display-cn text-2xl text-white sm:text-[1.9rem]">
              集电院的夜
            </h3>
            <p class="mt-2 max-w-[14rem] text-sm leading-relaxed text-slate-300/88">
              从一张照片开始，话题一路延伸到冷暴力、摩斯密码，还有凌晨两点还舍不得停下的聊天。
            </p>
          </div>

          <div
            class="rounded-2xl border border-cyan-400/20 bg-slate-900/75 px-3 py-2 text-right shadow-[0_8px_24px_rgba(34,211,238,0.12)] backdrop-blur-md"
          >
            <p class="text-[9px] font-semibold uppercase tracking-[0.28em] text-cyan-300/70">
              Campus Log
            </p>
            <p class="mt-1 text-lg font-brush text-cyan-50">JDY</p>
          </div>
        </div>

        <div class="relative mt-8 h-[168px] overflow-hidden rounded-[1.6rem] border border-slate-700/70 bg-gradient-to-b from-slate-900 via-slate-950 to-[#02050b] shadow-inner">
          <div class="pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-cyan-400/10 to-transparent" aria-hidden="true" />
          <div
            class="pointer-events-none absolute left-1/2 top-0 h-full w-[1px] bg-gradient-to-b from-transparent via-cyan-300/16 to-transparent"
            aria-hidden="true"
          />

          <div class="absolute bottom-0 left-0 right-0 flex items-end justify-between px-5 pb-6">
            <div class="relative h-20 w-20 rounded-t-[2rem] border border-cyan-200/18 bg-cyan-300/8">
              <div class="absolute inset-x-2 bottom-0 top-4 rounded-t-[1.4rem] border border-cyan-100/12 bg-cyan-200/6" />
            </div>
            <div class="relative h-28 w-24 rounded-t-[2.2rem] border border-cyan-200/22 bg-cyan-300/10">
              <div class="absolute inset-x-3 bottom-0 top-4 rounded-t-[1.7rem] border border-cyan-100/12 bg-cyan-200/6" />
              <div class="absolute left-1/2 top-7 h-8 w-8 -translate-x-1/2 rounded-full border border-cyan-200/25 bg-cyan-200/8" />
            </div>
            <div class="relative h-24 w-20 rounded-t-[2rem] border border-cyan-200/18 bg-cyan-300/8">
              <div class="absolute inset-x-2 bottom-0 top-5 rounded-t-[1.4rem] border border-cyan-100/12 bg-cyan-200/6" />
            </div>
          </div>

          <div
            class="absolute bottom-6 left-6 rounded-2xl border border-cyan-400/18 bg-slate-900/78 px-3 py-2.5 text-cyan-50 shadow-[0_10px_25px_rgba(8,145,178,0.16)] backdrop-blur-md"
          >
            <p class="text-[10px] font-semibold tracking-[0.18em] text-cyan-300/75">你拍给我的照片</p>
            <p class="mt-1 font-brush text-xl">集电院</p>
          </div>

          <div
            class="absolute right-4 top-4 max-w-[11rem] rounded-2xl rounded-tr-sm border border-fuchsia-300/16 bg-fuchsia-200/10 px-3 py-2 text-xs leading-relaxed text-slate-100 shadow-[0_8px_18px_rgba(168,85,247,0.16)] backdrop-blur-md"
            :class="reduceMotion === 'reduce' ? '' : 'campus-bubble-rise'"
          >
            原来你最怕的是冷暴力。
          </div>

          <div class="absolute inset-x-4 bottom-3 flex gap-2" aria-hidden="true">
            <span
              v-for="tag in ['冷暴力', '摩斯密码', '凌晨 2 点']"
              :key="tag"
              class="rounded-full border border-white/10 bg-white/8 px-2.5 py-1 text-[10px] font-medium text-slate-200/88"
            >
              {{ tag }}
            </span>
          </div>
        </div>

        <div class="mt-4 grid gap-2 sm:grid-cols-3">
          <button
            v-for="(entry, index) in morseEntries"
            :key="entry.code"
            type="button"
            class="rounded-2xl border px-3 py-2 text-left font-mono text-[10px] tracking-[0.22em] transition"
            :class="[
              activeMorse === index
                ? 'border-cyan-300/60 bg-cyan-300/16 text-cyan-100 shadow-[0_10px_22px_rgba(34,211,238,0.14)]'
                : 'border-white/10 bg-white/8 text-slate-300/85 hover:bg-white/12',
              reduceMotion === 'reduce' ? '' : 'campus-morse-glow',
            ]"
            @click="activeMorse = index"
          >
            {{ entry.code }}
          </button>
        </div>

        <div class="mt-3 rounded-2xl border border-cyan-300/18 bg-cyan-300/10 px-4 py-3 text-sm leading-relaxed text-cyan-50 shadow-[0_10px_24px_rgba(34,211,238,0.1)]">
          <p class="text-[10px] font-semibold uppercase tracking-[0.24em] text-cyan-200/70">
            点一下，解码一下
          </p>
          <p class="mt-2">{{ morseEntries[activeMorse].text }}</p>
        </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-slate-200/70 bg-gradient-to-b from-[#fffdfa] to-slate-50/55 px-5 py-6 shadow-[0_16px_36px_-12px_rgba(15,23,42,0.18)] ring-1 ring-white/85 sm:px-6 sm:py-7"
      >
        <div class="mb-4 flex items-center gap-2">
          <span class="h-1.5 w-1.5 rounded-full bg-cyan-400" />
          <span class="h-1.5 w-8 rounded-full bg-gradient-to-r from-cyan-400 to-fuchsia-400" />
        </div>
        <div
          class="text-[15px] leading-[1.82] tracking-wide text-slate-800 [&_a]:font-bold [&_a]:text-fuchsia-600 [&_a]:underline [&_a]:underline-offset-4 [&_blockquote]:border-l-4 [&_blockquote]:border-cyan-300/60 [&_blockquote]:bg-cyan-50/40 [&_blockquote]:py-1 [&_blockquote]:pl-3 [&_blockquote]:text-slate-600 [&_code]:rounded [&_code]:bg-slate-100 [&_code]:px-1.5 [&_strong]:text-slate-900 [&_p+p]:mt-4"
          v-html="bodyHtml"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.campus-bubble-rise {
  animation: campus-bubble-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes campus-bubble-rise {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.campus-morse-glow {
  animation: campus-morse-glow 4.2s ease-in-out infinite;
}

@keyframes campus-morse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 rgb(34 211 238 / 0);
  }
  50% {
    box-shadow: 0 0 18px rgb(34 211 238 / 0.08);
  }
}
</style>
