<script setup>
import { computed } from "vue";
import SubtitlePreviewCard from "./SubtitlePreviewCard.vue";
import SubtitleStyleSelector from "./SubtitleStyleSelector.vue";
import TitleSubtitleSettings from "./TitleSubtitleSettings.vue";
import KeywordEffectsSettings from "./KeywordEffectsSettings.vue";

const draft = defineModel("draft", { type: Object, required: true });

defineProps({
  referenceTitle: { type: String, default: "" },
});

const config = computed({
  get: () => draft.value.config,
  set: (v) => {
    draft.value.config = v;
  },
});
</script>

<template>
  <div class="flex h-full min-h-0 flex-col">
    <div class="shrink-0 border-b border-slate-700/80 pb-3">
      <div class="flex flex-wrap items-center justify-between gap-2">
        <div class="flex flex-wrap items-center gap-2">
          <span class="font-medium text-blue-400">正在编辑: {{ draft.name }}</span>
          <Tag value="编辑模式" severity="info" />
        </div>
      </div>
      <p class="mt-1 text-xs text-slate-500">修改完成后请点击底部的「保存模板」按钮</p>
    </div>

    <div class="mt-4 flex min-h-0 flex-1 gap-6">
      <div class="sticky top-0 z-10 w-[320px] shrink-0 self-start">
        <div class="mb-2 text-center text-xs font-medium text-slate-500">实时预览</div>
        <SubtitlePreviewCard
          :template-name="draft.name"
          :subtitle-style="config.subtitleStyle"
          :title-subtitle-config="config.titleSubtitleConfig"
          :keyword-groups-styles="config.keywordGroupsStyles"
          :keyword-render-mode="config.keywordRenderMode"
          :preview-config="config.previewConfig"
          :preview-scale="0.42"
          :show-actions="false"
          :show-meta="false"
          :card-clickable="false"
        />
      </div>

      <div class="min-w-0 flex-1 space-y-6 overflow-y-auto pb-4 pr-1">
        <SubtitleStyleSelector v-model:config="config" />
        <hr class="border-slate-700" />
        <TitleSubtitleSettings v-model:config="config" :reference-title="referenceTitle" />
        <hr class="border-slate-700" />
        <KeywordEffectsSettings v-model:config="config" />
      </div>
    </div>
  </div>
</template>
