<script setup lang="ts">
import { Heart, Send } from 'lucide-vue-next'
import { ref } from 'vue'
import { postMessage } from '../api/client'

const nickname = ref('')
const message = ref('')
const sending = ref(false)
const done = ref(false)
const error = ref<string | null>(null)

async function submit() {
  error.value = null
  const n = nickname.value.trim()
  const m = message.value.trim()
  if (!n || !m) {
    error.value = '请填写昵称和留言'
    return
  }
  sending.value = true
  try {
    await postMessage({ nickname: n, message: m })
    done.value = true
    nickname.value = ''
    message.value = ''
  } catch {
    error.value = '发送失败，请稍后再试'
  } finally {
    sending.value = false
  }
}
</script>

<template>
  <section
    class="relative mx-auto max-w-lg px-4 pb-28 pt-4 sm:px-6"
    aria-labelledby="guestbook-title"
  >
    <div class="nepal-brick-frame">
      <div
        class="relative rounded-2xl bg-gradient-to-b from-white/98 to-lokta-cream/40 p-6 ring-1 ring-lokta-deep/5 sm:p-8"
      >
      <div class="flex items-center gap-2 text-rose-deep">
        <Heart class="h-5 w-5" fill="currentColor" aria-hidden="true" />
        <h2 id="guestbook-title" class="font-brush text-3xl text-lokta-deep sm:text-4xl">
          给他的一句话
        </h2>
      </div>
      <p class="mt-2 text-sm text-ink-muted">
        写下手帐最后一页的悄悄话，会保存在服务器上。
      </p>
      <form class="mt-6 space-y-4" @submit.prevent="submit">
        <div>
          <label class="block text-xs font-medium text-ink-muted" for="nick">昵称</label>
          <input
            id="nick"
            v-model="nickname"
            maxlength="80"
            autocomplete="nickname"
            class="mt-1 w-full rounded-xl border border-paper-shadow bg-paper/80 px-4 py-3 text-ink shadow-inner outline-none ring-0 transition focus:border-rose-soft/60 focus:ring-2 focus:ring-rose-soft/25"
            placeholder="例如：你的小朋友"
          >
        </div>
        <div>
          <label class="block text-xs font-medium text-ink-muted" for="msg">留言</label>
          <textarea
            id="msg"
            v-model="message"
            rows="5"
            maxlength="2000"
            class="mt-1 w-full resize-y rounded-xl border border-paper-shadow bg-paper/80 px-4 py-3 text-ink shadow-inner outline-none transition focus:border-rose-soft/60 focus:ring-2 focus:ring-rose-soft/25"
            placeholder="写下你想说的话…，例如：谢谢你陪伴我度过了这么多美好的时光！"
          />
        </div>
        <p v-if="error" class="text-sm text-rose-deep">
          {{ error }}
        </p>
        <p v-if="done" class="text-sm text-ink-muted">
          已收到你的心意，谢谢你打开这一页。
        </p>
        <button
          type="submit"
          class="inline-flex w-full items-center justify-center gap-2 rounded-full bg-rose-soft px-5 py-3 text-sm font-semibold text-white shadow-md transition hover:bg-rose-deep disabled:cursor-not-allowed disabled:opacity-60"
          :disabled="sending"
        >
          <Send class="h-4 w-4" aria-hidden="true" />
          {{ sending ? '发送中…' : '寄出留言' }}
        </button>
      </form>
      </div>
    </div>
  </section>
</template>
