import { ref, computed, onMounted, onUnmounted, type Ref, type ComputedRef } from 'vue'

export interface UseDetailPanelOptions {
  /**
   * Function to check if any dialogs are currently open
   * This prevents keyboard shortcuts from triggering when dialogs are active
   */
  isDialogOpen?: () => boolean
  
  /**
   * Session storage key for persisting auto-enable state
   * If not provided, state won't be persisted
   */
  sessionStorageKey?: string
}

export interface UseDetailPanelReturn<T> {
  /** Auto-enable toggle state - controls whether panel shows automatically on selection */
  isDetailPanelEnabled: Ref<boolean>
  
  /** Manual visibility control - controlled by keyboard shortcuts */
  isDetailPanelVisible: Ref<boolean>
  
  /** Currently selected entity */
  selectedEntity: Ref<T | null>
  
  /** Mobile detail sheet visibility */
  showMobileDetail: Ref<boolean>
  
  /** Computed property that determines if panel should be shown */
  showPanel: ComputedRef<boolean>
  
  /** Toggle the auto-enable state */
  toggleDetailPanelEnabled: () => void
  
  /** Close the detail panel and clear selection */
  closeDetailPanel: () => void
  
  /** Select an entity and optionally show mobile detail */
  selectEntity: (entity: T) => void
  
  /** Handle row click with proper selection logic */
  handleRowClick: (entity: T, event?: MouseEvent) => void
}

/**
 * Composable for consistent detail panel behavior across entity browsers
 * 
 * Provides:
 * - Auto-enable toggle functionality
 * - Manual keyboard control ('i' key)
 * - Mobile sheet support
 * - Session persistence
 * - Consistent selection behavior
 */
export function useDetailPanel<T extends { id: number }>(
  options: UseDetailPanelOptions = {}
): UseDetailPanelReturn<T> {
  const { isDialogOpen, sessionStorageKey } = options
  
  // State variables
  const isDetailPanelEnabled = ref(true) // Auto-enable toggle state
  const isDetailPanelVisible = ref(false) // Manual visibility control
  const selectedEntity = ref<T | null>(null)
  const showMobileDetail = ref(false)
  
  // Load persisted auto-enable state from session storage
  if (sessionStorageKey) {
    const stored = sessionStorage.getItem(sessionStorageKey)
    if (stored !== null) {
      try {
        isDetailPanelEnabled.value = JSON.parse(stored)
      } catch {
        // Fall back to default if parsing fails
        isDetailPanelEnabled.value = true
      }
    }
  }
  
  // Combined panel visibility logic (OR condition)
  const showPanel = computed(() => 
    selectedEntity.value && (isDetailPanelEnabled.value || isDetailPanelVisible.value)
  )
  
  // Keyboard shortcut handler
  const handleKeyDown = (event: KeyboardEvent) => {
    // Only handle 'i' key when an entity is selected
    if (
      event.key.toLowerCase() === 'i' && 
      selectedEntity.value
    ) {
      // Don't trigger if dialogs are open
      if (isDialogOpen && isDialogOpen()) {
        return
      }
      
      // Don't trigger if user is typing in an input field
      const target = event.target as HTMLElement
      if (target && (
        target.tagName === 'INPUT' || 
        target.tagName === 'TEXTAREA' || 
        target.contentEditable === 'true'
      )) {
        return
      }
      
      event.preventDefault()
      
      // Toggle detail panel visibility
      if (window.innerWidth >= 1024) {
        // Desktop: toggle manual visibility
        isDetailPanelVisible.value = !isDetailPanelVisible.value
      } else {
        // Mobile: toggle mobile detail sheet
        showMobileDetail.value = !showMobileDetail.value
      }
    }
  }
  
  // Methods
  const toggleDetailPanelEnabled = () => {
    isDetailPanelEnabled.value = !isDetailPanelEnabled.value
    
    // Persist to session storage if key provided
    if (sessionStorageKey) {
      sessionStorage.setItem(sessionStorageKey, JSON.stringify(isDetailPanelEnabled.value))
    }
  }
  
  const closeDetailPanel = () => {
    selectedEntity.value = null
    showMobileDetail.value = false
    isDetailPanelVisible.value = false
  }
  
  const selectEntity = (entity: T) => {
    selectedEntity.value = entity
    // Show mobile detail sheet on small screens if auto-enabled
    if (isDetailPanelEnabled.value && window.innerWidth < 1024) {
      showMobileDetail.value = true
    }
    // Don't reset manual visibility when selecting a new entity
    // This allows the panel to stay open when manually activated with 'i' key
  }
  
  const handleRowClick = (entity: T, event?: MouseEvent) => {
    // Don't handle row clicks if any dialog is open
    if (isDialogOpen && isDialogOpen()) {
      return
    }
    
    // Single click selects the entity
    // If detail panel is auto-enabled, it will automatically show due to the reactive condition
    selectedEntity.value = entity
    
    // Don't reset manual visibility when clicking a row
    // This preserves manual panel state when activated with 'i' key
    
    // Show mobile detail sheet on small screens if auto-enabled
    if (isDetailPanelEnabled.value && window.innerWidth < 1024) {
      showMobileDetail.value = true
    }
  }
  
  // Lifecycle hooks for keyboard event handling
  onMounted(() => {
    document.addEventListener('keydown', handleKeyDown)
  })
  
  onUnmounted(() => {
    document.removeEventListener('keydown', handleKeyDown)
  })
  
  return {
    isDetailPanelEnabled,
    isDetailPanelVisible,
    selectedEntity,
    showMobileDetail,
    showPanel,
    toggleDetailPanelEnabled,
    closeDetailPanel,
    selectEntity,
    handleRowClick
  }
}