<template>
  <div>
    <v-toolbar dark>
      <v-spacer />
      <v-toolbar-title>캐릭터 큐레이션</v-toolbar-title>
      <v-spacer />
    </v-toolbar>

    <v-container>
      <v-row class="mb-4">
        <v-col
          cols="12"
          sm="4"
        >
          <v-btn
            color="primary"
            dark
            @click="showWriteDialog"
          >
            큐레이션 등록
          </v-btn>
        </v-col>
      </v-row>

      <v-row>
        <v-col>
          <v-data-table
            :headers="headers"
            :items="curations"
            :loading="isLoading"
            item-key="id"
            class="elevation-1"
            hide-default-footer
            disable-pagination
          >
            <template v-slot:body="props">
              <draggable
                v-model="props.items"
                tag="tbody"
                @end="onDragEnd(props.items)"
              >
                <tr
                  v-for="item in props.items"
                  :key="item.id"
                >
                  <td @click="goDetail(item)">
                    {{ item.title }}
                  </td>
                  <td @click="goDetail(item)">
                    <h3 v-if="item.isAdult">
                      O
                    </h3>
                    <h3 v-else>
                      X
                    </h3>
                  </td>
                  <td>
                    <v-row>
                      <v-col class="text-center">
                        <v-btn
                          small
                          color="primary"
                          :disabled="isLoading"
                          @click="showModifyDialog(item)"
                        >
                          수정
                        </v-btn>
                      </v-col>
                      <v-col class="text-center">
                        <v-btn
                          small
                          color="error"
                          :disabled="isLoading"
                          @click="confirmDelete(item)"
                        >
                          삭제
                        </v-btn>
                      </v-col>
                    </v-row>
                  </td>
                </tr>
              </draggable>
            </template>
          </v-data-table>
        </v-col>
      </v-row>
    </v-container>

    <!-- 등록/수정 다이얼로그 -->
    <v-dialog
      v-model="showDialog"
      max-width="600px"
      persistent
    >
      <v-card>
        <v-card-title>
          <span class="headline">{{ isModify ? '큐레이션 수정' : '큐레이션 등록' }}</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="12">
                <v-text-field
                  v-model="form.title"
                  label="제목"
                  outlined
                  required
                />
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12">
                <v-checkbox
                  v-model="form.isAdult"
                  label="19금"
                />
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn
            text
            color="blue darken-1"
            @click="closeDialog"
          >
            취소
          </v-btn>
          <v-btn
            text
            color="blue darken-1"
            :loading="isSubmitting"
            :disabled="!isFormValid || isSubmitting"
            @click="saveCuration"
          >
            저장
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <!-- 삭제 확인 다이얼로그 -->
    <v-dialog
      v-model="showDeleteDialog"
      max-width="400px"
    >
      <v-card>
        <v-card-title class="headline">
          큐레이션 삭제
        </v-card-title>
        <v-card-text>"{{ selectedCuration && selectedCuration.title }}"을(를) 삭제하시겠습니까?</v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn
            text
            color="blue darken-1"
            @click="showDeleteDialog = false"
          >
            취소
          </v-btn>
          <v-btn
            text
            color="red darken-1"
            :loading="isSubmitting"
            @click="deleteCuration"
          >
            삭제
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import {
  getCharacterCurationList,
  createCharacterCuration,
  updateCharacterCuration,
  deleteCharacterCuration,
  updateCharacterCurationOrder
} from '@/api/character';

export default {
  name: 'CharacterCuration',
  components: { draggable },
  data() {
    return {
      isLoading: false,
      isSubmitting: false,
      curations: [],
      headers: [
        { text: '제목', align: 'center', sortable: false, value: 'title' },
        { text: '19금', align: 'center', sortable: false, value: 'isAdult' },
        { text: '관리', align: 'center', sortable: false, value: 'management' }
      ],
      showDialog: false,
      isModify: false,
      form: { id: null, title: '', isAdult: false },
      selectedCuration: null,
      showDeleteDialog: false
    };
  },
  computed: {
    isFormValid() {
      return this.form.title && this.form.title.trim().length > 0;
    }
  },
  async created() {
    await this.loadCurations();
  },
  methods: {
    notifyError(message) { this.$dialog.notify.error(message); },
    notifySuccess(message) { this.$dialog.notify.success(message); },

    async loadCurations() {
      this.isLoading = true;
      try {
        const res = await getCharacterCurationList();
        if (res.status === 200 && res.data && res.data.success === true) {
          this.curations = res.data.data || [];
        } else {
          this.notifyError(res.data.message || '목록을 불러오지 못했습니다.');
        }
      } catch (e) {
        this.notifyError('목록을 불러오지 못했습니다.');
      } finally {
        this.isLoading = false;
      }
    },

    onDragEnd(items) {
      const ids = items.map(i => i.id);
      this.updateOrders(ids);
    },

    async updateOrders(ids) {
      try {
        const res = await updateCharacterCurationOrder(ids);
        if (res.status === 200 && res.data && res.data.success === true) {
          this.notifySuccess('순서가 변경되었습니다.');
        } else {
          this.notifyError(res.data.message || '순서 변경에 실패했습니다.');
        }
      } catch (e) {
        this.notifyError('순서 변경에 실패했습니다.');
      }
    },

    goDetail(item) {
      this.$router.push({
        name: 'CharacterCurationDetail',
        params: { curationId: item.id, title: item.title, isAdult: item.isAdult }
      });
    },

    showWriteDialog() {
      this.isModify = false;
      this.form = { id: null, title: '', isAdult: false };
      this.showDialog = true;
    },

    showModifyDialog(item) {
      this.isModify = true;
      this.form = { id: item.id, title: item.title, isAdult: item.isAdult };
      this.showDialog = true;
    },

    closeDialog() {
      this.showDialog = false;
      this.form = { id: null, title: '', isAdult: false };
    },

    async saveCuration() {
      if (this.isSubmitting || !this.isFormValid) return;
      this.isSubmitting = true;
      try {
        if (this.isModify) {
          const payload = { id: this.form.id };
          if (this.form.title) payload.title = this.form.title;
          payload.isAdult = this.form.isAdult;
          const res = await updateCharacterCuration(payload);
          if (res.status === 200 && res.data && res.data.success === true) {
            this.notifySuccess('수정되었습니다.');
            this.closeDialog();
            await this.loadCurations();
          } else {
            this.notifyError(res.data.message || '수정에 실패했습니다.');
          }
        } else {
          const res = await createCharacterCuration({
            title: this.form.title,
            isAdult: this.form.isAdult,
            isActive: true
          });
          if (res.status === 200 && res.data && res.data.success === true) {
            this.notifySuccess('등록되었습니다.');
            this.closeDialog();
            await this.loadCurations();
          } else {
            this.notifyError(res.data.message || '등록에 실패했습니다.');
          }
        }
      } catch (e) {
        this.notifyError('저장 중 오류가 발생했습니다.');
      } finally {
        this.isSubmitting = false;
      }
    },

    confirmDelete(item) {
      this.selectedCuration = item;
      this.showDeleteDialog = true;
    },

    async deleteCuration() {
      if (!this.selectedCuration) return;
      this.isSubmitting = true;
      try {
        const res = await deleteCharacterCuration(this.selectedCuration.id);
        if (res.status === 200 && res.data && res.data.success === true) {
          this.notifySuccess('삭제되었습니다.');
          this.showDeleteDialog = false;
          await this.loadCurations();
        } else {
          this.notifyError(res.data.message || '삭제에 실패했습니다.');
        }
      } catch (e) {
        this.notifyError('삭제에 실패했습니다.');
      } finally {
        this.isSubmitting = false;
      }
    }
  }
};
</script>

<style scoped>
</style>
