import { useEffect, useState, useMemo } from '@wordpress/element';
import PageContentWrapper from '@AdminComponents/page-content-wrapper';
import { __ } from '@wordpress/i18n';
import { Button, Container, Table, Tooltip } from '@bsf/force-ui';
import withSuspense from '@AdminComponents/hoc/with-suspense';
import { useSuspenseSelect, useDispatch } from '@wordpress/data';
import { STORE_NAME } from '@AdminStore/constants';
import EditSchema from './edit';
import { Edit, Trash } from 'lucide-react';
import {
	generateUUID,
	isSchemaTypeValid,
} from '@AdminComponents/schema-utils/utils';
import Modal from './modal';
import { SaveSettingsButton } from '@/apps/admin-components/global-save-button';
import { createLazyRoute } from '@tanstack/react-router';

// Schema categories
const SCHEMA_CATEGORIES = {
	global: { value: 'global', label: __( 'Global Level', 'surerank' ) },
	content: { value: 'content', label: __( 'Content Level', 'surerank' ) },
};

// Schema categorization mapping
const SCHEMA_CATEGORY_MAP = {
	WebSite: 'global',
	WebPage: 'global',
	Organization: 'global',
	SearchAction: 'global',
	Person: 'global',
	BreadcrumbList: 'content',
	Article: 'content',
	Product: 'content',
	Dataset: 'content',
	FAQ: 'content',
	'Fact Check': 'content',
	HowTo: 'content',
	Movie: 'content',
	'Podcast Episode': 'content',
	Book: 'content',
	Course: 'content',
	Event: 'content',
	'Job Posting': 'content',
	Recipe: 'content',
	Service: 'content',
	'Software app': 'content',
	Video: 'content',
};

const Schema = () => {
	const { metaSettings } = useSuspenseSelect( ( select ) => {
		const { getMetaSettings } = select( STORE_NAME );
		return {
			metaSettings: getMetaSettings(),
		};
	}, [] );

	const { setMetaSetting, invalidateResolutionForStoreSelector } =
		useDispatch( STORE_NAME );

	const schemaData = metaSettings?.schemas || {};
	const schemaArray = Object.entries( schemaData ).map(
		( [ id, schema ] ) => ( {
			id,
			...schema,
		} )
	);

	const schemaTypeOptions = surerank_globals?.schema_type_options || {};
	const schemaTypeData = surerank_globals?.schema_type_data || {};

	// Categorize schemas using useMemo and reduce, filtering out schemas not in schemaTypeData
	const categorizedSchemas = useMemo( () => {
		return schemaArray
			.filter( ( schema ) => {
				// Only include schemas that exist in schemaTypeData
				return isSchemaTypeValid( schema?.title );
			} )
			.reduce(
				( acc, schema ) => {
					const type = schema?.type;
					const category =
						SCHEMA_CATEGORY_MAP[ type ] ||
						SCHEMA_CATEGORIES.content.value; // Default to content level

					if ( ! acc[ category ] ) {
						acc[ category ] = [];
					}
					acc[ category ].push( schema );
					return acc;
				},
				{
					[ SCHEMA_CATEGORIES.global.value ]: [],
					[ SCHEMA_CATEGORIES.content.value ]: [],
				}
			);
	}, [ schemaArray, schemaTypeData ] );

	// console.log( 'Schema Array:', schemaArray );

	// console.log( 'schemaArray', schemaArray );
	const defaultSchemasObject = surerank_globals?.default_schemas || {};
	const defaultSchemas = Object.entries( defaultSchemasObject ).map(
		( [ id, schema ] ) => ( {
			id,
			...schema,
		} )
	);

	const [ isModalOpen, setIsModalOpen ] = useState( false );
	const [ showEditSchema, setShowEditSchema ] = useState( false );
	const [ selectedSchema, setSelectedSchema ] = useState( '' );
	const [ selectedType, setSelectedType ] = useState( '' );
	const [ uniqueId, setUniqueId ] = useState( '' );
	const [ confirmDelete, setConfirmDelete ] = useState( null );

	const closeModal = () => setIsModalOpen( false );

	const handleBackToSchemas = () => {
		setShowEditSchema( false );
	};

	const handleEditSchema = ( schemaId ) => {
		const schemaToEdit = schemaData[ schemaId ];

		setUniqueId( schemaId );
		setSelectedSchema( schemaToEdit.title );
		setSelectedType( schemaToEdit.type );
		setShowEditSchema( true );
	};

	const handleAddSchema = () => {
		const schemaUniqueId = generateUUID();
		const newSchema = {
			title: selectedSchema || '',
			type: selectedType || '',
			show_on: {
				rules: [],
				specific: [],
				specificText: [],
			},
			fields: {
				'@type': selectedType || '',
			},
		};

		setMetaSetting( 'schemas', {
			...schemaData,
			[ schemaUniqueId ]: newSchema,
		} );
		setUniqueId( schemaUniqueId );
		setSelectedSchema( newSchema.title );
		setShowEditSchema( true );
	};

	const handleDeleteSchema = ( schemaId ) => {
		const updatedSchemas = { ...schemaData };
		delete updatedSchemas[ schemaId ];
		setMetaSetting( 'schemas', updatedSchemas );
		setConfirmDelete( null );
	};

	useEffect( () => {
		// Invalidate the resolver to ensure fresh data on next read
		invalidateResolutionForStoreSelector( 'getMetaSettings', [] );
	}, [] );

	// Render table for a specific category
	const renderSchemaTable = ( schemas, title ) => (
		<div
			key={ title }
			className="[&>div]:border-0 [&>div]:overflow-visible"
		>
			<h3 className="text-base font-semibold mb-4 text-text-primary">
				{ title }
			</h3>
			<Table className="w-full">
				<Table.Head className="border-0 [clip-path:inset(0_0_0_0_round_6px)]">
					<Table.HeadCell>
						{ __( 'Schema Title', 'surerank' ) }
					</Table.HeadCell>
					<Table.HeadCell>
						{ __( 'Schema Type', 'surerank' ) }
					</Table.HeadCell>
					<Table.HeadCell className="text-right">
						{ __( 'Actions', 'surerank' ) }
					</Table.HeadCell>
				</Table.Head>
				<Table.Body>
					{ schemas.length === 0 ? (
						<Table.Row>
							<Table.Cell
								colSpan={ 3 }
								className="text-center text-gray-500 py-4"
							>
								{ __(
									'No schemas found in this category.',
									'surerank'
								) }
							</Table.Cell>
						</Table.Row>
					) : (
						schemas.map( ( schema ) => (
							<Table.Row
								key={ schema.id }
								className="last:!border-b-0.5 last:border-x-0 last:border-t-0 last:border-solid last:border-border-subtle"
							>
								<Table.Cell className="p-3">
									<span className="text-sm">
										{ schema?.fields?.schema_name ||
											schema?.title }
									</span>
								</Table.Cell>
								<Table.Cell className="p-3">
									<span className="text-sm">
										{ schema?.fields?.[ '@type' ] ||
											schema?.type }
									</span>
								</Table.Cell>
								<Table.Cell className="p-3 leading-none">
									<div className="flex items-center justify-end gap-2">
										<Button
											variant="ghost"
											size="xs"
											icon={
												<Edit
													aria-label="icon"
													role="img"
												/>
											}
											className="text-text-secondary hover:text-icon-primary"
											onClick={ () =>
												handleEditSchema( schema.id )
											}
										/>
										<Tooltip
											open={ confirmDelete === schema.id }
											setOpen={ () =>
												setConfirmDelete( schema.id )
											}
											variant="light"
											placement="bottom"
											tooltipPortalId="surerank-root"
											className="p-2 border border-solid border-border-subtle [&>svg>path]:stroke-border-subtle z-[99999]"
											interactive
											arrow
											content={
												<div className="space-x-2">
													<Button
														size="xs"
														variant="ghost"
														className="focus:[box-shadow:none]"
														onClick={ () =>
															setConfirmDelete(
																null
															)
														}
													>
														{ __(
															'Cancel',
															'surerank'
														) }
													</Button>
													<Button
														size="xs"
														className="focus:[box-shadow:none] bg-button-danger hover:bg-button-danger-hover outline-button-danger hover:outline-button-danger-hover"
														onClick={ () =>
															handleDeleteSchema(
																schema.id
															)
														}
													>
														{ __(
															'Remove',
															'surerank'
														) }
													</Button>
												</div>
											}
										>
											<Button
												size="xs"
												variant="ghost"
												className="p-0 text-text-secondary inline-flex rounded-sm focus:[box-shadow:none]"
												icon={ <Trash /> }
												onClick={ () =>
													setConfirmDelete(
														schema.id
													)
												}
											/>
										</Tooltip>
									</div>
								</Table.Cell>
							</Table.Row>
						) )
					) }
				</Table.Body>
			</Table>
		</div>
	);

	return showEditSchema ? (
		<EditSchema
			schema={ selectedSchema }
			type={ selectedType }
			onBack={ handleBackToSchemas }
			setMetaSetting={ setMetaSetting }
			schemaId={ uniqueId }
			metaSettings={ metaSettings }
		/>
	) : (
		<PageContentWrapper
			title={ __( 'Schema', 'surerank' ) }
			description={ __(
				'Adds structured data to your content so search engines can better understand and present it. Most fields are already filled in to make setup easier and help your site show up better in search results.',
				'surerank'
			) }
		>
			<div className="flex flex-col items-start p-4 gap-6 bg-white shadow-sm rounded-xl">
				{ renderSchemaTable(
					categorizedSchemas[ SCHEMA_CATEGORIES.global.value ],
					SCHEMA_CATEGORIES.global.label
				) }
				{ renderSchemaTable(
					categorizedSchemas[ SCHEMA_CATEGORIES.content.value ],
					SCHEMA_CATEGORIES.content.label
				) }
				<Container className="py-2 px-0" gap="sm">
					<SaveSettingsButton />
					<Modal
						selectedSchema={ selectedSchema }
						setSelectedSchema={ setSelectedSchema }
						selectedType={ selectedType }
						setSelectedType={ setSelectedType }
						schemaTypeOptions={ schemaTypeOptions }
						defaultSchemas={ defaultSchemas }
						handleAddSchema={ handleAddSchema }
						isModalOpen={ isModalOpen }
						closeModal={ closeModal }
					/>
				</Container>
			</div>
		</PageContentWrapper>
	);
};

export const LazyRoute = createLazyRoute( '/advanced/schema' )( {
	component: withSuspense( Schema ),
} );

export default withSuspense( Schema );
