<script setup lang="ts">
import { computed } from 'vue'
import type { Memory } from '../api/client'
import { getStandardNepalTheme } from '../constants/nepalThemes'
import MangaSceneRouter from './standardScenes/MangaSceneRouter.vue'
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 halftoneClass = computed(() => {
  const busy = new Set([
    'indigo_ikea',
    'dawn_meet',
    'saffron_home',
    'blush_argue',
    'lotus_petal',
    'mandala_pink',
    'spiral_rose',
  ])
  return busy.has(props.memory.nepal_art_style)
    ? 'opacity-[0.14]'
    : 'opacity-[0.32]'
})

const tornPanelClass = computed(() => {
  const s = props.memory.nepal_art_style
  if (s === 'indigo_ikea') {
    return 'border-indigo-200/80 bg-white/95 shadow-[4px_5px_0_rgb(30,58,138,0.12)] ring-2 ring-indigo-100/40'
  }
  if (s === 'dawn_meet') {
    return 'border-amber-200/70 bg-white/92 shadow-[4px_5px_0_rgb(180,83,9,0.1)] ring-2 ring-amber-100/35'
  }
  if (s === 'saffron_home') {
    return 'border-amber-300/60 bg-white/93 shadow-[4px_5px_0_rgb(180,83,9,0.12)] ring-2 ring-orange-100/40'
  }
  if (s === 'mint_reconcile') {
    return 'border-emerald-200/70 bg-white/94 shadow-[3px_4px_0_rgb(5,150,105,0.1)] ring-2 ring-emerald-50/50'
  }
  return 'border-paper-shadow/60 ring-1 ring-lokta-deep/10'
})
</script>

<template>
  <div
    class="relative mx-auto max-w-lg overflow-hidden rounded-3xl bg-gradient-to-br px-3 py-8 sm:px-4"
    :class="theme.gradient"
  >
    <MangaSceneRouter
      class="absolute inset-0 z-0"
      :style-key="memory.nepal_art_style"
    />
    <div
      class="pointer-events-none absolute inset-2 z-[1] rounded-3xl mix-blend-multiply"
      :class="[theme.overlayClass, halftoneClass]"
      style="
        background-image: radial-gradient(circle at 20% 20%, rgb(196 92 106 / 0.2) 0 2px, transparent 3px),
          radial-gradient(circle at 80% 30%, rgb(78 196 212 / 0.18) 0 2px, transparent 3px),
          radial-gradient(circle at 50% 80%, rgb(30 53 80 / 0.12) 0 2px, transparent 3px);
        background-size: 28px 28px, 34px 34px, 22px 22px;
      "
      aria-hidden="true"
    />
    <div class="relative z-[2]">
      <PolaroidCard :memory="memory" :index="memory.story_order" />
      <div
        class="nepal-torn-panel mx-auto mt-8 max-w-md border bg-white/90 px-5 py-6 text-left shadow-lg backdrop-blur-[1px]"
        :class="tornPanelClass"
      >
        <h3 class="font-brush text-2xl text-lokta-deep">
          {{ memory.event_title }}
        </h3>
        <div
          class="mt-3 text-sm leading-relaxed text-ink [&_a]:text-rose-deep [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-rose-soft/50 [&_blockquote]:pl-3 [&_blockquote]:text-ink-muted [&_code]:rounded [&_code]:bg-paper-deep [&_code]:px-1 [&_strong]:text-ink"
          v-html="bodyHtml"
        />
      </div>
    </div>
  </div>
</template>
