<template>
  <div>
    <v-toolbar dark>
      <v-btn
        icon
        @click="goBack"
      >
        <v-icon>mdi-arrow-left</v-icon>
      </v-btn>
      <v-spacer />
      <v-toolbar-title>시리즈 배너 관리</v-toolbar-title>
      <v-spacer />
    </v-toolbar>

    <v-container>
      <v-row>
        <v-col cols="4">
          <v-btn
            color="primary"
            dark
            @click="showAddDialog"
          >
            배너 추가
          </v-btn>
        </v-col>
        <v-spacer />
      </v-row>

      <!-- 로딩 표시 -->
      <v-row v-if="isLoading && banners.length === 0">
        <v-col class="text-center">
          <v-progress-circular
            indeterminate
            color="primary"
            size="64"
          />
        </v-col>
      </v-row>

      <!-- 배너 그리드 -->
      <v-row>
        <draggable
          v-model="banners"
          class="row"
          style="width: 100%"
          :options="{ animation: 150 }"
          @end="onDragEnd"
        >
          <v-col
            v-for="banner in banners"
            :key="banner.id"
            cols="12"
            sm="6"
            md="4"
            lg="3"
            class="banner-item"
          >
            <v-card
              class="mx-auto"
              max-width="300"
            >
              <v-img
                :src="banner.imagePath || banner.imageUrl"
                height="200"
                contain
              />
              <v-card-text class="text-center">
                <div>{{ resolveSeriesTitle(banner) }}</div>
              </v-card-text>
              <v-card-actions>
                <v-spacer />
                <v-btn
                  small
                  color="primary"
                  @click="showEditDialog(banner)"
                >
                  수정
                </v-btn>
                <v-btn
                  small
                  color="error"
                  @click="confirmDelete(banner)"
                >
                  삭제
                </v-btn>
                <v-spacer />
              </v-card-actions>
            </v-card>
          </v-col>
        </draggable>
      </v-row>

      <!-- 데이터가 없을 때 표시 -->
      <v-row v-if="!isLoading && banners.length === 0">
        <v-col class="text-center">
          <p>등록된 배너가 없습니다.</p>
        </v-col>
      </v-row>

      <!-- 무한 스크롤 로딩 -->
      <v-row v-if="isLoading && banners.length > 0">
        <v-col class="text-center">
          <v-progress-circular
            indeterminate
            color="primary"
          />
        </v-col>
      </v-row>
    </v-container>

    <!-- 배너 추가/수정 다이얼로그 -->
    <v-dialog
      v-model="showDialog"
      max-width="600px"
      persistent
    >
      <v-card>
        <v-card-title>
          <span class="headline">{{ isEdit ? '배너 수정' : '배너 추가' }}</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="12">
                <v-file-input
                  v-model="bannerForm.image"
                  label="배너 이미지"
                  accept="image/*"
                  prepend-icon="mdi-camera"
                  show-size
                  truncate-length="15"
                  :rules="imageRules"
                  outlined
                />
              </v-col>
            </v-row>
            <v-row v-if="previewImage || (isEdit && bannerForm.imageUrl)">
              <v-col
                cols="12"
                class="text-center"
              >
                <v-img
                  :src="previewImage || bannerForm.imageUrl"
                  max-height="200"
                  contain
                />
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12">
                <v-text-field
                  v-model="searchKeyword"
                  label="시리즈 검색"
                  outlined
                  @keyup.enter="searchSeries"
                />
              </v-col>
            </v-row>
            <v-row v-if="searchResults.length > 0">
              <v-col cols="12">
                <v-list>
                  <v-list-item
                    v-for="series in searchResults"
                    :key="series.id"
                    @click="selectSeries(series)"
                  >
                    <v-list-item-avatar>
                      <v-img :src="series.imageUrl" />
                    </v-list-item-avatar>
                    <v-list-item-content>
                      <v-list-item-title>{{ series.title || series.name }}</v-list-item-title>
                    </v-list-item-content>
                  </v-list-item>
                </v-list>
              </v-col>
            </v-row>
            <v-row v-if="searchPerformed && searchResults.length === 0">
              <v-col cols="12">
                <v-alert
                  type="info"
                  outlined
                >
                  검색결과가 없습니다.
                </v-alert>
              </v-col>
            </v-row>
            <v-row v-if="selectedSeries">
              <v-col cols="12">
                <v-alert
                  type="info"
                  outlined
                >
                  <v-row align="center">
                    <v-col cols="auto">
                      <v-avatar size="50">
                        <v-img :src="selectedSeries.imageUrl" />
                      </v-avatar>
                    </v-col>
                    <v-col>
                      <div class="font-weight-medium">
                        선택된 시리즈: {{ selectedSeries.title || selectedSeries.name }}
                      </div>
                    </v-col>
                  </v-row>
                </v-alert>
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn
            color="blue darken-1"
            text
            @click="closeDialog"
          >
            취소
          </v-btn>
          <v-btn
            color="blue darken-1"
            text
            :disabled="!isFormValid || isSubmitting"
            @click="saveBanner"
          >
            {{ isSubmitting ? '저장중...' : (isEdit ? '수정' : '추가') }}
          </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>
          이 배너를 삭제하시겠습니까?
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn
            color="blue darken-1"
            text
            @click="showDeleteDialog = false"
          >
            취소
          </v-btn>
          <v-btn
            color="red darken-1"
            text
            :disabled="isSubmitting"
            @click="deleteBanner"
          >
            삭제
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import {
  getSeriesBannerList,
  createSeriesBanner,
  updateSeriesBanner,
  deleteSeriesBanner,
  updateSeriesBannerOrder,
  searchSeriesList
} from '@/api/audio_content_series'

export default {
  name: 'ContentSeriesBanner',
  components: { draggable },
  data() {
    return {
      isLoading: false,
      isSubmitting: false,
      banners: [],
      page: 1,
      hasMoreItems: true,
      showDialog: false,
      showDeleteDialog: false,
      isEdit: false,
      selectedBanner: null,
      selectedSeries: null,
      searchKeyword: '',
      searchResults: [],
      searchPerformed: false,
      previewImage: null,
      bannerForm: {
        image: null,
        imageUrl: '',
        seriesId: null,
        bannerId: null
      },
      imageRules: [
        v => !!v || this.isEdit || '이미지를 선택하세요'
      ]
    }
  },
  computed: {
    isFormValid() {
      return (this.bannerForm.image || (this.isEdit && this.bannerForm.imageUrl)) && this.selectedSeries
    }
  },
  watch: {
    'bannerForm.image'(newImage) {
      if (newImage) {
        this.createImagePreview(newImage)
      } else {
        this.previewImage = null
      }
    }
  },
  mounted() {
    this.loadBanners()
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    notifyError(message) {
      this.$dialog && this.$dialog.notify && this.$dialog.notify.error ? this.$dialog.notify.error(message) : console.error(message)
    },
    notifySuccess(message) {
      this.$dialog && this.$dialog.notify && this.$dialog.notify.success ? this.$dialog.notify.success(message) : console.log(message)
    },
    goBack() {
      this.$router.push('/content/series/list')
    },
    resolveSeriesTitle(banner) {
      return banner.seriesTitle || banner.seriesName || banner.title || banner.name || '시리즈'
    },
    async loadBanners() {
      if (this.isLoading || !this.hasMoreItems) return
      this.isLoading = true
      try {
        const response = await getSeriesBannerList(this.page)
        if (response && response.status === 200 && response.data && response.data.success === true) {
          const data = response.data.data
          const newBanners = (data && (data.content || data.items || data)) || []
          this.banners = [...this.banners, ...newBanners]
          this.hasMoreItems = newBanners.length > 0
          this.page++
        } else {
          this.notifyError('배너 목록을 불러오는데 실패했습니다.')
        }
      } catch (e) {
        this.notifyError('배너 목록을 불러오는데 실패했습니다.')
      } finally {
        this.isLoading = false
      }
    },
    handleScroll() {
      const scrollPosition = window.innerHeight + window.scrollY
      const documentHeight = document.documentElement.offsetHeight
      if (scrollPosition >= documentHeight - 200 && !this.isLoading && this.hasMoreItems) {
        this.loadBanners()
      }
    },
    showAddDialog() {
      this.isEdit = false
      this.selectedSeries = null
      this.bannerForm = { image: null, imageUrl: '', seriesId: null, bannerId: null }
      this.previewImage = null
      this.searchKeyword = ''
      this.searchResults = []
      this.searchPerformed = false
      this.showDialog = true
    },
    showEditDialog(banner) {
      this.isEdit = true
      this.selectedBanner = banner
      this.selectedSeries = {
        id: banner.seriesId,
        title: banner.seriesTitle || banner.seriesName || banner.title || banner.name,
        imageUrl: banner.seriesImageUrl
      }
      this.bannerForm = {
        image: null,
        imageUrl: banner.imageUrl || banner.imagePath,
        seriesId: banner.seriesId,
        bannerId: banner.id
      }
      this.previewImage = null
      this.searchKeyword = ''
      this.searchResults = []
      this.searchPerformed = false
      this.showDialog = true
    },
    closeDialog() {
      this.showDialog = false
      this.selectedSeries = null
      this.bannerForm = { image: null, imageUrl: '', seriesId: null, bannerId: null }
      this.previewImage = null
      this.searchKeyword = ''
      this.searchResults = []
      this.searchPerformed = false
    },
    confirmDelete(banner) {
      this.selectedBanner = banner
      this.showDeleteDialog = true
    },
    createImagePreview(file) {
      if (!file) return
      const reader = new FileReader()
      reader.onload = (e) => {
        this.previewImage = e.target.result
      }
      reader.readAsDataURL(file)
    },
    async searchSeries() {
      if (!this.searchKeyword || this.searchKeyword.length < 2) {
        this.notifyError('검색어를 2글자 이상 입력하세요.')
        return
      }
      try {
        const response = await searchSeriesList(this.searchKeyword)
        if (response && response.status === 200 && response.data && response.data.success === true) {
          const data = response.data.data
          this.searchResults = Array.isArray(data) ? data : (data && (data.content || data.items)) || []
          this.searchPerformed = true
        }
      } catch (error) {
        console.error('시리즈 검색 오류:', error)
        this.notifyError('시리즈 검색에 실패했습니다.')
      }
    },
    selectSeries(series) {
      this.selectedSeries = series
      this.bannerForm.seriesId = series.id
      this.searchResults = []
    },
    async saveBanner() {
      if (!this.isFormValid || this.isSubmitting) return
      this.isSubmitting = true
      try {
        if (this.isEdit) {
          const response = await updateSeriesBanner({
            image: this.bannerForm.image,
            seriesId: this.selectedSeries.id,
            bannerId: this.bannerForm.bannerId
          })
          if (response && response.status === 200 && response.data && response.data.success === true) {
            this.notifySuccess('배너가 수정되었습니다.')
          } else {
            this.notifyError('배너 수정을 실패했습니다.')
          }
        } else {
          const response = await createSeriesBanner({
            image: this.bannerForm.image,
            seriesId: this.selectedSeries.id
          })
          if (response && response.status === 200 && response.data && response.data.success === true) {
            this.notifySuccess('배너가 추가되었습니다.')
            this.closeDialog()
            this.refreshBanners()
          } else {
            this.notifyError('배너 추가를 실패했습니다.')
          }
        }
      } catch (error) {
        console.error('배너 저장 오류:', error)
        this.notifyError('배너 저장에 실패했습니다.')
      } finally {
        this.isSubmitting = false
      }
    },
    async deleteBanner() {
      if (!this.selectedBanner || this.isSubmitting) return
      this.isSubmitting = true
      try {
        const response = await deleteSeriesBanner(this.selectedBanner.id)
        if (response && response.status === 200 && response.data && response.data.success === true) {
          this.notifySuccess('배너가 삭제되었습니다.')
          this.showDeleteDialog = false
          this.refreshBanners()
        } else {
          this.notifyError('배너 삭제에 실패했습니다.')
        }
      } catch (error) {
        console.error('배너 삭제 오류:', error)
        this.notifyError('배너 삭제에 실패했습니다.')
      } finally {
        this.isSubmitting = false
      }
    },
    refreshBanners() {
      this.banners = []
      this.page = 1
      this.hasMoreItems = true
      this.loadBanners()
    },
    async onDragEnd() {
      try {
        const bannerIds = this.banners.map(banner => banner.id)
        const response = await updateSeriesBannerOrder(bannerIds)
        if (response && response.status === 200 && response.data && response.data.success === true) {
          this.notifySuccess('배너 순서가 변경되었습니다.')
        } else {
          this.notifyError('배너 순서 변경에 실패했습니다.')
        }
      } catch (error) {
        console.error('배너 순서 변경 오류:', error)
        this.notifyError('배너 순서 변경에 실패했습니다.')
        this.refreshBanners()
      }
    }
  }
}
</script>

<style scoped>
.banner-item {
  transition: all 0.3s;
}

.banner-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
</style>
