import { computed, ref, watch } from 'vue'
import {
  getPostBodyPreviewThumbnailUrl,
  isPageCoverThumbnailUrl,
  isPostBodyThumbnailUrl,
  isPostCardThumbnailUrl,
  withGeneratedImageCacheVersion
} from '../lib/post-card-thumbnail-url.js'

/**
 * 자동 생성 파생 이미지 URL인지 확인한다.
 * @param {string|null|undefined} imageUrl - 검사할 이미지 URL
 * @returns {boolean} 자동 생성 이미지이면 true
 */
const isGeneratedThumbnailUrl = (imageUrl) => isPostCardThumbnailUrl(imageUrl)
  || isPostBodyThumbnailUrl(imageUrl)
  || isPageCoverThumbnailUrl(imageUrl)

/**
 * 관리자 게시물 폼의 대표 이미지 선택 모달 상태를 만든다.
 * @param {Object} options - 대표 이미지 선택 옵션
 * @param {Object} options.form - 게시물 폼 reactive 객체
 * @param {number} [options.pageSize=50] - 미디어 페이지 크기
 * @returns {Object} 대표 이미지 선택 상태와 이벤트 처리기
 */
export const useAdminFeaturedImagePicker = ({
  form,
  pageSize = 50
}) => {
  const mediaItems = ref([])
  const isMediaPickerOpen = ref(false)
  const mediaPickerTarget = ref('featuredImage')
  const isLoadingMedia = ref(false)
  const isUploadingFeaturedImage = ref(false)
  const activeMediaPickerTab = ref('upload')
  const selectedMediaPickerUrl = ref('')
  const mediaSearchQuery = ref('')
  const {
    displayValue: mediaSearchInput,
    onInput: onMediaSearchInput,
    onCompositionEnd: onMediaSearchCompositionEnd
  } = useImeSearchInput(mediaSearchQuery, { debounce: 250 })
  const mediaPickerPage = ref(1)
  const mediaPickerPageSize = pageSize
  const mediaPickerPagination = ref({
    page: 1,
    pageSize: mediaPickerPageSize,
    total: 0,
    pageCount: 1
  })

  /**
   * 미디어 선택 페이지네이션을 초기값으로 되돌린다.
   * @returns {void}
   */
  const resetMediaPickerPagination = () => {
    mediaPickerPage.value = 1
    mediaPickerPagination.value = {
      page: 1,
      pageSize: mediaPickerPageSize,
      total: 0,
      pageCount: 1
    }
  }

  /**
   * 미디어 라이브러리 목록을 조회한다.
   * @returns {Promise<void>}
   */
  const fetchMediaItems = async () => {
    isLoadingMedia.value = true

    try {
      const response = await $fetch('/admin/api/media', {
        query: {
          paged: '1',
          tab: 'library',
          page: mediaPickerPage.value,
          pageSize: mediaPickerPageSize,
          kind: 'image',
          search: mediaSearchQuery.value.trim() || undefined
        }
      })

      mediaItems.value = response?.items || []
      mediaPickerPagination.value = response?.pagination || {
        page: 1,
        pageSize: mediaPickerPageSize,
        total: mediaItems.value.length,
        pageCount: 1
      }
      mediaPickerPage.value = mediaPickerPagination.value.page || 1
    } finally {
      isLoadingMedia.value = false
    }
  }

  /**
   * 대표 이미지 선택 창을 연다.
   * @param {string} target - 선택 값을 적용할 폼 필드
   * @returns {Promise<void>}
   */
  const openMediaPicker = async (target = 'featuredImage') => {
    mediaPickerTarget.value = target
    activeMediaPickerTab.value = 'upload'
    mediaSearchQuery.value = ''
    resetMediaPickerPagination()
    selectedMediaPickerUrl.value = isGeneratedThumbnailUrl(form[target]) ? '' : form[target] || ''
    isMediaPickerOpen.value = true
  }

  /**
   * 대표 이미지 선택 창을 닫는다.
   * @returns {void}
   */
  const closeMediaPicker = () => {
    if (isUploadingFeaturedImage.value) {
      return
    }

    isMediaPickerOpen.value = false
    mediaItems.value = []
    mediaSearchQuery.value = ''
    resetMediaPickerPagination()
  }

  const featuredImageMediaItems = computed(() => mediaItems.value.filter((item) => (
    item?.kind === 'image' && !isGeneratedThumbnailUrl(item.url)
  )))

  const mediaPickerPageCount = computed(() => Math.max(1, Number(mediaPickerPagination.value.pageCount) || 1))

  const mediaPickerRangeLabel = computed(() => {
    const total = Number(mediaPickerPagination.value.total) || 0

    if (total <= 0) {
      return '0개'
    }

    const page = Math.min(Math.max(Number(mediaPickerPagination.value.page) || mediaPickerPage.value, 1), mediaPickerPageCount.value)
    const start = ((page - 1) * mediaPickerPageSize) + 1
    const end = Math.min(start + mediaPickerPageSize - 1, total)

    return `${total}개 중 ${start}-${end}개`
  })

  const mediaPickerPageItems = computed(() => {
    const total = mediaPickerPageCount.value
    const current = Math.min(Math.max(Number(mediaPickerPage.value) || 1, 1), total)
    const pages = new Set([1, total, current])

    for (let page = current - 2; page <= current + 2; page += 1) {
      pages.add(page)
    }

    if (current <= 3) {
      pages.add(2)
      pages.add(3)
      pages.add(4)
    }

    if (current >= total - 2) {
      pages.add(total - 3)
      pages.add(total - 2)
      pages.add(total - 1)
    }

    const orderedPages = [...pages].filter((page) => page >= 1 && page <= total).sort((left, right) => left - right)
    return orderedPages.reduce((items, page, index) => {
      const previousPage = orderedPages[index - 1]

      if (previousPage && page - previousPage > 1) {
        items.push(`ellipsis-${previousPage}-${page}`)
      }

      items.push(page)
      return items
    }, [])
  })

  /**
   * 대표 이미지 선택 모달 페이지를 변경한다.
   * @param {number} page - 이동할 페이지
   * @returns {Promise<void>}
   */
  const setMediaPickerPage = async (page) => {
    mediaPickerPage.value = Math.min(Math.max(Number(page) || 1, 1), mediaPickerPageCount.value)
    await fetchMediaItems()
  }

  /**
   * 대표 이미지 선택 모달에서 사용할 가벼운 이미지 미리보기 URL을 반환한다.
   * @param {Object} item - 미디어 항목
   * @returns {string} 미리보기 URL
   */
  const getFeaturedMediaPreviewUrl = (item) => {
    const url = String(item?.url || '')

    if (item?.bodyThumbnailStatus?.hasThumbnail) {
      return withGeneratedImageCacheVersion(getPostBodyPreviewThumbnailUrl(url), `${item?.updatedAt || ''}-${item?.size || ''}`)
    }

    if (item?.thumbnailStatus?.hasThumbnail && item.thumbnailStatus.thumbnailUrl) {
      return withGeneratedImageCacheVersion(item.thumbnailStatus.thumbnailUrl, `${item?.updatedAt || ''}-${item?.size || ''}`)
    }

    return url
  }

  watch(mediaSearchQuery, async () => {
    if (!isMediaPickerOpen.value || activeMediaPickerTab.value !== 'library') {
      return
    }

    mediaPickerPage.value = 1
    await fetchMediaItems()
  })

  watch(activeMediaPickerTab, async (tab) => {
    if (!isMediaPickerOpen.value || tab !== 'library') {
      return
    }

    mediaPickerPage.value = 1
    await fetchMediaItems()
  })

  /**
   * 대표 이미지 선택 상태를 변경한다.
   * @param {Object} item - 미디어 항목
   * @returns {void}
   */
  const selectPickedImage = (item) => {
    selectedMediaPickerUrl.value = item.url
  }

  /**
   * 선택한 대표 이미지를 적용한다.
   * @returns {void}
   */
  const applyPickedImage = () => {
    if (!selectedMediaPickerUrl.value || isGeneratedThumbnailUrl(selectedMediaPickerUrl.value)) {
      return
    }

    form[mediaPickerTarget.value] = selectedMediaPickerUrl.value
    closeMediaPicker()
  }

  /**
   * 대표 이미지를 삭제한다.
   * @returns {void}
   */
  const removeFeaturedImage = () => {
    form.featuredImage = ''
  }

  /**
   * 대표 이미지 파일을 업로드한다.
   * @param {File} file - 업로드 파일
   * @returns {Promise<void>}
   */
  const uploadFeaturedImageFile = async (file) => {
    const formData = new FormData()
    formData.append('files', file)
    isUploadingFeaturedImage.value = true

    try {
      const result = await $fetch('/admin/api/uploads', {
        method: 'POST',
        body: formData
      })
      selectedMediaPickerUrl.value = result.files?.[0]?.url || ''
      await fetchMediaItems()
      activeMediaPickerTab.value = 'library'
    } finally {
      isUploadingFeaturedImage.value = false
    }
  }

  /**
   * 대표 이미지 파일 입력을 처리한다.
   * @param {Event} event - 파일 입력 이벤트
   * @returns {Promise<void>}
   */
  const uploadFeaturedImage = async (event) => {
    const files = event.target.files

    if (!files?.length) {
      return
    }

    try {
      await uploadFeaturedImageFile(files[0])
    } finally {
      event.target.value = ''
    }
  }

  /**
   * 대표 이미지 드롭 업로드를 처리한다.
   * @param {DragEvent} event - 드롭 이벤트
   * @returns {Promise<void>}
   */
  const dropFeaturedImage = async (event) => {
    const files = event.dataTransfer?.files

    if (!files?.length) {
      return
    }

    await uploadFeaturedImageFile(files[0])
  }

  return {
    activeMediaPickerTab,
    applyPickedImage,
    closeMediaPicker,
    dropFeaturedImage,
    featuredImageMediaItems,
    getFeaturedMediaPreviewUrl,
    isLoadingMedia,
    isMediaPickerOpen,
    isUploadingFeaturedImage,
    mediaPickerPage,
    mediaPickerPageCount,
    mediaPickerPageItems,
    mediaPickerRangeLabel,
    mediaSearchInput,
    mediaSearchQuery,
    onMediaSearchCompositionEnd,
    onMediaSearchInput,
    openMediaPicker,
    removeFeaturedImage,
    selectPickedImage,
    selectedMediaPickerUrl,
    setMediaPickerPage,
    uploadFeaturedImage
  }
}