aigen/pages/prompt-builder.vue

<template>
  <div class="min-h-dvh min-w-0">
    <AppHeader subtitle="Prompt Builder" current="prompt-builder" />

    <main class="mx-auto grid min-w-0 max-w-7xl gap-6 px-4 py-6 sm:px-6 lg:grid-cols-[minmax(0,1fr)_minmax(18rem,22rem)]">
      <section class="glass min-w-0 max-w-full rounded-3xl p-5 sm:p-6 space-y-5">
        <div class="flex flex-wrap items-start justify-between gap-3">
          <div>
            <h2 class="font-display text-2xl font-bold">Prompt Builder</h2>
            <p class="mt-1 max-w-2xl text-sm text-zinc-400">
              Build multi-image prompt sequences. Copy the preview into Generate with Batch on — scenes split on the double blank line.
            </p>
          </div>
          <div class="flex flex-wrap items-center gap-2">
            <button
              type="button"
              class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
              @click="startNew"
            >
              New
            </button>
            <button
              type="button"
              class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
              :disabled="busy || !name.trim()"
              @click="save"
            >
              {{ busy === 'save' ? 'Saving…' : selectedId ? 'Save' : 'Save sequence' }}
            </button>
          </div>
        </div>

        <p v-if="error" class="rounded-2xl border border-red-400/30 bg-red-400/10 px-4 py-3 text-sm text-red-200">{{ error }}</p>
        <p v-else-if="notice" class="rounded-2xl border border-amber-300/30 bg-amber-400/10 px-4 py-3 text-sm text-amber-100">{{ notice }}</p>

        <label class="block text-sm">
          <span class="mb-1 block font-medium text-zinc-300">Sequence name</span>
          <input
            v-model="name"
            class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
            maxlength="80"
            placeholder="e.g. Badge set A"
          >
          <p class="mt-1 text-[11px] text-zinc-500">Save key only — never copied into the prompt text.</p>
        </label>

        <div class="space-y-3">
          <div>
            <span class="text-sm font-medium text-zinc-300">Prompt order</span>
            <p class="text-[11px] text-zinc-500">Drag to reorder, or use the arrows. Copied text and the scene editor follow this order.</p>
          </div>
          <div class="space-y-2">
            <div
              v-for="(key, index) in sectionOrder"
              :key="key"
              class="flex items-center gap-2 rounded-2xl border border-white/10 bg-zinc-950/40 px-3 py-2"
              draggable="true"
              @dragstart="onSectionDragStart(index, $event)"
              @dragover.prevent="onSectionDragOver($event)"
              @drop.prevent="onSectionDrop(index)"
            >
              <span class="cursor-grab select-none text-zinc-500 active:cursor-grabbing" title="Drag to reorder">⠿</span>
              <span class="min-w-0 flex-1 text-sm text-zinc-200">{{ sectionLabel(key) }}</span>
              <button
                type="button"
                class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10 disabled:cursor-not-allowed disabled:opacity-40"
                title="Move up"
                :disabled="index === 0"
                @click="moveSection(index, -1)"
              >
                ↑
              </button>
              <button
                type="button"
                class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10 disabled:cursor-not-allowed disabled:opacity-40"
                title="Move down"
                :disabled="index >= sectionOrder.length - 1"
                @click="moveSection(index, 1)"
              >
                ↓
              </button>
            </div>
          </div>
        </div>

        <div class="space-y-3">
          <div class="flex flex-wrap items-center justify-between gap-2">
            <div>
              <span class="text-sm font-medium text-zinc-300">Characters</span>
              <p class="text-[11px] text-zinc-500">Sequence-wide. Toggle and outfit per scene below.</p>
            </div>
            <button
              type="button"
              class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
              @click="addCharacter"
            >
              Add character
            </button>
          </div>
          <div
            v-for="(character, cIndex) in characters"
            :key="character.id"
            class="rounded-2xl border border-white/10 bg-zinc-950/40 p-3 space-y-3"
          >
            <div class="flex items-center justify-between gap-2">
              <span class="text-[11px] uppercase tracking-wide text-zinc-500">Character {{ cIndex + 1 }}</span>
              <div class="flex items-center gap-2">
                <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="clearCharacter(cIndex)">Clear</button>
                <button
                  v-if="characters.length > 1"
                  type="button"
                  class="rounded-full border border-amber-300/70 px-3 min-h-11 py-2 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10"
                  @click="removeCharacter(cIndex)"
                >
                  Remove
                </button>
              </div>
            </div>
            <label class="block text-sm">
              <input
                v-model="character.name"
                class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
                maxlength="120"
                placeholder="Name"
              >
              <p class="mt-1 text-[11px] text-zinc-500">Copied as “Name: …” when this character is on.</p>
            </label>
            <label class="block text-sm">
              <span class="mb-1 block text-[11px] text-zinc-500">Base description</span>
              <textarea
                v-model="character.description"
                rows="2"
                class="w-full rounded-xl border border-white/10 bg-zinc-950/70 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
                placeholder="Base description (always included when in frame; no face tokens)"
              />
            </label>
            <div class="space-y-2 border-t border-white/5 pt-3">
              <div class="flex flex-wrap items-center justify-between gap-2">
                <div>
                  <span class="text-[11px] font-medium uppercase tracking-wide text-zinc-500">Features</span>
                  <p class="text-[11px] text-zinc-500">Dropped when the camera facing cannot see them.</p>
                </div>
                <button
                  type="button"
                  class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
                  @click="addFeature(cIndex)"
                >
                  Add feature
                </button>
              </div>
              <p v-if="!(character.features || []).length" class="text-[11px] text-zinc-600">No features yet.</p>
              <div
                v-for="(feature, featIndex) in (character.features || [])"
                :key="feature.id"
                class="rounded-xl border border-white/5 bg-zinc-950/50 p-2 space-y-2"
              >
                <div class="flex flex-wrap items-center gap-2">
                  <label class="flex items-center gap-2 text-sm text-zinc-300">
                    <input v-model="feature.enabled" type="checkbox" class="accent-amber-400">
                    <span class="text-[11px] text-zinc-500">On</span>
                  </label>
                  <input
                    v-model="feature.text"
                    class="min-w-0 flex-1 rounded-lg border border-white/10 bg-zinc-950 px-2.5 py-1.5 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
                    placeholder="Feature text"
                  >
                  <select
                    class="rounded-lg border border-white/10 bg-zinc-950 px-2.5 py-1.5 text-sm text-zinc-200 outline-none ring-amber-300/40 focus:ring-2"
                    :value="feature.group"
                    @change="setFeatureGroup(cIndex, featIndex, ($event.target as HTMLSelectElement).value)"
                  >
                    <option v-for="group in PROMPT_SEQUENCE_FEATURE_GROUPS" :key="group" :value="group">
                      {{ group }}
                    </option>
                  </select>
                </div>
                <div class="flex flex-wrap gap-1.5">
                  <button
                    v-for="chip in visibilityChipKeys"
                    :key="chip"
                    type="button"
                    class="rounded-full px-2.5 min-h-9 py-1 text-[11px] font-semibold transition"
                    :class="isVisibilityChipActive(feature, chip)
                      ? 'bg-amber-400/15 text-amber-100 ring-1 ring-amber-300/40'
                      : 'border border-white/15 text-zinc-400 hover:border-white/30 hover:text-zinc-200'"
                    @click="toggleVisibilityChip(feature, chip)"
                  >
                    {{ chip }}
                  </button>
                </div>
                <div class="flex items-center gap-2">
                  <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="clearFeature(cIndex, featIndex)">Clear</button>
                  <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-2 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="removeFeature(cIndex, featIndex)">Remove</button>
                </div>
              </div>
            </div>
            <div class="space-y-2 border-t border-white/5 pt-3">
              <div class="flex flex-wrap items-center justify-between gap-2">
                <span class="text-[11px] font-medium uppercase tracking-wide text-zinc-500">Outfits</span>
                <button
                  type="button"
                  class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
                  @click="addOutfit(cIndex)"
                >
                  Add outfit
                </button>
              </div>
              <p v-if="!character.outfits.length" class="text-[11px] text-zinc-600">No outfits yet.</p>
              <div
                v-for="(outfit, oIndex) in character.outfits"
                :key="outfit.id"
                class="rounded-xl border border-white/5 bg-zinc-950/50 p-2 space-y-2"
              >
                <div class="flex items-center justify-between gap-2">
                  <span class="text-[11px] text-zinc-500">Outfit {{ oIndex + 1 }}</span>
                  <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-2 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="removeOutfit(cIndex, oIndex)">Remove</button>
                </div>
                <input
                  v-model="outfit.name"
                  class="w-full rounded-lg border border-white/10 bg-zinc-950 px-2.5 py-1.5 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
                  maxlength="120"
                  placeholder="Outfit name"
                >
                <textarea
                  v-model="outfit.description"
                  rows="2"
                  class="w-full rounded-lg border border-white/10 bg-zinc-950/70 px-2.5 py-1.5 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
                  placeholder="What they are wearing"
                />
              </div>
            </div>
          </div>
        </div>

        <div class="space-y-3">
          <div class="flex flex-wrap items-center justify-between gap-2">
            <div>
              <span class="text-sm font-medium text-zinc-300">Sets</span>
              <p class="text-[11px] text-zinc-500">Sequence-wide locations and props. Toggle and framing per scene below.</p>
            </div>
            <button
              type="button"
              class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
              @click="addSet"
            >
              Add set
            </button>
          </div>
          <p v-if="!sets.length" class="text-[11px] text-zinc-600">No sets yet.</p>
          <div
            v-for="(set, sIndex) in sets"
            :key="set.id"
            class="rounded-2xl border border-white/10 bg-zinc-950/40 p-3 space-y-3"
          >
            <div class="flex items-center justify-between gap-2">
              <span class="text-[11px] uppercase tracking-wide text-zinc-500">Set {{ sIndex + 1 }}</span>
              <div class="flex items-center gap-2">
                <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="clearSet(sIndex)">Clear</button>
                <button
                  type="button"
                  class="rounded-full border border-amber-300/70 px-3 min-h-11 py-2 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10"
                  @click="removeSet(sIndex)"
                >
                  Remove
                </button>
              </div>
            </div>
            <label class="block text-sm">
              <input
                v-model="set.name"
                class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
                maxlength="120"
                placeholder="Name"
              >
              <p class="mt-1 text-[11px] text-zinc-500">Label only — not copied into the prompt.</p>
            </label>
            <div class="space-y-2 border-t border-white/5 pt-3">
              <div class="flex flex-wrap items-center justify-between gap-2">
                <span class="text-[11px] font-medium uppercase tracking-wide text-zinc-500">Framings</span>
                <button
                  type="button"
                  class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
                  @click="addFraming(sIndex)"
                >
                  Add framing
                </button>
              </div>
              <div
                v-for="(framing, fIndex) in set.framings"
                :key="framing.id"
                class="rounded-xl border border-white/5 bg-zinc-950/50 p-2 space-y-2"
              >
                <div class="flex items-center justify-between gap-2">
                  <span class="text-[11px] text-zinc-500">Framing {{ fIndex + 1 }}</span>
                  <div class="flex items-center gap-2">
                    <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="clearFraming(sIndex, fIndex)">Clear</button>
                    <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-2 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="removeFraming(sIndex, fIndex)">Remove</button>
                  </div>
                </div>
                <input
                  v-model="framing.label"
                  class="w-full rounded-lg border border-white/10 bg-zinc-950 px-2.5 py-1.5 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
                  maxlength="120"
                  :placeholder="framingLabelPlaceholder(fIndex)"
                >
                <textarea
                  v-model="framing.text"
                  rows="2"
                  class="w-full rounded-lg border border-white/10 bg-zinc-950/70 px-2.5 py-1.5 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
                  placeholder="Place / location text copied into the prompt"
                />
                <label class="block text-[11px] text-zinc-500">
                  Character facing
                  <select
                    class="mt-1 w-full rounded-lg border border-white/10 bg-zinc-950 px-2.5 py-1.5 text-sm text-zinc-200 outline-none ring-amber-300/40 focus:ring-2"
                    :value="framing.facing || 'toward'"
                    @change="framing.facing = (($event.target as HTMLSelectElement).value as typeof framing.facing) || 'toward'"
                  >
                    <option v-for="facing in PROMPT_SEQUENCE_FACINGS" :key="facing" :value="facing">
                      {{ facing }}
                    </option>
                  </select>
                </label>
                <div
                  v-for="preview in [framingPreview(framing)]"
                  :key="'framing-preview-' + framing.id"
                  class="rounded-lg border border-white/5 bg-zinc-950/70 px-2.5 py-2 space-y-1.5"
                >
                  <span class="text-[11px] font-medium uppercase tracking-wide text-zinc-500">Framing preview</span>
                  <pre class="whitespace-pre-wrap text-xs text-zinc-300 [overflow-wrap:anywhere]">{{ preview.text || '—' }}</pre>
                  <div v-if="preview.ignoredBangs.length" class="text-[11px] text-zinc-500">
                    Ignored bangs:
                    <span class="text-zinc-400">{{ preview.ignoredBangs.join(', ') }}</span>
                  </div>
                  <div v-if="preview.omittedFeatures.length" class="space-y-0.5">
                    <span class="text-[11px] text-zinc-500">Omitted (camera):</span>
                    <p
                      v-for="item in preview.omittedFeatures"
                      :key="item.id"
                      class="text-[11px] text-zinc-500 line-through"
                    >
                      {{ item.text || '(empty feature)' }} — camera
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="flex flex-wrap items-center gap-2 border-b border-white/10 pb-2">
          <button
            v-for="(scene, index) in scenes"
            :key="scene.id"
            type="button"
            class="rounded-full px-3 py-1.5 text-xs transition"
            :class="index === activeIndex
              ? 'min-h-11 bg-amber-400/15 px-3 py-2 text-sm font-semibold text-amber-100 ring-1 ring-amber-300/40'
              : 'min-h-11 border border-white/25 px-3 py-2 text-sm font-semibold text-zinc-300 hover:bg-white/5 hover:text-zinc-100'"
            @click="activeIndex = index"
          >
            {{ scene.title || `Scene ${index + 1}` }}
          </button>
          <button
            type="button"
            class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
            @click="addNextScene"
          >
            Next scene
          </button>
          <button
            type="button"
            class="rounded-full border border-amber-300/70 px-4 min-h-11 py-2.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10 disabled:cursor-not-allowed disabled:opacity-40"
            title="Move scene earlier"
            :disabled="activeIndex <= 0"
            @click="moveScene(activeIndex, -1)"
          >
            ←
          </button>
          <button
            type="button"
            class="rounded-full border border-amber-300/70 px-4 min-h-11 py-2.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10 disabled:cursor-not-allowed disabled:opacity-40"
            title="Move scene later"
            :disabled="activeIndex >= scenes.length - 1"
            @click="moveScene(activeIndex, 1)"
          >
            →
          </button>
          <button
            type="button"
            class="rounded-full border border-amber-300/70 px-4 min-h-11 py-2.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10 disabled:cursor-not-allowed disabled:opacity-40"
            :disabled="scenes.length <= 1"
            @click="deleteScene(activeIndex)"
          >
            Delete scene
          </button>
        </div>

        <div v-if="activeScene" class="space-y-4">
          <label class="block text-sm">
            <span class="mb-1 flex items-center justify-between gap-2 font-medium text-zinc-300">
              Scene tab name
              <span class="text-[11px] font-normal text-zinc-500">optional</span>
            </span>
            <input
              v-model="activeScene.title"
              class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
              maxlength="60"
              :placeholder="`Scene ${activeIndex + 1}`"
            >
          </label>

          <template v-for="sectionKey in sectionOrder" :key="'scene-section-' + sectionKey">
            <div v-if="sectionKey === 'style'" class="space-y-1">
              <div class="flex items-center justify-between gap-2">
                <span class="text-sm font-medium text-zinc-300">Style</span>
                <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="activeScene.style = ''">Clear</button>
              </div>
              <textarea
                v-model="activeScene.style"
                rows="3"
                class="w-full rounded-2xl border border-white/10 bg-zinc-950/70 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
                placeholder="Visual style for this image"
              />
            </div>

            <div v-else-if="sectionKey === 'settings'" class="space-y-1">
              <div class="flex items-center justify-between gap-2">
                <span class="text-sm font-medium text-zinc-300">Settings</span>
                <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="activeScene.settings = ''">Clear</button>
              </div>
              <textarea
                v-model="activeScene.settings"
                rows="3"
                class="w-full rounded-2xl border border-white/10 bg-zinc-950/70 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
                placeholder="Lighting, framing, technical notes"
              />
            </div>

            <div v-else-if="sectionKey === 'set' && sets.length" class="space-y-3">
              <div>
                <span class="text-sm font-medium text-zinc-300">Sets in this scene</span>
                <p class="text-[11px] text-zinc-500">Toggle which set blocks appear. Pick a framing for each on set.</p>
              </div>
              <div
                v-for="set in sets"
                :key="'scene-set-'+set.id"
                class="rounded-2xl border border-white/10 bg-zinc-950/40 px-3 py-2.5 space-y-2"
              >
                <label class="flex items-center justify-between gap-3 text-sm text-zinc-200">
                  <span class="min-w-0 truncate">{{ set.name || 'Unnamed set' }}</span>
                  <input
                    type="checkbox"
                    class="accent-amber-400"
                    :checked="isSetOn(set.id)"
                    @change="setSetOn(set.id, ($event.target as HTMLInputElement).checked)"
                  >
                </label>
                <label v-if="isSetOn(set.id)" class="block text-[11px] text-zinc-500">
                  Framing
                  <select
                    class="mt-1 w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm text-zinc-200 outline-none ring-amber-300/40 focus:ring-2"
                    :value="activeSetFramingId(set.id) || ''"
                    @change="setSetFraming(set.id, ($event.target as HTMLSelectElement).value)"
                  >
                    <option value="">None</option>
                    <option v-for="framing in set.framings" :key="framing.id" :value="framing.id">
                      {{ framing.label || 'Untitled framing' }}
                    </option>
                  </select>
                </label>
              </div>
            </div>

            <div v-else-if="sectionKey === 'characters'" class="space-y-3">
              <div>
                <span class="text-sm font-medium text-zinc-300">In this scene</span>
                <p class="text-[11px] text-zinc-500">Toggle who appears. Pick an outfit for each on character.</p>
              </div>
              <div
                v-for="character in characters"
                :key="'scene-'+character.id"
                class="rounded-2xl border border-white/10 bg-zinc-950/40 px-3 py-2.5 space-y-2"
              >
                <label class="flex items-center justify-between gap-3 text-sm text-zinc-200">
                  <span class="min-w-0 truncate">{{ character.name || 'Unnamed character' }}</span>
                  <input
                    type="checkbox"
                    class="accent-amber-400"
                    :checked="isCharacterOn(character.id)"
                    @change="setCharacterOn(character.id, ($event.target as HTMLInputElement).checked)"
                  >
                </label>
                <label v-if="isCharacterOn(character.id)" class="block text-[11px] text-zinc-500">
                  Outfit
                  <select
                    class="mt-1 w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm text-zinc-200 outline-none ring-amber-300/40 focus:ring-2"
                    :value="activeOutfitId(character.id) || ''"
                    @change="setCharacterOutfit(character.id, ($event.target as HTMLSelectElement).value)"
                  >
                    <option value="">None</option>
                    <option v-for="outfit in character.outfits" :key="outfit.id" :value="outfit.id">
                      {{ outfit.name || 'Untitled outfit' }}
                    </option>
                  </select>
                </label>
              </div>
            </div>

            <div v-else-if="sectionKey === 'prompt'" class="space-y-1">
              <div class="flex items-center justify-between gap-2">
                <span class="text-sm font-medium text-zinc-300">Prompt</span>
                <button type="button" class="rounded-full border border-amber-300/70 px-3 min-h-11 py-1.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10" @click="activeScene.prompt = ''">Clear</button>
              </div>
              <textarea
                v-model="activeScene.prompt"
                rows="5"
                class="w-full rounded-2xl border border-white/10 bg-zinc-950/70 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
                placeholder="What happens in this image"
              />
            </div>
          </template>
        </div>

        <section class="rounded-2xl border border-white/10 bg-zinc-950/30">
          <div class="flex flex-wrap items-center justify-between gap-2 border-b border-white/5 px-4 py-3">
            <div>
              <h3 class="text-sm font-medium text-zinc-200">Preview</h3>
              <p class="text-[11px] text-zinc-500">Assembled text ready to copy. Sequence name is omitted.</p>
            </div>
            <div class="flex items-center gap-2">
              <button
                type="button"
                class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
                :disabled="!activeSceneText"
                @click="copyScene"
              >
                {{ copiedScene ? 'Scene copied' : 'Copy scene' }}
              </button>
              <button
                type="button"
                class="rounded-full bg-amber-400 px-4 min-h-11 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
                :disabled="!previewText"
                @click="copyPreview"
              >
                {{ copied ? 'Copied' : 'Copy' }}
              </button>
              <button
                type="button"
                class="rounded-full border border-amber-300/70 px-4 min-h-11 py-2.5 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10 disabled:cursor-not-allowed disabled:opacity-40"
                @click="previewOpen = !previewOpen"
              >
                {{ previewOpen ? 'Hide' : 'Show' }}
              </button>
            </div>
          </div>
          <pre
            v-if="previewOpen"
            class="max-h-[min(28rem,50vh)] overflow-auto whitespace-pre-wrap px-4 py-3 text-xs text-zinc-300 [overflow-wrap:anywhere]"
          >{{ previewText || 'Fill a scene to see the assembled prompt.' }}</pre>
          <div
            v-if="previewOpen && (activeSceneIgnoredBangs.length || activeSceneOmittedFeatures.length)"
            class="space-y-1.5 border-t border-white/5 px-4 py-3"
          >
            <div v-if="activeSceneIgnoredBangs.length" class="text-[11px] text-zinc-500">
              Ignored bangs:
              <span class="text-zinc-400">{{ activeSceneIgnoredBangs.join(', ') }}</span>
            </div>
            <div v-if="activeSceneOmittedFeatures.length" class="space-y-0.5">
              <span class="text-[11px] text-zinc-500">Omitted (camera):</span>
              <p
                v-for="item in activeSceneOmittedFeatures"
                :key="item.id"
                class="text-[11px] text-zinc-500 line-through"
              >
                {{ item.text || '(empty feature)' }} — camera
              </p>
            </div>
          </div>
        </section>
      </section>

      <aside class="min-w-0 space-y-4">
        <section class="glass rounded-3xl p-5 sm:p-6">
          <h3 class="font-display text-lg font-bold">Saved sequences</h3>
          <p class="mt-1 text-xs text-zinc-500">Stored with your other library data. Open one to edit.</p>
          <p v-if="!sequences.length" class="mt-4 rounded-2xl border border-white/5 bg-zinc-950/40 px-4 py-6 text-center text-sm text-zinc-500">
            Nothing saved yet.
          </p>
          <div v-else class="mt-4 space-y-2">
            <button
              v-for="sequence in sequences"
              :key="sequence.id"
              type="button"
              class="w-full rounded-2xl border p-3 text-left transition"
              :class="sequence.id === selectedId
                ? 'border-amber-300/30 bg-amber-400/5'
                : 'border-white/5 bg-zinc-950/40 hover:border-white/15'"
              @click="select(sequence)"
            >
              <div class="flex items-start justify-between gap-2">
                <div class="min-w-0">
                  <p class="truncate text-sm font-medium text-zinc-100">{{ sequence.name }}</p>
                  <p class="mt-0.5 text-[11px] text-zinc-500">
                    {{ sequence.scenes?.length || 0 }} scene{{ (sequence.scenes?.length || 0) === 1 ? '' : 's' }}
                    · {{ sequence.characters?.length || 0 }} character{{ (sequence.characters?.length || 0) === 1 ? '' : 's' }}
                  </p>
                </div>
                <button
                  type="button"
                  class="rounded-full border border-amber-300/70 px-3 min-h-11 py-2 text-sm font-semibold text-amber-100 hover:border-amber-300 hover:bg-amber-400/10"
                  @click.stop="remove(sequence)"
                >
                  Delete
                </button>
              </div>
            </button>
          </div>
        </section>
      </aside>
    </main>
  </div>
</template>

<script setup lang="ts">
import type {
  PromptSequence,
  PromptSequenceCharacter,
  PromptSequenceFacing,
  PromptSequenceFeature,
  PromptSequenceFraming,
  PromptSequenceScene,
  PromptSequenceSectionKey,
  PromptSequenceSet
} from '~/utils/promptSequences'
import {
  DEFAULT_FEATURE_VISIBILITY,
  DEFAULT_PROMPT_SEQUENCE_SECTION_ORDER,
  PROMPT_SEQUENCE_FACINGS,
  PROMPT_SEQUENCE_FEATURE_GROUPS,
  PROMPT_SEQUENCE_FRAMING_SUGGESTIONS,
  assembleSceneText,
  assembleSequenceText,
  cloneSceneForNext,
  compileCharacterForFacing,
  defaultVisibilityForGroup,
  emptyCharacter,
  emptyFeature,
  emptyFraming,
  emptyOutfit,
  emptyScene,
  emptySet,
  ensureSceneStatesForCharacters,
  ensureSceneStatesForSets,
  extractBangPhrases,
  normalizePromptSequence,
  normalizeSectionOrder,
  resolveSceneFacing,
  stripBangs
} from '~/utils/promptSequences'

useHead({ title: 'Prompt Builder' })

const SECTION_LABELS: Record<PromptSequenceSectionKey, string> = {
  style: 'Style',
  settings: 'Settings',
  set: 'Set',
  characters: 'Characters',
  prompt: 'Prompt'
}

type VisibilityChipKey = PromptSequenceFacing | 'any'

const visibilityChipKeys: VisibilityChipKey[] = [...PROMPT_SEQUENCE_FACINGS, 'any']

const sequences = ref<PromptSequence[]>([])
const selectedId = ref('')
const name = ref('')
const sectionOrder = ref<PromptSequenceSectionKey[]>([...DEFAULT_PROMPT_SEQUENCE_SECTION_ORDER])
const characters = ref<PromptSequenceCharacter[]>([emptyCharacter()])
const sets = ref<PromptSequenceSet[]>([])
const scenes = ref<PromptSequenceScene[]>([emptyScene(1, characters.value, sets.value)])
const activeIndex = ref(0)
const previewOpen = ref(true)
const busy = ref('')
const error = ref('')
const notice = ref('')
const copied = ref(false)
const copiedScene = ref(false)
let copyTimer: ReturnType<typeof setTimeout> | null = null
let copySceneTimer: ReturnType<typeof setTimeout> | null = null
let dragSectionIndex: number | null = null

const activeScene = computed(() => scenes.value[activeIndex.value] || null)
const previewText = computed(() => assembleSequenceText({
  sectionOrder: sectionOrder.value,
  characters: characters.value,
  sets: sets.value,
  scenes: scenes.value
}))
const activeSceneText = computed(() => {
  if (!activeScene.value) return ''
  return assembleSceneText(activeScene.value, characters.value, sets.value, sectionOrder.value)
})

type FramingPreviewResult = {
  text: string
  ignoredBangs: string[]
  omittedFeatures: Array<{ id: string; text: string; reason: 'camera' }>
}

function buildFramingPreview(
  framing: PromptSequenceFraming,
  opts?: { characters?: PromptSequenceCharacter[]; characterStates?: PromptSequenceScene['characterStates'] }
): FramingPreviewResult {
  const facing = (framing.facing || 'toward') as PromptSequenceFacing
  const previewCharacters = opts?.characters || characters.value
  const stateById = new Map((opts?.characterStates || []).map(state => [state.characterId, state]))
  const onCharacters = opts?.characterStates
    ? previewCharacters.filter((character) => {
      const state = stateById.get(character.id)
      return state ? !!state.on : true
    })
    : previewCharacters
  const framingClean = stripBangs(String(framing.text || ''))
  const compiled = onCharacters.map(character => compileCharacterForFacing(character, facing))
  const text = [framingClean, ...compiled.map(item => item.text).filter(Boolean)].filter(Boolean).join('\n')
  const ignoredBangs = [
    ...extractBangPhrases(String(framing.text || '')),
    ...compiled.flatMap(item => item.ignoredBangs || [])
  ]
  const omittedFeatures = compiled.flatMap(item => item.omittedFeatures || [])
  return { text, ignoredBangs, omittedFeatures }
}

function framingPreview(framing: PromptSequenceFraming) {
  return buildFramingPreview(framing)
}

const activeSceneDiagnostics = computed(() => {
  if (!activeScene.value) {
    return { ignoredBangs: [] as string[], omittedFeatures: [] as Array<{ id: string; text: string; reason: 'camera' }> }
  }
  const facing = resolveSceneFacing(activeScene.value, sets.value)
  const onCharacters = characters.value.filter((character) => {
    const state = activeScene.value?.characterStates?.find(item => item.characterId === character.id)
    return state ? !!state.on : true
  })
  const ignoredBangs = new Set<string>()
  const omittedFeatures: Array<{ id: string; text: string; reason: 'camera' }> = []
  for (const set of sets.value) {
    const state = activeScene.value.setStates?.find(item => item.setId === set.id)
    if (state && !state.on) continue
    const framing = (set.framings || []).find(item => item.id === state?.framingId)
    if (!framing) continue
    for (const bang of extractBangPhrases(String(framing.text || ''))) ignoredBangs.add(bang)
  }
  for (const character of onCharacters) {
    const compiled = compileCharacterForFacing(character, facing as PromptSequenceFacing)
    for (const bang of compiled.ignoredBangs || []) ignoredBangs.add(bang)
    omittedFeatures.push(...(compiled.omittedFeatures || []))
  }
  for (const bang of extractBangPhrases(String(activeScene.value.style || ''))) ignoredBangs.add(bang)
  for (const bang of extractBangPhrases(String(activeScene.value.settings || ''))) ignoredBangs.add(bang)
  for (const bang of extractBangPhrases(String(activeScene.value.prompt || ''))) ignoredBangs.add(bang)
  return { ignoredBangs: [...ignoredBangs], omittedFeatures }
})

const activeSceneIgnoredBangs = computed(() => activeSceneDiagnostics.value.ignoredBangs)
const activeSceneOmittedFeatures = computed(() => activeSceneDiagnostics.value.omittedFeatures)

function sectionLabel(key: PromptSequenceSectionKey) {
  return SECTION_LABELS[key] || key
}

function moveSection(index: number, delta: number) {
  const next = index + delta
  if (next < 0 || next >= sectionOrder.value.length) return
  const copy = [...sectionOrder.value]
  const [item] = copy.splice(index, 1)
  copy.splice(next, 0, item)
  sectionOrder.value = copy
}

function onSectionDragStart(index: number, event: DragEvent) {
  dragSectionIndex = index
  event.dataTransfer?.setData('text/plain', String(index))
  if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'
}

function onSectionDragOver(event: DragEvent) {
  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
}

function onSectionDrop(index: number) {
  if (dragSectionIndex == null || dragSectionIndex === index) {
    dragSectionIndex = null
    return
  }
  const copy = [...sectionOrder.value]
  const [item] = copy.splice(dragSectionIndex, 1)
  copy.splice(index, 0, item)
  sectionOrder.value = copy
  dragSectionIndex = null
}

function framingLabelPlaceholder(index: number) {
  const suggestion = PROMPT_SEQUENCE_FRAMING_SUGGESTIONS[index % PROMPT_SEQUENCE_FRAMING_SUGGESTIONS.length]
  return suggestion || 'wide / medium / narrow'
}

function startNew() {
  selectedId.value = ''
  name.value = ''
  sectionOrder.value = [...DEFAULT_PROMPT_SEQUENCE_SECTION_ORDER]
  characters.value = [emptyCharacter()]
  sets.value = []
  scenes.value = [emptyScene(1, characters.value, sets.value)]
  activeIndex.value = 0
  error.value = ''
  notice.value = ''
}

function select(sequence: PromptSequence) {
  const normalized = normalizePromptSequence(sequence) || sequence
  selectedId.value = normalized.id
  name.value = normalized.name
  sectionOrder.value = normalizeSectionOrder(normalized.sectionOrder)
  characters.value = (normalized.characters?.length ? normalized.characters : [emptyCharacter()]).map(character => ({
    ...emptyCharacter(),
    ...character,
    features: (character.features || []).map((feature) => {
      const group = feature.group || emptyFeature().group
      const fallbackVisibility = defaultVisibilityForGroup(group)
        || [...(DEFAULT_FEATURE_VISIBILITY[group] || [])]
      return {
        ...emptyFeature(),
        ...feature,
        group,
        visibility: Array.isArray(feature.visibility) && feature.visibility.length
          ? [...feature.visibility]
          : [...fallbackVisibility]
      }
    }),
    outfits: (character.outfits || []).map(outfit => ({ ...emptyOutfit(), ...outfit }))
  }))
  sets.value = (normalized.sets || []).map(set => ({
    ...emptySet(),
    ...set,
    framings: (set.framings?.length ? set.framings : [emptyFraming()]).map(framing => ({
      ...emptyFraming(),
      ...framing,
      facing: framing.facing || 'toward'
    }))
  }))
  scenes.value = (normalized.scenes?.length ? normalized.scenes : [emptyScene(1, characters.value, sets.value)]).map((scene, index) => ({
    ...emptyScene(index + 1, characters.value, sets.value),
    ...scene,
    setStates: (scene.setStates || []).map(state => ({
      setId: state.setId,
      on: state.on !== false,
      framingId: state.framingId || null
    })),
    characterStates: (scene.characterStates || []).map(state => ({
      characterId: state.characterId,
      on: state.on !== false,
      outfitId: state.outfitId || null
    }))
  }))
  ensureSceneStatesForSets(scenes.value, sets.value)
  ensureSceneStatesForCharacters(scenes.value, characters.value)
  activeIndex.value = 0
  error.value = ''
  notice.value = ''
}

function addNextScene() {
  const previous = scenes.value[scenes.value.length - 1] || emptyScene(1, characters.value, sets.value)
  const next = cloneSceneForNext(previous, scenes.value.length + 1)
  scenes.value.push(next)
  activeIndex.value = scenes.value.length - 1
}

function moveScene(index: number, delta: number) {
  const newIndex = index + delta
  if (newIndex < 0 || newIndex >= scenes.value.length) return
  const [scene] = scenes.value.splice(index, 1)
  if (!scene) return
  scenes.value.splice(newIndex, 0, scene)
  if (activeIndex.value === index) {
    activeIndex.value = newIndex
  } else if (index < activeIndex.value && newIndex >= activeIndex.value) {
    activeIndex.value--
  } else if (index > activeIndex.value && newIndex <= activeIndex.value) {
    activeIndex.value++
  }
}

function deleteScene(index: number) {
  if (scenes.value.length <= 1) return
  scenes.value.splice(index, 1)
  if (activeIndex.value >= scenes.value.length) {
    activeIndex.value = scenes.value.length - 1
  } else if (activeIndex.value > index) {
    activeIndex.value--
  }
}

function addCharacter() {
  const character = emptyCharacter()
  characters.value.push(character)
  ensureSceneStatesForCharacters(scenes.value, characters.value, {
    newCharacterId: character.id,
    turnOnSceneIndex: activeIndex.value
  })
}

function clearCharacter(index: number) {
  const character = characters.value[index]
  if (!character) return
  character.name = ''
  character.description = ''
  character.features = []
  character.outfits = []
  for (const scene of scenes.value) {
    const state = scene.characterStates.find(item => item.characterId === character.id)
    if (state) state.outfitId = null
  }
}

function addFeature(characterIndex: number) {
  const character = characters.value[characterIndex]
  if (!character) return
  if (!character.features) character.features = []
  character.features.push(emptyFeature())
}

function clearFeature(characterIndex: number, featureIndex: number) {
  const feature = characters.value[characterIndex]?.features?.[featureIndex]
  if (!feature) return
  const blank = emptyFeature()
  feature.text = blank.text
  feature.enabled = blank.enabled
  feature.group = blank.group
  feature.visibility = [...blank.visibility]
}

function removeFeature(characterIndex: number, featureIndex: number) {
  const character = characters.value[characterIndex]
  if (!character?.features) return
  character.features.splice(featureIndex, 1)
}

function setFeatureGroup(characterIndex: number, featureIndex: number, group: string) {
  const feature = characters.value[characterIndex]?.features?.[featureIndex]
  if (!feature) return
  feature.group = group as PromptSequenceFeature['group']
  const next = defaultVisibilityForGroup(feature.group)
    || [...(DEFAULT_FEATURE_VISIBILITY[feature.group] || [])]
  feature.visibility = [...next]
}

function featureVisibilityList(feature: PromptSequenceFeature): VisibilityChipKey[] {
  return (feature.visibility || []) as VisibilityChipKey[]
}

function isVisibilityChipActive(feature: PromptSequenceFeature, key: VisibilityChipKey) {
  const visibility = featureVisibilityList(feature)
  if (key === 'any') return visibility.includes('any') || visibility.length === 0
  return visibility.includes(key)
}

function toggleVisibilityChip(feature: PromptSequenceFeature, key: VisibilityChipKey) {
  if (key === 'any') {
    feature.visibility = ['any'] as PromptSequenceFeature['visibility']
    return
  }
  const withoutAny = featureVisibilityList(feature).filter(item => item !== 'any') as PromptSequenceFacing[]
  const index = withoutAny.indexOf(key)
  if (index >= 0) withoutAny.splice(index, 1)
  else withoutAny.push(key)
  feature.visibility = (withoutAny.length ? withoutAny : ['any']) as PromptSequenceFeature['visibility']
}

function removeCharacter(index: number) {
  if (characters.value.length <= 1) return
  const [removed] = characters.value.splice(index, 1)
  if (!removed) return
  for (const scene of scenes.value) {
    scene.characterStates = scene.characterStates.filter(state => state.characterId !== removed.id)
  }
}

function addOutfit(characterIndex: number) {
  const character = characters.value[characterIndex]
  if (!character) return
  character.outfits.push(emptyOutfit())
}

function removeOutfit(characterIndex: number, outfitIndex: number) {
  const character = characters.value[characterIndex]
  if (!character) return
  const [removed] = character.outfits.splice(outfitIndex, 1)
  if (!removed) return
  for (const scene of scenes.value) {
    const state = scene.characterStates.find(item => item.characterId === character.id)
    if (state?.outfitId === removed.id) state.outfitId = null
  }
}

function addSet() {
  const set = emptySet()
  sets.value.push(set)
  ensureSceneStatesForSets(scenes.value, sets.value, {
    newSetId: set.id,
    turnOnSceneIndex: activeIndex.value
  })
}

function clearSet(index: number) {
  const set = sets.value[index]
  if (!set) return
  set.name = ''
  set.framings = [emptyFraming()]
  for (const scene of scenes.value) {
    const state = scene.setStates.find(item => item.setId === set.id)
    if (state) state.framingId = null
  }
}

function removeSet(index: number) {
  const [removed] = sets.value.splice(index, 1)
  if (!removed) return
  for (const scene of scenes.value) {
    scene.setStates = (scene.setStates || []).filter(state => state.setId !== removed.id)
  }
}

function addFraming(setIndex: number) {
  const set = sets.value[setIndex]
  if (!set) return
  set.framings.push(emptyFraming())
}

function removeFraming(setIndex: number, framingIndex: number) {
  const set = sets.value[setIndex]
  if (!set) return
  const [removed] = set.framings.splice(framingIndex, 1)
  if (!removed) return
  for (const scene of scenes.value) {
    const state = scene.setStates.find(item => item.setId === set.id)
    if (state?.framingId === removed.id) state.framingId = null
  }
}

function clearFraming(setIndex: number, framingIndex: number) {
  const framing = sets.value[setIndex]?.framings[framingIndex]
  if (!framing) return
  framing.label = ''
  framing.text = ''
  framing.facing = 'toward'
}

function sceneSetState(setId: string) {
  return activeScene.value?.setStates?.find(state => state.setId === setId)
}

function isSetOn(setId: string) {
  const state = sceneSetState(setId)
  return state ? !!state.on : true
}

function setSetOn(setId: string, on: boolean) {
  const state = sceneSetState(setId)
  if (!state) {
    activeScene.value?.setStates.push({ setId, on, framingId: null })
    return
  }
  state.on = on
}

function activeSetFramingId(setId: string) {
  return sceneSetState(setId)?.framingId || ''
}

function setSetFraming(setId: string, framingId: string) {
  const state = sceneSetState(setId)
  if (!state) {
    activeScene.value?.setStates.push({
      setId,
      on: true,
      framingId: framingId || null
    })
    return
  }
  state.framingId = framingId || null
}

function sceneState(characterId: string) {
  return activeScene.value?.characterStates.find(state => state.characterId === characterId)
}

function isCharacterOn(characterId: string) {
  const state = sceneState(characterId)
  return state ? !!state.on : true
}

function setCharacterOn(characterId: string, on: boolean) {
  const state = sceneState(characterId)
  if (!state) {
    activeScene.value?.characterStates.push({ characterId, on, outfitId: null })
    return
  }
  state.on = on
}

function activeOutfitId(characterId: string) {
  return sceneState(characterId)?.outfitId || ''
}

function setCharacterOutfit(characterId: string, outfitId: string) {
  const state = sceneState(characterId)
  if (!state) {
    activeScene.value?.characterStates.push({
      characterId,
      on: true,
      outfitId: outfitId || null
    })
    return
  }
  state.outfitId = outfitId || null
}

async function loadSequences() {
  const listed = await $fetch<{ sequences?: PromptSequence[] }>('/api/prompt-sequences')
  sequences.value = listed.sequences || []
}

async function save() {
  const nextName = name.value.trim()
  if (!nextName) return
  const existingByName = sequences.value.find(item => item.name.toLowerCase() === nextName.toLowerCase())
  const updateExisting = Boolean(selectedId.value) && (!existingByName || existingByName.id === selectedId.value)
  if (existingByName && existingByName.id !== selectedId.value && !window.confirm(`Overwrite sequence “${existingByName.name}”?`)) return
  busy.value = 'save'
  error.value = ''
  notice.value = ''
  const payload = {
    name: nextName,
    sectionOrder: sectionOrder.value,
    characters: characters.value,
    sets: sets.value,
    scenes: scenes.value
  }
  try {
    if (updateExisting && selectedId.value) {
      const saved = await $fetch<{ sequence: PromptSequence; sequences: PromptSequence[] }>(`/api/prompt-sequences/${selectedId.value}`, {
        method: 'PATCH',
        body: payload
      })
      sequences.value = saved.sequences
      select(saved.sequence)
      notice.value = `Saved “${saved.sequence.name}”.`
    } else {
      const saved = await $fetch<{ sequence: PromptSequence; sequences: PromptSequence[] }>('/api/prompt-sequences', {
        method: 'POST',
        body: { ...payload, overwrite: Boolean(existingByName) }
      })
      sequences.value = saved.sequences
      select(saved.sequence)
      notice.value = existingByName ? `Overwrote “${saved.sequence.name}”.` : `Saved “${saved.sequence.name}”.`
    }
  } catch (err: any) {
    error.value = err?.data?.statusMessage || err?.statusMessage || err?.message || 'Could not save that sequence'
  } finally {
    busy.value = ''
  }
}

async function remove(sequence: PromptSequence) {
  if (!window.confirm(`Delete sequence “${sequence.name}”?`)) return
  busy.value = 'delete'
  error.value = ''
  notice.value = ''
  try {
    const saved = await $fetch<{ sequences: PromptSequence[] }>(`/api/prompt-sequences/${sequence.id}`, { method: 'DELETE' })
    sequences.value = saved.sequences
    if (selectedId.value === sequence.id) startNew()
    notice.value = `Deleted “${sequence.name}”.`
  } catch (err: any) {
    error.value = err?.data?.statusMessage || err?.statusMessage || err?.message || 'Could not delete that sequence'
  } finally {
    busy.value = ''
  }
}

async function writeClipboard(text: string, kind: 'all' | 'scene') {
  if (!text) return
  try {
    await navigator.clipboard.writeText(text)
    if (kind === 'scene') {
      copiedScene.value = true
      if (copySceneTimer) clearTimeout(copySceneTimer)
      copySceneTimer = setTimeout(() => { copiedScene.value = false }, 1500)
    } else {
      copied.value = true
      if (copyTimer) clearTimeout(copyTimer)
      copyTimer = setTimeout(() => { copied.value = false }, 1500)
    }
  } catch {
    error.value = 'Could not copy to the clipboard'
  }
}

async function copyPreview() {
  await writeClipboard(previewText.value, 'all')
}

async function copyScene() {
  await writeClipboard(activeSceneText.value, 'scene')
}

onMounted(async () => {
  try {
    await loadSequences()
  } catch (err: any) {
    error.value = err?.data?.statusMessage || err?.message || 'Could not load saved sequences'
  }
})

onBeforeUnmount(() => {
  if (copyTimer) clearTimeout(copyTimer)
  if (copySceneTimer) clearTimeout(copySceneTimer)
})
</script>