import { __, sprintf } from '@wordpress/i18n';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Link } from 'react-router-dom';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import {
	BarChart3,
	CheckCircle2,
	CreditCard,
	Mail,
	Package,
	Search,
	ShoppingCart,
	X,
} from 'lucide-react';
import { Alert, Button, Page, Spinner } from './UI/index.jsx';
import { UISwitch } from './UI/switch.jsx';
import { api } from '../api/index.js';

const MODULES = [
	{
		id: 'side-cart',
		key: 'arrayfunnel_side_cart_enabled',
		title: __( 'Side Cart', 'arrayfunnel' ),
		description: __(
			'Let customers review their cart and continue shopping with a slide-out cart drawer.',
			'arrayfunnel'
		),
		icon: ShoppingCart,
		path: '/side-cart',
	},
	{
		id: 'checkout',
		key: 'arrayfunnel_checkout_optimized',
		title: __( 'Checkout', 'arrayfunnel' ),
		description: __(
			'Refine your checkout with connection badges and an optional countdown timer.',
			'arrayfunnel'
		),
		icon: CreditCard,
		path: '/checkout',
	},
	{
		id: 'order-bumps',
		key: 'arrayfunnel_order_bumps_enabled',
		title: __( 'Order Bumps', 'arrayfunnel' ),
		description: __(
			'Offer relevant add-ons at checkout with targeted offers and customizable designs.',
			'arrayfunnel'
		),
		icon: Package,
		path: '/order-bumps',
	},
	{
		id: 'abandoned-cart',
		title: __( 'Abandoned Cart', 'arrayfunnel' ),
		description: __(
			'Track abandoned carts and manage recovery emails, reminder timing, and recovery coupons.',
			'arrayfunnel'
		),
		icon: Mail,
		path: '/abandoned-cart',
	},
	{
		id: 'analytics',
		title: __( 'Analytics', 'arrayfunnel' ),
		description: __(
			'Follow revenue, orders, checkout conversion, and cart recovery from Home.',
			'arrayfunnel'
		),
		icon: BarChart3,
		path: '/',
	},
];

const toModuleSettings = ( data ) => ( {
	arrayfunnel_side_cart_enabled:
		data.arrayfunnel_side_cart_enabled === 'yes' ? 'yes' : 'no',
	arrayfunnel_checkout_optimized:
		data.arrayfunnel_checkout_optimized === 'yes' ? 'yes' : 'no',
	arrayfunnel_order_bumps_enabled:
		data.arrayfunnel_order_bumps_enabled === 'no' ? 'no' : 'yes',
} );

export default function Modules() {
	const pageHeader = {
		title: __( 'Modules', 'arrayfunnel' ),
		subtitle: __(
			'Choose which ArrayFunnel modules run on your store.',
			'arrayfunnel'
		),
	};
	const queryClient = useQueryClient();
	const [ settings, setSettings ] = useState( null );
	const [ original, setOriginal ] = useState( null );
	const [ search, setSearch ] = useState( '' );
	const { data, isLoading, error } = useQuery( {
		queryKey: [ 'settings' ],
		queryFn: api.getSettings,
		staleTime: 30_000,
	} );
	useEffect( () => {
		if ( data ) {
			const values = toModuleSettings( data );
			setSettings( values );
			setOriginal( values );
		}
	}, [ data ] );
	const { mutateAsync: save, isPending } = useMutation( {
		mutationFn: api.saveSettings,
		onSuccess( response, submitted ) {
			queryClient.setQueryData( [ 'settings' ], ( current ) => ( {
				...current,
				...submitted,
				...( response?.saved || {} ),
			} ) );
		},
	} );
	const hasChanges =
		settings && JSON.stringify( settings ) !== JSON.stringify( original );
	useEffect( () => {
		window.dispatchEvent(
			new window.CustomEvent( 'arrayfunnel:dirty-state', {
				detail: { dirty: Boolean( hasChanges ) },
			} )
		);
		return () =>
			window.dispatchEvent(
				new window.CustomEvent( 'arrayfunnel:dirty-state', {
					detail: { dirty: false },
				} )
			);
	}, [ hasChanges ] );
	useEffect( () => {
		const handleDiscard = () => {
			if ( ! isPending && original !== null ) {
				setSettings( { ...original } );
			}
		};
		window.addEventListener(
			'arrayfunnel:discard-current-page',
			handleDiscard
		);
		return () =>
			window.removeEventListener(
				'arrayfunnel:discard-current-page',
				handleDiscard
			);
	}, [ isPending, original ] );
	const saveCurrentPage = useCallback( async () => {
		if ( ! hasChanges || isPending ) {
			return;
		}
		const changed = Object.fromEntries(
			Object.entries( settings ).filter(
				( [ key, value ] ) => value !== original[ key ]
			)
		);
		await save( changed );
	}, [ hasChanges, isPending, original, save, settings ] );
	useEffect( () => {
		const handleSave = ( event ) => {
			if ( hasChanges ) {
				event.detail?.register?.( saveCurrentPage() );
			}
		};
		window.addEventListener( 'arrayfunnel:save-current-page', handleSave );
		return () =>
			window.removeEventListener(
				'arrayfunnel:save-current-page',
				handleSave
			);
	}, [ hasChanges, saveCurrentPage ] );
	const filteredModules = useMemo( () => {
		const terms = search
			.toLocaleLowerCase()
			.trim()
			.split( /\s+/ )
			.filter( Boolean );
		return MODULES.filter( ( module ) =>
			terms.every( ( term ) =>
				`${ module.title } ${ module.description }`
					.toLocaleLowerCase()
					.includes( term )
			)
		);
	}, [ search ] );
	const allEnabled = MODULES.filter( ( module ) => module.key ).every(
		( module ) => settings?.[ module.key ] === 'yes'
	);
	const set = ( key, value ) =>
		setSettings( ( current ) => ( { ...current, [ key ]: value } ) );

	if ( isLoading || ( ! settings && ! error ) ) {
		return (
			<Page { ...pageHeader }>
				<div className="flex justify-center p-16">
					<Spinner />
				</div>
			</Page>
		);
	}
	if ( error ) {
		return (
			<Page { ...pageHeader }>
				<Alert type="error">{ error.message }</Alert>
			</Page>
		);
	}
	return (
		<Page
			{ ...pageHeader }
			action={
				<div className="arrayfunnel-modules__controls">
					<div className="arrayfunnel-modules__search">
						<Search size={ 16 } aria-hidden="true" />
						<input
							type="search"
							aria-label={ __( 'Search modules', 'arrayfunnel' ) }
							placeholder={ __(
								'Search modules…',
								'arrayfunnel'
							) }
							value={ search }
							onChange={ ( event ) =>
								setSearch( event.target.value )
							}
						/>
						{ search && (
							<button
								type="button"
								className="arrayfunnel-modules__clear"
								aria-label={ __(
									'Clear search',
									'arrayfunnel'
								) }
								onClick={ () => setSearch( '' ) }
							>
								<X size={ 16 } />
							</button>
						) }
					</div>
					<Button
						variant="secondary"
						disabled={ isPending }
						onClick={ () =>
							setSettings( ( current ) => ( {
								...current,
								...Object.fromEntries(
									MODULES.filter(
										( module ) => module.key
									).map( ( module ) => [
										module.key,
										allEnabled ? 'no' : 'yes',
									] )
								),
							} ) )
						}
					>
						{ allEnabled
							? __( 'Disable all', 'arrayfunnel' )
							: __( 'Enable all', 'arrayfunnel' ) }
					</Button>
				</div>
			}
		>
			{ search && (
				<p className="text-sm text-arrayfunnel-muted" role="status">
					{ sprintf(
						/* translators: %d: number of matching modules. */ __(
							'%d modules found',
							'arrayfunnel'
						),
						filteredModules.length
					) }
				</p>
			) }
			<div className="arrayfunnel-modules">
				{ filteredModules.map( ( module ) => {
					const Icon = module.icon;
					const enabled =
						! module.key || settings[ module.key ] === 'yes';
					const savedEnabled =
						! module.key || original[ module.key ] === 'yes';
					const titleId = `arrayfunnel-module-${ module.id }`;
					return (
						<article
							key={ module.id }
							className={ `arrayfunnel-module-card is-${
								module.key ? ( enabled ? 'on' : 'off' ) : 'core'
							}` }
							aria-labelledby={ titleId }
						>
							<div className="arrayfunnel-module-card__body">
								<div className="arrayfunnel-module-card__header">
									<span className="arrayfunnel-module-card__icon">
										<Icon size={ 22 } aria-hidden="true" />
									</span>
									<h3 id={ titleId }>{ module.title }</h3>
									{ ! module.key && (
										<span className="arrayfunnel-module-badge">
											{ __( 'Core', 'arrayfunnel' ) }
										</span>
									) }
								</div>
								<p id={ `${ titleId }-description` }>
									{ module.description }
								</p>
							</div>
							<div className="arrayfunnel-module-card__footer">
								{ module.key ? (
									<UISwitch
										checked={ enabled }
										onCheckedChange={ ( value ) =>
											set(
												module.key,
												value ? 'yes' : 'no'
											)
										}
										aria-labelledby={ titleId }
										aria-describedby={ `${ titleId }-description` }
										disabled={ isPending }
									/>
								) : (
									<span className="arrayfunnel-module-card__status">
										<CheckCircle2
											size={ 16 }
											aria-hidden="true"
										/>
										{ __( 'Always on', 'arrayfunnel' ) }
									</span>
								) }
								{ enabled && savedEnabled && (
									<Link
										className="arrayfunnel-module-card__configure"
										to={ module.path }
										aria-label={ sprintf(
											/* translators: %s: module title. */ __(
												'Configure %s',
												'arrayfunnel'
											),
											module.title
										) }
									>
										{ module.id === 'analytics'
											? __( 'View Home', 'arrayfunnel' )
											: __( 'Configure', 'arrayfunnel' ) }
									</Link>
								) }
							</div>
						</article>
					);
				} ) }
			</div>
			{ ! filteredModules.length && (
				<div className="arrayfunnel-card p-6 text-center text-arrayfunnel-muted">
					{ __(
						'No modules found. Try a different name or keyword.',
						'arrayfunnel'
					) }
				</div>
			) }
		</Page>
	);
}