/**
 * UI store for global UI state.
 *
 * Manages loading overlays, toast notifications, and modal state.
 * Components can use this store to show/hide UI elements globally.
 */
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export type ToastType = 'success' | 'error' | 'warning' | 'info'

export interface Toast {
  id: string
  type: ToastType
  message: string
  duration: number
}

export interface ModalState {
  isOpen: boolean
  component: string | null
  props: Record<string, unknown>
}

export const useUiStore = defineStore('ui', () => {
  // Loading state
  const loadingCount = ref(0)
  const loadingMessage = ref<string | null>(null)

  // Toast state
  const toasts = ref<Toast[]>([])
  let toastIdCounter = 0

  // Modal state
  const modal = ref<ModalState>({
    isOpen: false,
    component: null,
    props: {},
  })

  // Getters
  const isLoading = computed(() => loadingCount.value > 0)

  /**
   * Show the loading overlay.
   *
   * Multiple calls stack - each showLoading() needs a hideLoading().
   */
  function showLoading(message?: string): void {
    loadingCount.value++
    if (message) {
      loadingMessage.value = message
    }
  }

  /**
   * Hide the loading overlay.
   *
   * Only hides when all showLoading() calls have been balanced.
   */
  function hideLoading(): void {
    if (loadingCount.value > 0) {
      loadingCount.value--
    }
    if (loadingCount.value === 0) {
      loadingMessage.value = null
    }
  }

  /**
   * Force hide the loading overlay regardless of count.
   */
  function forceHideLoading(): void {
    loadingCount.value = 0
    loadingMessage.value = null
  }

  /**
   * Show a toast notification.
   *
   * @param type - Toast type (success, error, warning, info)
   * @param message - Message to display
   * @param duration - Duration in milliseconds (default: 5000)
   * @returns Toast ID for manual dismissal
   */
  function showToast(type: ToastType, message: string, duration = 5000): string {
    const id = `toast-${++toastIdCounter}`
    const toast: Toast = { id, type, message, duration }

    toasts.value.push(toast)

    // Auto-dismiss after duration
    if (duration > 0) {
      setTimeout(() => {
        dismissToast(id)
      }, duration)
    }

    return id
  }

  /**
   * Dismiss a toast by ID.
   */
  function dismissToast(id: string): void {
    const index = toasts.value.findIndex(t => t.id === id)
    if (index !== -1) {
      toasts.value.splice(index, 1)
    }
  }

  /**
   * Dismiss all toasts.
   */
  function dismissAllToasts(): void {
    toasts.value = []
  }

  // Convenience methods for toast types
  function showSuccess(message: string, duration?: number): string {
    return showToast('success', message, duration)
  }

  function showError(message: string, duration?: number): string {
    return showToast('error', message, duration)
  }

  function showWarning(message: string, duration?: number): string {
    return showToast('warning', message, duration)
  }

  function showInfo(message: string, duration?: number): string {
    return showToast('info', message, duration)
  }

  /**
   * Open a modal.
   *
   * @param component - Component name to render
   * @param props - Props to pass to the component
   */
  function openModal(component: string, props: Record<string, unknown> = {}): void {
    modal.value = {
      isOpen: true,
      component,
      props,
    }
  }

  /**
   * Close the current modal.
   */
  function closeModal(): void {
    modal.value = {
      isOpen: false,
      component: null,
      props: {},
    }
  }

  return {
    // Loading state
    loadingCount,
    loadingMessage,
    isLoading,
    showLoading,
    hideLoading,
    forceHideLoading,
    // Toast state
    toasts,
    showToast,
    dismissToast,
    dismissAllToasts,
    showSuccess,
    showError,
    showWarning,
    showInfo,
    // Modal state
    modal,
    openModal,
    closeModal,
  }
})
