import { useState, useEffect, useMemo } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
import { store as coreDataStore } from '@wordpress/core-data';
import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews/wp';
import {
	Button,
	__experimentalHStack as HStack,
	SelectControl,
	CheckboxControl,
	ToggleControl,
	SearchControl,
	Icon,
	Modal,
	DropdownMenu,
	SnackbarList,
	Dropdown,
	MenuGroup,
	MenuItem,
} from '@wordpress/components';
import apiFetch from '@wordpress/api-fetch';
import {
	moreVertical,
	next,
	previous,
	arrowUp,
	arrowDown,
	external,
	trash,
	arrowUpLeft,
	arrowLeft,
	arrowRight,
} from '@wordpress/icons';
import {
	getIndexFromArray,
	getKeyValueFromArray,
	getURLParams,
	updateURLParams,
} from '../../utils';
import useBlock from '../../hooks/useBlock';
import { __ } from '@wordpress/i18n';
import './inbox.scss';
export const WazInboxEntries = () => {
	// State for pagination, search, and sorting
	const [ page, setPage ] = useState( 1 );
	const [ perPage ] = useState( 10 );
	const [ searchTerm, setSearchTerm ] = useState( '' );
	const [ sortConfig, setSortConfig ] = useState( {
		key: 'created_at',
		direction: 'desc',
	} );
	const [ isLoading, setIsLoading ] = useState( true );
	const [ entries, setEntries ] = useState( [] );
	const [ entriesData, setEntriesData ] = useState( [] );
	const [ qParams, setQParams ] = useState( {
		page: 1,
		search: '',
		per_page: 10,
		order: 'desc',
		orderby: 'time',
	} );
	const [ totalPages, setTotalPages ] = useState( 1 );
	const [ totalEntries, setTotalEntries ] = useState( 0 );
	const [ selectedEntry, setSelectedEntry ] = useState( null );
	const [ isEntryModalOpen, setIsEntryModalOpen ] = useState( false );
	const [ notices, setNotices ] = useState( [] );
	const [ formFilter, setFormFilter ] = useState( '' );
	const [ widgetFilter, setWidgetFilter ] = useState( '' );
	const [ forms, setForms ] = useState( [] );
	const [ widgets, setWidgets ] = useState( [] );
	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
	const [ entryToDelete, setEntryToDelete ] = useState( null );
	const [ isUpdating, setIsUpdating ] = useState( false );
	const [ isFormFilterOpen, setIsFormFilterOpen ] = useState( false );
	const [ isWidgetFilterOpen, setIsWidgetFilterOpen ] = useState( false );
	const [ isTimeFilterOpen, setIsTimeFilterOpen ] = useState( false );

	// Fetch entries from the WP REST API
	const fetchEntries = async () => {
		setIsLoading( true );
		try {
			// Build the query parameters
			// const queryParams = new URLSearchParams({
			// 	page: qParams?.page,
			// 	per_page: qParams?.perPage,
			// 	search: qParams?.searchTerm,
			// 	orderby: qParams?.sortConfig.key,
			// 	order: qParams?.sortConfig.direction,
			// });
			const queryParams = new URLSearchParams( qParams );

			// Add form filter if selected
			if ( formFilter ) {
				queryParams.append( 'form', formFilter );
			}

			// Add widget filter if selected (you'll need to add this to your API)
			if ( widgetFilter ) {
				queryParams.append( 'widget_id', widgetFilter );
			}

			// console.log("queryParams", queryParams.toString());

			// Fetch entries
			const response = await apiFetch( {
				path: `/wazchat/v1/entries?${ queryParams.toString() }`,
				method: 'GET',
			} );

			// console.log("response", response);

			setEntriesData( response );

			setEntries( response.entries );
			setTotalPages( response.total_pages );
			setTotalEntries( response.total_entries );
		} catch ( error ) {
			console.error( 'Failed to fetch entries:', error );
			createNotice(
				'error',
				__( 'Failed to fetch entries.', 'wazchat' )
			);
		} finally {
			setIsLoading( false );
		}
	};

	// Fetch available forms for the filter dropdown
	const fetchForms = async () => {
		try {
			const response = await apiFetch( {
				path: '/wazchat/v1/forms',
				method: 'GET',
			} );
			const tempForms = []; //adjust for filtering
			response?.forms.forEach( ( form ) => {
				tempForms.push( {
					...form,
					value: form.id,
					label: form.title,
				} );
			} );
			setForms( tempForms );
		} catch ( error ) {
			console.error( 'Failed to fetch forms:', error );
		}
	};

	// Fetch available widgets
	const fetchWidgets = async () => {
		try {
			const widgets = await apiFetch( {
				path: '/wp/v2/wazchat_856_widget?per_page=100',
				method: 'GET',
			} );

			const tempWidgets = []; //adjust for filtering
			widgets.forEach( ( widget ) => {
				tempWidgets.push( {
					...widget,
					value: widget.id,
					label: widget.title.rendered,
				} );
			} );
			setWidgets( tempWidgets );
		} catch ( error ) {
			console.error( 'Failed to fetch widgets:', error );
		}
	};

	// Function to handle viewing an entry
	const handleViewEntry = async ( entryId, shouldOpenModal = true ) => {
		if ( shouldOpenModal ) {
			setIsLoading( true );
		}
		try {
			const entryData = await apiFetch( {
				path: `/wazchat/v1/entries/${ entryId }`,
				method: 'GET',
			} );

			setSelectedEntry( entryData );
			if ( shouldOpenModal ) {
				setIsEntryModalOpen( true );
			}
		} catch ( error ) {
			console.error( 'Failed to fetch entry details:', error );
			createNotice(
				'error',
				__( 'Failed to fetch entry details.', 'wazchat' )
			);
		} finally {
			if ( shouldOpenModal ) {
				setIsLoading( false );
			}
		}
	};

	// Function to handle deleting an entry
	const handleDeleteClick = ( entry ) => {
		setEntryToDelete( entry );
		setIsConfirmDeleteOpen( true );
	};

	const handleDelete = async () => {
		if ( ! entryToDelete ) {
			return;
		}

		setIsUpdating( true );
		try {
			await apiFetch( {
				path: `/wazchat/v1/entries/${ entryToDelete.id }`,
				method: 'DELETE',
			} );
			setIsConfirmDeleteOpen( false );
			setEntryToDelete( null );
			createNotice(
				'success',
				__( 'Entry deleted successfully.', 'wazchat' )
			);
			fetchEntries(); // Refresh the list
		} catch ( error ) {
			console.error( 'Failed to delete entry:', error );
			createNotice( 'error', __( 'Failed to delete entry.', 'wazchat' ) );
		} finally {
			setIsUpdating( false );
		}
	};

	// Function to update entry status
	const handleStatusUpdate = async ( entryId, status ) => {
		setIsUpdating( true );
		try {
			await apiFetch( {
				path: `/wazchat/v1/entries/${ entryId }`,
				method: 'POST',
				data: { status },
			} );

			createNotice(
				'success',
				__( 'Entry status updated successfully.', 'wazchat' )
			);
			fetchEntries(); // Refresh the list

			// Update the selected entry if it's currently open
			if ( selectedEntry && selectedEntry.id === entryId ) {
				setSelectedEntry( {
					...selectedEntry,
					status,
				} );
			}
		} catch ( error ) {
			console.error( 'Failed to update entry status:', error );
			createNotice(
				'error',
				__( 'Failed to update entry status.', 'wazchat' )
			);
		} finally {
			setIsUpdating( false );
		}
	};

	// Create notice function
	const createNotice = ( status, text ) => {
		const id = Date.now().toString();
		setNotices( ( prev ) => [ ...prev, { id, status, content: text } ] );

		// Auto-dismiss after 3 seconds
		setTimeout( () => {
			setNotices( ( prev ) =>
				prev.filter( ( notice ) => notice.id !== id )
			);
		}, 3000 );
	};

	// Handler for dismissing notices
	const onDismissNotice = ( id ) => {
		setNotices( ( prev ) => prev.filter( ( notice ) => notice.id !== id ) );
	};

	// Sorting handler
	const handleSort = ( key ) => {
		setSortConfig( ( prevConfig ) => ( {
			key,
			direction:
				prevConfig.key === key && prevConfig.direction === 'asc'
					? 'desc'
					: 'asc',
		} ) );
	};

	// Pagination handlers
	const handlePreviousPage = () => {
		if ( page > 1 ) {
			setPage( page - 1 );
		}
	};

	const handleNextPage = () => {
		if ( page < totalPages ) {
			setPage( page + 1 );
		}
	};

	// Load entries when component mounts or when dependencies change
	// useEffect(() => {
	// 	fetchEntries();
	// }, [page, perPage, searchTerm, sortConfig, formFilter, widgetFilter]);

	useEffect( () => {
		fetchEntries();
	}, [ qParams ] );

	// Load forms and widgets for the filter dropdowns when component mounts
	useEffect( () => {
		fetchForms();
		fetchWidgets();
	}, [] );

	// Reset to page 1 when search term or filters change
	useEffect( () => {
		setPage( 1 );
	}, [ searchTerm, formFilter, widgetFilter ] );

	// Generate options for the page selector
	const pageOptions = Array.from( { length: totalPages || 0 }, ( _, i ) => ( {
		label: String( i + 1 ),
		value: String( i + 1 ),
	} ) );

	// Form filter dropdown using WordPress components
	const FormFilterDropdown = ( { onClose } ) => (
		<MenuGroup label={ __( 'Filter by Form', 'wazchat' ) }>
			<MenuItem
				isSelected={ formFilter === '' }
				onClick={ () => {
					setFormFilter( '' );
					onClose();
				} }
			>
				{ __( 'All Entries', 'wazchat' ) }
			</MenuItem>
			{ forms.map( ( form ) => (
				<MenuItem
					key={ form.id }
					isSelected={ formFilter === form.id.toString() }
					onClick={ () => {
						setFormFilter( form.id.toString() );
						onClose();
					} }
				>
					{ form.title }
				</MenuItem>
			) ) }
		</MenuGroup>
	);

	// console.log("widgets", widgets);
	// Widget filter dropdown using WordPress components
	const WidgetFilterDropdown = ( { onClose } ) => (
		<MenuGroup label={ __( 'Filter by Widget', 'wazchat' ) }>
			<MenuItem
				isSelected={ widgetFilter === '' }
				onClick={ () => {
					setWidgetFilter( '' );
					onClose();
				} }
			>
				{ __( 'All Widgets', 'wazchat' ) }
			</MenuItem>
			{ widgets.map( ( widget ) => (
				<MenuItem
					key={ widget.id }
					isSelected={ widgetFilter === widget.id.toString() }
					onClick={ () => {
						setWidgetFilter( widget.id.toString() );
						onClose();
					} }
				>
					{ widget.title.rendered }
				</MenuItem>
			) ) }
		</MenuGroup>
	);

	// Time filter dropdown using WordPress components
	const TimeFilterDropdown = ( { onClose } ) => (
		<MenuGroup label={ __( 'Sort by Time', 'wazchat' ) }>
			<MenuItem
				isSelected={
					sortConfig.key === 'created_at' &&
					sortConfig.direction === 'asc'
				}
				onClick={ () => {
					setSortConfig( { key: 'created_at', direction: 'asc' } );
					onClose();
				} }
			>
				{ __( 'Sort ascending', 'wazchat' ) }
			</MenuItem>
			<MenuItem
				isSelected={
					sortConfig.key === 'created_at' &&
					sortConfig.direction === 'desc'
				}
				onClick={ () => {
					setSortConfig( { key: 'created_at', direction: 'desc' } );
					onClose();
				} }
			>
				{ __( 'Sort descending', 'wazchat' ) }
			</MenuItem>
		</MenuGroup>
	);

	const SortIcon = ( { columnKey } ) => {
		if ( sortConfig.key !== columnKey ) {
			return null;
		}
		return (
			<Icon
				icon={ sortConfig.direction === 'asc' ? arrowUp : arrowDown }
			/>
		);
	};

	// Format entry ID with hash prefix
	const formatEntryId = ( id ) => {
		return `#${ id }`;
	};

	// Define default layouts
	const defaultLayouts = {
		table: {},
	};
	const [ view, setView ] = useState( {
		type: 'table',
		perPage: 10,
		page: 1,
		layout: defaultLayouts.table.layout,
		fields: [ 'entry_id', 'form', 'widget', 'time', 'actions' ],
		sort: {
			field: 'id',
			direction: 'desc',
		},
		search: '',
		supportedLayouts: [ 'table' ], // Add this line
		filters: [
			// { field: 'author', operator: 'is', value: 2 },
		], // Initialize as empty array
	} );

	// console.log("forms", forms);
	const fields = useMemo(
		() => [
			{
				id: 'entry_id',
				label: __( 'Entry Id', 'wazchat' ),
				getValue: ( { item } ) => item?.id,
				// render: ({ item }) => item.title.rendered,
				render: ( { item } ) => (
					<a
						className="awsm-wc-dataview-link"
						onClick={ () => handleViewEntry( item.id ) }
					>
						#{ item?.id }
					</a>
				),
				enableSorting: true,
				enableGlobalSearch: true,
			},
			{
				id: 'form',
				label: __( 'Form', 'wazchat' ),
				getValue: ( { item } ) => item.form_name,
				render: ( { item } ) => item.form_name,
				// render: ({ item }) => (
				// <ToggleControl
				// 	__nextHasNoMarginBottom
				// 	checked={item.status === "publish"}
				// 	// onChange={() => handleStatusToggle(item)}
				// />
				// ),
				// enableSorting: false,
				// filterBy: {
				// 	operators: ["isAny"],
				// 	options: [
				// 		{ label: "Published", value: "publish" },
				// 		{ label: "Draft", value: "draft" },
				// 	],
				// },
				elements: forms, //uncomment the following when there are submission info
				// .filter((form) => {
				// 	form?.meta?.wazchat_widget_submissions > 0 ? true : false;
				// }),
			},
			{
				id: 'widget',
				label: __( 'Widget', 'wazchat' ),
				getValue: ( { item } ) => item.widget_name,
				// render: ({ item }) => {
				// 	console.log("item", item);
				// },
				elements: widgets, //uncomment the following when there are submission info
				// .filter((widget) => {
				// 	widget?.meta?.wazchat_widget_submissions > 0 ? true : false;
				// }),
			},
			{
				id: 'time',
				label: __( 'Time', 'wazchat' ),
				getValue: ( { item } ) => item.created_at,
			},
			{
				id: 'actions',
				label: __( 'Actions', 'wazchat' ),
				getValue: ( { item } ) => item.created_at,
				render: ( { item } ) => {
					return (
						<>
							<Button
								icon={ external }
								label={ __( 'View', 'wazchat' ) }
								onClick={ () => handleViewEntry( item.id ) }
								className="awsm-wc-quick-action-btn"
							/>

							<DropdownMenu
								icon={ moreVertical }
								label={ __( 'More options', 'wazchat' ) }
								controls={ [
									{
										title: __( 'View', 'wazchat' ),
										icon: external,
										onClick: () =>
											handleViewEntry( item.id ),
									},
									// {
									// 	title: __(
									// 		"Mark as In Progress",
									// 		"wazchat"
									// 	),
									// 	onClick: () =>
									// 		handleStatusUpdate(
									// 			item.id,
									// 			"in-progress"
									// 		),
									// 	disabled:
									// 		item.status === "in-progress" ||
									// 		isUpdating,
									// },
									// {
									// 	title: __(
									// 		"Mark as Resolved",
									// 		"wazchat"
									// 	),
									// 	onClick: () =>
									// 		handleStatusUpdate(
									// 			item.id,
									// 			"resolved"
									// 		),
									// 	disabled:
									// 		item.status === "resolved" ||
									// 		isUpdating,
									// },
									// {
									// 	title: __("Mark as Closed", "wazchat"),
									// 	onClick: () =>
									// 		handleStatusUpdate(
									// 			item.id,
									// 			"closed"
									// 		),
									// 	disabled:
									// 		item.status === "closed" ||
									// 		isUpdating,
									// },
									{
										title: __( 'Delete', 'wazchat' ),
										icon: trash,
										onClick: () =>
											handleDeleteClick( item ),
									},
								] }
							/>
						</>
					);
				},
				enableSorting: false,
				enableGlobalSearch: false,
			},
		],
		[ handleDeleteClick ]
	);

	// console.log("entries", entries);

	const { data: shownData, paginationInfo } = useMemo( () => {
		return filterSortAndPaginate( entries, view, fields );
	}, [ view, entries ] );

	// console.log("paginationInfo", paginationInfo, shownData);

	const SupportComponents = () => {
		return (
			<>
				{ /* Entry Details Modal */ }
				{ isEntryModalOpen && selectedEntry && (
					<Modal
						size={ 'large' }
						title={ `${ __( 'Entry', 'wazchat' ) } ${ formatEntryId(
							selectedEntry.id
						) }` }
						onRequestClose={ () => {
							setIsEntryModalOpen( false );
							setSelectedEntry( null );
						} }
						headerActions={
							<div className="awsm-wc-entry-modal-header-actions">
								<button
									className={ `${
										isDisabled( false )
											? ''
											: 'awsm-wc-disabled'
									}` }
									type="button"
									onClick={ () => {
										viewNextPerviousEntry( false );
									} }
								>
									<Icon icon={ arrowLeft } />
								</button>
								<button
									type="button"
									onClick={ () => {
										viewNextPerviousEntry();
									} }
									className={ `${
										isDisabled() ? '' : 'awsm-wc-disabled'
									}` }
								>
									<Icon icon={ arrowRight } />
								</button>
							</div>
						}
						className="awsm-wc-entry-modal"
					>
						<div className="awsm-wc-entry-modal-content">
							<div className="awsm-wc-entry-details">
								<div className="awsm-wc-entry-details-left">
									{ Object.entries(
										selectedEntry.meta || {}
									).map( ( [ key, value ] ) => (
										<div
											className="awsm-wc-entry-field"
											key={ key }
										>
											<div className="awsm-wc-entry-field-label">
												{ key }
											</div>
											<div className="awsm-wc-entry-field-value">
												{ typeof value === 'string'
													? value
													: JSON.stringify( value ) }
											</div>
										</div>
									) ) }
									{ Object.keys( selectedEntry.meta || {} )
										.length === 0 && (
										<div className="awsm-wc-no-data">
											{ __(
												'No message content found.',
												'wazchat'
											) }
										</div>
									) }
								</div>
								<div className="awsm-wc-entry-details-right">
									<div className="awsm-wc-entry-info">
										<div className="awsm-wc-entry-info-item">
											<div className="awsm-wc-entry-info-label">
												{ __( 'Entry ID', 'wazchat' ) }
											</div>
											<div className="awsm-wc-entry-info-value">
												{ selectedEntry.id }
											</div>
										</div>
										<div className="awsm-wc-entry-info-item">
											<div className="awsm-wc-entry-info-label">
												{ __( 'Time', 'wazchat' ) }
											</div>
											<div className="awsm-wc-entry-info-value">
												{ selectedEntry.created_at }
											</div>
										</div>
										<div className="awsm-wc-entry-info-item">
											<div className="awsm-wc-entry-info-label">
												{ __( 'Widget', 'wazchat' ) }
											</div>
											<div className="awsm-wc-entry-info-value">
												<a
													href={ `admin.php?page=wazchat&path=widgets&post=${ selectedEntry.widget_id }&add-new=true` }
													target="_blank"
													rel="noreferrer"
												>
													{
														selectedEntry.widget_name
													}{ ' ' }
													<span className="awsm-wc-link-arrow">
														<Icon
															icon={ arrowUp }
															size={ 20 }
														/>
													</span>
												</a>
											</div>
										</div>
										<div className="awsm-wc-entry-info-item">
											<div className="awsm-wc-entry-info-label">
												{ __( 'Form', 'wazchat' ) }
											</div>
											<div className="awsm-wc-entry-info-value">
												<a
													href={ `admin.php?page=wazchat&path=chat-forms&post=${ selectedEntry.form_id }&add-new=true` }
													target="_blank"
													rel="noreferrer"
												>
													{ selectedEntry.form_name }{ ' ' }
													<span className="awsm-wc-link-arrow">
														<Icon
															icon={ arrowUp }
															size={ 20 }
														/>
													</span>
												</a>
											</div>
										</div>
										<div className="awsm-wc-entry-info-item">
											<div className="awsm-wc-entry-info-label">
												{ __( 'Page', 'wazchat' ) }
											</div>
											<div className="awsm-wc-entry-info-value">
												<a
													href={
														selectedEntry.referer_url
													}
													target="_blank"
													rel="noopener noreferrer"
												>
													{
														selectedEntry.page_data
															.title
													}{ ' ' }
													<span className="awsm-wc-link-arrow">
														<Icon
															icon={ arrowUp }
															size={ 20 }
														/>
													</span>
												</a>
											</div>
										</div>
										<div className="awsm-wc-entry-info-item">
											<div className="awsm-wc-entry-info-label">
												{ __( 'User IP', 'wazchat' ) }
											</div>
											<div className="awsm-wc-entry-info-value">
												{ selectedEntry.ip_address }
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						{ /* <div className="awsm-wc-entry-modal-footer">
							<HStack justify="flex-end" expanded={false}>
								<Button
									variant="secondary"
									onClick={() => {
										setIsEntryModalOpen(false);
										setSelectedEntry(null);
									}}
								>
									{__("Close", "wazchat")}
								</Button>
								<Button
									variant="primary"
									className="awsm-wc-btn-next"
									icon={next}
									iconPosition="right"
									onClick={() => {
										// Logic to load next entry - would need implementation
										// For now just close
										setIsEntryModalOpen(false);
										setSelectedEntry(null);
									}}
								>
									{__("Next", "wazchat")}
								</Button>
							</HStack>
						</div> */ }
					</Modal>
				) }

				{ /* Confirm Delete Modal */ }
				{ isConfirmDeleteOpen && (
					<Modal
						title={ __( 'Confirm Delete', 'wazchat' ) }
						onRequestClose={ () => {
							setIsConfirmDeleteOpen( false );
							setEntryToDelete( null );
						} }
					>
						<div style={ { padding: '16px' } }>
							<p>
								{ __(
									'Are you sure you want to delete this entry? This action cannot be undone.',
									'wazchat'
								) }
							</p>
							<HStack
								justify="flex-end"
								expanded={ false }
								style={ { marginTop: '16px' } }
							>
								<Button
									variant="secondary"
									onClick={ () => {
										setIsConfirmDeleteOpen( false );
										setEntryToDelete( null );
									} }
								>
									{ __( 'Cancel', 'wazchat' ) }
								</Button>
								<Button
									variant="primary"
									onClick={ handleDelete }
									disabled={ isUpdating }
								>
									{ __( 'Delete', 'wazchat' ) }
								</Button>
							</HStack>
						</div>
					</Modal>
				) }
			</>
		);
	};

	const viewNextPerviousEntry = ( isNext = true ) => {
		const curIndex = getIndexFromArray(
			entriesData?.entries,
			'id',
			selectedEntry?.id
		);
		let selectedId = '';
		if ( isNext ) {
			selectedId = entriesData?.entries[ curIndex + 1 ]?.id;
		} else {
			selectedId = entriesData?.entries[ curIndex - 1 ]?.id;
		}

		if ( ! selectedId ) {
			return;
		}
		handleViewEntry( selectedId, false );
	};

	const isDisabled = ( isNext = true ) => {
		const curIndex = getIndexFromArray(
			entriesData?.entries,
			'id',
			selectedEntry?.id
		);
		let selectedId = '';
		if ( isNext ) {
			selectedId = entriesData?.entries[ curIndex + 1 ]?.id;
		} else {
			selectedId = entriesData?.entries[ curIndex - 1 ]?.id;
		}
		return selectedId;
	};

	return (
		<>
			<DataViews
				isLoading={ isLoading }
				getItemId={ ( item ) => item.id.toString() }
				paginationInfo={ {
					totalItems: entriesData?.total_entries,
					totalPages: entriesData?.total_pages,
				} }
				data={ entries }
				view={ view }
				fields={ fields }
				onChangeView={ ( data ) => {
					setQParams( {
						...qParams,
						page: data?.page,
						search: data?.search,
						per_page: data?.perPage,
						orderby: data?.sort?.field,
						order: data?.sort?.direction,
						filters: btoa( JSON.stringify( data?.filters ) ),
					} );
					return setView( data );
				} }
				defaultLayouts={ defaultLayouts }
			/>
			<SupportComponents />
		</>
	);
};