<template>
  <div class="page">
    <header class="bar">
      <router-link to="/" class="back">← 返回</router-link>
      <h1>新增曲目</h1>
    </header>
    <main class="form">
      <label class="field">
        <span>标题<i>*</i></span>
        <input v-model="title" placeholder="例：月光奏鸣曲 / Yesterday" />
      </label>
      <label class="field">
        <span>歌手 / 作者</span>
        <input v-model="artist" placeholder="例：Beatles / Beethoven" />
      </label>
      <label class="field">
        <span>分类</span>
        <input v-model="category" placeholder="例：流行 / 钢琴曲 / 练习曲" list="cat-list" />
        <datalist id="cat-list">
          <option value="钢琴曲" />
          <option value="流行" />
          <option value="练习曲" />
          <option value="古典" />
          <option value="爵士" />
        </datalist>
      </label>
      <label class="field">
        <span>歌词（LRC 格式最佳）</span>
        <textarea v-model="lyrics" rows="6" placeholder="[00:12.34]歌词第一行&#10;[00:18.50]歌词第二行" />
      </label>
      <label class="field">
        <span>笔记</span>
        <textarea v-model="notes" rows="3" placeholder="练琴心得、曲谱说明…" />
      </label>

      <p v-if="error" class="err">{{ error }}</p>

      <div class="actions">
        <button class="btn-primary" :disabled="saving || !title.trim()" @click="submit">
          {{ saving ? '创建中…' : '创建' }}
        </button>
      </div>

      <p class="tip">创建后进入编辑页给曲目挂 mp3 / 视频 / PDF / 谱子图片。</p>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { createPiece } from '../lib/api.js'

const router = useRouter()
const title = ref('')
const artist = ref('')
const category = ref('')
const lyrics = ref('')
const notes = ref('')
const saving = ref(false)
const error = ref('')

async function submit() {
  if (!title.value.trim()) return
  saving.value = true
  error.value = ''
  try {
    const r = await createPiece({
      title: title.value.trim(),
      artist: artist.value.trim() || null,
      category: category.value.trim() || null,
      lyrics: lyrics.value || null,
      notes: notes.value || null,
    })
    router.push({ name: 'edit', params: { id: r.id } })
  } catch (e) {
    error.value = e.message || String(e)
  } finally {
    saving.value = false
  }
}
</script>

<style scoped>
.page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-soft);
}
.bar h1 { font-size: 18px; font-weight: 600; }
.back { color: var(--text-dim); font-size: 14px; }
.back:hover { color: var(--accent); text-decoration: none; }

.form {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 22px 80px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field span {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.field span i { color: var(--accent-red); margin-left: 2px; font-style: normal; }
.field input, .field textarea {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  width: 100%;
}
.field input:focus, .field textarea:focus { border-color: var(--accent-strong); }
.field textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical;
  line-height: 1.5;
}

.err {
  background: rgba(239, 68, 68, 0.1);
  color: var(--accent-red);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
}

.actions { display: flex; gap: 12px; }
.btn-primary {
  background: var(--accent-strong);
  color: #fff;
  border-radius: 6px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { background: var(--accent); }
.btn-primary:active { transform: scale(0.98); }

.tip { font-size: 12px; color: var(--text-mute); }
</style>
