<script setup>
import { toApiUrl } from '../../lib/runtime'
import SvgIcon from '../SvgIcon.vue'
import addPhotoAlternateIcon from '../../assets/icons/add_photo_alternate.svg'

const props = defineProps({
  activeTemplateRequest: { type: Object, default: null },
  templateRequestSourceUrl: { type: Function, required: true },
  stagedRequestDraftCount: { type: Number, required: true },
  appliedRequestItemCount: { type: Number, required: true },
  openTemplateCreateModal: { type: Function, required: true },
  openTemplateSourceImportModal: { type: Function, required: true },
  openTemplateLibraryItemModal: { type: Function, required: true },
  openTemplateBulkTagModal: { type: Function, required: true },
  isTemplateLoading: { type: Boolean, required: true },
  hasSelectedTemplate: { type: Boolean, required: true },
  selectedTemplate: { type: Object, default: null },
  displayThumbnailUrl: { type: String, default: '' },
  templateMetaDraftName: { type: String, default: '' },
  templateMetaDraftSlug: { type: String, default: '' },
  templateMetaSaving: { type: Boolean, required: true },
  canSaveTemplateMeta: { type: Boolean, required: true },
  saveTemplateMeta: { type: Function, required: true },
  canBulkTagTemplateItems: { type: Boolean, required: true },
  canApplyThumbnail: { type: Boolean, required: true },
  templateVisibilitySaving: { type: Boolean, required: true },
  thumbFileInputRef: { type: Function, required: true },
  openThumbFilePicker: { type: Function, required: true },
  onThumb: { type: Function, required: true },
  onThumbDragEnter: { type: Function, required: true },
  onThumbDragOver: { type: Function, required: true },
  onThumbDragLeave: { type: Function, required: true },
  onThumbDrop: { type: Function, required: true },
  isThumbDragOver: { type: Boolean, required: true },
  uploadThumbnail: { type: Function, required: true },
  removeTemplate: { type: Function, required: true },
  toggleSelectedTemplateVisibility: { type: Function, required: true },
  itemFileInputRef: { type: Function, required: true },
  onFile: { type: Function, required: true },
  isItemDragOver: { type: Boolean, required: true },
  onItemDragEnter: { type: Function, required: true },
  onItemDragOver: { type: Function, required: true },
  onItemDragLeave: { type: Function, required: true },
  onItemDrop: { type: Function, required: true },
  openItemFilePicker: { type: Function, required: true },
  uploadItemDrafts: { type: Array, required: true },
  clearItemFiles: { type: Function, required: true },
  canAddItem: { type: Boolean, required: true },
  uploadItem: { type: Function, required: true },
  removeUploadDraft: { type: Function, required: true },
  hasTemplateItemOrderChanges: { type: Boolean, required: true },
  saveTemplateItemOrder: { type: Function, required: true },
  templateItemListRef: { type: Function, required: true },
  saveTemplateItemLabel: { type: Function, required: true },
  removeTemplateItem: { type: Function, required: true },
  selectedTemplateId: { type: String, default: '' },
})

defineEmits(['update:templateMetaDraftName', 'update:templateMetaDraftSlug'])

function setTemplateItemListElement(el) {
  props.templateItemListRef(el)
}

function setThumbFileElement(el) {
  props.thumbFileInputRef(el)
}
</script>

<template>
  <div v-if="props.activeTemplateRequest" class="panel requestWorkspace">
    <div class="requestWorkspace__head">
      <div>
        <div class="panel__title">진행 중인 요청 작업</div>
        <div class="requestWorkspace__title">{{ props.activeTemplateRequest.sourceTierListTitle || '템플릿 요청' }}</div>
        <div class="hint hint--tight">
          {{
            props.activeTemplateRequest.type === 'create'
              ? (props.activeTemplateRequest.targetTopicId
                ? '이미 연결된 신규 템플릿이 있어요. 필요한 아이템만 골라 저장하세요.'
                : '새 템플릿을 한 번 만든 뒤 필요한 아이템만 골라 저장하세요.')
              : '필요한 아이템만 남긴 뒤 기본 아이템 추가 버튼으로 반영하세요.'
          }}
        </div>
      </div>
      <div class="requestWorkspace__stats">
        <span class="pill pill--accent">{{ props.activeTemplateRequest.type === 'create' ? '신규 템플릿 요청' : '기존 템플릿 업데이트' }}</span>
        <span class="pill">요청 아이템 {{ props.stagedRequestDraftCount }}개</span>
        <span v-if="props.appliedRequestItemCount" class="pill pill--soft">이미 반영 {{ props.appliedRequestItemCount }}개</span>
        <span v-if="props.activeTemplateRequest.type === 'create' && (props.activeTemplateRequest.targetTopicName || props.activeTemplateRequest.targetTopicId)" class="pill pill--soft">
          연결된 템플릿 · {{ props.activeTemplateRequest.targetTopicName || props.activeTemplateRequest.targetTopicId }}
        </span>
      </div>
    </div>
    <div class="requestWorkspace__actions">
      <a
        v-if="props.templateRequestSourceUrl(props.activeTemplateRequest)"
        class="btn btn--ghost btn--small"
        :href="props.templateRequestSourceUrl(props.activeTemplateRequest)"
        target="_blank"
        rel="noreferrer"
      >
        요청 티어표 보기
      </a>
      <button
        v-if="props.activeTemplateRequest.type === 'create' && !props.activeTemplateRequest.targetTopicId"
        class="btn btn--ghost btn--small"
        type="button"
        @click="props.openTemplateCreateModal"
      >
        새 템플릿 만들기
      </button>
    </div>
  </div>

  <div v-if="props.isTemplateLoading" class="panel panel--empty">
    <div class="emptyState">
      <div class="emptyState__title">템플릿 정보를 불러오는 중이에요.</div>
      <div class="emptyState__desc">선택한 템플릿의 썸네일과 기본 아이템을 곧 표시합니다.</div>
    </div>
  </div>
  <div v-else-if="props.hasSelectedTemplate" class="panel">
    <section class="adminCard templateSettingsCard">
      <div class="templateSettingsCard__media">
        <input :ref="setThumbFileElement" type="file" accept="image/*" class="srOnlyInput" @change="props.onThumb" />
        <button
          class="thumbDropZone"
          :class="{ 'thumbDropZone--active': props.isThumbDragOver }"
          type="button"
          @click="props.openThumbFilePicker"
          @dragenter="props.onThumbDragEnter"
          @dragover="props.onThumbDragOver"
          @dragleave="props.onThumbDragLeave"
          @drop="props.onThumbDrop"
        >
          <img v-if="props.displayThumbnailUrl" class="selectedThumb selectedThumb--sidebar" :src="props.displayThumbnailUrl" :alt="props.selectedTemplate.template.name" />
          <div v-else class="selectedThumb selectedThumb--empty selectedThumb--sidebar">대표 썸네일</div>
          <div class="thumbDropZone__copy">
            <div class="thumbDropZone__title">{{ props.displayThumbnailUrl ? '썸네일 변경' : '클릭 & 드래그' }}</div>
          </div>
        </button>
      </div>
      <div class="templateSettingsCard__body">
        <div class="panel__title">템플릿 설정</div>
        <div class="templateMetaForm">
          <label class="templateMetaField">
            <span class="templateMetaField__label">템플릿 이름</span>
            <input
              class="input input--dense"
              type="text"
              maxlength="60"
              :value="props.templateMetaDraftName"
              placeholder="템플릿 이름"
              @input="$emit('update:templateMetaDraftName', $event.target.value)"
            />
          </label>
          <label class="templateMetaField">
            <span class="templateMetaField__label">템플릿 slug</span>
            <input
              class="input input--dense"
              type="text"
              maxlength="120"
              :value="props.templateMetaDraftSlug"
              placeholder="예: idol-rhythm"
              @input="$emit('update:templateMetaDraftSlug', $event.target.value)"
            />
          </label>
        </div>
        <div class="templateSettingsCard__meta">공개 URL: /topics/{{ props.selectedTemplate.template.slug || props.selectedTemplate.template.id }}</div>
        <label class="toggleSwitch" :class="{ 'toggleSwitch--disabled': props.templateVisibilitySaving }">
          <input :checked="!!props.selectedTemplate.template.isPublic" type="checkbox" @change="props.toggleSelectedTemplateVisibility($event.target.checked)" />
          <span class="toggleSwitch__label">{{ props.selectedTemplate.template.isPublic ? '템플릿 공개중' : '비공개 상태' }}</span>
          <span class="toggleSwitch__track"><span class="toggleSwitch__thumb"></span></span>
        </label>
        <div class="templateSettingsCard__actions">
          <button class="btn btn--ghost" :disabled="!props.canSaveTemplateMeta || props.templateMetaSaving" @click="props.saveTemplateMeta">
            {{ props.templateMetaSaving ? '저장중...' : '이름/주소 저장' }}
          </button>
          <button class="btn btn--ghost" :disabled="!props.canBulkTagTemplateItems" @click="props.openTemplateBulkTagModal">기본 아이템 공통 태그</button>
          <button class="btn btn--ghost" @click="props.openTemplateLibraryItemModal">개별 아이템 검색</button>
          <button class="btn btn--ghost" @click="props.openTemplateSourceImportModal">기존 템플릿 가져오기</button>
          <button class="btn" :disabled="!props.canApplyThumbnail" @click="props.uploadThumbnail">썸네일 적용</button>
          <button class="btn btn--danger" @click="props.removeTemplate">템플릿 삭제</button>
        </div>
      </div>
    </section>

    <div class="section">
      <section class="adminCard">
        <div class="section__title">기본 아이템 추가</div>
        <div class="itemComposer">
          <div class="itemComposer__form">
            <input :ref="props.itemFileInputRef" type="file" accept="image/*" multiple class="srOnlyInput" @change="props.onFile" />
            <div
              class="dropZone"
              :class="{ 'dropZone--active': props.isItemDragOver }"
              @click="props.openItemFilePicker"
              @dragenter="props.onItemDragEnter"
              @dragover="props.onItemDragOver"
              @dragleave="props.onItemDragLeave"
              @drop="props.onItemDrop"
            >
              <div class="dropZone__iconWrap">
                <SvgIcon :src="addPhotoAlternateIcon" alt="" class="dropZone__icon" />
              </div>
              <div class="dropZone__title">이미지를 드래그해서 기본 아이템으로 추가</div>
              <div class="dropZone__desc">
                여러 파일을 한 번에 올릴 수 있고, 저장 라벨은 파일명으로 자동 생성됩니다.
                <span v-if="props.stagedRequestDraftCount"> 현재 요청에서 가져온 아이템 {{ props.stagedRequestDraftCount }}개도 함께 검토 중이에요.</span>
              </div>
              <div class="dropZone__actions">
                <button class="btn btn--ghost btn--small dropZone__button" type="button" @click.stop="props.openItemFilePicker">파일 선택</button>
              </div>
            </div>
          </div>
          <div class="itemPreviewCard">
            <div v-if="props.uploadItemDrafts.length" class="itemDraftList">
              <div
                v-for="draft in props.uploadItemDrafts"
                :key="draft.kind + ':' + (draft.itemId || draft.file?.name || draft.previewUrl)"
                class="itemDraftRow"
              >
                <div class="itemDraftRow__preview">
                  <img class="itemPreviewImage" :src="draft.previewUrl" :alt="draft.sourceName || 'item preview'" />
                </div>
                <div class="itemDraftRow__body">
                  <input v-model="draft.label" class="input input--labelEdit input--dense" maxlength="60" placeholder="아이템 이름" />
                  <div class="hint hint--tight">{{ draft.sourceName }}</div>
                  <div class="itemDraftRow__meta">
                    <span class="pill" :class="draft.kind === 'request' ? 'pill--requestItem' : 'pill--directFile'">
                      {{ draft.kind === 'request' ? '요청 아이템' : draft.kind === 'library' ? '기존 템플릿' : '직접 추가 파일' }}
                    </span>
                    <button class="btn btn--danger btn--small" type="button" @click="props.removeUploadDraft(draft)">제외</button>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="itemPreviewEmpty">등록한 기본 아이템 미리보기가 여기에 표시됩니다.</div>
            <button class="btn itemPreviewCard__submit" :disabled="!props.canAddItem" @click="props.uploadItem">
              {{ props.uploadItemDrafts.length ? `아이템 ${props.uploadItemDrafts.length}개 추가` : '아이템 추가' }}
            </button>
          </div>
        </div>
      </section>
    </div>

    <div class="section">
      <div class="sectionHeader">
        <div>
          <div class="section__title">현재 기본 아이템 목록</div>
          <div class="hint hint--tight">드래그해서 기본 노출 순서를 바꿀 수 있어요. 저장 전까지는 화면에서만 순서가 바뀝니다.</div>
        </div>
        <button class="btn btn--primary btn--small" :disabled="!props.hasTemplateItemOrderChanges" @click="props.saveTemplateItemOrder">순서 저장</button>
      </div>
      <div v-if="!props.selectedTemplate?.items?.length" class="hint">아직 등록된 기본 아이템이 없어요.</div>
        <div v-else :ref="setTemplateItemListElement" class="thumbGrid">
        <div v-for="item in props.selectedTemplate.items" :key="item.id" class="thumbCard" :data-template-item-id="item.id">
          <div class="thumbCard__media">
            <img class="thumb thumb--template" :src="toApiUrl(item.src)" :alt="item.label" draggable="false" />
            <button class="thumbCard__deleteBtn" type="button" data-no-drag @click="props.removeTemplateItem(item)">X</button>
          </div>
          <input
            v-model="item.draftLabel"
            class="input input--labelEdit"
            placeholder="아이템 이름"
            data-no-drag
            @keydown.enter.prevent="props.saveTemplateItemLabel(item)"
          />
        </div>
      </div>
    </div>
  </div>
  <div v-else class="panel panel--empty">
    <div class="emptyState">
      <div class="emptyState__title">템플릿을 선택해 주세요.</div>
      <div v-if="props.activeTemplateRequest?.type === 'create'" class="hint hint--tight">진행 중인 신규 템플릿 요청이 있어요. 위의 `새 템플릿 만들기`로 템플릿을 만든 뒤 아이템을 추가할 수 있습니다.</div>
      <div v-if="props.selectedTemplateId" class="hint hint--tight">선택한 템플릿을 찾지 못했거나 로딩 중 오류가 발생했어요. 다시 선택해보세요.</div>
    </div>
  </div>
</template>

<style scoped>
.templateMetaForm {
  display: grid;
  gap: 10px;
}

.templateMetaField {
  display: grid;
  gap: 6px;
}

.templateMetaField__label {
  font-size: 12px;
  font-weight: 800;
  color: var(--theme-text-soft);
}

.input--dense {
  padding: 11px 13px;
}
</style>
