<script setup lang="ts">
import { computed, ref } from "vue";

import { useDemo } from "./app/useDemo";

const { appInfo, error, latestBeat, loading, pack, playerView } = useDemo();
const draft = ref("");

const sceneLabel = computed(() => {
  if (!playerView.value) return "载入场景";
  return `${playerView.value.sceneTitle} · ${pack.value?.displayName ?? ""}`;
});

function useSuggestion(suggestion: { draft: string }) {
  draft.value = suggestion.draft;
}
</script>

<template>
  <main class="app-shell">
    <header class="topbar">
      <div class="brand">
        <span class="brand-mark" aria-hidden="true">∞</span>
        <span>{{ appInfo?.name ?? "听娜娜讲故事" }}</span>
      </div>
      <div class="scene-label">{{ sceneLabel }}</div>
      <nav class="top-actions" aria-label="故事工具">
        <button type="button">持有物</button>
        <button type="button">关系</button>
        <button type="button">回溯</button>
      </nav>
    </header>

    <section v-if="loading" class="state-screen">正在载入故事……</section>
    <section v-else-if="error" class="state-screen state-screen--error">
      <strong>内容载入失败</strong>
      <span>{{ error }}</span>
    </section>

    <section v-else-if="playerView" class="stage">
      <div class="stage-sky" />
      <div class="station-sign">旧青川站</div>
      <div class="character" aria-label="娜娜">
        <div class="character-hair" />
        <div class="character-face">
          <i class="eye eye--left" />
          <i class="eye eye--right" />
          <i class="mouth" />
        </div>
        <div class="character-coat" />
      </div>

      <div class="chapter-chip">第一幕 · 雨夜车站</div>

      <article class="dialogue-panel">
        <div class="speaker-row">
          <strong>{{ latestBeat?.speaker ?? playerView.characterName }}</strong>
          <span>雨声很近，钟声还没有响。</span>
        </div>
        <p>{{ latestBeat?.text }}</p>
      </article>

      <div class="suggestions" aria-label="行动建议">
        <button
          v-for="suggestion in playerView.suggestions"
          :key="suggestion.id"
          type="button"
          @click="useSuggestion(suggestion)"
        >
          {{ suggestion.label }}
        </button>
      </div>

      <form class="composer" @submit.prevent>
        <textarea
          v-model="draft"
          aria-label="自由输入"
          placeholder="说些什么，或者描述你的行动……"
          rows="2"
        />
        <button class="continue-button" type="button">继续</button>
        <button class="send-button" type="submit" :disabled="draft.trim().length === 0">
          发送
        </button>
      </form>

      <footer class="statusline">
        <span>{{ playerView.nodeId }}</span>
        <span>{{ playerView.branchId }}</span>
        <span>关系与判定已隐藏</span>
      </footer>
    </section>
  </main>
</template>
