import React, { useState, useEffect, useRef } from 'react';

import { ProIcon, hintIcon, Cross, swapIcon } from '../icons';
import Modal from './../core/Modal';
import { isProActive, getStrings } from './../Helpers';

import theme_one_default_style from '../images//theme-one-default-style.png';
import theme_two_stripped_table from '../images/theme-two-stripped-table.png';
import theme_three_dark_table from '../images/theme-three-dark-table.png';
import theme_four_tailwind_style from '../images/theme-four-tailwind-style.png';
import theme_five_colored_column from '../images/theme-five-colored-column.png';
import theme_six_hovered_style from '../images/theme-six-hovered-style.png';

//styles
import '../styles/_tableCustomization.scss';
import Tooltip from './Tooltip';
import ThemeFields from './ThemeFields';
import { toast } from 'react-toastify';

const TableCustomization = ({
	tableSettings,
	setTableSettings,
	secondActiveTabs,
	updateSecondActiveTab,
	handleTableSettingsSave,
}) => {
	const [importModal, setImportModal] = useState<boolean>(false);
	const [isSaving, setIsSaving] = useState<boolean>(false);
	const [frequentCacheModal, setFrequentCacheModal] = useState<boolean>(false);
	const [pendingFrequentCacheValue, setPendingFrequentCacheValue] = useState<boolean>(false);
	const confirmImportRef = useRef();
	const [tableHeaders, setTableHeaders] = useState([]);
	const [selectedOption, setSelectedOption] = useState(
		tableSettings?.table_settings?.columnnumber?.[0] ?? -1
	);

	const [sortOrder, setSortOrder] = useState(tableSettings?.table_settings?.sorting_mode || 'asc');

	useEffect(() => {
		setSecondActiveTab(secondActiveTabs);
		localStorage.setItem('second_active_tab', secondActiveTabs);
		// Update the secondActiveTab in the parent component
		updateSecondActiveTab(secondActiveTabs);
	}, [secondActiveTabs]);

	const [secondActiveTab, setSecondActiveTab] = useState<string>(
		localStorage.getItem('second_active_tab') || 'layout'
	);

	const handleSecondSetActiveTab = (key) => {
		setSecondActiveTab(key);
		localStorage.setItem('second_active_tab', key);

		// Update the secondActiveTab in the parent component
		updateSecondActiveTab(key);
	};

	const handleExportOptions = (e) => {
		const exportOption = e.target.dataset.item;
		const currentExports =
			tableSettings?.table_settings?.table_export || [];
		const newExports = currentExports.includes(exportOption)
			? currentExports.filter((item) => item !== exportOption)
			: [...currentExports, exportOption];

		setTableSettings({
			...tableSettings,
			table_settings: {
				...tableSettings.table_settings,
				table_export: [...newExports],
			},
		});
	};

	const handleSaveWithLoader = async (e) => {
		setIsSaving(true);
		try {
			await handleTableSettingsSave(e);
		} finally {
			// minimum visual feedback even if save is synchronous
			setTimeout(() => setIsSaving(false), 800);
		}
	};

	//This used when we change the tab alert gone but we need to show this always
	useEffect(() => {
		var tableRows = document.querySelectorAll('.gswpts_rows');
		var mergeTipsElement = document.getElementById('merge-hints');

		var verticalMergeFound = false;

		tableRows.forEach(function (row) {
			var cells = row.querySelectorAll('td');

			cells.forEach(function (cell) {
				var rowspan = cell.getAttribute('rowspan');

				if (rowspan && parseInt(rowspan) > 1) {
					// Vertical merge found
					verticalMergeFound = true;
				}
			});
		});

		if (mergeTipsElement) {
			mergeTipsElement.style.display = verticalMergeFound
				? 'block'
				: 'none';
		}
	}, [tableSettings]);

	/**
	 *
	 * @param e Pro alert
	 * @returns
	 */
	function handleSelectChange(e) {
		const value = e.target.value;

		if (
			!isProActive() &&
			// (value === '50' || value === '100' || value === '-1')
			(value === '100' || value === '-1')
		) {
			WPPOOL.Popup('sheets_to_wp_table_live_sync').show();
		} else {
			setTableSettings({
				...tableSettings,
				table_settings: {
					...tableSettings.table_settings,
					default_rows_per_page: parseInt(e.target.value),
				},
			});
		}
	}

	const handleClosePopup = () => {
		setImportModal(false);
		setFrequentCacheModal(false);
	};



	// Sticky header 
	const handleCheckboxChange = (key) => {
		setTableSettings({
			...tableSettings,
			table_settings: {
				...tableSettings.table_settings,
				[key]: !tableSettings.table_settings?.[key],
			},
		});
	};

	const handleValueChange = (key, type) => {
		setTableSettings({
			...tableSettings,
			table_settings: {
				...tableSettings.table_settings,
				[key]:
					type === 'increment'
						? (tableSettings.table_settings?.[key] || 0) + 1
						: Math.max((tableSettings.table_settings?.[key] || 0) - 1, 0),
			},
		});
	};

	// Handle manual input for header_offset, ensure it's a valid number and non-negative
	const handleManualValueChange = (key, event) => {
		const newValue = event.target.value;

		// Only allow valid numbers (non-negative)
		if (/^\d+$/.test(newValue)) {
			setTableSettings({
				...tableSettings,
				table_settings: {
					...tableSettings.table_settings,
					[key]: parseInt(newValue, 10),
				},
			});
		}
	};

	// Start 
	useEffect(() => {
		// Extract headers logic
		const checkTableContainer = () => {
			const tableContainer = document.getElementById("table-preview");
			if (!tableContainer) return false;
			return true;
		};

		const intervalId = setInterval(() => {
			if (checkTableContainer()) {
				const tableHead = document.querySelector("#create_tables thead");
				if (tableHead) {
					const headers = [
						{ label: "Prioritize Google Sheets Format (default)", value: -1 },
						...Array.from(tableHead.querySelectorAll("th")).map((th, index) => ({
							label: th.textContent.trim(),
							value: index,
						})),
					];
					setTableHeaders(headers);
					clearInterval(intervalId);
				}
			}
		}, 500);

		return () => clearInterval(intervalId);
	}, []);


	const handleOptionSelect = (value) => {

		if (value !== -1 && !isProActive()) {
			WPPOOL.Popup('sheets_to_wp_table_live_sync').show();
			return;
		}

		setSelectedOption(value);

		setTableSettings({
			...tableSettings,
			table_settings: {
				...tableSettings.table_settings,
				columnnumber: value === -1 ? [] : [value],
				allow_singleshort: value === -1 ? false : true,
			},
		});
	};

	const handleSortOrderChange = (e) => {
		setSortOrder(e.target.value);

		setTableSettings((prevSettings) => ({
			...prevSettings,
			table_settings: {
				...prevSettings.table_settings,
				sorting_mode: e.target.value,
			},
		}));

	};


	// END 

	const handleFrequentCacheCheckboxClick = (e) => {
		// If unchecking (current value is true, new value will be false), just update directly
		if (tableSettings?.table_settings?.disable_frequent_cache) {
			setTableSettings({
				...tableSettings,
				table_settings: {
					...tableSettings.table_settings,
					disable_frequent_cache: false,
				},
			});
		} else {
			// If checking (current value is false, new value will be true), show modal first
			setPendingFrequentCacheValue(true);
			setFrequentCacheModal(true);
		}
	};

	const handleConfirmFrequentCache = () => {
		setTableSettings({
			...tableSettings,
			table_settings: {
				...tableSettings.table_settings,
				disable_frequent_cache: pendingFrequentCacheValue,
			},
		});
		handleClosePopup();
	};

	const handleCancelFrequentCache = () => {
		handleClosePopup();
	};



	/**
	 * Alert if clicked on outside of element
	 *
	 * @param  event
	 */
	function handleCancelOutside(event: MouseEvent) {
		if (
			confirmImportRef.current &&
			!confirmImportRef.current.contains(event.target)
		) {
			handleClosePopup();
		}
	}

	useEffect(() => {
		const handleClick = () => {
			WPPOOL.Popup('sheets_to_wp_table_live_sync').show();
		};
		document.addEventListener('mousedown', handleCancelOutside);

		const proSettings = document.querySelectorAll(
			'.swptls-pro-settings, .btn-pro-lock'
		);
		proSettings.forEach((item) => {
			item.addEventListener('click', handleClick);
		});

		return () => {
			document.removeEventListener('mousedown', handleCancelOutside);
			proSettings.forEach((item) => {
				item.removeEventListener('click', handleClick);
			});
		};
	}, [secondActiveTab, handleCancelOutside]);

	/**
	 * Display Settings code
	 * Merge render conditionally
	 */

	useEffect(() => {
		const mergedSupport =
			tableSettings?.table_settings?.merged_support || false;

		if (mergedSupport) {
			var tableRows = document.querySelectorAll('.gswpts_rows');

			tableRows.forEach(function (row) {
				var cells = row.querySelectorAll('td');

				cells.forEach(function (cell, index) {
					var rowspan = cell.getAttribute('rowspan');

					if (rowspan && parseInt(rowspan) > 1) {
						var dataIndex = cell.getAttribute('data-index');
						// console.log('Found rowspan:', dataIndex);

						// Update isvertical to true and exit the loop
						setTableSettings((prevSettings) => ({
							...prevSettings,
							table_settings: {
								...prevSettings.table_settings,
								isvertical: true,
							},
						}));
						return;
					}
				});
			});
		}
	}, [setTableSettings]);

	// ====================Filter rendering logic =============================//

	/**
	 * Detect whether column-filter-settings-icon elements are visible in the table preview.
	 * Runs when: filter tab is active, enable_column_filtering changes, or table preview updates.
	 */
	useEffect(() => {
		if (secondActiveTab !== 'filter') return;

		const checkIconVisibility = () => {
			const icons = document.querySelectorAll('.column-filter-settings-icon');
			// An icon is "visible" if it exists and its display is not 'none'
			const anyVisible = Array.from(icons).some(
				(icon) => (icon as HTMLElement).style.display !== 'none' && (icon as HTMLElement).offsetParent !== null
			);
			setFilterIconsVisible(anyVisible);
		};

		// Check immediately
		checkIconVisibility();

		// Also watch for DOM changes in the table preview (icons injected/toggled after render)
		const wrapper = document.querySelector('.table-preview.wrapper') || document.getElementById('table-preview');
		if (!wrapper) return;

		const observer = new MutationObserver(() => checkIconVisibility());
		observer.observe(wrapper, { childList: true, subtree: true, attributes: true, attributeFilter: ['style'] });

		return () => observer.disconnect();
	}, [
		secondActiveTab,
		tableSettings?.table_settings?.column_filtering?.enable_column_filtering,
	]);

	const getColumnName = (columnIndex) => {
		const header = tableHeaders.find(h => h.value === columnIndex);
		return header ? header.label : `Column ${columnIndex}`;
	};

	// Slide-in modal state for per-column filter configuration
	const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
	const [selectedColumnIndex, setSelectedColumnIndex] = useState(null);
	const [showDefaultValueError, setShowDefaultValueError] = useState(false);
	const [filterIconsVisible, setFilterIconsVisible] = useState(false);
	const [columnFilterConfig, setColumnFilterConfig] = useState({
		type: 'select',
		enabled: true,
		change_not_allowed: false,
		hide_filter: false,
		value: '',
		strict_mode: false,
		load_default: false
	});

	// Load filter config when modal opens or column selection changes
	useEffect(() => {
		if (isFilterModalOpen && selectedColumnIndex !== null) {
			setShowDefaultValueError(false);
			const currentFilters = tableSettings?.table_settings?.column_filtering?.column_filters || [];
			const existingConfig = currentFilters.find(f => f.columnIndex === selectedColumnIndex);

			if (existingConfig) {
				// Load existing configuration
				const loadedConfig = {
					type: existingConfig.type || 'text',
					enabled: existingConfig.enabled !== false,
					change_not_allowed: existingConfig.change_not_allowed !== false,
					hide_filter: existingConfig.hide_filter === true,
					value: existingConfig.value || '',
					strict_mode: existingConfig.strict_mode === true,
					load_default: existingConfig.load_default === true
				};
				setColumnFilterConfig(loadedConfig);
			} else {
				// Default config for new column
				const defaultConfig = {
					type: 'text',
					enabled: true,
					change_not_allowed: false,
					hide_filter: false,
					value: '',
					strict_mode: false,
					load_default: false
				};
				setColumnFilterConfig(defaultConfig);
			}
		}
	}, [isFilterModalOpen, selectedColumnIndex, tableSettings?.table_settings?.column_filtering?.column_filters]);

	useEffect(() => {
		const checkTableContainer = () => {
			const tableContainer = document.getElementById('table-preview');
			if (!tableContainer) {
				return false;
			}
			return true;
		};

		// Check for the table and try to extract headers
		const intervalId = setInterval(() => {
			if (checkTableContainer()) {
				const tableHead = document.querySelector(
					'#create_tables thead'
				);
				if (tableHead) {
					const headers = Array.from(
						tableHead.querySelectorAll('th')
					).map((th, index) => ({
						label: th.textContent.trim(),
						value: index,
					}));
					setTableHeaders(headers);
					clearInterval(intervalId); // Stop checking once headers are found
				}
			}
		}, 500); // Check every 500ms

		return () => clearInterval(intervalId);
	}, []); // Empty dependency array ensures this runs once when the component mounts

	/**
	 * Auto-generate column_filters for all columns with default values
	 */
	const generateDefaultColumnFilters = () => {
		const tableHeadersElements = document.querySelectorAll('#table-preview thead th');
		const columnCount = tableHeadersElements.length;

		if (columnCount === 0) return [];

		const defaultFilters = [];
		for (let i = 0; i < columnCount; i++) {
			defaultFilters.push({
				columnIndex: i,
				type: 'text',
				enabled: true,
				change_not_allowed: false,
				hide_filter: false,
				value: '',
				strict_mode: false,
				load_default: false
			});
		}

		// console.log('SWPTLS: Generated default filters:', defaultFilters);
		return defaultFilters;
	};

	/**
	 * Initialize column_filters when enabling filtering
	 * This effect ensures ALL columns have filters, merging with existing ones
	 */
	useEffect(() => {
		const isFilteringEnabled = tableSettings?.table_settings?.column_filtering?.enable_column_filtering;
		const currentFilters = tableSettings?.table_settings?.column_filtering?.column_filters || [];


		if (isFilteringEnabled) {
			// Wait for table to be ready
			const checkAndGenerate = () => {
				const tableHeadersElements = document.querySelectorAll('#table-preview thead th');
				const columnCount = tableHeadersElements.length;

				// Only proceed if we have columns
				if (columnCount > 0) {
					// Check if we need to add missing columns
					const needsGeneration = currentFilters.length < columnCount;

					if (needsGeneration) {
						// Generate default filters for ALL columns
						const allDefaultFilters = generateDefaultColumnFilters();

						// Merge: Keep existing filters, add defaults for missing columns
						const mergedFilters = allDefaultFilters.map(defaultFilter => {
							const existingFilter = currentFilters.find(f => f.columnIndex === defaultFilter.columnIndex);
							return existingFilter ? existingFilter : defaultFilter;
						});

						// Update tableSettings with merged filters
						setTableSettings({
							...tableSettings,
							table_settings: {
								...tableSettings.table_settings,
								column_filtering: {
									...tableSettings.table_settings?.column_filtering,
									column_filters: mergedFilters
								}
							}
						});
					}
					/* else {
						console.log('SWPTLS: All columns already have filters, skipping generation');
					} */
				}
			};

			// Try immediately
			checkAndGenerate();
			// Also try after delay in case table isn't ready yet
			const timeoutId = setTimeout(checkAndGenerate, 500);
			return () => clearTimeout(timeoutId);
		}
	}, [tableSettings?.table_settings?.column_filtering?.enable_column_filtering, tableHeaders.length]);

	/**
	 * Add click handlers to settings icons using event delegation
	 * Icons are injected from backend HTML
	 * Event handlers must check current state, not closure values
	 */
	useEffect(() => {

		let isCleanedUp = false;
		let observer = null;
		let visibilityInterval = null;
		let iconsFound = false;

		// Update icon visibility - reads current state from DOM/props
		const updateIconVisibility = () => {
			if (isCleanedUp) return 0;

			// Read current state at execution time, not from closure
			const currentFilteringEnabled = tableSettings?.table_settings?.column_filtering?.enable_column_filtering;
			const currentTab = localStorage.getItem('second_active_tab') || 'layout';
			const shouldShow = currentFilteringEnabled && currentTab === 'filter';

			const existingIcons = document.querySelectorAll('.column-filter-settings-icon');
			const iconCount = existingIcons.length;

			// Only log if icon count changed
			if (iconCount > 0 && !iconsFound) {
				// Stop the periodic interval once icons are found
				if (visibilityInterval) {
					clearInterval(visibilityInterval);
					visibilityInterval = null;
				}
			}

			existingIcons.forEach((icon) => {
				icon.style.display = shouldShow ? 'inline-flex' : 'none';
			});

			return iconCount;
		};

		// Event handlers - CRITICAL: Check current state, not closure values
		const handleIconClick = (e) => {
			const icon = e.target.closest('.column-filter-settings-icon');
			if (!icon) return;

			// Read current state at click time, not from closure
			const currentFilteringEnabled = tableSettings?.table_settings?.column_filtering?.enable_column_filtering;
			const currentTab = localStorage.getItem('second_active_tab') || 'layout';

			// Only handle if filtering is enabled and we're on filter tab
			if (!currentFilteringEnabled || currentTab !== 'filter') {
				return;
			}

			e.stopPropagation();
			const columnIndex = parseInt(icon.getAttribute('data-column-index') || '0');
			openColumnFilterModal(columnIndex);
		};

		const handleIconHover = (e) => {
			const icon = e.target.closest('.column-filter-settings-icon');
			if (!icon) return;

			if (e.type === 'mouseover') {
				icon.style.color = '#007bff';
			} else {
				icon.style.color = '#666';
			}
		};

		// Setup function that attaches event delegation
		const setupEventDelegation = () => {
			if (isCleanedUp) return false;

			// Attach to document body - survives table re-renders
			document.body.addEventListener('click', handleIconClick, true);
			document.body.addEventListener('mouseover', handleIconHover);
			document.body.addEventListener('mouseout', handleIconHover);
			// console.log('SWPTLS: ✅ Event delegation attached');

			// Setup MutationObserver to watch for table changes
			const wrapper = document.querySelector('.table-preview.wrapper');
			if (wrapper) {
				observer = new MutationObserver((mutations) => {
					if (isCleanedUp) return;

					const hasTableChanges = mutations.some(mutation => mutation.type === 'childList');

					if (hasTableChanges) {
						// console.log('SWPTLS: Table changed, updating icons');
						setTimeout(updateIconVisibility, 100);
					}
				});

				observer.observe(wrapper, {
					childList: true,
					subtree: true
				});
			}

			return true;
		};

		// Initial setup
		const initialIconCount = updateIconVisibility();
		setupEventDelegation();

		// console.log('SWPTLS: Initial setup complete - Icons:', initialIconCount);

		// Only run periodic checks if icons not found yet
		if (initialIconCount === 0) {
			visibilityInterval = setInterval(() => {
				if (isCleanedUp || iconsFound) {
					if (visibilityInterval) {
						clearInterval(visibilityInterval);
						visibilityInterval = null;
					}
					return;
				}
				updateIconVisibility();
			}, 1000);
		}

		// Cleanup
		return () => {
			isCleanedUp = true;

			if (visibilityInterval) clearInterval(visibilityInterval);
			if (observer) observer.disconnect();

			document.body.removeEventListener('click', handleIconClick, true);
			document.body.removeEventListener('mouseover', handleIconHover);
			document.body.removeEventListener('mouseout', handleIconHover);
		};
	}, [
		tableSettings?.table_settings?.column_filtering?.enable_column_filtering,
		secondActiveTab
	]);

	/**
	 * Open column filter configuration modal
	 */
	const openColumnFilterModal = (columnIndex) => {
		setSelectedColumnIndex(columnIndex);
		setIsFilterModalOpen(true);
	};

	/**
	 * Save column filter configuration
	 */
	const saveColumnFilter = () => {
		const currentFilters = tableSettings?.table_settings?.column_filtering?.column_filters || [];

		// Get total column count
		const tableHeadersElements = document.querySelectorAll('#table-preview thead th');
		const columnCount = tableHeadersElements.length;

		// Find if this column already has a filter
		const filterIndex = currentFilters.findIndex(f => f.columnIndex === selectedColumnIndex);

		// Create new filter object
		const newFilterConfig = {
			columnIndex: selectedColumnIndex,
			type: columnFilterConfig.type,
			enabled: columnFilterConfig.enabled,
			change_not_allowed: columnFilterConfig.change_not_allowed,
			hide_filter: columnFilterConfig.hide_filter,
			value: columnFilterConfig.value,
			strict_mode: columnFilterConfig.strict_mode,
			load_default: columnFilterConfig.load_default
		};

		// Create updated filters array preserving ALL existing filters
		let updatedFilters;
		if (filterIndex >= 0) {
			// Update existing - create new array with updated item, preserve all others
			updatedFilters = currentFilters.map((filter, idx) =>
				idx === filterIndex ? newFilterConfig : { ...filter }
			);

		} else {
			// Add new - create new array with new item, preserve all existing
			updatedFilters = [...currentFilters, newFilterConfig];
		}

		// Ensure ALL columns have filters (fill in missing ones with defaults)
		if (columnCount > 0 && updatedFilters.length < columnCount) {

			// Create a complete array with all columns
			const completeFilters = [];
			for (let i = 0; i < columnCount; i++) {
				const existingFilter = updatedFilters.find(f => f.columnIndex === i);
				if (existingFilter) {
					completeFilters.push(existingFilter);
				} else {
					// Add default filter for missing column
					completeFilters.push({
						columnIndex: i,
						type: 'text',
						enabled: true,
						change_not_allowed: false,
						hide_filter: false,
						value: '',
						strict_mode: false,
						load_default: false
					});
				}
			}
			updatedFilters = completeFilters;
		}


		// Create completely new tableSettings object
		const newTableSettings = {
			...tableSettings,
			table_settings: {
				...tableSettings.table_settings,
				column_filtering: {
					...tableSettings.table_settings?.column_filtering,
					column_filters: updatedFilters
				}
			}
		};

		setTableSettings(newTableSettings);
		setIsFilterModalOpen(false);

	};

	/**
	 * Clear/Reset column filter configuration to defaults
	 */
	const clearColumnFilter = () => {
		const defaultConfig = {
			type: 'select',
			enabled: true,
			change_not_allowed: false,
			hide_filter: false,
			value: '',
			strict_mode: false,
			load_default: false
		};
		setColumnFilterConfig(defaultConfig);
		setShowDefaultValueError(false);
	};

	/**
	 * Watch for filter_display_mode changes and update filter_location accordingly
	 */
	useEffect(() => {
		const currentMode = tableSettings?.table_settings?.column_filtering?.filter_display_mode;
		const currentLocation = tableSettings?.table_settings?.column_filtering?.filter_location;

		// If switching to horizontal mode, ensure filter_location is set to 'above_table'
		if (currentMode === 'horizontal' && currentLocation !== 'above_table') {
			setTableSettings({
				...tableSettings,
				table_settings: {
					...tableSettings.table_settings,
					column_filtering: {
						...tableSettings.table_settings?.column_filtering,
						filter_location: 'above_table'
					}
				}
			});
		}
		// If switching to form mode, ensure filter_location is set to a valid sidebar value
		else if (currentMode === 'form' && (currentLocation === 'above_table' || currentLocation === 'below_table')) {
			setTableSettings({
				...tableSettings,
				table_settings: {
					...tableSettings.table_settings,
					column_filtering: {
						...tableSettings.table_settings?.column_filtering,
						filter_location: 'left_sidebar'
					}
				}
			});
		}
	}, [tableSettings?.table_settings?.column_filtering?.filter_display_mode]);

	/**
	 * Render default value input based on filter type
	 */
	const renderDefaultValueInput = (config, setConfig, columnIndex) => {
		switch (config.type) {
			case 'text':
				return (
					<input
						type="text"
						value={config.value}
						onChange={(e) => setConfig({ ...config, value: e.target.value })}
						placeholder="Enter default search value"
						style={{
							width: '100%',
							padding: '8px 12px',
							border: '1px solid #ddd',
							borderRadius: '4px'
						}}
					/>
				);
			case 'select':
				return (
					<select
						value={config.value}
						onChange={(e) => setConfig({ ...config, value: e.target.value })}
						style={{
							width: '100%',
							padding: '8px 12px',
							border: '1px solid #ddd',
							borderRadius: '4px'
						}}
					>
						<option value="">Select default option</option>
						{getColumnUniqueValues(columnIndex).map(option => (
							<option key={option} value={option}>{option}</option>
						))}
					</select>
				);
			case 'multi_select':
				return (
					<select
						multiple
						value={Array.isArray(config.value) ? config.value : []}
						onChange={(e) => {
							const selectedValues = Array.from(e.target.selectedOptions, option => option.value);
							setConfig({ ...config, value: selectedValues });
						}}
						style={{
							width: '100%',
							minHeight: '100px',
							padding: '8px 12px',
							border: '1px solid #ddd',
							borderRadius: '4px'
						}}
					>
						{getColumnUniqueValues(columnIndex).map(option => (
							<option key={option} value={option}>{option}</option>
						))}
					</select>
				);
			default:
				return <input type="text" placeholder="Enter default value" />;
		}
	};

	const getColumnUniqueValues = (columnIndex) => {
		// Try to get actual data from the table preview
		try {
			const tableContainer = document.getElementById('table-preview');

			if (tableContainer) {
				// Try multiple selectors for the table
				let table = tableContainer.querySelector('#create_tables tbody');
				if (!table) {
					table = tableContainer.querySelector('table tbody');
				}
				if (!table) {
					table = tableContainer.querySelector('.dataTables_wrapper tbody');
				}

				if (table) {
					const rows = table.querySelectorAll('tr');


					const uniqueValues = new Set();

					rows.forEach((row, rowIndex) => {
						const cells = row.querySelectorAll('td');

						if (cells[columnIndex]) {
							const cellText = cells[columnIndex].textContent.trim();

							if (cellText && cellText !== '') {
								uniqueValues.add(cellText);
							}
						}
					});

					const valuesArray = Array.from(uniqueValues);

					if (valuesArray.length > 0) {
						return valuesArray.slice(0, 20); // Limit to 20 options
					}
				}
				/* else {
					// If no tbody found, try to find any table and log its structure
					const anyTable = tableContainer.querySelector('table');
					if (anyTable) {
					}
				} */
			}
		} catch (error) {
			console.warn('Could not extract column values:', error);
		}

		return [`Column ${columnIndex} Value 1`, `Column ${columnIndex} Value 2`, `Column ${columnIndex} Value 3`];
	};

	// ========== END FILTERING FEATURE FUNCTIONS ==========

	return (
		<div>

			{frequentCacheModal && (
				<Modal>
					<div
						className="frequent-modal-wrap modal-content"
						ref={confirmImportRef}
					>
						<div
							className="cross_sign"
							onClick={handleCancelFrequentCache}
						>
							{Cross}
						</div>
						<div className="active-frequent-modal">

							<h2>{getStrings('are-you-sure-to-enable-frequent-mode')}</h2>
							<p>{getStrings('frequent-mode-desc')}</p>

							<div className="content-note">
								<span className="content-note-icon">
									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
										<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
										<line x1="12" y1="9" x2="12" y2="13"></line>
										<line x1="12" y1="17" x2="12.01" y2="17"></line>
									</svg>
								</span>
								<div className="content-note-text">
									{getStrings('frequent-cache-note')}
								</div>
							</div>

							<div className="action-buttons">
								<button
									className="swptls-button cancel-button"
									onClick={handleCancelFrequentCache}
								>
									{getStrings('Cancel')}
								</button>
								<button
									className="swptls-button confirm-button"
									onClick={handleConfirmFrequentCache}
								>
									{getStrings('yes-enable')}
								</button>
							</div>
						</div>
					</div>
				</Modal>
			)}

			<div className="edit-table-customization-wrap">
				<div className="edit-form-group">
					{ /* Render Theme style for hidden values  */}
					<div className="edit-form-group themeFields">
						<ThemeFields tableSettings={tableSettings} />
					</div>

					<div className="table-customization-tab-wrap">
						<div className="table-customization-tab-nav">
							<button
								className={`${secondActiveTab === 'layout' ? 'active' : ''
									}`}
								onClick={() =>
									handleSecondSetActiveTab('layout')
								}
							>
								{getStrings('table_customization_layout')}
							</button>

							<button
								className={`${secondActiveTab === 'utility'
									? 'active'
									: ''
									}`}
								onClick={() =>
									handleSecondSetActiveTab('utility')
								}
							>
								{getStrings('Utility')}
							</button>

							<button
								className={`${secondActiveTab === 'style' ? 'active' : ''
									}`}
								onClick={() =>
									handleSecondSetActiveTab('style')
								}
							>
								{getStrings('Style')}
							</button>
							<button
								className={`${secondActiveTab === 'filter' ? 'active' : ''
									}`}
								onClick={() =>
									handleSecondSetActiveTab('filter')
								}
							>
								{getStrings('filtertab')}
								{<span className='btn-pro btn-new'>{getStrings('new')}</span>}
							</button>
						</div>
						<div className="table-customization-tab-content">
							{ /* Style Tabs content */}

							{ /* New Import and Theme  */}
							{'layout' === secondActiveTab && (
								<div className="table-customization-theme-wrapper">
									{ /* Display Settings Code */}
									<div className="edit-display-settings-wrap">
										<div className="edit-form-group">
											<div className="edit-form-elements">
												<div className="swptls-table-top-elements">
													<h4 className="mt-0">
														{getStrings(
															'table-top-elements'
														)}
													</h4>

													<div className="display-settings-block-wrapper">
														<div className="top-elements-wrapper">
															<div className="edit-form-group">
																<input
																	type="checkbox"
																	name="hide_entries"
																	id="hide-entries"
																	checked={
																		tableSettings
																			.table_settings
																			?.show_x_entries
																	}
																	onChange={(
																		e
																	) =>
																		setTableSettings(
																			{
																				...tableSettings,
																				table_settings:
																				{
																					...tableSettings.table_settings,
																					show_x_entries:
																						!tableSettings
																							.table_settings
																							?.show_x_entries,
																				},
																			}
																		)
																	}
																/>
																<label htmlFor="hide-entries">
																	{getStrings(
																		'hide-ent'
																	)}{' '}
																	<Tooltip
																		content={getStrings('tooltip-3')}
																	/>
																</label>
															</div>
															<div className="edit-form-group">
																<input
																	type="checkbox"
																	name="hide_search_box"
																	id="hide-search-box"
																	checked={
																		tableSettings
																			.table_settings
																			?.search_bar
																	}
																	onChange={(
																		e
																	) =>
																		setTableSettings(
																			{
																				...tableSettings,
																				table_settings:
																				{
																					...tableSettings.table_settings,
																					search_bar:
																						!tableSettings
																							.table_settings
																							.search_bar,
																				},
																			}
																		)
																	}
																/>
																<label htmlFor="hide-search-box">
																	{getStrings(
																		'hide-search-box'
																	)}{' '}
																	<Tooltip
																		content={getStrings('tooltip-4')}
																	/>
																</label>
															</div>
														</div>

														<div
															className={`swap-position ${!tableSettings
																?.table_settings
																?.search_bar &&
																!tableSettings
																	?.table_settings
																	?.show_x_entries
																? 'swptls-swap-disabled'
																: ''
																}`}
														>
															{ /* <div className="swap-position"> */}
															<input
																type="checkbox"
																name="swap_filter_inputs"
																id="swap_table_top"
																checked={
																	tableSettings
																		.table_settings
																		?.swap_filter_inputs
																}
																/* onChange={(
																	e
																) =>
																	setTableSettings(
																		{
																			...tableSettings,
																			table_settings:
																			{
																				...tableSettings.table_settings,
																				swap_filter_inputs:
																					!tableSettings
																						.table_settings
																						.swap_filter_inputs,
																			},
																		}
																	)
																	
																} */

																onChange={(e) => {
																	setTableSettings({
																		...tableSettings,
																		table_settings: {
																			...tableSettings.table_settings,
																			swap_filter_inputs:
																				!tableSettings
																					.table_settings
																					.swap_filter_inputs,
																		},
																	});

																	// Add toast notification
																	if (!tableSettings.table_settings.swap_filter_inputs) {
																		toast.success("Position updated. See the changes in table preview");
																	} else {
																		toast.success("Position restored to default!");
																	}
																}}
																// Disable input based on condition
																disabled={
																	!tableSettings
																		?.table_settings
																		?.search_bar &&
																	!tableSettings
																		?.table_settings
																		?.show_x_entries
																}
															/>
															<label
																htmlFor="swap_table_top"
																className="swapped-pos-lab"
															>
																<div className="icon">
																	<svg
																		xmlns="http://www.w3.org/2000/svg"
																		width="13"
																		height="15"
																		viewBox="0 0 13 15"
																		fill="none"
																	>
																		<path
																			d="M4 7.75L1 10.75L4 13.75M11.5 10.75H1M8.5 1.25L11.5 4.25L8.5 7.25M1 4.25H11.5"
																			stroke="#008717"
																			stroke-width="1.5"
																			stroke-linecap="round"
																			stroke-linejoin="round"
																		/>
																	</svg>
																</div>

																{tableSettings
																	.table_settings
																	?.swap_filter_inputs ? (
																	<span>
																		{getStrings(
																			'swapped-pos'
																		)}
																	</span>
																) : (
																	<span>
																		{getStrings(
																			'swap-pos'
																		)}
																	</span>
																)}
															</label>
														</div>
													</div>
												</div>

												<div className="swptls-table-bottom-elements">
													<h4>
														{getStrings(
															'table-bottom-ele'
														)}
													</h4>

													<div className="display-settings-block-wrapper">
														<div className="top-elements-wrapper">
															<div className="edit-form-group">
																<input
																	type="checkbox"
																	name="hide_entry_info"
																	id="hide-entry-info"
																	checked={
																		tableSettings
																			.table_settings
																			?.show_info_block
																	}
																	onChange={(
																		e
																	) =>
																		setTableSettings(
																			{
																				...tableSettings,
																				table_settings:
																				{
																					...tableSettings.table_settings,
																					show_info_block:
																						!tableSettings
																							.table_settings
																							?.show_info_block,
																				},
																			}
																		)
																	}
																/>
																<label htmlFor="hide-entry-info">
																	{getStrings(
																		'hide-entry-info'
																	)}{' '}
																	<Tooltip
																		content={getStrings('tooltip-7')}
																	/>
																</label>
															</div>
															<div className="edit-form-group">
																<input
																	type="checkbox"
																	name="hide_pagination"
																	id="hide-pagination"
																	checked={
																		tableSettings
																			.table_settings
																			?.pagination
																	}
																	onChange={(
																		e
																	) =>
																		setTableSettings(
																			{
																				...tableSettings,
																				table_settings:
																				{
																					...tableSettings.table_settings,
																					pagination:
																						!tableSettings
																							.table_settings
																							?.pagination,
																				},
																			}
																		)
																	}
																/>
																<label htmlFor="hide-pagination">
																	{getStrings(
																		'hide-pagi'
																	)}{' '}
																	<Tooltip
																		content={getStrings('tooltip-8')}
																	/>
																</label>
															</div>
														</div>

														<div
															className={`swap-position ${!tableSettings
																?.table_settings
																?.show_info_block &&
																!tableSettings
																	?.table_settings
																	?.pagination
																? 'swptls-swap-disabled'
																: ''
																}`}
														>
															<input
																type="checkbox"
																name="swap_bottom_options"
																className={
																	tableSettings
																		.table_settings
																		?.swap_bottom_options
																		? 'bottomswapon'
																		: 'bottomswapoff'
																}
																id="swap-bottom-options"
																checked={
																	tableSettings
																		.table_settings
																		?.swap_bottom_options
																}
																/* onChange={(
																	e
																) =>
																	setTableSettings(
																		{
																			...tableSettings,
																			table_settings:
																			{
																				...tableSettings.table_settings,
																				swap_bottom_options:
																					!tableSettings
																						.table_settings
																						?.swap_bottom_options,
																			},
																		}
																	)
																} */

																onChange={(e) => {
																	setTableSettings({
																		...tableSettings,
																		table_settings: {
																			...tableSettings.table_settings,
																			swap_bottom_options:
																				!tableSettings
																					.table_settings
																					.swap_bottom_options,
																		},
																	});

																	// Add toast notification
																	if (!tableSettings.table_settings.swap_bottom_options) {
																		toast.success("Position updated. See the changes in table preview");
																	} else {
																		toast.success("Position restored to default!");
																	}
																}}
																// Disable input based on condition
																disabled={
																	!tableSettings
																		?.table_settings
																		?.show_info_block &&
																	!tableSettings
																		?.table_settings
																		?.pagination
																}
															/>
															<label
																htmlFor="swap-bottom-options"
																className="swapped-pos-lab"
															>
																<div className="icon">
																	<svg
																		xmlns="http://www.w3.org/2000/svg"
																		width="13"
																		height="15"
																		viewBox="0 0 13 15"
																		fill="none"
																	>
																		<path
																			d="M4 7.75L1 10.75L4 13.75M11.5 10.75H1M8.5 1.25L11.5 4.25L8.5 7.25M1 4.25H11.5"
																			stroke="#008717"
																			stroke-width="1.5"
																			stroke-linecap="round"
																			stroke-linejoin="round"
																		/>
																	</svg>
																</div>
																{ /* <span>{getStrings('swap-pos')}</span> */}
																{tableSettings
																	.table_settings
																	?.swap_bottom_options ? (
																	<span>
																		{getStrings(
																			'swapped-pos'
																		)}
																	</span>
																) : (
																	<span>
																		{getStrings(
																			'swap-pos'
																		)}
																	</span>
																)}
															</label>
														</div>
													</div>
												</div>
											</div>

											<div className="swptls-table-basic-elements">
												<div className="edit-form-group">
													<input
														type="checkbox"
														name="show_title"
														id="show-title"
														checked={
															tableSettings
																.table_settings
																?.show_title
														}
														onChange={(e) =>
															setTableSettings({
																...tableSettings,
																table_settings:
																{
																	...tableSettings.table_settings,
																	show_title:
																		!tableSettings
																			.table_settings
																			.show_title,
																},
															})
														}
													/>
													<label htmlFor="show-title">
														{ /* Show Table title */}
														{getStrings(
															'show-table-title'
														)}
														<Tooltip
															content={getStrings('tooltip-5.1')}
														/>
													</label>
												</div>

												{ /* Description show feature will work later on */}
												<div className="edit-form-group">
													<input
														type="checkbox"
														name="show_description"
														id="show-description"
														checked={
															tableSettings
																.table_settings
																?.show_description
														}
														onChange={(e) =>
															setTableSettings({
																...tableSettings,
																table_settings:
																{
																	...tableSettings.table_settings,
																	show_description:
																		!tableSettings
																			.table_settings
																			.show_description,
																	// description_position: e.target.checked ? 'above' : 'below'
																},
															})
														}
													/>
													<label htmlFor="show-description">
														{' '}
														{getStrings('show-table-desc')}
														<span className="select-wrapper">
															<select
																name="description_position"
																id="description-position"
																value={
																	tableSettings
																		.table_settings
																		?.description_position
																}
																onChange={(
																	e
																) =>
																	setTableSettings(
																		{
																			...tableSettings,
																			table_settings:
																			{
																				...tableSettings.table_settings,
																				description_position:
																					e
																						.target
																						.value,
																			},
																		}
																	)
																}
															>
																<option value="above">
																	{getStrings('above')}
																</option>
																<option value="below">
																	{getStrings('below')}
																</option>
															</select>

															<div className="icon">
																<svg
																	xmlns="http://www.w3.org/2000/svg"
																	width="11"
																	height="6"
																	viewBox="0 0 11 6"
																	fill="none"
																>
																	<path
																		d="M10.9999 0.995538C11.0003 1.12361 10.9744 1.25016 10.9241 1.36588C10.8738 1.48159 10.8004 1.58354 10.7093 1.66423L5.99542 5.80497C5.85484 5.93107 5.67851 6 5.49654 6C5.31456 6 5.13823 5.93107 4.99765 5.80497L0.283814 1.51849C0.123373 1.37297 0.0224779 1.16387 0.00332422 0.937177C-0.0158295 0.710485 0.0483274 0.484775 0.181681 0.309701C0.315034 0.134626 0.506661 0.024529 0.714405 0.00362822C0.922149 -0.0172725 1.12899 0.0527358 1.28943 0.198252L5.50046 4.03037L9.7115 0.326847C9.82682 0.222014 9.96724 0.155421 10.1162 0.134949C10.2651 0.114478 10.4163 0.140983 10.5518 0.211329C10.6873 0.281675 10.8016 0.392918 10.881 0.531895C10.9604 0.670871 11.0017 0.831765 10.9999 0.995538Z"
																		fill="#1E1E1E"
																	/>
																</svg>
															</div>
														</span>
														{getStrings('the-table')}
														<Tooltip
															content={getStrings('tooltip-5.2')}
														/>
														{
															// <button className="btn-pro btn-new">
															// 	{ getStrings(
															// 		'new'
															// 	) }
															// </button>
														}
													</label>
												</div>

												{ /* Merge Feature  */}

												<div className="edit-form-group">
													<div
														className={`edit-form-group table-style`}
														id="merged-activattion"
													>
														<input
															type="checkbox"
															name="merge-cells"
															id="merge-cells"
															checked={
																tableSettings
																	?.table_settings
																	?.merged_support
															}
															onChange={(e) =>
																setTableSettings(
																	{
																		...tableSettings,
																		table_settings:
																		{
																			...tableSettings.table_settings,
																			merged_support:
																				e.target.checked,
																		},
																	}
																)
															}
														/>
														<label htmlFor="merge-cells">
															{getStrings(
																'merge-cells'
															)}{' '}
															<span className="tooltip-cache">
																<Tooltip
																	content={getStrings(
																		'tooltip-36'
																	)}
																/>{' '}
															</span>
														</label>
													</div>
												</div>

												{ /* Enable sorting  */}
												<div className="edit-form-group">
													<input
														type="checkbox"
														name="disable_sorting"
														id="disable-sorting"
														checked={
															tableSettings
																.table_settings
																?.allow_sorting
														}
														onChange={(e) =>
															setTableSettings({
																...tableSettings,
																table_settings:
																{
																	...tableSettings.table_settings,
																	allow_sorting:
																		!tableSettings
																			.table_settings
																			?.allow_sorting,
																},
															})
														}
													/>
													<label htmlFor="disable-sorting">
														{getStrings(
															'allow-sorting'
														)}
														<Tooltip
															content={getStrings(
																'tooltip-6'
															)}
														/>
													</label>
												</div>


												{/* Single Select Dropdown */}
												<div className={`edit-form-group sorting-feature-with-priority ${tableSettings?.table_settings
													?.allow_sorting === false
													? 'feature-disabled'
													: ''
													}`}>

													<div className="auto_sorting-label">{getStrings('auto-sorting')}

														<Tooltip
															content={getStrings(
																'tooltip-57'
															)}
														/>

														<button className="btn-pro btn-new">
															{getStrings(
																'new'
															)}
														</button>
													</div>

													{/* Sort order  */}
													<div className="conditional-view">
														<div className="conditional-dropdown-select">
															<label htmlFor="headerSelect" className="auto_sorting-title">
																{getStrings('col-sorting')}
																<Tooltip content={getStrings('tooltip-54')} />
															</label>
															<div className="select-with-icon">
																<select
																	id="headerSelect"
																	value={selectedOption}
																	onChange={(e) => handleOptionSelect(Number(e.target.value))}
																	disabled={tableSettings?.table_settings?.allow_sorting === false}
																>
																	{tableHeaders.map((header) => (
																		<option key={header.value} value={header.value}>
																			{header.label}
																		</option>
																	))}
																</select>
																<span
																	className={`select-icon`}
																>
																	<svg xmlns="http://www.w3.org/2000/svg" width="11" height="6" viewBox="0 0 11 6" fill="none"><path d="M10.9999 0.995538C11.0003 1.12361 10.9744 1.25016 10.9241 1.36588C10.8738 1.48159 10.8004 1.58354 10.7093 1.66423L5.99542 5.80497C5.85484 5.93107 5.67851 6 5.49654 6C5.31456 6 5.13823 5.93107 4.99765 5.80497L0.283814 1.51849C0.123373 1.37297 0.0224779 1.16387 0.00332422 0.937177C-0.0158295 0.710485 0.0483274 0.484775 0.181681 0.309701C0.315034 0.134626 0.506661 0.024529 0.714405 0.00362822C0.922149 -0.0172725 1.12899 0.0527358 1.28943 0.198252L5.50046 4.03037L9.7115 0.326847C9.82682 0.222014 9.96724 0.155421 10.1162 0.134949C10.2651 0.114478 10.4163 0.140983 10.5518 0.211329C10.6873 0.281675 10.8016 0.392918 10.881 0.531895C10.9604 0.670871 11.0017 0.831765 10.9999 0.995538Z" fill="#1E1E1E"></path></svg>
																</span>
															</div>

															{/* sorting-control */}
															<div className='sorting-control'>
																<div className={`${!isProActive()
																	? ` swptls-pro-settings`
																	: ``
																	}`}>
																	<input
																		type="checkbox"
																		name="hide_sorting_control"
																		id="hide-sorting-control"
																		checked={
																			tableSettings
																				.table_settings
																				?.hide_sorting_icon
																		}
																		onChange={(e) =>
																			setTableSettings({
																				...tableSettings,
																				table_settings:
																				{
																					...tableSettings.table_settings,
																					hide_sorting_icon:
																						!tableSettings
																							.table_settings
																							?.hide_sorting_icon,
																				},
																			})
																		}
																	/>

																	<label htmlFor="hide-sorting-control">
																		{getStrings(
																			'sorting-control'
																		)}
																	</label>
																</div>
																<span className='pro-tag-sorting-control'>
																	{!isProActive() && (
																		<button className="btn-pro">
																			{ProIcon}
																		</button>
																	)}

																</span>

															</div>

															{/* End  */}

														</div>

														{/* Sorting Order Dropdown */}
														{selectedOption !== -1 && selectedOption !== null && selectedOption !== '' && (
															<div className="sort-order-select">
																<label htmlFor="sortOrder" className="auto_sorting-title">
																	{getStrings('order-sorting')}
																	<Tooltip content={getStrings('tooltip-55')} />
																</label>
																<div className="select-with-icon">
																	<span className={`select-icon-sort`}>
																		{sortOrder === 'asc' ? (
																			<svg fill="#666" width="15" height="20" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" stroke="#666" stroke-width="1">
																				<g id="SVGRepo_bgCarrier" stroke-width="0" />
																				<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
																				<g id="SVGRepo_iconCarrier"> <title>arrow-down-a-z</title> <path d="M11.47 24.469l-3.72 3.721v-26.189c0-0.414-0.336-0.75-0.75-0.75s-0.75 0.336-0.75 0.75v0 26.188l-3.72-3.72c-0.136-0.134-0.322-0.218-0.528-0.218-0.415 0-0.751 0.336-0.751 0.751 0 0.207 0.083 0.394 0.218 0.529l5 5c0.026 0.026 0.065 0.017 0.093 0.038 0.052 0.040 0.088 0.098 0.15 0.124 0.085 0.035 0.184 0.056 0.287 0.057h0c0.207 0 0.394-0.084 0.53-0.219l5-5c0.135-0.136 0.218-0.323 0.218-0.529 0-0.415-0.336-0.751-0.751-0.751-0.206 0-0.393 0.083-0.528 0.218l0-0zM23.557 1.872c-0.049-0.102-0.152-0.172-0.271-0.172-0 0-0.001 0-0.001 0h-0.584c-0 0-0.001 0-0.001 0-0.119 0-0.222 0.069-0.27 0.17l-0.001 0.002-5.64 12c-0.018 0.037-0.029 0.081-0.029 0.128 0 0.166 0.134 0.3 0.3 0.3 0 0 0 0 0 0h0.531c0 0 0 0 0 0 0.119 0 0.222-0.070 0.271-0.171l0.001-0.002 1.343-2.861h7.557l1.357 2.863c0.050 0.102 0.153 0.171 0.271 0.171h0.531c0 0 0.001 0 0.002 0 0.165 0 0.299-0.134 0.299-0.299 0-0.047-0.011-0.091-0.030-0.13l0.001 0.002zM19.711 10.169l3.281-6.95 3.264 6.95zM27.584 17.704h-8.908c-0 0-0 0-0.001 0-0.166 0-0.3 0.134-0.3 0.3v0 0.496c0 0.166 0.135 0.301 0.301 0.301h7.615l-8.129 10.604c-0.039 0.050-0.062 0.113-0.063 0.182v0.41c0 0.166 0.135 0.301 0.301 0.301h9.166c0.166-0 0.301-0.135 0.301-0.301v0-0.496c-0-0.166-0.135-0.301-0.301-0.301h-7.873l8.129-10.604c0.039-0.050 0.062-0.113 0.063-0.182v-0.41c-0-0.166-0.134-0.3-0.3-0.3-0 0-0.001 0-0.001 0h0z" /> </g>
																			</svg>
																		) : (
																			<svg width="15" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
																				<path d="M7 3V21M7 3L11 7M7 3L3 7M15.5 3H20.5L15.5 10H20.5M16 20H20M15 21L18 14L21 21" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
																			</svg>
																		)}
																	</span>
																	<select
																		id="sortOrder"
																		value={sortOrder}
																		onChange={handleSortOrderChange}
																		disabled={tableSettings?.table_settings?.allow_sorting === false}
																	>
																		<option value="asc">{getStrings('sorting-ascending')}</option>
																		<option value="desc">{getStrings('sorting-descending')}</option>
																	</select>
																	<span
																		className={`select-icon`}
																	>
																		<svg xmlns="http://www.w3.org/2000/svg" width="11" height="6" viewBox="0 0 11 6" fill="none"><path d="M10.9999 0.995538C11.0003 1.12361 10.9744 1.25016 10.9241 1.36588C10.8738 1.48159 10.8004 1.58354 10.7093 1.66423L5.99542 5.80497C5.85484 5.93107 5.67851 6 5.49654 6C5.31456 6 5.13823 5.93107 4.99765 5.80497L0.283814 1.51849C0.123373 1.37297 0.0224779 1.16387 0.00332422 0.937177C-0.0158295 0.710485 0.0483274 0.484775 0.181681 0.309701C0.315034 0.134626 0.506661 0.024529 0.714405 0.00362822C0.922149 -0.0172725 1.12899 0.0527358 1.28943 0.198252L5.50046 4.03037L9.7115 0.326847C9.82682 0.222014 9.96724 0.155421 10.1162 0.134949C10.2651 0.114478 10.4163 0.140983 10.5518 0.211329C10.6873 0.281675 10.8016 0.392918 10.881 0.531895C10.9604 0.670871 11.0017 0.831765 10.9999 0.995538Z" fill="#1E1E1E"></path></svg>
																	</span>
																</div>


															</div>
														)}
													</div>
												</div>


												{/* Sticky Header  */}
												<div className="sticky-header-settings">
													{/* -----------Fixed Headers------------ */}
													<div className="edit-form-group header-section">
														<div className={`${!isProActive()
															? ` swptls-pro-settings`
															: ``
															}`}>
															<label>
																<input
																	id='enable_fixed_headers'
																	type="checkbox"
																	checked={tableSettings.table_settings?.fixed_headers || false}
																	onChange={() => handleCheckboxChange('fixed_headers')}
																/>
																{getStrings('fixed-header')}

															</label>
														</div>
														<span className='pro-tag-sorting-control'>
															{!isProActive() && (
																<button className="btn-pro">
																	{ProIcon}
																</button>
															)}
															<button className="btn-pro btn-new">
																{getStrings(
																	'new'
																)}
															</button>
														</span>
													</div>
													{tableSettings.table_settings?.fixed_headers && (
														<div className={`header-settings ${!isProActive()
															? ` swptls-pro-settings`
															: ``
															}`}>
															<div className="column-input">
																<label>{getStrings('header-offset')}
																	<Tooltip content={getStrings('tooltip-60')} />
																</label>
																<div className="sticky-number-input">
																	<button
																		type="button"
																		onClick={() => handleValueChange('header_offset', 'decrement')}
																		disabled={(tableSettings.table_settings?.header_offset || 0) === 0}
																	>
																		-
																	</button>
																	<input
																		id='header_offset'
																		type="number"
																		value={tableSettings.table_settings?.header_offset || 0}
																		onChange={(e) => handleManualValueChange('header_offset', e)}
																		min="0"
																	/>
																	<button
																		type="button"
																		onClick={() => handleValueChange('header_offset', 'increment')}
																	>
																		+
																	</button>
																</div>
															</div>
														</div>
													)}

													{/* --------------Enable Fixed Columns --------------*/}
													<div className="edit-form-group header-section">
														<div className={`${!isProActive()
															? ` swptls-pro-settings`
															: ``
															}`}>
															<label>
																<input
																	id='enable_fixed_columns'
																	type="checkbox"
																	checked={tableSettings.table_settings?.enable_fixed_columns || false}
																	onChange={() => handleCheckboxChange('enable_fixed_columns')}
																/>
																{getStrings('enb-fixed-clmn')}


															</label>
														</div>
														<span className='pro-tag-sorting-control'>
															{!isProActive() && (
																<button className="btn-pro">
																	{ProIcon}
																</button>
															)}
															<button className="btn-pro btn-new">
																{getStrings(
																	'new'
																)}
															</button>
														</span>
													</div>
													{tableSettings.table_settings?.enable_fixed_columns && (
														<div className={`column-settings ${!isProActive()
															? ` swptls-pro-settings`
															: ``
															}`}>
															<div className="column-input">
																<label>{getStrings('left-clmn-header')}
																	<Tooltip content={getStrings('tooltip-61')} />
																</label>
																<div className="sticky-number-input">
																	<button
																		type="button"
																		onClick={() => handleValueChange('left_columns', 'decrement')}
																		disabled={(tableSettings.table_settings?.left_columns || 0) === 0}
																	>
																		-
																	</button>
																	<input
																		id='left_columns'
																		type="number"
																		value={tableSettings.table_settings?.left_columns || 0}
																		readOnly
																	/>
																	<button
																		type="button"
																		onClick={() => handleValueChange('left_columns', 'increment')}
																	>
																		+
																	</button>
																</div>
															</div>
															<div className="column-input">
																<label>{getStrings('right-clmn-header')}
																	<Tooltip content={getStrings('tooltip-62')} />
																</label>
																<div className="sticky-number-input">
																	<button
																		type="button"
																		onClick={() => handleValueChange('right_columns', 'decrement')}
																		disabled={(tableSettings.table_settings?.right_columns || 0) === 0}
																	>
																		-
																	</button>
																	<input
																		id='right_columns'
																		type="number"
																		value={tableSettings.table_settings?.right_columns || 0}
																		readOnly
																	/>
																	<button
																		type="button"
																		onClick={() => handleValueChange('right_columns', 'increment')}
																	>
																		+
																	</button>
																</div>
															</div>
														</div>
													)}
												</div>
												{/* End */}
											</div>
										</div>
									</div>
								</div>
							)}

							{'utility' === secondActiveTab && (
								<div className="table-customization-utility">
									<div className={`edit-form-group`}>
										<h4>
											<span
												className={`${!isProActive()
													? ` swptls-pro-settings`
													: ``
													}`}
											>
												{getStrings('let-export')}{' '}
												<Tooltip
													content={getStrings(
														'tooltip-22'
													)}
												/>{' '}
											</span>

											{!isProActive() && (
												<button className="btn-pro">
													{ProIcon}
												</button>
											)}
										</h4>

										<div
											className={`exports-btns${!isProActive()
												? ` swptls-pro-settings`
												: ``
												}`}
										>
											<button
												className={
													tableSettings &&
														tableSettings?.table_settings?.table_export?.includes(
															'excel'
														)
														? 'active'
														: ''
												}
												data-item="excel"
												onClick={(e) =>
													handleExportOptions(e)
												}
											>
												{getStrings('Excel')}
											</button>
											<button
												className={
													tableSettings?.table_settings?.table_export?.includes(
														'json'
													)
														? 'active'
														: ''
												}
												data-item="json"
												onClick={(e) =>
													handleExportOptions(e)
												}
											>
												{getStrings('JSON')}
											</button>
											<button
												className={
													tableSettings?.table_settings?.table_export?.includes(
														'pdf'
													)
														? 'active'
														: ''
												}
												data-item="pdf"
												onClick={(e) =>
													handleExportOptions(e)
												}
											>
												{getStrings('PDF')}
											</button>
											<button
												className={
													tableSettings?.table_settings?.table_export?.includes(
														'csv'
													)
														? 'active'
														: ''
												}
												data-item="csv"
												onClick={(e) =>
													handleExportOptions(e)
												}
											>
												{getStrings('CSV')}
											</button>
											<button
												className={
													tableSettings?.table_settings?.table_export?.includes(
														'print'
													)
														? 'active'
														: ''
												}
												data-item="print"
												onClick={(e) =>
													handleExportOptions(e)
												}
											>
												{getStrings('Print')}
											</button>
											<button
												className={
													tableSettings?.table_settings?.table_export?.includes(
														'copy'
													)
														? 'active'
														: ''
												}
												data-item="copy"
												onClick={(e) =>
													handleExportOptions(e)
												}
											>
												{getStrings('Copy')}
											</button>
										</div>
									</div>

									{ /* Cursor behavior on the Table */}
									<div className={`edit-form-group`}>
										<h4>
											<span
												className={`${!isProActive()
													? ` swptls-pro-settings`
													: ``
													}`}
											>
												{getStrings(
													'cursor-behavior'
												)}{' '}
												<Tooltip
													content={getStrings(
														'tooltip-45'
													)}
												/>{' '}
											</span>

											{!isProActive() && (
												<button className="btn-pro">
													{ProIcon}
												</button>
											)}
											{ /* {<button className='btn-pro btn-new cursor-behave'>{getStrings('new')}</button>} */}
										</h4>

										<div
											className={`utility-checkbox-wrapper${!isProActive()
												? ` swptls-pro-settings`
												: ``
												}`}
										>
											<label
												className={`utility-checkboxees${tableSettings
													?.table_settings
													?.cursor_behavior ===
													'copy_paste' ||
													!isProActive()
													? ' active'
													: ''
													}`}
												htmlFor="copy-paste"
											>
												<input
													type="radio"
													name="cursor_behavior"
													id="copy-paste"
													onClick={() =>
														setTableSettings({
															...tableSettings,
															table_settings: {
																...tableSettings.table_settings,
																cursor_behavior:
																	'copy_paste',
															},
														})
													}
												/>
												<span>
													{getStrings(
														'highlight-and-copy'
													)}{' '}
													<Tooltip
														content={getStrings(
															'tooltip-46'
														)}
													/>
												</span>
												<div
													className={`control__indicator${tableSettings
														?.table_settings
														?.cursor_behavior ===
														'copy_paste' ||
														!isProActive()
														? ' active'
														: ''
														}`}
												></div>
											</label>
											<label
												className={`utility-checkboxees${isProActive() &&
													tableSettings
														?.table_settings
														?.cursor_behavior ===
													'left_right'
													? ' active'
													: ''
													}`}
												htmlFor="left-right"
											>
												<input
													type="radio"
													name="cursor_behavior"
													id="left-right"
													onClick={() =>
														setTableSettings({
															...tableSettings,
															table_settings: {
																...tableSettings.table_settings,
																cursor_behavior:
																	'left_right',
															},
														})
													}
												/>
												<span>
													{getStrings(
														'left-to-right'
													)}{' '}
													<Tooltip
														content={getStrings(
															'tooltip-47'
														)}
													/>
												</span>
												<div
													className={`control__indicator${isProActive() &&
														tableSettings
															?.table_settings
															?.cursor_behavior ===
														'left_right'
														? ' active'
														: ''
														}`}
												></div>
											</label>
										</div>
									</div>

									{ /* link redirection behavior */}
									<div className={`edit-form-group`}>
										<h4>
											{getStrings('link-behave')}{' '}
											<Tooltip
												content={getStrings(
													'tooltip-23'
												)}
											/>{' '}

										</h4>

										{ /* <div className={`utility-checkbox-wrapper${!isProActive() ? ` swptls-pro-settings` : ``}`}> */}
										<div className="utility-checkbox-wrapper">
											<label
												className={`utility-checkboxees${tableSettings
													?.table_settings
													?.redirection_type ===
													'_self'
													? ' active'
													: ''
													}`}
												htmlFor="current-window"
											>
												<input
													type="radio"
													name="redirection_type"
													id="current-window"
													onClick={() =>
														setTableSettings({
															...tableSettings,
															table_settings: {
																...tableSettings.table_settings,
																redirection_type:
																	'_self',
															},
														})
													}
												/>
												<span>
													{getStrings(
														'open-ct-window'
													)}{' '}
													<Tooltip
														content={getStrings(
															'tooltip-24'
														)}
													/>
												</span>
												<div
													className={`control__indicator${tableSettings
														?.table_settings
														?.redirection_type ===
														'_self'
														? ' active'
														: ''
														}`}
												></div>
											</label>
											<label
												className={`utility-checkboxees${tableSettings
													?.table_settings
													?.redirection_type ===
													'_blank'
													? ' active'
													: ''
													}`}
												htmlFor="new-window"
											>
												<input
													type="radio"
													name="redirection_type"
													id="new-window"
													onClick={() =>
														setTableSettings({
															...tableSettings,
															table_settings: {
																...tableSettings.table_settings,
																redirection_type:
																	'_blank',
															},
														})
													}
												/>
												<span>
													{getStrings(
														'open-new-window'
													)}{' '}
													<Tooltip
														content={getStrings(
															'tooltip-25'
														)}
													/>
												</span>
												<div
													className={`control__indicator${tableSettings
														?.table_settings
														?.redirection_type ===
														'_blank'
														? ' active'
														: ''
														}`}
												></div>
											</label>
										</div>
									</div>

									{ /* image and link support */}
									<div
										className={`edit-form-group special-feature`}
									>
										<label
											className="cache-table"
											// className={`cache-table ${!isProActive() ? ` swptls-pro-settings` : ``}`}
											htmlFor="table_link_support"
										>
											<input
												type="checkbox"
												name="table_link_support"
												id="table_link_support"
												checked={
													tableSettings
														?.table_settings
														?.table_link_support
												}
												onClick={(e) =>
													setTableSettings({
														...tableSettings,
														table_settings: {
															...tableSettings.table_settings,
															table_link_support:
																e.target
																	.checked,
														},
													})
												}
											// disabled={!isProActive()} // added to disable click if its not pro
											/>
											{getStrings('import-links')}{' '}
										</label>
										<span className="tooltip-cache">
											<Tooltip
												content={getStrings(
													'tooltip-26'
												)}
											/>{' '}

										</span>
									</div>
									{ /* )} */}

									{ /* image and link support */}
									<div
										className={`edit-form-group special-feature`}
									>
										<label
											className="cache-table"
											// className={`cache-table ${!isProActive() ? ` swptls-pro-settings` : ``}`}
											htmlFor="table_img_support"
										>
											<input
												type="checkbox"
												name="table_img_support"
												id="table_img_support"
												checked={
													tableSettings
														?.table_settings
														?.table_img_support
												}
												onClick={(e) =>
													setTableSettings({
														...tableSettings,
														table_settings: {
															...tableSettings.table_settings,
															table_img_support:
																e.target
																	.checked,
														},
													})
												}
											// disabled={!isProActive()} // added to disable click if its not pro
											/>
											{getStrings('import-image')}{' '}
										</label>
										<span className="tooltip-cache">
											<Tooltip
												content={getStrings(
													'tooltip-27'
												)}
											/>{' '}

										</span>
									</div>



									{tableSettings?.table_settings?.table_img_support && (
										<div
											className={`${!isProActive()
												? `edit-form-group special-feature lightbox-feature-wrapper swptls-pro-settings`
												: `edit-form-group special-feature lightbox-feature-wrapper`
												}`}
										>
											<label
												className="cache-table"
												htmlFor="img_lightbox_support"
											>
												<input
													type="checkbox"
													name="img_lightbox_support"
													id="img_lightbox_support"
													checked={
														tableSettings
															?.table_settings
															?.img_lightbox_support
													}
													onClick={(e) =>
														setTableSettings({
															...tableSettings,
															table_settings: {
																...tableSettings.table_settings,
																img_lightbox_support:
																	e.target
																		.checked,
															},
														})
													}
													disabled={!isProActive()}
												/>
												Enable Image Lightbox{' '}
											</label>
											<span className="tooltip-cache">
												<Tooltip
													content="Enable lightbox popup for images. Click on images to view them in full size."
												/>{' '}
											</span>

											{<button className='btn-pro btn-new cursor-behave'>{getStrings('new')}</button>}
											{!isProActive() && (
												<button className="btn-pro">
													{ProIcon}
												</button>
											)}
										</div>
									)}

									{ /* Checkbox support */}
									<div
										className={`edit-form-group special-feature`}
									>
										<label
											className="cache-table"
											htmlFor="checkbox_support"
										>
											<input
												type="checkbox"
												name="checkbox_support"
												id="checkbox_support"
												checked={
													tableSettings
														?.table_settings
														?.checkbox_support
												}
												onClick={(e) =>
													setTableSettings({
														...tableSettings,
														table_settings: {
															...tableSettings.table_settings,
															checkbox_support:
																e.target
																	.checked,
														},
													})
												}
											/>
											{getStrings('import-checkbox')}{' '}
										</label>
										<span className="tooltip-cache">
											<Tooltip
												content={getStrings(
													'tooltip-48'
												)}
											/>{' '}
											{
												// <button className="btn-pro btn-new">
												// 	{ getStrings( 'new' ) }
												// </button>
											}
										</span>
									</div>

									{/* <br /> */}
									{ /* Cache feature  */}
									<div
										className={`edit-form-group cache-feature`}
									>
										<label
											className="cache-table"
											// className={`cache-table ${!isProActive() ? ` swptls-pro-settings` : ``}`}
											htmlFor="table-cache"
										>
											<input
												type="checkbox"
												name="table_cache"
												id="table-cache"
												checked={
													tableSettings
														?.table_settings
														?.table_cache
												}
												onClick={(e) =>
													setTableSettings({
														...tableSettings,
														table_settings: {
															...tableSettings.table_settings,
															table_cache:
																e.target
																	.checked,
														},
													})
												}
											// disabled={!isProActive()} // added to disable click if its not pro
											/>
											{getStrings('cache-table')}{' '}
										</label>
										<span className="tooltip-cache">
											<Tooltip
												content={getStrings(
													'tooltip-28'
												)}
											/>{' '}

										</span>
									</div>

									{ /* Frequent Cache update disable feature  */}

									{tableSettings?.table_settings
										?.table_cache ===
										true && (
											<>
												<div className={`edit-form-group cache-feature frequent-mode ${tableSettings?.table_settings
													?.table_cache === false
													? 'feature-disabled'
													: ''
													}`}>

													<div className="freq-settings">
														<label
															className="cache-table"
															// className={`cache-table ${!isProActive() ? ` swptls-pro-settings` : ``}`}
															htmlFor="disable-frequent-cache"
														>
															<input
																type="checkbox"
																name="disable_frequent_cache"
																id="disable-frequent-cache"
																checked={
																	tableSettings
																		?.table_settings
																		?.disable_frequent_cache
																}

																onChange={handleFrequentCacheCheckboxClick}

																disabled={!tableSettings
																	?.table_settings
																	?.table_cache} // added to disable click if cache not enabled
															/>
															{getStrings('frequent-cache')}{' '}
														</label>

														<span className="tooltip-cache">
															<Tooltip
																content={getStrings(
																	'tooltip-63'
																)}
															/>{' '}

															{/* {<button className='btn-pro btn-new cursor-behave'>{getStrings('new')}</button>}
															<button className="beta-badge">{getStrings('beta')}</button> */}
														</span>
													</div>
													<p className="content-paragraph">{getStrings('freq-content')}</p>

												</div>
											</>
										)}

									{ /* Add more here  */}
								</div>
							)}

							{'style' === secondActiveTab && (
								<div className="table-customization-style">
									<div className={`edit-form-group`}>
										<h4>
											{getStrings('cell-formatting')}{' '}
											<Tooltip
												content={getStrings(
													'tooltip-29'
												)}
											/>

										</h4>

										<div className="style-checkbox-items">
											{ /* <div className={`style-checkbox-items${!isProActive() ? ` swptls-pro-settings` : ``}`}> */}
											<label
												className={`style-checkbox${tableSettings
													?.table_settings
													?.cell_format ===
													'expand'
													? ' active'
													: ''
													}`}
												htmlFor="expand"
											>
												<input
													type="radio"
													name="cell_format"
													id="expand"
													onClick={() =>
														setTableSettings({
															...tableSettings,
															table_settings: {
																...tableSettings.table_settings,
																cell_format:
																	'expand',
															},
														})
													}
												/>
												<span>
													{getStrings('expanded')}{' '}
													<Tooltip
														content={getStrings(
															'tooltip-30'
														)}
													/>
												</span>
												<div
													className={`control__indicator${tableSettings
														?.table_settings
														?.cell_format ===
														'expand'
														? ' active'
														: ''
														}`}
												></div>
											</label>
											<label
												className={`style-checkbox${tableSettings
													?.table_settings
													?.cell_format === 'wrap'
													? ' active'
													: ''
													}`}
												htmlFor="wrap"
											>
												<input
													type="radio"
													name="responsive_style"
													id="wrap"
													onClick={() =>
														setTableSettings({
															...tableSettings,
															table_settings: {
																...tableSettings.table_settings,
																cell_format:
																	'wrap',
															},
														})
													}
												/>
												<span>
													{getStrings('wrapped')}{' '}
													<Tooltip
														content={getStrings(
															'tooltip-31'
														)}
													/>
												</span>
												<div
													className={`control__indicator${tableSettings
														?.table_settings
														?.cell_format ===
														'wrap'
														? ' active'
														: ''
														}`}
												></div>
											</label>
										</div>
									</div>

									<div className={`edit-form-group`}>
										<h4>
											{getStrings('responsive-style')}{' '}
											<Tooltip
												content={getStrings(
													'tooltip-32'
												)}
											/>

										</h4>
										<div className="style-checkbox-items">
											{ /* <div className={`style-checkbox-items${!isProActive() ? ` swptls-pro-settings` : ``}`}> */}
											<label
												className={`style-checkbox${tableSettings
													?.table_settings
													?.responsive_style ===
													'default_style'
													? ' active'
													: ''
													}`}
												htmlFor="default_style"
											>
												<input
													type="radio"
													name="responsive_style"
													id="default_style"
													onClick={() =>
														setTableSettings({
															...tableSettings,
															table_settings: {
																...tableSettings.table_settings,
																responsive_style:
																	'default_style',
															},
														})
													}
												/>
												<span>
													{getStrings('default')}{' '}
													<Tooltip
														content={getStrings(
															'tooltip-33'
														)}
													/>
												</span>
												<div
													className={`control__indicator${tableSettings
														?.table_settings
														?.responsive_style ===
														'default_style'
														? ' active'
														: ''
														}`}
												></div>
											</label>
											<label
												className={`style-checkbox${tableSettings
													?.table_settings
													?.responsive_style ===
													'collapse_style'
													? ' active'
													: ''
													}`}
												htmlFor="collapse_style"
											>
												<input
													type="checkbox"
													name="collapse_style"
													id="collapse_style"
													onClick={() =>
														setTableSettings({
															...tableSettings,
															table_settings: {
																...tableSettings.table_settings,
																responsive_style:
																	'collapse_style',
															},
														})
													}
												/>
												<span>
													{getStrings(
														'collapsible-style'
													)}{' '}
													<Tooltip
														content={getStrings(
															'tooltip-34'
														)}
													/>
												</span>
												<div
													className={`control__indicator${tableSettings
														?.table_settings
														?.responsive_style ===
														'collapse_style'
														? ' active'
														: ''
														}`}
												></div>
											</label>
											<label
												className={`style-checkbox${tableSettings
													?.table_settings
													?.responsive_style ===
													'scroll_style'
													? ' active'
													: ''
													}`}
												htmlFor="scroll_style"
											>
												<input
													type="checkbox"
													name="scroll_style"
													id="scroll_style"
													onClick={() =>
														setTableSettings({
															...tableSettings,
															table_settings: {
																...tableSettings.table_settings,
																responsive_style:
																	'scroll_style',
															},
														})
													}
												/>
												<span>
													{getStrings(
														'scrollable-style'
													)}{' '}
													<Tooltip
														content={getStrings(
															'tooltip-35'
														)}
													/>
												</span>
												<div
													className={`control__indicator${tableSettings
														?.table_settings
														?.responsive_style ===
														'scroll_style'
														? ' active'
														: ''
														}`}
												></div>
											</label>
										</div>
									</div>

									<div className="table-customization-layout">
										<div className="edit-form-group">
											<label htmlFor="rows-per-page">
												{getStrings('row-per-page')}{' '}
												<Tooltip
													content={getStrings(
														'tooltip-37'
													)}
												/>
											</label>
											<select
												name="rows_per_page"
												id="rows-per-page"
												value={
													tableSettings
														?.table_settings
														?.default_rows_per_page
												}
												onChange={handleSelectChange}
											>
												<>
													{isProActive() ? (
														<>
															<option value="1">
																{getStrings(
																	'1'
																)}
															</option>
															<option value="5">
																{getStrings(
																	'5'
																)}
															</option>
															<option value="10">
																{getStrings(
																	'10'
																)}
															</option>
															<option value="15">
																{getStrings(
																	'15'
																)}
															</option>
															<option value="30">
																{getStrings(
																	'30'
																)}
															</option>
															<option value="50">
																{getStrings(
																	'50'
																)}
															</option>
															<option value="100">
																{getStrings(
																	'100'
																)}
															</option>
															<option value="-1">
																{getStrings(
																	'All'
																)}
															</option>
														</>
													) : (
														<>
															<option value="1">
																{getStrings(
																	'1'
																)}
															</option>
															<option value="5">
																{getStrings(
																	'5'
																)}
															</option>
															<option value="10">
																{getStrings(
																	'10'
																)}
															</option>
															<option value="15">
																{getStrings(
																	'15'
																)}
															</option>
															<option value="30">
																{getStrings(
																	'30'
																)}
															</option>

															<option value="50">
																{getStrings(
																	'50'
																)}
															</option>

															<option
																value="100"
																className={`${!isProActive()
																	? `swptls-pro-settings row-to-show-per-page`
																	: ``
																	}`}
															>
																{getStrings(
																	'100'
																)}
															</option>
															<option
																value="-1"
																className={`${!isProActive()
																	? `swptls-pro-settings row-to-show-per-page`
																	: ``
																	}`}
															>
																{getStrings(
																	'All'
																)}
															</option>
														</>
													)}
												</>
											</select>
										</div>

										<div className={`edit-form-group`}>
											<label htmlFor="table_height">
												<span
													className={`table_height_label`}
												>
													{getStrings(
														'table-height'
													)}{' '}
													<Tooltip
														content={getStrings('tooltip-38')}
													/>
												</span>
												{ /* {!isProActive() && (<button className='btn-pro'>{ProIcon}</button>)} */}
											</label>
											<div
												className={`edit-form-group swptls-select`}
											>
												<select
													// className={`${!isProActive() ? ` swptls-pro-settings` : ``}`}
													name="table_height"
													id="table_height"
													value={
														tableSettings
															?.table_settings
															?.vertical_scrolling
													}
													onChange={(e) =>
														setTableSettings({
															...tableSettings,
															table_settings: {
																...tableSettings.table_settings,
																vertical_scrolling:
																	parseInt(
																		e.target
																			.value
																	),
															},
														})
													}
												>
													<option value="default_height">
														{getStrings(
															'default-height'
														)}
													</option>
													<option value="400">
														{getStrings(
															'400px'
														)}
													</option>
													<option value="500">
														{getStrings(
															'500px'
														)}
													</option>
													<option value="600">
														{getStrings(
															'600px'
														)}
													</option>
													<option value="700">
														{getStrings(
															'700px'
														)}
													</option>
													<option value="800">
														{getStrings(
															'800px'
														)}
													</option>
													<option value="900">
														{getStrings(
															'900px'
														)}
													</option>
													<option value="1000">
														{getStrings(
															'1000px'
														)}
													</option>
												</select>
											</div>
										</div>
									</div>

									{ /* Merge featre are here berfor  */}
								</div>
							)}


							{/* 'filter' tab  */}
							{'filter' === secondActiveTab && (
								<div className="table-customization-style">
									<div className={`edit-form-group`}>

										<div className="conditional-filtering-wrapper">
											{/* <h3 style={{ marginTop: 0 }}>{getStrings('filter-configuration')}</h3> */}

											{/* NEW: Simplified Global Filter Settings */}
											<div className="edit-form-group filter-global-settings">

												{/* 1. Enable Table Filters - Master Toggle */}
												<div className={`filter-settings-item ${!isProActive() ? ` swptls-pro-settings` : ``}`}>

													<div className="switch-toggle">
														<input
															type="checkbox"
															id="enable-table-filters"
															checked={tableSettings?.table_settings?.column_filtering?.enable_column_filtering || false}
															onChange={(e) => {
																setTableSettings({
																	...tableSettings,
																	table_settings: {
																		...tableSettings.table_settings,
																		column_filtering: {
																			...tableSettings.table_settings?.column_filtering,
																			enable_column_filtering: e.target.checked
																		}
																	}
																});
															}}
															disabled={!isProActive()}
														/>
														<label htmlFor="enable-table-filters">
															{getStrings('enable-table-filters')}
															<Tooltip content={getStrings('enable-table-filters-tooltip')} />
														</label>
													</div>

													<div className="tags-filter">
														{/* {<button className='btn-pro btn-new cursor-behave'>{getStrings('new')}</button>} */}
														{!isProActive() && (
															<button className="btn-pro">
																{ProIcon}
															</button>
														)}
													</div>

												</div>

												{tableSettings?.table_settings?.column_filtering?.enable_column_filtering && (
													<>
														{/* 2. Filter Display Mode */}
														<div className="filter-type-selection">
															<label>{getStrings('filter-display-mode')}</label>
															<div className="utility-checkbox-wrapper">
																{/* <label
																	className={`utility-checkboxees${!tableSettings?.table_settings?.column_filtering?.filter_display_mode ||
																		tableSettings?.table_settings?.column_filtering?.filter_display_mode === 'inline'
																		? ' active' : ''
																		}`}
																>
																	<input
																		type="radio"
																		name="filter-display-mode"
																		value="inline"
																		checked={
																			!tableSettings?.table_settings?.column_filtering?.filter_display_mode ||
																			tableSettings?.table_settings?.column_filtering?.filter_display_mode === 'inline'
																		}
																		onChange={() => {
																			setTableSettings({
																				...tableSettings,
																				table_settings: {
																					...tableSettings.table_settings,
																					column_filtering: {
																						...tableSettings.table_settings?.column_filtering,
																						filter_display_mode: 'inline'
																					}
																				}
																			});
																		}}
																		disabled={!isProActive()}
																	/>
																	<span>Inline</span>
																	<div className={`control__indicator${!tableSettings?.table_settings?.column_filtering?.filter_display_mode ||
																		tableSettings?.table_settings?.column_filtering?.filter_display_mode === 'inline'
																		? ' active' : ''
																		}`}></div>
																</label> */}

																<label
																	className={`utility-checkboxees${tableSettings?.table_settings?.column_filtering?.filter_display_mode === 'form'
																		? ' active' : ''
																		}`}
																>
																	<input
																		type="radio"
																		name="filter-display-mode"
																		value="form"
																		checked={tableSettings?.table_settings?.column_filtering?.filter_display_mode === 'form'}
																		onChange={() => {
																			setTableSettings({
																				...tableSettings,
																				table_settings: {
																					...tableSettings.table_settings,
																					column_filtering: {
																						...tableSettings.table_settings?.column_filtering,
																						filter_display_mode: 'form'
																					}
																				}
																			});
																		}}
																		disabled={!isProActive()}
																	/>
																	<span>{getStrings('form')}</span>
																	<div className={`control__indicator${tableSettings?.table_settings?.column_filtering?.filter_display_mode === 'form'
																		? ' active' : ''
																		}`}></div>
																</label>

																<label
																	className={`utility-checkboxees${tableSettings?.table_settings?.column_filtering?.filter_display_mode === 'horizontal'
																		? ' active' : ''
																		}`}
																>
																	<input
																		type="radio"
																		name="filter-display-mode"
																		value="horizontal"
																		checked={tableSettings?.table_settings?.column_filtering?.filter_display_mode === 'horizontal'}
																		onChange={() => {
																			setTableSettings({
																				...tableSettings,
																				table_settings: {
																					...tableSettings.table_settings,
																					column_filtering: {
																						...tableSettings.table_settings?.column_filtering,
																						filter_display_mode: 'horizontal',
																						search_position: 'header'
																					}
																				}
																			});
																		}}
																		disabled={!isProActive()}
																	/>
																	<span>{getStrings('horizontal')}</span>
																	<div className={`control__indicator${tableSettings?.table_settings?.column_filtering?.filter_display_mode === 'horizontal'
																		? ' active' : ''
																		}`}></div>
																</label>

															</div>
														</div>

														{/* 3. Filter Location */}
														<div className="filter-type-selection">
															<label>{getStrings('filter-location')}</label>
															<div className="utility-checkbox-wrapper">
																<label
																	className={`utility-checkboxees${!tableSettings?.table_settings?.column_filtering?.filter_location ||
																		tableSettings?.table_settings?.column_filtering?.filter_location === 'above_table'
																		? ' active' : ''
																		}`}
																>
																	<input
																		type="radio"
																		name="filter-location"
																		value="above_table"
																		checked={
																			!tableSettings?.table_settings?.column_filtering?.filter_location ||
																			tableSettings?.table_settings?.column_filtering?.filter_location === 'above_table'
																		}
																		onChange={() => {
																			setTableSettings({
																				...tableSettings,
																				table_settings: {
																					...tableSettings.table_settings,
																					column_filtering: {
																						...tableSettings.table_settings?.column_filtering,
																						filter_location: 'above_table'
																					}
																				}
																			});
																		}}
																		disabled={!isProActive()}
																	/>
																	<span>{getStrings('above-table')}</span>
																	<div className={`control__indicator${!tableSettings?.table_settings?.column_filtering?.filter_location ||
																		tableSettings?.table_settings?.column_filtering?.filter_location === 'above_table'
																		? ' active' : ''
																		}`}></div>
																</label>
																<label
																	className={`utility-checkboxees${tableSettings?.table_settings?.column_filtering?.filter_location === 'below_table'
																		? ' active' : ''
																		}`}
																>
																	<input
																		type="radio"
																		name="filter-location"
																		value="below_table"
																		checked={tableSettings?.table_settings?.column_filtering?.filter_location === 'below_table'}
																		onChange={() => {
																			setTableSettings({
																				...tableSettings,
																				table_settings: {
																					...tableSettings.table_settings,
																					column_filtering: {
																						...tableSettings.table_settings?.column_filtering,
																						filter_location: 'below_table'
																					}
																				}
																			});
																		}}
																		disabled={!isProActive()}
																	/>
																	<span>{getStrings('below-table')}</span>
																	<div className={`control__indicator${tableSettings?.table_settings?.column_filtering?.filter_location === 'below_table'
																		? ' active' : ''
																		}`}></div>
																</label>

																{/* Show Left/Right Sidebar only when Filter Display Mode is "Form" */}
																{tableSettings?.table_settings?.column_filtering?.filter_display_mode === 'form' && (
																	<>
																		<label
																			className={`utility-checkboxees${tableSettings?.table_settings?.column_filtering?.filter_location === 'left_sidebar'
																				? ' active' : ''
																				}`}
																		>
																			<input
																				type="radio"
																				name="filter-location"
																				value="left_sidebar"
																				checked={tableSettings?.table_settings?.column_filtering?.filter_location === 'left_sidebar'}
																				onChange={() => {
																					setTableSettings({
																						...tableSettings,
																						table_settings: {
																							...tableSettings.table_settings,
																							column_filtering: {
																								...tableSettings.table_settings?.column_filtering,
																								filter_location: 'left_sidebar'
																							}
																						}
																					});
																				}}
																				disabled={!isProActive()}
																			/>
																			<span>{getStrings('left-sidebar')}</span>
																			<div className={`control__indicator${tableSettings?.table_settings?.column_filtering?.filter_location === 'left_sidebar'
																				? ' active' : ''
																				}`}></div>
																		</label>
																		<label
																			className={`utility-checkboxees${tableSettings?.table_settings?.column_filtering?.filter_location === 'right_sidebar'
																				? ' active' : ''
																				}`}
																		>
																			<input
																				type="radio"
																				name="filter-location"
																				value="right_sidebar"
																				checked={tableSettings?.table_settings?.column_filtering?.filter_location === 'right_sidebar'}
																				onChange={() => {
																					setTableSettings({
																						...tableSettings,
																						table_settings: {
																							...tableSettings.table_settings,
																							column_filtering: {
																								...tableSettings.table_settings?.column_filtering,
																								filter_location: 'right_sidebar'
																							}
																						}
																					});
																				}}
																				disabled={!isProActive()}
																			/>
																			<span>{getStrings('right-sidebar')}</span>
																			<div className={`control__indicator${tableSettings?.table_settings?.column_filtering?.filter_location === 'right_sidebar'
																				? ' active' : ''
																				}`}></div>
																		</label>
																	</>
																)}
															</div>
														</div>

														{/* 4. Filter Title */}
														<div className="swptls-form-group" style={{ marginBottom: '20px' }}>
															<label htmlFor="filter-title" style={{ display: 'block', marginBottom: '6px', fontWeight: 500 }}>
																{getStrings('filter-title-label')}
															</label>
															<input
																type="text"
																id="filter-title"
																className="swptls-input"
																value={tableSettings?.table_settings?.column_filtering?.filter_title || ''}
																placeholder={getStrings('filter-title-placeholder')}
																onChange={(e) => {
																	setTableSettings({
																		...tableSettings,
																		table_settings: {
																			...tableSettings.table_settings,
																			column_filtering: {
																				...tableSettings.table_settings?.column_filtering,
																				filter_title: e.target.value
																			}
																		}
																	});
																}}
															/>

														</div>

														{/* 5. Hide Entire Filter UI */}
														<div className="switch-toggle" style={{ marginBottom: '20px' }}>
															<input
																type="checkbox"
																id="hide-entire-filter-ui"
																checked={tableSettings?.table_settings?.column_filtering?.hide_entire_filter_ui || false}
																onChange={(e) => {
																	setTableSettings({
																		...tableSettings,
																		table_settings: {
																			...tableSettings.table_settings,
																			column_filtering: {
																				...tableSettings.table_settings?.column_filtering,
																				hide_entire_filter_ui: e.target.checked
																			}
																		}
																	});
																}}
																disabled={!isProActive()}
															/>
															<label htmlFor="hide-entire-filter-ui">
																{getStrings('hide-filter-ui-label')}
																<Tooltip content={getStrings('hide-filter-ui-tooltip')} />
															</label>
														</div>

														{/* 5. Hide Clear Button */}
														<div className="switch-toggle" style={{ marginBottom: '20px' }}>
															<input
																type="checkbox"
																id="hide-clear-button"
																checked={tableSettings?.table_settings?.column_filtering?.hide_clear_button || false}
																onChange={(e) => {
																	setTableSettings({
																		...tableSettings,
																		table_settings: {
																			...tableSettings.table_settings,
																			column_filtering: {
																				...tableSettings.table_settings?.column_filtering,
																				hide_clear_button: e.target.checked
																			}
																		}
																	});
																}}
																disabled={!isProActive()}
															/>
															<label htmlFor="hide-clear-button">
																{getStrings('hide-clear-button')}
																<Tooltip content={getStrings('hide-clear-button-tooltip')} />
															</label>
														</div>

														{/* Info box about per-column configuration */}
														<div style={{
															background: '#EFF2F7',
															borderRadius: '6px',
															padding: '16px',
															marginTop: '24px'
														}}>
															<div className="filter-hint">
																<h4>{getStrings('validate-filter-active-title')}</h4>
																{filterIconsVisible ? (
																	<p className='filter-config-title'>
																		{getStrings('filter-config-tip')}
																	</p>
																) : (
																	<div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginTop: '6px', flexWrap: 'wrap' }}>
																		<p className='validate-filter-desc'>
																			{getStrings('validate-filter-active-title-content')}
																		</p>

																		{handleTableSettingsSave && (
																			<button
																				type="button"
																				className="swptls-button save-btn"
																				style={{
																					padding: '6px 14px',
																					fontSize: '13px',
																					whiteSpace: 'nowrap',
																					display: 'inline-flex',
																					alignItems: 'center',
																					gap: '6px',
																				}}
																				onClick={handleSaveWithLoader}
																				disabled={isSaving}
																			>
																				{isSaving && (
																					<span
																						style={{
																							display: 'inline-block',
																							width: '12px',
																							height: '12px',
																							border: '2px solid currentColor',
																							borderTopColor: 'transparent',
																							borderRadius: '50%',
																							animation: 'spin 0.6s linear infinite',
																							flexShrink: 0,
																						}}
																					/>
																				)}
																				{isSaving ? getStrings('saving') : getStrings('save')}
																			</button>
																		)}
																	</div>
																)}
															</div>
														</div>
													</>
												)}
											</div>

										</div>

									</div>
								</div>
							)}
						</div>
					</div>
				</div>
			</div>


			{/* ========== NEW: Column Filter Slide-in Modal ========== */}
			{isFilterModalOpen && (
				<div className="filter-modal-overlay" onClick={() => setIsFilterModalOpen(false)}>
					<div
						className={`filter-modal-sidebar ${isFilterModalOpen ? 'slide-in' : ''}`}
						onClick={(e) => e.stopPropagation()}
					>
						<div className="modal-header">
							<h3>
								{getStrings('configure-column-filter')} :
								{selectedColumnIndex !== null && (
									<span className="column-tag">
										{getColumnName(selectedColumnIndex)}
									</span>
								)}
							</h3>
							<button
								type="button"
								className="close-btn"
								onClick={() => setIsFilterModalOpen(false)}
							>
								×
							</button>
						</div>

						<div className="modal-body filter-modal">

							{/* 1. Filter Active toggle */}
							<div className="filter-toggle-row">
								<label className="toggle-switch">
									<input
										type="checkbox"
										id="filter-active-toggle"
										checked={columnFilterConfig.enabled}
										onChange={(e) => setColumnFilterConfig({ ...columnFilterConfig, enabled: e.target.checked })}
									/>
									<span className="toggle-track"></span>
								</label>
								<label htmlFor="filter-active-toggle">{getStrings('filter-active')}</label>
							</div>

							{/* 2–6. Shown only when Filter Active = ON */}
							{columnFilterConfig.enabled && (
								<>
									{/* 2. Filter Type */}
									<div className="form-group" style={{ marginTop: '20px' }}>
										<label>{getStrings('filter-type')}:</label>
										<select
											value={columnFilterConfig.type}
											onChange={(e) => setColumnFilterConfig({ ...columnFilterConfig, type: e.target.value, value: '' })}
										>
											<option value="select">{getStrings('single-select')}</option>
											<option value="multi_select">{getStrings('multi-select')}</option>
											<option value="text">{getStrings('text-search')}</option>
										</select>
									</div>

									{/* 3. Load Default Value toggle + collapsible wrapper */}
									<div className="form-group">
										<div className="filter-toggle-row filter-section-toggle-row">
											<label className="toggle-switch">
												<input
													type="checkbox"
													id="default-value-toggle"
													checked={columnFilterConfig.load_default}
													onChange={(e) => {
														setColumnFilterConfig({ ...columnFilterConfig, load_default: e.target.checked });
														if (!e.target.checked) setShowDefaultValueError(false);
													}}
												/>
												<span className="toggle-track"></span>
											</label>
											<label htmlFor="default-value-toggle">{getStrings('load-default')}</label>
											<Tooltip content={getStrings('load-default-description')} />
										</div>

										{columnFilterConfig.load_default && (
											<div className="filter-default-value-wrapper">
												<p className="filter-hint-text">{getStrings('pre-select-hint')}</p>
												{renderDefaultValueInput(columnFilterConfig, setColumnFilterConfig, selectedColumnIndex)}
												{showDefaultValueError && (
													<div className="filter-error-alert">
														<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 1 }}>
															<circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" />
														</svg>
														{getStrings('default-value-required')}
													</div>
												)}
												<label className="filter-lock-checkbox">
													<input
														type="checkbox"
														checked={columnFilterConfig.change_not_allowed}
														onChange={(e) => setColumnFilterConfig({ ...columnFilterConfig, change_not_allowed: e.target.checked })}
													/>
													<span>{getStrings('user-can-change')}</span>
												</label>
											</div>
										)}
									</div>

									{/* 4. Strict Mode toggle */}
									<div className="filter-toggle-row">
										<label className="toggle-switch">
											<input
												type="checkbox"
												id="strict-mode-toggle"
												checked={columnFilterConfig.strict_mode}
												onChange={(e) => setColumnFilterConfig({ ...columnFilterConfig, strict_mode: e.target.checked })}
											/>
											<span className="toggle-track"></span>
										</label>
										<label htmlFor="strict-mode-toggle">{getStrings('strict-mode')}</label>
										<Tooltip content={getStrings('tooltip-strict-mode')} />

									</div>

									{/* 5. Hide This Filter toggle */}
									<div className="filter-toggle-row">
										<label className="toggle-switch">
											<input
												type="checkbox"
												id="hide-filter-toggle"
												checked={columnFilterConfig.hide_filter}
												onChange={(e) => setColumnFilterConfig({ ...columnFilterConfig, hide_filter: e.target.checked })}
											/>
											<span className="toggle-track"></span>
										</label>
										<label htmlFor="hide-filter-toggle">{getStrings('hide-filter')}</label>
										<Tooltip content={getStrings('hide-filter-hint')} />
									</div>
								</>
							)}
						</div>

						<div className="modal-footer filter-modal-footer">
							<button
								type="button"
								className={`delete-btn filter-btn-reset${!columnFilterConfig.enabled ? ' is-disabled' : ''}`}
								onClick={clearColumnFilter}
								disabled={!columnFilterConfig.enabled}
								style={{ marginRight: 'auto' }}
							>
								<svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000">

									<g id="SVGRepo_bgCarrier" stroke-width="0" />

									<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />

									<g id="SVGRepo_iconCarrier"> <g fill="none" fill-rule="evenodd" stroke="#6e6e6e" stroke-linecap="round" stroke-linejoin="round" transform="matrix(0 1 1 0 2.5 2.5)"> <path d="m3.98652376 1.07807068c-2.38377179 1.38514556-3.98652376 3.96636605-3.98652376 6.92192932 0 4.418278 3.581722 8 8 8s8-3.581722 8-8-3.581722-8-8-8" /> <path d="m4 1v4h-4" transform="matrix(1 0 0 -1 0 6)" /> </g> </g>
								</svg>
								{getStrings('reset-btn')}
							</button>
							<button
								type="button"
								className="cancel-btn"
								onClick={() => setIsFilterModalOpen(false)}
							>
								{getStrings('cancel')}
							</button>
							<button
								type="button"
								className={`save-btn filter-btn-save${!columnFilterConfig.enabled ? ' is-disabled' : ''}`}
								disabled={!columnFilterConfig.enabled}
								onClick={() => {
									if (columnFilterConfig.load_default && !columnFilterConfig.value) {
										setShowDefaultValueError(true);
										return;
									}
									setShowDefaultValueError(false);
									saveColumnFilter();
								}}
							>
								{getStrings('save-filter')}
							</button>
						</div>
					</div>
				</div>
			)}

			{/* ========== Column Filter Slide-in Modal End  ========== */}
		</div>
	);
};

export default TableCustomization;
