import { useState, useMemo, useCallback, useEffect } from "react"
import { useSearchParams } from "react-router-dom"
import { HttpTypes } from "@medusajs/types"
import {
  useViewConfigurations,
  useViewConfiguration,
} from "../use-view-configurations"
import { useEntityColumns } from "../api/views"
import { useFeatureFlag } from "../../providers/feature-flag-provider"
import { useColumnState } from "./columns/use-column-state"
import { useQueryParams } from "../use-query-params"
import { calculateRequiredFields } from "../../lib/table/field-utils"

export interface TableConfiguration {
  filters: Record<string, any>
  sorting: { id: string; desc: boolean } | null
  search: string
  visible_columns?: string[]
  column_order?: string[]
}

export interface UseTableConfigurationOptions {
  entity: string
  pageSize?: number
  queryPrefix?: string
  filters?: Array<{ id: string }>
}

export interface UseTableConfigurationReturn {
  activeView: any
  createView: any
  updateView: any
  isViewConfigEnabled: boolean
  visibleColumns: Record<string, boolean>
  columnOrder: string[]
  currentColumns: {
    visible: string[]
    order: string[]
  }
  setColumnOrder: (order: string[]) => void
  handleColumnVisibilityChange: (visibility: Record<string, boolean>) => void
  currentConfiguration: TableConfiguration
  hasConfigurationChanged: boolean
  handleClearConfiguration: () => void
  apiColumns: HttpTypes.AdminColumn[] | undefined
  isLoadingColumns: boolean
  queryParams: Record<string, any>
  requiredFields: string
}

function parseSortingState(value: string) {
  return value.startsWith("-")
    ? { id: value.slice(1), desc: true }
    : { id: value, desc: false }
}

export function useTableConfiguration({
  entity,
  queryPrefix = "",
  filters = [],
}: UseTableConfigurationOptions): UseTableConfigurationReturn {
  const isViewConfigEnabled = useFeatureFlag("view_configurations")
  const [_, setSearchParams] = useSearchParams()

  const { activeView, createView } = useViewConfigurations(entity)
  const currentActiveView = activeView?.view_configuration || null
  const { updateView } = useViewConfiguration(
    entity,
    currentActiveView?.id || ""
  )

  const { columns: apiColumns, isLoading: isLoadingColumns } = useEntityColumns(
    entity,
    {
      enabled: isViewConfigEnabled,
    }
  )

  const queryParams = useQueryParams(
    ["q", "order", "offset", "limit", ...filters.map((f) => f.id)],
    queryPrefix
  )

  // Column state
  const {
    visibleColumns,
    columnOrder,
    currentColumns,
    setColumnOrder,
    handleColumnVisibilityChange,
    handleViewChange: originalHandleViewChange,
  } = useColumnState(apiColumns, currentActiveView)

  // Sync view configuration with URL and column state
  useEffect(() => {
    if (!apiColumns) {
      return
    }
    originalHandleViewChange(currentActiveView, apiColumns)
    setSearchParams((prev) => {
      // Clear existing query params
      const keysToDelete = Array.from(prev.keys()).filter(
        (key) =>
          key.startsWith(queryPrefix + "_") ||
          key === queryPrefix + "_q" ||
          key === queryPrefix + "_order"
      )
      keysToDelete.forEach((key) => prev.delete(key))

      // Apply view configuration
      if (currentActiveView) {
        const viewConfig = currentActiveView.configuration

        if (viewConfig.filters) {
          Object.entries(viewConfig.filters).forEach(([key, value]) => {
            prev.set(`${queryPrefix}_${key}`, JSON.stringify(value))
          })
        }

        if (viewConfig.sorting) {
          const sortValue = viewConfig.sorting.desc
            ? `-${viewConfig.sorting.id}`
            : viewConfig.sorting.id
          prev.set(`${queryPrefix}_order`, sortValue)
        }

        if (viewConfig.search) {
          prev.set(`${queryPrefix}_q`, viewConfig.search)
        }
      }

      return prev
    })
  }, [currentActiveView, apiColumns])

  // Current configuration from URL
  const currentConfiguration = useMemo(() => {
    const currentFilters: Record<string, any> = {}
    filters.forEach((filter) => {
      if (queryParams[filter.id] !== undefined) {
        currentFilters[filter.id] = JSON.parse(queryParams[filter.id] || "")
      }
    })

    return {
      filters: currentFilters,
      sorting: queryParams.order ? parseSortingState(queryParams.order) : null,
      search: queryParams.q || "",
    }
  }, [filters, queryParams])

  // Check if configuration has changed from view
  const [debouncedHasConfigChanged, setDebouncedHasConfigChanged] =
    useState(false)

  const hasConfigurationChanged = useMemo(() => {
    const currentFilters = currentConfiguration.filters
    const currentSorting = currentConfiguration.sorting
    const currentSearch = currentConfiguration.search
    const currentVisibleColumns = Object.entries(visibleColumns)
      .filter(([_, isVisible]) => isVisible)
      .map(([field]) => field)
      .sort()

    if (currentActiveView) {
      const viewFilters = currentActiveView.configuration.filters || {}
      const viewSorting = currentActiveView.configuration.sorting
      const viewSearch = currentActiveView.configuration.search || ""
      const viewVisibleColumns = [
        ...(currentActiveView.configuration.visible_columns || []),
      ].sort()
      const viewColumnOrder = currentActiveView.configuration.column_order || []

      // Check filters
      const filterKeys = new Set([
        ...Object.keys(currentFilters),
        ...Object.keys(viewFilters),
      ])
      for (const key of filterKeys) {
        if (
          JSON.stringify(currentFilters[key]) !==
          JSON.stringify(viewFilters[key])
        ) {
          return true
        }
      }

      // Check sorting
      const normalizedCurrentSorting = currentSorting || undefined
      const normalizedViewSorting = viewSorting || undefined
      if (
        JSON.stringify(normalizedCurrentSorting) !==
        JSON.stringify(normalizedViewSorting)
      ) {
        return true
      }

      // Check search
      if (currentSearch !== viewSearch) {
        return true
      }

      // Check visible columns
      if (
        JSON.stringify(currentVisibleColumns) !==
        JSON.stringify(viewVisibleColumns)
      ) {
        return true
      }

      // Check column order
      if (JSON.stringify(columnOrder) !== JSON.stringify(viewColumnOrder)) {
        return true
      }
    } else {
      // Check against defaults
      if (Object.keys(currentFilters).length > 0) {
        return true
      }
      if (currentSorting !== null) {
        return true
      }
      if (currentSearch !== "") {
        return true
      }

      if (apiColumns) {
        const currentVisibleSet = new Set(currentVisibleColumns)
        const defaultVisibleSet = new Set(
          apiColumns
            .filter((col) => col.default_visible)
            .map((col) => col.field)
        )

        if (
          currentVisibleSet.size !== defaultVisibleSet.size ||
          [...currentVisibleSet].some((field) => !defaultVisibleSet.has(field))
        ) {
          return true
        }

        const defaultOrder = apiColumns
          .sort((a, b) => (a.default_order ?? 500) - (b.default_order ?? 500))
          .map((col) => col.field)

        if (JSON.stringify(columnOrder) !== JSON.stringify(defaultOrder)) {
          return true
        }
      }
    }

    return false
  }, [
    currentActiveView,
    visibleColumns,
    columnOrder,
    currentConfiguration,
    apiColumns,
  ])

  // Debounce configuration change detection
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedHasConfigChanged(hasConfigurationChanged)
    }, 50)

    return () => clearTimeout(timer)
  }, [hasConfigurationChanged])

  // Clear configuration handler
  const handleClearConfiguration = useCallback(() => {
    if (apiColumns) {
      originalHandleViewChange(currentActiveView, apiColumns)
    }

    setSearchParams((prev) => {
      const keysToDelete = Array.from(prev.keys()).filter(
        (key) =>
          key.startsWith(queryPrefix + "_") ||
          key === queryPrefix + "_q" ||
          key === queryPrefix + "_order"
      )
      keysToDelete.forEach((key) => prev.delete(key))

      if (currentActiveView?.configuration) {
        const viewConfig = currentActiveView.configuration

        if (viewConfig.filters) {
          Object.entries(viewConfig.filters).forEach(([key, value]) => {
            prev.set(`${queryPrefix}_${key}`, JSON.stringify(value))
          })
        }

        if (viewConfig.sorting) {
          const sortValue = viewConfig.sorting.desc
            ? `-${viewConfig.sorting.id}`
            : viewConfig.sorting.id
          prev.set(`${queryPrefix}_order`, sortValue)
        }

        if (viewConfig.search) {
          prev.set(`${queryPrefix}_q`, viewConfig.search)
        }
      }

      return prev
    })
  }, [currentActiveView, apiColumns, queryPrefix])

  // Calculate required fields based on visible columns
  const requiredFields = useMemo(() => {
    return calculateRequiredFields(entity, apiColumns, visibleColumns)
  }, [entity, apiColumns, visibleColumns])

  return {
    activeView: currentActiveView,
    createView,
    updateView,
    isViewConfigEnabled,
    visibleColumns,
    columnOrder,
    currentColumns,
    setColumnOrder,
    handleColumnVisibilityChange,
    currentConfiguration,
    hasConfigurationChanged: debouncedHasConfigChanged,
    handleClearConfiguration,
    apiColumns,
    isLoadingColumns,
    queryParams,
    requiredFields,
  }
}