import React, { createContext, useContext, useState } from 'react'
import { DeviceComplete, DeviceFilters, DeviceSorting } from '../types/device'

interface DevicesContextType {
  // UI State
  selectedDevices: string[]
  setSelectedDevices: (devices: string[]) => void
  
  // Dialog states
  isEditDialogOpen: boolean
  setIsEditDialogOpen: (open: boolean) => void
  
  isDeleteDialogOpen: boolean
  setIsDeleteDialogOpen: (open: boolean) => void
  
  isPortSettingsModalOpen: boolean
  setIsPortSettingsModalOpen: (open: boolean) => void
  
  isBulkCreateDialogOpen: boolean
  setIsBulkCreateDialogOpen: (open: boolean) => void
  
  // Current device for edit/delete
  currentDevice: DeviceComplete | null
  setCurrentDevice: (device: DeviceComplete | null) => void
  
  // Frontend filtering and sorting
  filters: DeviceFilters
  setFilters: (filters: DeviceFilters) => void
  
  sorting: DeviceSorting | null
  setSorting: (sorting: DeviceSorting | null) => void
  
  // Pagination (frontend)
  currentPage: number
  setCurrentPage: (page: number) => void
  
  pageSize: number
  setPageSize: (size: number) => void
  
  // Region filtering state
  selectedProvince: string
  setSelectedProvince: (province: string) => void
  selectedCity: string
  setSelectedCity: (city: string) => void
  selectedDistrict: string
  setSelectedDistrict: (district: string) => void
  
  // Actions
  openEditDialog: (device: DeviceComplete) => void
  openDeleteDialog: (device: DeviceComplete) => void
  closeAllDialogs: () => void
  
  resetFilters: () => void
  
  // Bulk operations
  isBulkMode: boolean
  setIsBulkMode: (mode: boolean) => void
  toggleDeviceSelection: (deviceId: string) => void
  selectAllDevices: (deviceIds: string[]) => void
  clearSelection: () => void
  bulkDeleteSelected: () => void

  // Settings Port
  portSettingsDevice: DeviceComplete | null
  isPortSettingsOpen: boolean
  setIsPortSettingsOpen: (open: boolean) => void
  openPortSettingsDialog: (device: DeviceComplete) => void
  
  // Region filter handlers
  handleProvinceChange: (provinceId: string, provinceName?: string) => void
  handleCityChange: (cityId: string, cityName?: string) => void
  handleDistrictChange: (districtId: string, districtName?: string) => void
}

const DevicesContext = createContext<DevicesContextType | undefined>(undefined)

interface DevicesProviderProps {
  children: React.ReactNode
}

const initialFilters: DeviceFilters = {
  search: '',
  status: '',
  device_type: '',
  province: '',
  city: '',
  district: '',
}

export default function DevicesProvider({ children }: DevicesProviderProps) {
  // UI State
  const [selectedDevices, setSelectedDevices] = useState<string[]>([])
  
  // Dialog states
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
  const [isBulkCreateDialogOpen, setIsBulkCreateDialogOpen] = useState(false)
  
  // Current device
  const [currentDevice, setCurrentDevice] = useState<DeviceComplete | null>(null)
  
  // Frontend filtering and sorting
  const [filters, setFilters] = useState<DeviceFilters>(initialFilters)
  const [sorting, setSorting] = useState<DeviceSorting | null>(null)
  
  // Pagination
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)

  // Region filtering state
  const [selectedProvince, setSelectedProvince] = useState('')
  const [selectedCity, setSelectedCity] = useState('')
  const [selectedDistrict, setSelectedDistrict] = useState('')
  
  // Bulk operations state
  const [isBulkMode, setIsBulkMode] = useState(false)

  // Settings port
  const [portSettingsDevice, setPortSettingsDevice] = useState<DeviceComplete | null>(null)
  const [isPortSettingsOpen, setIsPortSettingsOpen] = useState(false)
  const [isPortSettingsModalOpen, setIsPortSettingsModalOpen] = useState(false)

  // Actions
  const openEditDialog = (device: DeviceComplete) => {
    setCurrentDevice(device)
    setIsEditDialogOpen(true)
  }

  const openDeleteDialog = (device: DeviceComplete) => {
    setCurrentDevice(device)
    setIsDeleteDialogOpen(true)
  }

  const closeAllDialogs = () => {
    setIsEditDialogOpen(false)
    setIsDeleteDialogOpen(false)
    setCurrentDevice(null)
  }

  const resetFilters = () => {
    setFilters(initialFilters)
    setSorting(null)
    setCurrentPage(1)
  }

  const openPortSettingsDialog = (device: DeviceComplete) => {
    setPortSettingsDevice(device)
    setIsPortSettingsOpen(true)
  }

  // Region filter handlers
  const handleProvinceChange = (provinceId: string, provinceName?: string) => {
    setSelectedProvince(provinceId) // ID for API calls
    setSelectedCity('')
    setSelectedDistrict('')
    setFilters(prev => ({ 
      ...prev, 
      province: provinceName || provinceId, // Name for filtering
      city: '', 
      district: '' 
    }))
  }

  const handleCityChange = (cityId: string, cityName?: string) => {
    setSelectedCity(cityId) // ID for API calls
    setSelectedDistrict('')
    setFilters(prev => ({ 
      ...prev, 
      city: cityName || cityId, // Name for filtering
      district: '' 
    }))
  }

  const handleDistrictChange = (districtId: string, districtName?: string) => {
    setSelectedDistrict(districtId) // ID for API calls
    setFilters(prev => ({ 
      ...prev, 
      district: districtName || districtId // Name for filtering
    }))
  }
  
  // Bulk operations functions
  const toggleDeviceSelection = (deviceId: string) => {
    setSelectedDevices(prev => 
      prev.includes(deviceId) 
        ? prev.filter(id => id !== deviceId)
        : [...prev, deviceId]
    )
  }
  
  const selectAllDevices = (deviceIds: string[]) => {
    setSelectedDevices(deviceIds)
  }
  
  const clearSelection = () => {
    setSelectedDevices([])
    setIsBulkMode(false)
  }
  
  const bulkDeleteSelected = () => {
    // This will be handled by the bulk delete hook
    // The actual deletion logic is in the component that calls this
    console.log('Bulk delete selected devices:', selectedDevices)
  }

  const value: DevicesContextType = {
    selectedDevices,
    setSelectedDevices,
    isEditDialogOpen,
    setIsEditDialogOpen,
    isDeleteDialogOpen,
    setIsDeleteDialogOpen,
    isPortSettingsModalOpen,
    setIsPortSettingsModalOpen,
    isBulkCreateDialogOpen,
    setIsBulkCreateDialogOpen,
    currentDevice,
    setCurrentDevice,
    filters,
    setFilters,
    sorting,
    setSorting,
    currentPage,
    setCurrentPage,
    pageSize,
    setPageSize,
    selectedProvince,
    setSelectedProvince,
    selectedCity,
    setSelectedCity,
    selectedDistrict,
    setSelectedDistrict,
    openEditDialog,
    openDeleteDialog,
    closeAllDialogs,
    resetFilters,
    portSettingsDevice,
    isPortSettingsOpen,
    setIsPortSettingsOpen,
    openPortSettingsDialog,
    handleProvinceChange,
    handleCityChange,
    handleDistrictChange,
    isBulkMode,
    setIsBulkMode,
    toggleDeviceSelection,
    selectAllDevices,
    clearSelection,
    bulkDeleteSelected
  }

  return (
    <DevicesContext.Provider value={value}>
      {children}
    </DevicesContext.Provider>
  )
}

export const useDevicesContext = () => {
  const context = useContext(DevicesContext)
  if (context === undefined) {
    throw new Error('useDevicesContext must be used within a DevicesProvider')
  }
  return context
}