import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews/wp';
import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { ToggleControl, DropdownMenu } from '@wordpress/components';
import { moreVertical, edit, trash } from '@wordpress/icons';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreDataStore } from '@wordpress/core-data';
import apiFetch from '@wordpress/api-fetch';
import useBlock from '../../hooks/useBlock';
import { isWazChat, updateURLParams } from '../../utils';
// Define primary field for layouts
const primaryField = 'title.rendered';

// Define default layouts
const defaultLayouts = {
	table: {},
};

export const WazWidgetTable = () => {
	console.log( 'WazWidgetTable' );
	// Define view state
	const [ view, setView ] = useState( {
		type: 'table',
		perPage: 10,
		page: 1,
		layout: defaultLayouts.table.layout,
		fields: [ 'title.rendered', 'status', 'chats', 'actions' ],
		sort: {
			field: 'id',
			direction: 'desc',
		},
		search: '',
		supportedLayouts: [ 'table' ], // Add this line
		filters: [], // Initialize as empty array
	} );

	const { invalidateResolution } = useDispatch( coreDataStore );
	const { initData, setInitData } = useBlock();
	// Convert view state to query arguments
	const queryArgs = useMemo( () => {
		const filters = {};

		// Process any filters
		view.filters.forEach( ( filter ) => {
			if ( filter.field === 'status' && filter.operator === 'isAny' ) {
				filters.status = filter.value;
			}
		} );

		return {
			per_page: -1,
			page: view.page,
			search: view.search,
			orderby: view.sort?.field?.replace( '.rendered', '' ),
			order: view.sort?.direction,
			status: filters.status || [
				'publish',
				'draft',
				'pending',
				'private',
				'future',
			],
			...filters,
		};
	}, [ view ] );

	// Fetch data using the query arguments
	const { allPosts, totalItems, isLoading } = useSelect(
		( select ) => {
			const posts = select( coreDataStore ).getEntityRecords(
				'postType',
				'wazchat_856_widget',
				queryArgs
			);

			// Get total count from REST headers
			let total = 100;
			try {
				const headers =
					select( coreDataStore ).getEntityRecords( '_headers' ) ||
					{};
				total = parseInt( headers[ 'X-WP-Total' ] || 0 );
			} catch ( e ) {
				// If we can't get headers, estimate total from current data
				if ( posts && posts.length < queryArgs.per_page ) {
					total =
						( queryArgs.page - 1 ) * queryArgs.per_page +
						posts?.length;
				} else {
					total = queryArgs.page * queryArgs.per_page + 1; // At least one more page
				}
			}

			return {
				allPosts: posts,
				totalItems: total,
				isLoading: select( coreDataStore ).isResolving(
					'getEntityRecords',
					[ 'postType', 'wazchat_856_widget', queryArgs ]
				),
			};
		},
		[ queryArgs ]
	);

	// Handle status toggle
	const handleStatusToggle = useCallback(
		async ( post ) => {
			const newStatus = post.status === 'publish' ? 'draft' : 'publish';

			try {
				await apiFetch( {
					path: `/wp/v2/wazchat_856_widget/${ post.id }`,
					method: 'POST',
					data: {
						status: newStatus,
					},
				} );

				// Refresh data
				invalidateResolution( 'getEntityRecords', [
					'postType',
					'wazchat_856_widget',
					queryArgs,
				] );
			} catch ( error ) {
				console.error( 'Failed to update post status:', error );
			}
		},
		[ invalidateResolution, queryArgs ]
	);

	const handleEditClick = ( item ) => {
		// updateURLParams("post", item.id);
		// updateURLParams("add-new", true);

		updateURLParams( {
			page: 'wazchat',
			path: 'widgets',
			'add-new': true,
			post: item.id,
		} );

		setInitData( {
			...initData,
			refresh: ! initData?.refresh,
		} );
	};

	const handleDeleteClick = useCallback(
		( item ) => {
			if (
				confirm(
					__(
						'Are you sure you want to delete this widget?',
						'wazchat'
					)
				)
			) {
				apiFetch( {
					path: `/wp/v2/wazchat_856_widget/${ item.id }`,
					method: 'DELETE',
				} )
					.then( () => {
						// Refresh data
						invalidateResolution( 'getEntityRecords', [
							'postType',
							'wazchat_856_widget',
							queryArgs,
						] );
					} )
					.catch( ( error ) => {
						console.error( 'Failed to delete widget:', error );
					} );
			}
		},
		[ invalidateResolution, queryArgs ]
	);

	// Define fields inside the component to have access to the handler functions
	const fields = useMemo(
		() => [
			{
				id: 'title.rendered',
				label: __( 'Title', 'wazchat' ),
				getValue: ( { item } ) => item.title.rendered,
				// render: ({ item }) => item.title.rendered,
				render: ( { item } ) => (
					<a
						className="awsm-wc-dataview-link"
						onClick={ () => handleEditClick( item ) }
					>
						{ item.title.rendered }
					</a>
				),
				enableSorting: true,
				enableGlobalSearch: true,
			},
			{
				id: 'status',
				label: __( 'Status', 'wazchat' ),
				getValue: ( { item } ) => item.status,
				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' },
					],
				},
			},
			{
				id: 'chats',
				label: __( 'Chats', 'wazchat' ),
				getValue: ( { item } ) =>
					item.meta?.wazchat_widget_submissions || 0,
				render: ( { item } ) =>
					item.meta?.wazchat_widget_submissions || 0,
				enableSorting: true,
			},
			{
				id: 'actions',
				label: __( 'Actions', 'wazchat' ),
				getValue: () => '',
				render: ( { item } ) => (
					<DropdownMenu
						icon={ moreVertical }
						label="More options"
						controls={ [
							{
								title: 'Edit',
								icon: edit,
								onClick: () => handleEditClick( item ),
							},

							...( isWazChat
								? [
										{
											title: 'Delete',
											icon: trash,
											onClick: () =>
												handleDeleteClick( item ),
										},
								  ]
								: [] ),
						] }
					/>
				),
				enableSorting: false,
			},
		],
		[ handleStatusToggle, handleEditClick, handleDeleteClick ]
	);

	// Define actions
	const actions = useMemo(
		() => [
			{
				id: 'edit-widget',
				label: __( 'Edit Widget', 'wazchat' ),
				callback: ( [ item ] ) => handleEditClick( item ),
			},
			{
				id: 'delete-widget',
				label: __( 'Delete Widget', 'wazchat' ),
				callback: ( [ item ] ) => handleDeleteClick( item ),
			},
		],
		[ handleEditClick, handleDeleteClick ]
	);

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

	useEffect( () => {
		invalidateResolution( 'getEntityRecords', [
			'postType',
			'wazchat_856_widget',
			queryArgs,
		] );
	}, [] );

	return (
		<div className={ 'awsm-wc-widget-table' }>
			<DataViews
				data={ shownData || [] }
				getItemId={ ( item ) => item.id.toString() }
				fields={ fields }
				view={ view }
				isItemClickable={ () => true }
				// onClickItem={handleEditClick}
				onChangeView={ setView }
				defaultLayouts={ defaultLayouts }
				paginationInfo={ paginationInfo }
				isLoading={ isLoading }
			/>
		</div>
	);
};