import { create } from 'zustand'
import { subscribeWithSelector } from 'zustand/middleware'
import { flashcardsService } from '@/lib/services/flashcards'
import { ExtendedFlashcard } from '@/lib/types/review'

// 數據狀態接口
interface ReviewDataState {
  // 詞卡數據
  dueCards: ExtendedFlashcard[]

  // UI 顯示狀態
  showComplete: boolean
  showNoDueCards: boolean

  // 數據載入狀態
  isLoadingCards: boolean
  loadingError: string | null

  // Actions
  setDueCards: (cards: ExtendedFlashcard[]) => void
  setShowComplete: (show: boolean) => void
  setShowNoDueCards: (show: boolean) => void
  setLoadingCards: (loading: boolean) => void
  setLoadingError: (error: string | null) => void
  loadDueCards: () => Promise<void>
  resetData: () => void

  // 輔助方法
  getDueCardsCount: () => number
  findCardById: (cardId: string) => ExtendedFlashcard | undefined
}

export const useReviewDataStore = create<ReviewDataState>()(
  subscribeWithSelector((set, get) => ({
    // 初始狀態
    dueCards: [],
    showComplete: false,
    showNoDueCards: false,
    isLoadingCards: false,
    loadingError: null,

    // Actions
    setDueCards: (cards) => set({ dueCards: cards }),

    setShowComplete: (show) => set({ showComplete: show }),

    setShowNoDueCards: (show) => set({ showNoDueCards: show }),

    setLoadingCards: (loading) => set({ isLoadingCards: loading }),

    setLoadingError: (error) => set({ loadingError: error }),

    loadDueCards: async () => {
      const { setLoadingCards, setLoadingError, setDueCards, setShowNoDueCards, setShowComplete } = get()

      try {
        setLoadingCards(true)
        setLoadingError(null)
        console.log('🔍 開始載入到期詞卡...')

        const apiResult = await flashcardsService.getDueFlashcards(50)
        console.log('📡 API回應結果:', apiResult)

        if (apiResult.success && apiResult.data && apiResult.data.length > 0) {
          const cards = apiResult.data
          console.log('✅ 載入後端API數據成功:', cards.length, '張詞卡')

          setDueCards(cards)
          setShowNoDueCards(false)
          setShowComplete(false)
        } else {
          console.log('❌ 沒有到期詞卡')
          setDueCards([])
          setShowNoDueCards(true)
          setShowComplete(false)
        }
      } catch (error) {
        console.error('💥 載入到期詞卡失敗:', error)
        setLoadingError('載入詞卡失敗')
        setDueCards([])
        setShowNoDueCards(true)
      } finally {
        setLoadingCards(false)
      }
    },

    resetData: () => set({
      dueCards: [],
      showComplete: false,
      showNoDueCards: false,
      isLoadingCards: false,
      loadingError: null
    }),

    // 輔助方法
    getDueCardsCount: () => {
      const { dueCards } = get()
      return dueCards.length
    },

    findCardById: (cardId) => {
      const { dueCards } = get()
      return dueCards.find(card => card.id === cardId)
    }
  }))
)