import { create } from 'zustand'

// UI 狀態管理
interface UIState {
  // Modal 狀態
  showTaskListModal: boolean
  showReportModal: boolean
  modalImage: string | null

  // 錯誤回報狀態
  reportReason: string
  reportingCard: any | null

  // 載入狀態
  isAutoSelecting: boolean

  // Actions
  setShowTaskListModal: (show: boolean) => void
  setShowReportModal: (show: boolean) => void
  setModalImage: (image: string | null) => void
  setReportReason: (reason: string) => void
  setReportingCard: (card: any | null) => void
  setIsAutoSelecting: (selecting: boolean) => void

  // 便利方法
  openReportModal: (card: any) => void
  closeReportModal: () => void
  openImageModal: (image: string) => void
  closeImageModal: () => void
}

export const useUIStore = create<UIState>((set) => ({
  // 初始狀態
  showTaskListModal: false,
  showReportModal: false,
  modalImage: null,
  reportReason: '',
  reportingCard: null,
  isAutoSelecting: true,

  // 基本 Actions
  setShowTaskListModal: (show) => set({ showTaskListModal: show }),
  setShowReportModal: (show) => set({ showReportModal: show }),
  setModalImage: (image) => set({ modalImage: image }),
  setReportReason: (reason) => set({ reportReason: reason }),
  setReportingCard: (card) => set({ reportingCard: card }),
  setIsAutoSelecting: (selecting) => set({ isAutoSelecting: selecting }),

  // 便利方法
  openReportModal: (card) => set({
    showReportModal: true,
    reportingCard: card,
    reportReason: ''
  }),

  closeReportModal: () => set({
    showReportModal: false,
    reportingCard: null,
    reportReason: ''
  }),

  openImageModal: (image) => set({ modalImage: image }),

  closeImageModal: () => set({ modalImage: null })
}))