<script setup lang="ts">
import { usePreferredReducedMotion } from '@vueuse/core'
import { computed, onBeforeUnmount, 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 callPhase = ref<'idle' | 'dialing' | 'connected'>('idle')
let connectTimer: ReturnType<typeof setTimeout> | undefined

const waveHeights = [18, 34, 24, 42, 28, 36, 20, 31]

const callTimeLabel = computed(() => {
  if (callPhase.value === 'idle') return '00:00'
  if (callPhase.value === 'dialing') return '00:07'
  return '20:00'
})

function startCall() {
  if (callPhase.value === 'connected') {
    callPhase.value = 'idle'
    return
  }
  if (connectTimer) clearTimeout(connectTimer)
  if (reduceMotion.value === 'reduce') {
    callPhase.value = 'connected'
    return
  }
  callPhase.value = 'dialing'
  connectTimer = setTimeout(() => {
    callPhase.value = 'connected'
    connectTimer = undefined
  }, 900)
}

onBeforeUnmount(() => {
  if (connectTimer) clearTimeout(connectTimer)
})
</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-12 top-12 h-44 w-44 rounded-full bg-cyan-400/15 blur-[3rem]"
      aria-hidden="true"
    />
    <div
      class="pointer-events-none absolute -right-10 bottom-8 h-52 w-52 rounded-full bg-violet-400/14 blur-[3.5rem]"
      aria-hidden="true"
    />

    <div
      class="relative z-[1] mx-auto mb-7 max-w-[min(100%,396px)] overflow-hidden rounded-[2rem] border border-slate-800/85 bg-[#080d18] shadow-[0_26px_60px_-18px_rgba(15,23,42,0.6)]"
    >
      <div
        class="pointer-events-none absolute inset-0 opacity-85"
        aria-hidden="true"
        style="
          background-image:
            radial-gradient(circle at 14% 16%, rgb(255 255 255 / 0.75) 0 1px, transparent 1.5px),
            radial-gradient(circle at 80% 18%, rgb(255 255 255 / 0.7) 0 1px, transparent 1.5px),
            radial-gradient(circle at 68% 40%, rgb(56 189 248 / 0.12) 0 2px, transparent 3px);
          background-size: 100px 100px, 120px 120px, 200px 200px;
        "
      />

      <div class="relative px-5 pb-5 pt-5 sm:px-6 sm:pb-6">
          <div class="flex items-start justify-between gap-4">
          <div>
            <p class="text-[10px] font-semibold uppercase tracking-[0.32em] text-cyan-300/68">
              First Call
            </p>
            <h3 class="mt-2 font-display-cn text-[1.9rem] leading-none text-white">
              第一次通电话
            </h3>
          </div>
          <div class="rounded-2xl border border-white/10 bg-white/6 px-3 py-2 text-right backdrop-blur-sm">
            <p class="text-[10px] font-semibold tracking-[0.2em] text-slate-300/78">
              通话时长
            </p>
            <p class="mt-1 font-mono text-2xl font-bold text-cyan-100">{{ callTimeLabel }}</p>
          </div>
        </div>

        <div class="mt-6 rounded-[1.8rem] border border-white/8 bg-gradient-to-b from-slate-900/95 to-slate-950 px-4 py-5 shadow-inner">
          <div class="flex items-center justify-between gap-3">
            <div class="flex items-center gap-3">
              <div class="flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-cyan-400 to-blue-600 text-lg font-bold text-white shadow-[0_10px_20px_rgba(14,165,233,0.28)]">
                我
              </div>
              <div>
                <p class="text-[11px] font-semibold uppercase tracking-[0.26em] text-cyan-200/65">
                  Connecting
                </p>
                <p class="mt-1 text-lg font-medium text-white">很温柔，很害羞</p>
              </div>
            </div>
            <div class="flex h-11 w-11 items-center justify-center rounded-full border border-rose-300/25 bg-rose-400/15 text-rose-100 shadow-[0_8px_16px_rgba(244,63,94,0.16)]">
              ♡
            </div>
          </div>

          <div class="mt-6 rounded-[1.4rem] border border-cyan-400/12 bg-black/18 px-4 py-4">
            <div class="flex items-end justify-center gap-2" aria-hidden="true">
              <span
                v-for="(h, i) in waveHeights"
                :key="`${h}-${i}`"
                class="call-wave block w-2 rounded-full bg-gradient-to-t from-cyan-500 via-sky-300 to-cyan-100"
                :class="[
                  reduceMotion === 'reduce' ? '' : `call-wave--${(i % 4) + 1}`,
                  callPhase === 'idle' ? 'opacity-45' : '',
                  callPhase === 'connected' ? 'brightness-110' : '',
                ]"
                :style="{ height: `${h}px` }"
              />
            </div>
            <p class="mt-3 text-center text-xs leading-relaxed text-slate-300/80">
              {{
                callPhase === 'idle'
                  ? '点一下拨通，第一次电话会从文字走进声音里。'
                  : callPhase === 'dialing'
                    ? '正在接通，心跳也跟着一起变快。'
                    : '第一次听见你的声音，原来文字之外，还有更柔软的那一层。'
              }}
            </p>
          </div>

          <div class="mt-5 grid gap-2 sm:grid-cols-3">
            <div
              v-for="tag in ['很温柔', '很害羞', '想帮到你']"
              :key="tag"
              class="rounded-2xl border border-white/8 bg-white/6 px-3 py-2 text-center text-[11px] font-medium text-slate-200/86"
            >
              {{ tag }}
            </div>
          </div>

          <div class="mt-4 flex justify-center">
            <button
              type="button"
              class="rounded-full border border-cyan-300/24 bg-cyan-400/10 px-4 py-2 text-xs font-semibold tracking-[0.18em] text-cyan-100 transition hover:bg-cyan-400/18"
              @click="startCall"
            >
              {{
                callPhase === 'idle'
                  ? '拨通这通电话'
                  : callPhase === 'dialing'
                    ? '接通中…'
                    : '再听一遍'
              }}
            </button>
          </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-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.2)] 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-cyan-400 to-violet-400" aria-hidden="true" />
        <div
          class="text-[15px] leading-[1.82] tracking-wide text-slate-800 [&_a]:font-bold [&_a]:text-cyan-700 [&_a]:underline [&_a]:underline-offset-4 [&_blockquote]:border-l-4 [&_blockquote]:border-violet-300/55 [&_blockquote]:bg-violet-50/45 [&_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>
.call-wave {
  transform-origin: center bottom;
}

.call-wave--1 {
  animation: call-wave-bounce 1.2s ease-in-out infinite;
}

.call-wave--2 {
  animation: call-wave-bounce 1.2s ease-in-out 0.15s infinite;
}

.call-wave--3 {
  animation: call-wave-bounce 1.2s ease-in-out 0.3s infinite;
}

.call-wave--4 {
  animation: call-wave-bounce 1.2s ease-in-out 0.45s infinite;
}

@keyframes call-wave-bounce {
  0%,
  100% {
    transform: scaleY(0.82);
    opacity: 0.7;
  }
  50% {
    transform: scaleY(1.12);
    opacity: 1;
  }
}
</style>
