<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 focusDetail = ref<'orange' | 'figure'>('orange')
</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-10 top-16 h-44 w-44 rounded-full bg-orange-300/20 blur-[3rem]"
      aria-hidden="true"
    />
    <div
      class="pointer-events-none absolute -right-10 bottom-8 h-52 w-52 rounded-full bg-blue-300/16 blur-[3.5rem]"
      aria-hidden="true"
    />

    <div
      class="relative z-[1] mx-auto mb-7 max-w-[min(100%,395px)] overflow-hidden rounded-[2rem] border border-slate-200/65 bg-[linear-gradient(180deg,#fffaf3_0%,#fff3dc_100%)] shadow-[0_24px_55px_-18px_rgba(180,83,9,0.22)]"
    >
      <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:pt-6">
        <div class="flex items-start justify-between gap-4">
          <div>
            <p class="text-[10px] font-semibold uppercase tracking-[0.3em] text-orange-700/65">
              Orange C / Desk Light
            </p>
            <h3 class="mt-2 font-display-cn text-[1.9rem] leading-none text-orange-950">
              瑞幸咖啡
            </h3>
          </div>
          <div
            class="rounded-2xl border border-orange-200/80 bg-white/88 px-3 py-2 text-right shadow-[0_8px_18px_rgba(249,115,22,0.14)]"
          >
            <p class="text-[9px] font-semibold tracking-[0.22em] text-orange-700/70">
              你记得
            </p>
            <p class="mt-1 font-brush text-xl text-orange-950">橙 C</p>
          </div>
        </div>

        <div class="mt-6 grid items-end gap-4 sm:grid-cols-[1.08fr_0.92fr]">
          <div class="relative h-[230px] rounded-[1.8rem] bg-gradient-to-b from-[#f7efe0] via-[#f2dcc2] to-[#ecd0ad] px-4 pb-4 pt-5 shadow-inner">
            <div
              class="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-orange-200/45 to-transparent"
              aria-hidden="true"
            />
            <div class="absolute left-5 top-3 h-4 w-24 rounded-full bg-white/65 blur-sm" aria-hidden="true" />

            <div class="relative mx-auto mt-2 flex w-[128px] flex-col items-center">
              <div
                class="coffee-steam absolute -top-7 left-4 h-12 w-10 rounded-full bg-white/55 blur-md"
                :class="reduceMotion === 'reduce' ? '' : 'coffee-steam--1'"
                aria-hidden="true"
              />
              <div
                class="coffee-steam absolute -top-9 right-4 h-14 w-10 rounded-full bg-white/45 blur-md"
                :class="reduceMotion === 'reduce' ? '' : 'coffee-steam--2'"
                aria-hidden="true"
              />
              <div class="relative h-12 w-[108px] rounded-t-[1.2rem] bg-[#0d6efe]" />
              <div class="relative -mt-1 h-[124px] w-[96px] overflow-hidden rounded-b-[1.4rem] rounded-t-[0.7rem] bg-white shadow-[0_10px_18px_rgba(15,23,42,0.12)] ring-1 ring-black/5">
                <div class="absolute inset-x-0 top-0 h-8 bg-[#0d6efe]" />
                <div class="absolute inset-x-0 top-8 flex justify-center">
                  <div class="flex h-14 w-14 items-center justify-center rounded-full bg-[#f8fafc] ring-1 ring-slate-200">
                    <div class="relative h-8 w-8 rounded-full bg-[#0d6efe]">
                      <div class="absolute right-0 top-1 h-3 w-4 rounded-full bg-orange-400" />
                    </div>
                  </div>
                </div>
                <p class="absolute bottom-5 left-1/2 -translate-x-1/2 font-mono text-[11px] font-bold tracking-[0.28em] text-slate-400">
                  ORANGE C
                </p>
              </div>
            </div>

            <div
              class="absolute bottom-5 left-1/2 w-[85%] -translate-x-1/2 rounded-[1.2rem] border border-white/70 bg-white/72 px-3 py-2 shadow-[0_10px_25px_rgba(255,255,255,0.45)] backdrop-blur-sm"
            >
              <div class="flex flex-wrap justify-center gap-2 text-[10px] font-semibold text-orange-800/80">
                <button
                  type="button"
                  class="rounded-full px-2.5 py-1 transition"
                  :class="focusDetail === 'orange' ? 'bg-orange-200 text-orange-950' : 'bg-orange-100 hover:bg-orange-150'"
                  @click="focusDetail = 'orange'"
                >
                  橙C
                </button>
                <button
                  type="button"
                  class="rounded-full px-2.5 py-1 transition"
                  :class="focusDetail === 'figure' ? 'bg-sky-200 text-sky-950' : 'bg-orange-100 hover:bg-orange-150'"
                  @click="focusDetail = 'figure'"
                >
                  灵笼
                </button>
                <span class="rounded-full bg-orange-100 px-2.5 py-1">咖啡</span>
              </div>
            </div>
          </div>

          <div class="space-y-4">
            <div
              class="rounded-[1.6rem] border border-orange-200/70 bg-white/90 p-4 shadow-[0_12px_26px_rgba(249,115,22,0.12)]"
            >
              <p class="text-[10px] font-semibold uppercase tracking-[0.26em] text-orange-700/60">
                Receipt
              </p>
              <div class="mt-3 space-y-2.5 text-sm text-slate-700">
                <button
                  type="button"
                  class="flex w-full items-center justify-between rounded-xl border-b border-dashed pb-2 text-left transition"
                  :class="focusDetail === 'figure' ? 'border-sky-200 bg-sky-50/70 px-2 pt-1 text-sky-900' : 'border-orange-200'"
                  @click="focusDetail = 'figure'"
                >
                  <span>桌角灵笼</span>
                  <span class="font-mono text-slate-500">noticed</span>
                </button>
                <button
                  type="button"
                  class="flex w-full items-center justify-between rounded-xl border-b border-dashed pb-2 text-left transition"
                  :class="focusDetail === 'orange' ? 'border-orange-200 bg-orange-50/70 px-2 pt-1 text-orange-950' : 'border-orange-200'"
                  @click="focusDetail = 'orange'"
                >
                  <span>橙 C 美式</span>
                  <span class="font-mono text-slate-500">remembered</span>
                </button>
                <div class="flex items-center justify-between">
                  <span>记住你的喜好</span>
                  <span class="font-brush text-xl text-orange-950">1 次</span>
                </div>
              </div>
            </div>

            <div
              class="relative overflow-hidden rounded-[1.6rem] border border-slate-200/70 px-4 py-4 shadow-[0_15px_30px_rgba(15,23,42,0.18)]"
              :class="focusDetail === 'orange' ? 'bg-slate-900 text-slate-100' : 'bg-sky-950 text-slate-100'"
            >
              <div class="absolute -right-8 -top-8 h-24 w-24 rounded-full blur-2xl" :class="focusDetail === 'orange' ? 'bg-blue-400/20' : 'bg-sky-300/20'" aria-hidden="true" />
              <p class="text-[10px] font-semibold uppercase tracking-[0.28em]" :class="focusDetail === 'orange' ? 'text-blue-200/65' : 'text-sky-200/70'">
                {{ focusDetail === 'orange' ? 'Orange C' : 'Desk Corner' }}
              </p>
              <p class="mt-2 text-sm leading-relaxed text-slate-200/88">
                {{
                  focusDetail === 'orange'
                    ? '你记住了我会点橙C。喜欢有时候不是轰轰烈烈，是被记住这一点点。'
                    : '你连桌角的小小“灵笼”都看见了。喜欢有时候不是一句话，是被认真注意到。'
                }}
              </p>
            </div>
          </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-orange-200/70 bg-gradient-to-b from-[#fffefa] to-orange-50/65 px-5 py-6 shadow-[0_16px_36px_-12px_rgba(180,83,9,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-orange-400 to-sky-400" aria-hidden="true" />
        <div
          class="text-[15px] leading-[1.82] tracking-wide text-orange-950/90 [&_a]:font-bold [&_a]:text-blue-700 [&_a]:underline [&_a]:underline-offset-4 [&_blockquote]:border-l-4 [&_blockquote]:border-orange-300/60 [&_blockquote]:bg-orange-50/55 [&_blockquote]:py-1 [&_blockquote]:pl-3 [&_blockquote]:text-orange-900/70 [&_code]:rounded [&_code]:bg-orange-100/50 [&_code]:px-1.5 [&_strong]:text-orange-950 [&_p+p]:mt-4"
          v-html="bodyHtml"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.coffee-steam {
  opacity: 0.7;
}

.coffee-steam--1 {
  animation: coffee-steam-rise 3.6s ease-in-out infinite;
}

.coffee-steam--2 {
  animation: coffee-steam-rise 3.6s ease-in-out 0.9s infinite;
}

@keyframes coffee-steam-rise {
  0%,
  100% {
    transform: translateY(0) scale(0.88);
    opacity: 0.35;
  }
  50% {
    transform: translateY(-8px) scale(1.06);
    opacity: 0.72;
  }
}
</style>
