import { __ } from '@wordpress/i18n';
import React, { useCallback, useEffect, useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { WandSparkles } from 'lucide-react';
import { Alert, Button, Card, Input, Page, Spinner } from './UI/index.jsx';
import { api } from '../api/index.js';

export default function Settings() {
	const pageHeader = {
		title: __( 'Settings', 'arrayfunnel' ),
		subtitle: __(
			'Manage analytics data and set up your store experience.',
			'arrayfunnel'
		),
	};
	const queryClient = useQueryClient();
	const [ retention, setRetention ] = useState( null );
	const [ original, setOriginal ] = useState( null );
	const { data, isLoading, error } = useQuery( {
		queryKey: [ 'settings' ],
		queryFn: api.getSettings,
		staleTime: 30_000,
	} );
	useEffect( () => {
		if ( data ) {
			const days =
				Number( data.arrayfunnel_analytics_retention_days ) || 0;
			setRetention( days );
			setOriginal( days );
		}
	}, [ data ] );
	const { mutateAsync: save, isPending } = useMutation( {
		mutationFn: api.saveSettings,
		onSuccess( response, submitted ) {
			queryClient.setQueryData( [ 'settings' ], ( current ) => ( {
				...current,
				...submitted,
				...( response?.saved || {} ),
			} ) );
		},
	} );
	const hasChanges = retention !== null && retention !== original;
	useEffect( () => {
		window.dispatchEvent(
			new window.CustomEvent( 'arrayfunnel:dirty-state', {
				detail: { dirty: hasChanges },
			} )
		);
		return () =>
			window.dispatchEvent(
				new window.CustomEvent( 'arrayfunnel:dirty-state', {
					detail: { dirty: false },
				} )
			);
	}, [ hasChanges ] );
	useEffect( () => {
		const handleDiscard = () => {
			if ( ! isPending && original !== null ) {
				setRetention( 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 ) {
			await save( { arrayfunnel_analytics_retention_days: retention } );
		}
	}, [ hasChanges, isPending, retention, save ] );
	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 ] );

	if ( isLoading || ( retention === null && ! error ) ) {
		return (
			<Page { ...pageHeader }>
				<div className="flex justify-center p-16">
					<Spinner />
				</div>
			</Page>
		);
	}
	return (
		<Page { ...pageHeader }>
			{ error ? (
				<Alert type="error">{ error.message }</Alert>
			) : (
				<div className="grid gap-6 xl:grid-cols-2">
					<Card title={ __( 'Data Retention', 'arrayfunnel' ) }>
						<Input
							type="number"
							label={ __(
								'Delete analytics events older than',
								'arrayfunnel'
							) }
							value={ retention }
							disabled={ isPending }
							onChange={ ( value ) =>
								setRetention(
									Math.max( 0, parseInt( value, 10 ) || 0 )
								)
							}
							suffix={ __( 'days', 'arrayfunnel' ) }
							description={ __(
								'A daily task prunes older events. Set to 0 to keep events indefinitely.',
								'arrayfunnel'
							) }
						/>
					</Card>
					<Card title={ __( 'Easy Setup', 'arrayfunnel' ) }>
						<p className="mb-4 text-sm text-arrayfunnel-muted">
							{ __(
								'Get started in about one minute. Choose your modules, personalize the store experience, and review your choices before saving.',
								'arrayfunnel'
							) }
						</p>
						<Button
							disabled={ isPending || hasChanges }
							onClick={ () =>
								window.dispatchEvent(
									new window.CustomEvent(
										'arrayfunnel:open-setup'
									)
								)
							}
						>
							<WandSparkles size={ 16 } aria-hidden="true" />
							{ __( 'Launch 1-minute setup', 'arrayfunnel' ) }
						</Button>
						{ hasChanges && (
							<p className="mt-3 text-xs text-arrayfunnel-muted">
								{ __(
									'Save your data retention changes before starting setup.',
									'arrayfunnel'
								) }
							</p>
						) }
					</Card>
				</div>
			) }
		</Page>
	);
}