<template>
  <div>
    <v-toolbar dark>
      <v-btn
        icon
        @click="goBack"
      >
        <v-icon>mdi-arrow-left</v-icon>
      </v-btn>
      <v-spacer />
      <v-toolbar-title>{{ isEdit ? '캐릭터 수정' : '캐릭터 등록' }}</v-toolbar-title>
      <v-spacer />
      <v-btn
        small
        outlined
        color="primary"
        @click="exportToJson"
      >
        JSON 다운로드
      </v-btn>
      <input
        ref="importInput"
        type="file"
        accept="application/json,.json"
        style="display:none"
        @change="onImportFileChange"
      >
      <v-btn
        small
        color="primary"
        class="ml-2"
        @click="$refs.importInput.click()"
      >
        JSON 업로드
      </v-btn>
    </v-toolbar>

    <v-container>
      <v-card class="pa-4">
        <v-form
          ref="form"
          v-model="isFormValid"
        >
          <v-card-text>
            <!-- 이미지 -->
            <v-row>
              <v-col
                cols="12"
                md="6"
              >
                <v-file-input
                  v-model="character.image"
                  label="캐릭터 이미지"
                  accept="image/*"
                  prepend-icon="mdi-camera"
                  show-size
                  truncate-length="15"
                  outlined
                  dense
                  :class="{ 'required-asterisk': !isEdit }"
                  :rules="imageRules"
                />
              </v-col>

              <v-col
                v-if="previewImage || character.imageUrl"
                cols="12"
                md="6"
              >
                <div class="text-center">
                  <v-avatar size="150">
                    <v-img
                      :src="previewImage || character.imageUrl"
                      alt="캐릭터 이미지"
                      contain
                    />
                  </v-avatar>
                </div>
              </v-col>
            </v-row>

            <!-- 캐릭터명 -->
            <v-row>
              <v-col cols="12">
                <v-text-field
                  v-model="character.name"
                  label="캐릭터명"
                  :rules="nameRules"
                  class="required-asterisk"
                  required
                  outlined
                  dense
                />
              </v-col>
            </v-row>

            <!-- 캐릭터 한 줄 소개 -->
            <v-row>
              <v-col cols="12">
                <v-text-field
                  v-model="character.description"
                  label="캐릭터 한 줄 소개"
                  :rules="descriptionRules"
                  class="required-asterisk"
                  required
                  outlined
                  dense
                />
              </v-col>
            </v-row>

            <!-- 성별 -->
            <v-row>
              <v-col
                cols="12"
                md="6"
              >
                <v-select
                  v-model="character.gender"
                  :items="genderOptions"
                  label="성별"
                  outlined
                  dense
                />
              </v-col>

              <!-- 나이 -->
              <v-col
                cols="12"
                md="6"
              >
                <v-text-field
                  v-model="character.age"
                  label="나이"
                  type="number"
                  min="0"
                  outlined
                  dense
                  class="required-asterisk"
                  :rules="ageRules"
                  @input="validateNumberInput"
                />
              </v-col>
            </v-row>

            <!-- MBTI & 캐릭터 유형 -->
            <v-row>
              <v-col
                cols="12"
                md="6"
              >
                <v-select
                  v-model="character.mbti"
                  :items="mbtiOptions"
                  label="MBTI"
                  outlined
                  dense
                />
              </v-col>
              <v-col
                cols="12"
                md="6"
              >
                <v-select
                  v-model="character.characterType"
                  :items="typeOptions"
                  label="캐릭터 유형"
                  outlined
                  dense
                />
              </v-col>
            </v-row>

            <!-- 태그 - 입력 후 띄어쓰기 할 때마다 Chip 형태로 변경 -->
            <v-row>
              <v-col cols="12">
                <v-combobox
                  v-model="tags"
                  label="태그"
                  multiple
                  chips
                  small-chips
                  deletable-chips
                  outlined
                  dense
                  :rules="tagRules"
                  @keydown.space.prevent="addTag"
                >
                  <template v-slot:selection="{ attrs, item, select, selected }">
                    <v-chip
                      v-bind="attrs"
                      :input-value="selected"
                      close
                      @click="select"
                      @click:close="removeTag(item)"
                    >
                      {{ item }}
                    </v-chip>
                  </template>
                </v-combobox>
                <div
                  class="caption grey--text text--darken-1 custom-caption"
                >
                  태그를 입력하고 엔터를 누르면 추가됩니다. (50자 이내, 최대 20개)
                </div>
              </v-col>
            </v-row>

            <!-- 원작 선택 -->
            <v-row>
              <v-col cols="12">
                <v-autocomplete
                  v-model="selectedOriginalId"
                  :items="originalOptions"
                  :loading="originalLoading"
                  :search-input.sync="originalSearchTerm"
                  item-text="title"
                  item-value="id"
                  label="원작 검색 후 선택"
                  hide-no-data
                  hide-selected
                  clearable
                  outlined
                  dense
                  @change="onOriginalChange"
                >
                  <template v-slot:item="{ item, on, attrs }">
                    <v-list-item
                      v-bind="attrs"
                      v-on="on"
                    >
                      <v-list-item-avatar>
                        <v-img :src="item.imageUrl" />
                      </v-list-item-avatar>
                      <v-list-item-content>
                        <v-list-item-title v-text="item.title" />
                        <v-list-item-subtitle v-text="item.category" />
                      </v-list-item-content>
                    </v-list-item>
                  </template>
                </v-autocomplete>
              </v-col>
            </v-row>
            <v-row v-if="selectedOriginal">
              <v-col cols="12">
                <div class="d-flex align-center">
                  <v-avatar
                    size="60"
                    class="mr-3"
                  >
                    <v-img :src="selectedOriginal.imageUrl" />
                  </v-avatar>
                  <div>
                    <div class="subtitle-1">
                      {{ selectedOriginal.title }}
                    </div>
                  </div>
                  <v-spacer />
                  <v-btn
                    small
                    text
                    @click="clearSelectedOriginal"
                  >
                    해제
                  </v-btn>
                </div>
              </v-col>
            </v-row>

            <!-- 긴 텍스트 섹션 -->
            <v-row>
              <v-col cols="12">
                <v-divider class="my-4" />
                <h3 class="mb-4">
                  상세 정보
                </h3>
              </v-col>
            </v-row>


            <!-- 말투/특징적 표현 -->
            <v-row>
              <v-col cols="12">
                <v-textarea
                  v-model="character.speechPattern"
                  label="말투/특징적 표현 (최대 1000자)"
                  outlined
                  auto-grow
                  rows="4"
                  counter="1000"
                  :rules="[v => v.length <= 1000 || '최대 1000자까지 입력 가능합니다']"
                />
              </v-col>
            </v-row>

            <!-- 대화 스타일 -->
            <v-row>
              <v-col cols="12">
                <v-textarea
                  v-model="character.speechStyle"
                  label="대화 스타일 (최대 1000자)"
                  outlined
                  auto-grow
                  rows="4"
                  counter="1000"
                  :rules="[v => v.length <= 1000 || '최대 1000자까지 입력 가능합니다']"
                />
              </v-col>
            </v-row>

            <!-- 외모 설명 -->
            <v-row>
              <v-col cols="12">
                <v-textarea
                  v-model="character.appearance"
                  label="외모 설명 (최대 1000자)"
                  outlined
                  auto-grow
                  rows="5"
                  counter="1000"
                  :rules="[v => v.length <= 1000 || '최대 1000자까지 입력 가능합니다']"
                />
              </v-col>
            </v-row>

            <!-- 시스템 프롬프트 -->
            <v-row>
              <v-col cols="12">
                <v-textarea
                  v-model="character.systemPrompt"
                  label="시스템 프롬프트"
                  outlined
                  auto-grow
                  rows="4"
                  :class="{ 'required-asterisk': !isEdit }"
                  :rules="systemPromptRules"
                />
                <div
                  class="caption grey--text text--darken-1 mt-1 custom-caption"
                >
                  캐릭터의 행동 방식과 제약사항을 정의하는 시스템 프롬프트입니다.
                </div>
              </v-col>
            </v-row>


            <!-- 취미 목록 -->
            <v-row>
              <v-col cols="12">
                <v-divider class="my-4" />
                <h3 class="mb-2">
                  취미 목록
                </h3>

                <v-row>
                  <v-col cols="12">
                    <v-row>
                      <v-col cols="11">
                        <v-text-field
                          v-model="newHobby"
                          label="새 취미 추가 (최대 100자)"
                          outlined
                          dense
                          counter="100"
                          :rules="[v => v.length <= 100 || '최대 100자까지 입력 가능합니다']"
                          @keyup.enter="addHobby"
                        />
                      </v-col>
                      <v-col cols="1">
                        <v-btn
                          color="primary"
                          class="mt-1"
                          block
                          :disabled="!newHobby.trim() || hobbies.length >= 10"
                          @click="addHobby"
                        >
                          추가
                        </v-btn>
                      </v-col>
                    </v-row>
                  </v-col>
                </v-row>

                <v-card
                  outlined
                  class="memory-container"
                >
                  <v-list
                    v-if="hobbies.length > 0"
                    class="memory-list"
                  >
                    <v-list-item
                      v-for="(hobby, index) in hobbies"
                      :key="index"
                      class="memory-item"
                    >
                      <v-list-item-content>
                        <v-list-item-title class="memory-text">
                          {{ hobby }}
                        </v-list-item-title>
                      </v-list-item-content>
                      <v-list-item-action>
                        <v-btn
                          small
                          color="error"
                          class="delete-btn"
                          @click="removeHobby(index)"
                        >
                          삭제
                        </v-btn>
                      </v-list-item-action>
                    </v-list-item>
                  </v-list>
                  <v-card-text
                    v-else
                    class="text-center grey--text"
                  >
                    취미가 없습니다. 위 입력창에서 취미를 추가해주세요. (최대 10개)
                  </v-card-text>
                </v-card>
              </v-col>
            </v-row>

            <!-- 가치관 목록 -->
            <v-row>
              <v-col cols="12">
                <v-divider class="my-4" />
                <h3 class="mb-2">
                  가치관 목록
                </h3>

                <v-row>
                  <v-col cols="12">
                    <v-row>
                      <v-col cols="11">
                        <v-text-field
                          v-model="newValue"
                          label="새 가치관 추가 (최대 100자)"
                          outlined
                          dense
                          counter="100"
                          :rules="[v => v.length <= 100 || '최대 100자까지 입력 가능합니다']"
                          @keyup.enter="addValue"
                        />
                      </v-col>
                      <v-col cols="1">
                        <v-btn
                          color="primary"
                          class="mt-1"
                          block
                          :disabled="!newValue.trim() || values.length >= 10"
                          @click="addValue"
                        >
                          추가
                        </v-btn>
                      </v-col>
                    </v-row>
                  </v-col>
                </v-row>

                <v-card
                  outlined
                  class="memory-container"
                >
                  <v-list
                    v-if="values.length > 0"
                    class="memory-list"
                  >
                    <v-list-item
                      v-for="(value, index) in values"
                      :key="index"
                      class="memory-item"
                    >
                      <v-list-item-content>
                        <v-list-item-title class="memory-text">
                          {{ value }}
                        </v-list-item-title>
                      </v-list-item-content>
                      <v-list-item-action>
                        <v-btn
                          small
                          color="error"
                          class="delete-btn"
                          @click="removeValue(index)"
                        >
                          삭제
                        </v-btn>
                      </v-list-item-action>
                    </v-list-item>
                  </v-list>
                  <v-card-text
                    v-else
                    class="text-center grey--text"
                  >
                    가치관이 없습니다. 위 입력창에서 가치관을 추가해주세요. (최대 10개)
                  </v-card-text>
                </v-card>
              </v-col>
            </v-row>

            <!-- 목표 -->
            <v-row>
              <v-col cols="12">
                <v-divider class="my-4" />
                <h3 class="mb-2">
                  목표
                </h3>

                <v-row>
                  <v-col cols="12">
                    <v-row>
                      <v-col cols="11">
                        <v-text-field
                          v-model="newGoal"
                          label="새 목표 추가 (최대 200자)"
                          outlined
                          dense
                          counter="200"
                          :rules="[v => v.length <= 200 || '최대 200자까지 입력 가능합니다']"
                          @keyup.enter="addGoal"
                        />
                      </v-col>
                      <v-col cols="1">
                        <v-btn
                          color="primary"
                          class="mt-1"
                          block
                          :disabled="!newGoal.trim() || goals.length >= 10"
                          @click="addGoal"
                        >
                          추가
                        </v-btn>
                      </v-col>
                    </v-row>
                  </v-col>
                </v-row>

                <v-card
                  outlined
                  class="memory-container"
                >
                  <v-list
                    v-if="goals.length > 0"
                    class="memory-list"
                  >
                    <v-list-item
                      v-for="(goal, index) in goals"
                      :key="index"
                      class="memory-item"
                    >
                      <v-list-item-content>
                        <v-list-item-title class="memory-text">
                          {{ goal }}
                        </v-list-item-title>
                      </v-list-item-content>
                      <v-list-item-action>
                        <v-btn
                          small
                          color="error"
                          class="delete-btn"
                          @click="removeGoal(index)"
                        >
                          삭제
                        </v-btn>
                      </v-list-item-action>
                    </v-list-item>
                  </v-list>
                  <v-card-text
                    v-else
                    class="text-center grey--text"
                  >
                    목표가 없습니다. 위 입력창에서 목표를 추가해주세요. (최대 10개)
                  </v-card-text>
                </v-card>
              </v-col>
            </v-row>


            <!-- 세계관 (배경이야기) -->
            <v-row>
              <v-col cols="12">
                <v-divider class="my-4" />
                <h3 class="mb-2">
                  세계관 (배경이야기)
                </h3>

                <v-row>
                  <v-col cols="12">
                    <v-row>
                      <v-col cols="5">
                        <v-text-field
                          v-model="newBackgroundTopic"
                          label="주제 (최대 100자)"
                          outlined
                          dense
                          counter="100"
                          :rules="[v => v.length <= 100 || '최대 100자까지 입력 가능합니다']"
                          @keyup.enter="addBackground"
                        />
                      </v-col>
                      <v-col cols="6">
                        <v-textarea
                          v-model="newBackgroundDescription"
                          label="배경 설명 (최대 1000자)"
                          outlined
                          dense
                          auto-grow
                          rows="2"
                          counter="1000"
                          :rules="[v => v.length <= 1000 || '최대 1000자까지 입력 가능합니다']"
                        />
                      </v-col>
                      <v-col cols="1">
                        <v-btn
                          color="primary"
                          class="mt-1"
                          block
                          :disabled="!newBackgroundTopic.trim() || !newBackgroundDescription.trim() || backgrounds.length >= 10"
                          @click="addBackground"
                        >
                          추가
                        </v-btn>
                      </v-col>
                    </v-row>
                  </v-col>
                </v-row>

                <v-card
                  outlined
                  class="memory-container"
                >
                  <v-list
                    v-if="backgrounds.length > 0"
                    class="memory-list"
                  >
                    <v-list-item
                      v-for="(background, index) in backgrounds"
                      :key="index"
                      class="memory-item"
                    >
                      <v-list-item-content>
                        <v-list-item-title class="memory-text font-weight-bold">
                          {{ background.topic }}
                        </v-list-item-title>
                        <v-list-item-subtitle class="memory-text mt-1">
                          {{ background.description }}
                        </v-list-item-subtitle>
                      </v-list-item-content>
                      <v-list-item-action>
                        <v-btn
                          small
                          color="error"
                          class="delete-btn"
                          @click="removeBackground(index)"
                        >
                          삭제
                        </v-btn>
                      </v-list-item-action>
                    </v-list-item>
                  </v-list>
                  <v-card-text
                    v-else
                    class="text-center grey--text"
                  >
                    세계관 정보가 없습니다. 위 입력창에서 세계관 정보를 추가해주세요. (최대 10개)
                  </v-card-text>
                </v-card>
              </v-col>
            </v-row>

            <!-- 성격 특성 -->
            <v-row>
              <v-col cols="12">
                <v-divider class="my-4" />
                <h3 class="mb-2">
                  성격 특성
                </h3>

                <v-row>
                  <v-col cols="12">
                    <v-row>
                      <v-col cols="5">
                        <v-text-field
                          v-model="newPersonalityTrait"
                          label="특성 제목 (최대 100자)"
                          outlined
                          dense
                          counter="100"
                          :rules="[v => v.length <= 100 || '최대 100자까지 입력 가능합니다']"
                          @keyup.enter="addPersonality"
                        />
                      </v-col>
                      <v-col cols="6">
                        <v-textarea
                          v-model="newPersonalityDescription"
                          label="특성 설명 (최대 500자)"
                          outlined
                          dense
                          auto-grow
                          rows="2"
                          counter="500"
                          :rules="[v => v.length <= 500 || '최대 500자까지 입력 가능합니다']"
                        />
                      </v-col>
                      <v-col cols="1">
                        <v-btn
                          color="primary"
                          class="mt-1"
                          block
                          :disabled="!newPersonalityTrait.trim() || !newPersonalityDescription.trim() || personalities.length >= 10"
                          @click="addPersonality"
                        >
                          추가
                        </v-btn>
                      </v-col>
                    </v-row>
                  </v-col>
                </v-row>

                <v-card
                  outlined
                  class="memory-container"
                >
                  <v-list
                    v-if="personalities.length > 0"
                    class="memory-list"
                  >
                    <v-list-item
                      v-for="(personality, index) in personalities"
                      :key="index"
                      class="memory-item"
                    >
                      <v-list-item-content>
                        <v-list-item-title class="memory-text font-weight-bold">
                          {{ personality.trait }}
                        </v-list-item-title>
                        <v-list-item-subtitle class="memory-text mt-1">
                          {{ personality.description }}
                        </v-list-item-subtitle>
                      </v-list-item-content>
                      <v-list-item-action>
                        <v-btn
                          small
                          color="error"
                          class="delete-btn"
                          @click="removePersonality(index)"
                        >
                          삭제
                        </v-btn>
                      </v-list-item-action>
                    </v-list-item>
                  </v-list>
                  <v-card-text
                    v-else
                    class="text-center grey--text"
                  >
                    성격 특성이 없습니다. 위 입력창에서 성격 특성을 추가해주세요. (최대 10개)
                  </v-card-text>
                </v-card>
              </v-col>
            </v-row>

            <!-- 기억/메모리 -->
            <v-row>
              <v-col cols="12">
                <v-divider class="my-4" />
                <h3 class="mb-2">
                  기억/메모리
                </h3>

                <v-row>
                  <v-col cols="12">
                    <v-row>
                      <v-col cols="4">
                        <v-text-field
                          v-model="newMemoryTitle"
                          label="제목 (최대 100자)"
                          outlined
                          dense
                          counter="100"
                          :rules="[v => v.length <= 100 || '최대 100자까지 입력 가능합니다']"
                        />
                      </v-col>
                      <v-col cols="4">
                        <v-textarea
                          v-model="newMemoryContent"
                          label="기억 내용 (최대 1000자)"
                          outlined
                          dense
                          auto-grow
                          rows="2"
                          counter="1000"
                          :rules="[v => v.length <= 1000 || '최대 1000자까지 입력 가능합니다']"
                        />
                      </v-col>
                      <v-col cols="3">
                        <v-text-field
                          v-model="newMemoryEmotion"
                          label="감정 (최대 50자)"
                          outlined
                          dense
                          counter="50"
                          :rules="[v => v.length <= 50 || '최대 50자까지 입력 가능합니다']"
                          @keyup.enter="addMemory"
                        />
                      </v-col>
                      <v-col cols="1">
                        <v-btn
                          color="primary"
                          class="mt-1"
                          block
                          :disabled="!newMemoryTitle.trim() || !newMemoryContent.trim() || memories.length >= 20"
                          @click="addMemory"
                        >
                          추가
                        </v-btn>
                      </v-col>
                    </v-row>
                  </v-col>
                </v-row>

                <v-card
                  outlined
                  class="memory-container"
                >
                  <v-list
                    v-if="memories.length > 0"
                    class="memory-list"
                  >
                    <v-list-item
                      v-for="(memory, index) in memories"
                      :key="index"
                      class="memory-item"
                    >
                      <v-list-item-content>
                        <v-list-item-title class="memory-text font-weight-bold">
                          {{ memory.title }}
                        </v-list-item-title>
                        <v-list-item-subtitle class="memory-text mt-1">
                          {{ memory.content }}
                        </v-list-item-subtitle>
                        <v-list-item-subtitle
                          v-if="memory.emotion"
                          class="memory-text mt-1 font-italic"
                        >
                          감정: {{ memory.emotion }}
                        </v-list-item-subtitle>
                      </v-list-item-content>
                      <v-list-item-action>
                        <v-btn
                          small
                          color="error"
                          class="delete-btn"
                          @click="removeMemory(index)"
                        >
                          삭제
                        </v-btn>
                      </v-list-item-action>
                    </v-list-item>
                  </v-list>
                  <v-card-text
                    v-else
                    class="text-center grey--text"
                  >
                    기억이 없습니다. 위 입력창에서 기억을 추가해주세요. (최대 20개)
                  </v-card-text>
                </v-card>
              </v-col>
            </v-row>

            <!-- 인물 관계 -->
            <v-row>
              <v-col cols="12">
                <v-divider class="my-4" />
                <h3 class="mb-2">
                  인물 관계
                </h3>

                <v-row>
                  <v-col cols="12">
                    <!-- 1행: 상대방 이름, 관계명 -->
                    <v-row>
                      <v-col cols="4">
                        <v-text-field
                          v-model="newRelationship.personName"
                          label="상대방 이름 (최대 10자)"
                          outlined
                          dense
                          counter="10"
                        />
                      </v-col>
                      <v-col cols="8">
                        <v-text-field
                          v-model="newRelationship.relationshipName"
                          label="관계명 (어머니, 아버지, 친구 등) (최대 20자)"
                          outlined
                          dense
                          counter="20"
                        />
                      </v-col>
                    </v-row>

                    <!-- 2행: 관계 타입, 현재 상태, 중요도 -->
                    <v-row>
                      <v-col cols="5">
                        <v-text-field
                          v-model="newRelationship.relationshipType"
                          label="관계 타입 (가족, 친구, 동료, 연인, 기타 등) (최대 10자)"
                          outlined
                          dense
                          counter="10"
                        />
                      </v-col>
                      <v-col cols="5">
                        <v-text-field
                          v-model="newRelationship.currentStatus"
                          label="현재 상태 (생존, 사망, 불명 등) (최대 10자)"
                          outlined
                          dense
                          counter="10"
                        />
                      </v-col>
                      <v-col cols="2">
                        <v-text-field
                          v-model.number="newRelationship.importance"
                          label="중요도 (1~10)"
                          outlined
                          dense
                          type="number"
                          min="1"
                          max="10"
                        />
                      </v-col>
                    </v-row>
                  </v-col>
                </v-row>

                <v-row>
                  <v-col cols="11">
                    <v-textarea
                      v-model="newRelationship.description"
                      label="관계 설명 (최대 500자)"
                      outlined
                      dense
                      auto-grow
                      rows="2"
                      counter="500"
                      :rules="relationshipDescriptionRules"
                      @keyup.enter="addRelationship"
                    />
                  </v-col>
                  <v-col cols="1">
                    <v-btn
                      color="primary"
                      class="mt-1"
                      block
                      :disabled="!newRelationship.personName || !newRelationship.relationshipName || !newRelationship.relationshipType || !newRelationship.currentStatus || !newRelationship.importance || relationships.length >= 10"
                      @click="addRelationship"
                    >
                      추가
                    </v-btn>
                  </v-col>
                </v-row>

                <v-card
                  outlined
                  class="memory-container"
                >
                  <v-list
                    v-if="relationships.length > 0"
                    class="memory-list"
                  >
                    <v-list-item
                      v-for="(relationship, index) in relationships"
                      :key="index"
                      class="memory-item"
                    >
                      <v-list-item-content>
                        <v-list-item-title class="memory-text font-weight-bold">
                          {{ relationship.personName }} - {{ relationship.relationshipName }}
                        </v-list-item-title>
                        <v-list-item-subtitle class="memory-text mt-1">
                          타입: {{ relationship.relationshipType }} | 상태: {{ relationship.currentStatus }} | 중요도: {{ relationship.importance }}
                        </v-list-item-subtitle>
                        <v-list-item-subtitle
                          v-if="relationship.description"
                          class="memory-text mt-1"
                        >
                          {{ relationship.description }}
                        </v-list-item-subtitle>
                      </v-list-item-content>
                      <v-list-item-action>
                        <v-btn
                          small
                          color="error"
                          class="delete-btn"
                          @click="removeRelationship(index)"
                        >
                          삭제
                        </v-btn>
                      </v-list-item-action>
                    </v-list-item>
                  </v-list>
                  <v-card-text
                    v-else
                    class="text-center grey--text"
                  >
                    인물 관계가 없습니다. 위 입력창에서 인물 관계를 추가해주세요. (최대 10개)
                  </v-card-text>
                </v-card>
              </v-col>
            </v-row>

            <!-- 활성화 상태 -->
            <v-row v-show="isEdit">
              <v-col cols="12">
                <v-divider class="my-4" />
                <v-switch
                  v-model="character.isActive"
                  label="캐릭터 활성화"
                  color="primary"
                  hide-details
                  class="mt-2"
                />
              </v-col>
            </v-row>
          </v-card-text>

          <v-card-actions>
            <v-spacer />
            <v-btn
              color="error"
              text
              :disabled="isLoading"
              @click="goBack"
            >
              취소
            </v-btn>
            <v-btn
              color="primary"
              :loading="isLoading"
              :disabled="isSaveDisabled"
              @click="saveCharacter"
            >
              {{ isEdit ? '수정' : '저장' }}
            </v-btn>
          </v-card-actions>
        </v-form>
      </v-card>
    </v-container>
  </div>
</template>

<script>
import {getCharacter, createCharacter, updateCharacter} from '@/api/character';
import { searchOriginals } from '@/api/original';

export default {
  name: "CharacterForm",

  data() {
    return {
      isLoading: false,
      isFormValid: false,
      isEdit: false,
      previewImage: null,
      newMemoryTitle: '',
      newMemoryContent: '',
      newMemoryEmotion: '',
      newRelationship: {
        personName: '',
        relationshipName: '',
        description: '',
        importance: null,
        relationshipType: '',
        currentStatus: ''
      },
      newHobby: '',
      newValue: '',
      newGoal: '',
      newPersonalityTrait: '',
      newPersonalityDescription: '',
      newBackgroundTopic: '',
      newBackgroundDescription: '',
      tags: [],
      memories: [],
      relationships: [],
      hobbies: [],
      values: [],
      goals: [],
      personalities: [],
      backgrounds: [],
      originalCharacter: null, // 원본 캐릭터 데이터 저장용
      // 원작 선택 상태
      selectedOriginalId: null,
      selectedOriginal: null,
      originalOptions: [],
      originalSearchTerm: '',
      originalLoading: false,
      originalDebounce: null,
      character: {
        id: null,
        name: '',
        description: '',
        image: null,
        imageUrl: '',
        isActive: true,
        gender: '',
        age: '',
        mbti: '',
        characterType: '',
        originalWorkId: null,
        originalTitle: '',
        originalLink: '',
        speechPattern: '',
        speechStyle: '',
        appearance: '',
        systemPrompt: '',
        tags: [],
        memories: [],
        relationships: [],
        hobbies: [],
        values: [],
        goals: [],
        personalities: [],
        backgrounds: []
      },
      ageRules: [
        v => !!v || '나이를 입력하세요',
        v => (v && !isNaN(v) && parseInt(v) >= 0) || '유효한 나이를 입력하세요'
      ],
      tagRules: [
        v => v.length <= 20 || '태그는 최대 20개까지 등록 가능합니다'
      ],
      nameRules: [
        v => !!v || '이름을 입력하세요',
        v => (v && v.trim().length > 0) || '이름을 입력하세요'
      ],
      descriptionRules: [
        v => !!v || '한 줄 소개를 입력하세요',
        v => (v && v.trim().length > 0) || '한 줄 소개를 입력하세요'
      ],
      imageRules: [
        v => (this.isEdit ? true : (!!v || '이미지를 선택하세요'))
      ],
      genderOptions: ['남성', '여성', '기타'],
      mbtiOptions: [
        'INTJ', 'INTP', 'ENTJ', 'ENTP',
        'INFJ', 'INFP', 'ENFJ', 'ENFP',
        'ISTJ', 'ISFJ', 'ESTJ', 'ESFJ',
        'ISTP', 'ISFP', 'ESTP', 'ESFP'
      ],
      typeOptions: ['Clone', 'Character'],
      systemPromptRules: [
        v => (this.isEdit ? true : (!!v && v.trim().length > 0) || '시스템 프롬프트를 입력하세요')
      ],
      // 인물 관계 옵션 및 검증 규칙
      relationshipTypeOptions: ['가족', '친구', '동료', '연인', '기타'],
      relationshipStatusOptions: ['생존', '사망', '불명'],
      personNameRules: [
        v => (v === '' || v != null) || '상대방 이름을 입력하세요',
        v => (!v || (typeof v === 'string' && v.length <= 10)) || '최대 10자까지 입력 가능합니다',
        v => (!!v && v.trim().length > 0) || '상대방 이름을 입력하세요'
      ],
      relationshipNameRules: [
        v => (!!v && v.trim().length > 0) || '관계명을 입력하세요',
        v => (typeof v === 'string' && v.length <= 20) || '최대 20자까지 입력 가능합니다'
      ],
      relationshipDescriptionRules: [
        v => (!v || (typeof v === 'string' && v.length <= 500)) || '최대 500자까지 입력 가능합니다'
      ],
      relationshipImportanceRules: [
        v => (v !== null && v !== '' && !isNaN(v)) || '중요도를 입력하세요',
        v => (parseInt(v) >= 1 && parseInt(v) <= 10) || '1~10 사이 숫자만 입력 가능합니다'
      ],
      relationshipTypeRules: [
        v => (!!v && v.trim().length > 0) || '관계 타입을 입력하세요',
        v => (typeof v === 'string' && v.length <= 10) || '최대 10자까지 입력 가능합니다'
      ],
      relationshipStatusRules: [
        v => (!!v && v.trim().length > 0) || '현재 상태를 입력하세요',
        v => (typeof v === 'string' && v.length <= 10) || '최대 10자까지 입력 가능합니다'
      ]
    }
  },

  computed: {
    isSaveDisabled() {
      if (this.isLoading) return true;
      // 등록(create) 모드에서는 폼 유효성으로 판단
      if (!this.isEdit) {
        return !this.isFormValid;
      }

      // 수정(edit) 모드에서는 변경 사항이 있는지만 판단(필수값 유효성과 무관)
      const changed = this.getChangedFields();
      const hasNonIdField = Object.keys(changed || {}).some(k => k !== 'id');
      const imageChanged = !!this.character.image; // 새 이미지 선택 여부
      return !(hasNonIdField || imageChanged);
    }
  },

  watch: {
    'character.image': {
      handler(newImage) {
        if (newImage) {
          this.createImagePreview(newImage);
        } else {
          this.previewImage = null;
        }
      }
    },
    originalSearchTerm(val) {
      if (this.originalDebounce) clearTimeout(this.originalDebounce);
      if (!val || !val.trim()) {
        this.originalOptions = [];
        return;
      }
      this.originalDebounce = setTimeout(this.searchOriginalWorks, 300);
    }
  },

  created() {
    // 수정 모드인지 확인
    if (this.$route.query.id) {
      this.isEdit = true;
      this.loadCharacter(this.$route.query.id);
    }
  },

  methods: {
    notifyError(message) {
      this.$dialog.notify.error(message);
    },

    notifySuccess(message) {
      this.$dialog.notify.success(message);
    },

    async searchOriginalWorks() {
      try {
        this.originalLoading = true;
        const term = (this.originalSearchTerm || '').trim();
        if (!term) {
          this.originalOptions = [];
          return;
        }
        const res = await searchOriginals(term);
        if (res && res.status === 200 && res.data && res.data.success === true) {
          const data = res.data.data;
          const items = (data && data.content) ? data.content : (Array.isArray(data) ? data : []);
          this.originalOptions = items || [];
        } else {
          this.originalOptions = [];
        }
      } catch (e) {
        this.originalOptions = [];
      } finally {
        this.originalLoading = false;
      }
    },

    onOriginalChange(val) {
      if (!val) {
        this.selectedOriginal = null;
        this.selectedOriginalId = null;
        this.character.originalWorkId = null;
        return;
      }
      const id = Number(val);
      const found = (this.originalOptions || []).find(o => Number(o.id) === id);
      if (found) {
        this.selectedOriginal = { id: Number(found.id), title: found.title, imageUrl: found.imageUrl };
      } else if (this.selectedOriginal && Number(this.selectedOriginal.id) === id) {
        // keep current selectedOriginal
      } else {
        this.selectedOriginal = { id };
      }
      this.selectedOriginalId = id;
      this.character.originalWorkId = id;
    },

    clearSelectedOriginal() {
      this.selectedOriginal = null;
      this.selectedOriginalId = null;
      this.character.originalWorkId = null;
    },

    goBack() {
      this.$router.push('/character');
    },

    validateNumberInput() {
      // 숫자만 입력 가능하도록 처리
      if (this.character.age && isNaN(this.character.age)) {
        this.character.age = this.character.age.replace(/[^0-9]/g, '');
      }
    },

    createImagePreview(file) {
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (e) => {
        this.previewImage = e.target.result;
      };
      reader.readAsDataURL(file);
    },

    addTag() {
      const lastTag = this.tags[this.tags.length - 1];
      if (lastTag && typeof lastTag === 'string' && lastTag.trim()) {
        // 띄어쓰기 제거 및 50자 제한
        let processedTag = lastTag.trim().replace(/\s+/g, '');
        if (processedTag.length > 50) {
          processedTag = processedTag.substring(0, 50);
        }

        // 태그 개수 제한 (20개)
        if (this.tags.length <= 20) {
          this.tags.splice(this.tags.length - 1, 1, processedTag);
          this.$nextTick(() => {
            this.tags.push('');
          });
        } else {
          this.notifyError('태그는 최대 20개까지 등록 가능합니다.');
        }
      }
    },

    removeTag(item) {
      this.tags.splice(this.tags.indexOf(item), 1);
    },

    addMemory() {
      if (this.newMemoryTitle.trim() && this.newMemoryContent.trim()) {
        if (this.memories.length >= 20) {
          this.notifyError('기억은 최대 20개까지 등록 가능합니다.');
          return;
        }

        // 글자수 제한 적용
        let title = this.newMemoryTitle.trim();
        let content = this.newMemoryContent.trim();
        let emotion = this.newMemoryEmotion.trim();

        if (title.length > 100) {
          title = title.substring(0, 100);
        }

        if (content.length > 1000) {
          content = content.substring(0, 1000);
        }

        if (emotion.length > 50) {
          emotion = emotion.substring(0, 50);
        }

        // 새 기억 객체 생성 및 추가
        this.memories.unshift({
          title,
          content,
          emotion
        });

        // 입력 필드 초기화
        this.newMemoryTitle = '';
        this.newMemoryContent = '';
        this.newMemoryEmotion = '';
      }
    },

    removeMemory(index) {
      this.memories.splice(index, 1);
    },

    addRelationship() {
      const r = this.newRelationship;
      // 필수값 검사
      if (!r.personName || !r.relationshipName || !r.relationshipType || !r.currentStatus || r.importance === null || r.importance === '') {
        this.notifyError('상대방 이름, 관계명, 관계 타입, 현재 상태, 중요도를 모두 입력하세요.');
        return;
      }

      if (this.relationships.length >= 10) {
        this.notifyError('인물 관계는 최대 10개까지 등록 가능합니다.');
        return;
      }

      // 길이 제한 적용
      let personName = r.personName.trim().substring(0, 10);
      let relationshipName = r.relationshipName.trim().substring(0, 20);
      let description = (r.description || '').trim().substring(0, 500);

      // 중요도 범위 보정
      let importance = parseInt(r.importance);
      if (isNaN(importance)) importance = 1;
      importance = Math.max(1, Math.min(10, importance));

      // 타입/상태 길이 제한 적용
      let relationshipType = (r.relationshipType || '').trim().substring(0, 10);
      let currentStatus = (r.currentStatus || '').trim().substring(0, 10);

      const relationshipObj = {
        personName,
        relationshipName,
        description,
        importance,
        relationshipType,
        currentStatus
      };

      this.relationships.unshift(relationshipObj);

      // 입력 필드 초기화
      this.newRelationship = {
        personName: '',
        relationshipName: '',
        description: '',
        importance: null,
        relationshipType: '',
        currentStatus: ''
      };
    },

    removeRelationship(index) {
      this.relationships.splice(index, 1);
    },

    addHobby() {
      if (this.newHobby.trim()) {
        if (this.hobbies.length >= 10) {
          this.notifyError('취미는 최대 10개까지 등록 가능합니다.');
          return;
        }

        if (this.newHobby.length > 100) {
          this.newHobby = this.newHobby.substring(0, 100);
        }

        this.hobbies.unshift(this.newHobby.trim());
        this.newHobby = '';
      }
    },

    removeHobby(index) {
      this.hobbies.splice(index, 1);
    },

    addValue() {
      if (this.newValue.trim()) {
        if (this.values.length >= 10) {
          this.notifyError('가치관은 최대 10개까지 등록 가능합니다.');
          return;
        }

        if (this.newValue.length > 100) {
          this.newValue = this.newValue.substring(0, 100);
        }

        this.values.unshift(this.newValue.trim());
        this.newValue = '';
      }
    },

    removeValue(index) {
      this.values.splice(index, 1);
    },

    addGoal() {
      if (this.newGoal.trim()) {
        if (this.goals.length >= 10) {
          this.notifyError('목표는 최대 10개까지 등록 가능합니다.');
          return;
        }

        if (this.newGoal.length > 200) {
          this.newGoal = this.newGoal.substring(0, 200);
        }

        this.goals.unshift(this.newGoal.trim());
        this.newGoal = '';
      }
    },

    removeGoal(index) {
      this.goals.splice(index, 1);
    },

    addPersonality() {
      if (this.newPersonalityTrait.trim() && this.newPersonalityDescription.trim()) {
        if (this.personalities.length >= 10) {
          this.notifyError('성격 특성은 최대 10개까지 등록 가능합니다.');
          return;
        }

        // 글자수 제한 적용
        let trait = this.newPersonalityTrait.trim();
        let description = this.newPersonalityDescription.trim();

        if (trait.length > 100) {
          trait = trait.substring(0, 100);
        }

        if (description.length > 500) {
          description = description.substring(0, 500);
        }

        // 새 성격 특성 객체 생성 및 추가
        this.personalities.unshift({
          trait,
          description
        });

        // 입력 필드 초기화
        this.newPersonalityTrait = '';
        this.newPersonalityDescription = '';
      }
    },

    removePersonality(index) {
      this.personalities.splice(index, 1);
    },

    addBackground() {
      if (this.newBackgroundTopic.trim() && this.newBackgroundDescription.trim()) {
        if (this.backgrounds.length >= 10) {
          this.notifyError('세계관 정보는 최대 10개까지 등록 가능합니다.');
          return;
        }

        // 글자수 제한 적용
        let topic = this.newBackgroundTopic.trim();
        let description = this.newBackgroundDescription.trim();

        if (topic.length > 100) {
          topic = topic.substring(0, 100);
        }

        if (description.length > 1000) {
          description = description.substring(0, 1000);
        }

        // 새 세계관 객체 생성 및 추가
        this.backgrounds.unshift({
          topic,
          description
        });

        // 입력 필드 초기화
        this.newBackgroundTopic = '';
        this.newBackgroundDescription = '';
      }
    },

    removeBackground(index) {
      this.backgrounds.splice(index, 1);
    },

    // 공백과 null을 동일하게 취급하는 비교 함수
    areEqualConsideringBlankNull(a, b) {
      const a1 = (a === null || a === undefined) ? '' : a;
      const b1 = (b === null || b === undefined) ? '' : b;
      return a1 === b1;
    },

    // 로드된 캐릭터 데이터에서 null을 빈 문자열로 변환 (UI 표시용)
    normalizeCharacterData(data) {
      const result = { ...data };
      // 기본값 보정
      if (result.originalWorkId == null) result.originalWorkId = null;
      const simpleFields = [
        'name', 'systemPrompt', 'description', 'age', 'gender', 'mbti',
        'characterType', 'speechPattern', 'speechStyle', 'appearance', 'imageUrl'
      ];
      simpleFields.forEach(f => {
        if (result[f] == null) result[f] = '';
      });
      return result;
    },

    // 변경된 필드만 추출하는 함수
    getChangedFields() {
      if (!this.originalCharacter || !this.isEdit) {
        // 신규 등록인 경우 또는 원본 데이터가 없는 경우 전체 데이터 반환
        return {
          name: this.character.name,
          systemPrompt: this.character.systemPrompt,
          description: this.character.description,
          age: this.character.age,
          gender: this.character.gender,
          mbti: this.character.mbti,
          characterType: this.character.characterType,
          originalWorkId: this.character.originalWorkId,
          speechPattern: this.character.speechPattern,
          speechStyle: this.character.speechStyle,
          appearance: this.character.appearance,
          tags: this.character.tags || [],
          hobbies: this.character.hobbies || [],
          values: this.character.values || [],
          goals: this.character.goals || [],
          relationships: this.character.relationships || [],
          personalities: this.character.personalities || [],
          backgrounds: this.character.backgrounds || [],
          memories: this.character.memories || [],
          isActive: this.character.isActive
        };
      }

      // 변경된 필드만 포함하는 객체
      const changedFields = {
        id: this.character.id // ID는 항상 포함
      };

      // 기본 필드 비교
      const simpleFields = [
        'name', 'description', 'age', 'gender', 'mbti', 'characterType', 'originalWorkId',
        'speechPattern', 'speechStyle', 'isActive'
      ];

      simpleFields.forEach(field => {
        if (!this.areEqualConsideringBlankNull(this.character[field], this.originalCharacter[field])) {
          changedFields[field] = this.character[field];
        }
      });

      if (!this.areEqualConsideringBlankNull(this.character.systemPrompt, this.originalCharacter.systemPrompt)) {
        changedFields.systemPrompt = this.character.systemPrompt;
      }

      if (!this.areEqualConsideringBlankNull(this.character.appearance, this.originalCharacter.appearance)) {
        changedFields.appearance = this.character.appearance;
      }

      // 배열 필드 비교 (깊은 비교)
      const arrayFields = [
        'tags', 'hobbies', 'values', 'goals'
      ];

      arrayFields.forEach(field => {
        const original = this.originalCharacter[field] || [];
        const current = this.character[field] || [];

        // 길이가 다르거나 내용이 다른 경우
        if (original.length !== current.length ||
            JSON.stringify(original) !== JSON.stringify(current)) {
          changedFields[field] = current;
        }
      });

      // 복잡한 객체 배열 비교
      const objectArrayFields = [
        'personalities', 'backgrounds', 'memories', 'relationships'
      ];

      objectArrayFields.forEach(field => {
        const original = this.originalCharacter[field] || [];
        const current = this.character[field] || [];

        // 길이가 다르거나 내용이 다른 경우
        if (original.length !== current.length ||
            JSON.stringify(original) !== JSON.stringify(current)) {
          changedFields[field] = current;
        }
      });

      // 특수 규칙: 기존에 원작이 연결되어 있었고, 해제(선택 제거)한 경우 서버 규약에 따라 0으로 전송
      if (this.isEdit && ('originalWorkId' in changedFields)) {
        const prev = this.originalCharacter && this.originalCharacter.originalWorkId;
        const curr = changedFields.originalWorkId;
        if ((curr === null || curr === undefined || curr === '') && (prev !== null && prev !== undefined && Number(prev) > 0)) {
          changedFields.originalWorkId = 0;
        }
      }

      return changedFields;
    },

    async loadCharacter(id) {
      this.isLoading = true;
      try {
        const response = await getCharacter(id);

        // API 응답에서 캐릭터 정보 설정
        if (response && response.status === 200 && response.data.success === true) {
          const data = response.data.data;

          // 원본 데이터 저장 (깊은 복사)
          this.originalCharacter = JSON.parse(JSON.stringify(data));

          // 기본 데이터 설정 (null 값을 UI 표시를 위해 빈 문자열로 변환)
          const normalized = this.normalizeCharacterData(data);
          this.character = {
            ...this.character, // 기본 구조 유지
            ...normalized,  // API 응답 데이터(정규화)로 덮어쓰기
            image: null        // 파일 입력은 초기화
          };

          // 원작 선택 UI 반영
          if (this.character.originalWork) {
            const d = this.character.originalWork;
            this.selectedOriginal = d ? { id: Number(d.id), title: d.title, imageUrl: d.imageUrl } : null;
            this.selectedOriginalId = d ? Number(d.id) : null;
            this.character.originalWorkId = d ? Number(d.id) : null;
            this.originalCharacter.originalWorkId = d ? Number(d.id) : null;
          } else {
            this.selectedOriginal = null;
            this.selectedOriginalId = null;
          }

          // 태그, 메모리, 인물관계, 취미, 가치관, 목표, 성격 특성, 세계관 설정
          this.tags = data.tags || [];
          this.memories = data.memories || [];
          this.relationships = data.relationships || [];
          this.hobbies = data.hobbies || [];
          this.values = data.values || [];
          this.goals = data.goals || [];
          this.personalities = data.personalities || [];
          this.backgrounds = data.backgrounds || [];
        } else {
          this.notifyError('캐릭터 정보를 불러올 수 없습니다.');
        }
      } catch (e) {
        console.error('캐릭터 정보 로드 오류:', e);
        this.notifyError('캐릭터 정보를 불러오는데 실패했습니다.');
      } finally {
        this.isLoading = false;
      }
    },

    async saveCharacter() {
      // 등록(create) 모드에서만 필수값 유효성 검사를 강제
      if (!this.isEdit && !this.isFormValid) {
        this.notifyError("필수 항목을 모두 입력하세요");
        return;
      }

      if (this.isLoading) return;

      this.isLoading = true;

      try {
        // 태그, 메모리, 인물관계, 취미, 가치관, 목표, 성격 특성, 세계관 데이터 설정
        this.character.tags = this.tags.filter(tag => tag && typeof tag === 'string' && tag.trim());
        this.character.memories = [...this.memories];
        this.character.relationships = [...this.relationships];
        this.character.hobbies = [...this.hobbies];
        this.character.values = [...this.values];
        this.character.goals = [...this.goals];
        this.character.personalities = [...this.personalities];
        this.character.backgrounds = [...this.backgrounds];

        // 선택된 원작 기준으로 originalWorkId 최종 반영
        if (this.selectedOriginalId !== null) {
          this.character.originalWorkId = this.selectedOriginalId;
        }

        let response;

        if (this.isEdit) {
          // 수정 시 변경된 필드만 전송
          const changedData = this.getChangedFields();
          // 인물관계는 삭제를 포함해 항상 서버와 동기화를 보장하기 위해 항상 포함
          changedData.relationships = this.character.relationships || [];
          response = await updateCharacter(changedData, this.character.image);
        } else {
          // 신규 등록 시 ID 필드를 제외한 데이터 전송
          const characterWithoutId = { ...this.character };
          delete characterWithoutId.id;
          response = await createCharacter(characterWithoutId);
        }

        if (response && response.status === 200 && response.data && response.data.success === true) {
            this.notifySuccess(this.isEdit ? '캐릭터가 수정되었습니다.' : '캐릭터가 등록되었습니다.');
            this.goBack();
        } else {
          this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.');
        }
      } catch (e) {
        console.error('캐릭터 저장 오류:', e);
        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.');
      } finally {
        this.isLoading = false;
      }
    },

    // ===== JSON 내보내기/가져오기 =====
    buildSerializablePayload() {
      const c = {
        ...this.character,
        tags: this.tags.filter(t => t && typeof t === 'string' && t.trim()),
        hobbies: [...this.hobbies],
        values: [...this.values],
        goals: [...this.goals],
        relationships: [...this.relationships],
        personalities: [...this.personalities],
        backgrounds: [...this.backgrounds],
        memories: [...this.memories]
      };

      // 이미지 및 상태 관련 필드 제외
      delete c.image;
      delete c.imageUrl;
      delete c.isActive;

      return {
        version: 1,
        ...c
      };
    },

    exportToJson() {
      try {
        const payload = this.buildSerializablePayload();
        const json = JSON.stringify(payload, null, 2);
        const blob = new Blob([json], { type: 'application/json;charset=utf-8' });

        const filenameBase = (this.character.name || 'character').replace(/\s+/g, '_');
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = `${filenameBase}.character.json`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(link.href);
        this.notifySuccess('JSON 파일로 내보냈습니다.');
      } catch (e) {
        console.error(e);
        this.notifyError('내보내기 중 오류가 발생했습니다.');
      }
    },

    onImportFileChange(e) {
      const file = e.target.files && e.target.files[0];
      if (!file) return;
      const reader = new FileReader();
      reader.onload = () => {
        try {
          const text = reader.result;
          const data = JSON.parse(text);
          this.applyImportedData(data);
          this.notifySuccess('JSON 데이터를 불러왔습니다.');
        } catch (err) {
          console.error(err);
          this.notifyError('유효한 JSON 파일이 아닙니다.');
        } finally {
          // 동일 파일 재업로드 허용
          e.target.value = '';
        }
      };
      reader.readAsText(file, 'utf-8');
    },

    applyImportedData(data) {
      // 1) 버전/형식 검증
      if (!data || (data.version !== 1 && data.version !== undefined)) {
        throw new Error('지원되지 않는 파일 버전입니다.');
      }

      // 2) 안전한 추출(helper)
      const arr = (v) => Array.isArray(v) ? v : [];
      const str = (v) => (v == null ? '' : String(v));

      // 3) 이미지 및 상태 관련 필드 강제 제거 (파일 포맷 요구사항)
      if (data) {
        delete data.image;
        delete data.imageUrl;
        delete data.isActive;
      }

      // 4) 기본 필드 주입
      const patch = {
        name: str(data.name),
        description: str(data.description),
        systemPrompt: str(data.systemPrompt),
        age: str(data.age),
        gender: str(data.gender),
        mbti: str(data.mbti),
        characterType: str(data.characterType),
        originalWorkId: data.originalWorkId == null ? null : Number(data.originalWorkId),
        speechPattern: str(data.speechPattern),
        speechStyle: str(data.speechStyle),
        appearance: str(data.appearance)
      };

      // 5) 배열 필드 주입 + 간단 검증/정제
      const sanitizeString = (s, max) => String(s || '').trim().substring(0, max);

      this.tags = arr(data.tags).map(t => sanitizeString(t, 50)).slice(0, 20);
      this.hobbies = arr(data.hobbies).map(h => sanitizeString(h, 100)).slice(0, 10);
      this.values = arr(data.values).map(v => sanitizeString(v, 100)).slice(0, 10);
      this.goals = arr(data.goals).map(g => sanitizeString(g, 200)).slice(0, 10);

      this.memories = arr(data.memories).map(m => ({
        title: sanitizeString(m.title, 100),
        content: sanitizeString(m.content, 1000),
        emotion: sanitizeString(m.emotion, 50)
      })).slice(0, 20);

      this.relationships = arr(data.relationships).map(r => ({
        personName: sanitizeString(r.personName, 10),
        relationshipName: sanitizeString(r.relationshipName, 20),
        description: sanitizeString(r.description, 500),
        importance: Math.max(1, Math.min(10, parseInt(r.importance || 1))),
        relationshipType: sanitizeString(r.relationshipType, 10),
        currentStatus: sanitizeString(r.currentStatus, 10)
      })).slice(0, 10);

      this.personalities = arr(data.personalities).map(p => ({
        trait: sanitizeString(p.trait, 100),
        description: sanitizeString(p.description, 500)
      })).slice(0, 10);

      this.backgrounds = arr(data.backgrounds).map(b => ({
        topic: sanitizeString(b.topic, 100),
        description: sanitizeString(b.description, 1000)
      })).slice(0, 10);

      // 6) character에 반영 (image는 반드시 null 유지)
      this.character = {
        ...this.character,
        ...patch,
        image: null
      };
    }
  }
}
</script>

<style scoped>
.v-card {
  border-radius: 8px;
}

.memory-container {
  max-height: 300px;
  overflow-y: auto;
}

.memory-list {
  max-height: 280px;
  overflow-y: auto;
}

.memory-item {
  background-color: #f5f5f5;
  margin-bottom: 4px;
  border-radius: 4px;
}

.memory-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.delete-btn {
  font-size: 12px;
}

.custom-caption {
  font-size: 16px !important;
}

.required-asterisk >>> .v-label::after {
  content: ' *';
  color: #ff5252;
}
</style>
