import { __, sprintf } from '@wordpress/i18n';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { Smartphone, Shield, Timer, Check } from 'lucide-react';
import { Card, Input, Page, Spinner, Toggle } from './UI/index.jsx';
import { api } from '../api/index.js';
export default function CheckoutEditor() {
	const pageHeader = {
		title: __( 'Checkout Manager', 'arrayfunnel' ),
		subtitle: __(
			'Optimize checkout flow and reduce abandonment with cleaner UX patterns.',
			'arrayfunnel'
		),
	};
	const qc = useQueryClient();
	const [ settings, setSettings ] = useState( null );
	const [ original, setOriginal ] = useState( null );
	const { data: settingsData, isLoading } = useQuery( {
		queryKey: [ 'settings' ],
		queryFn: api.getSettings,
		staleTime: 30_000,
		gcTime: 5 * 60_000,
	} );
	useEffect( () => {
		if ( ! settingsData ) {
			return;
		}
		setSettings( settingsData );
		setOriginal( JSON.stringify( settingsData ) );
	}, [ settingsData ] );
	const { mutateAsync: save, isPending: savingSettings } = useMutation( {
		mutationFn: ( { changes } ) => api.saveSettings( changes ),
		onSuccess( response, { changes, snapshot } ) {
			const saved = { ...snapshot, ...( response?.saved || {} ) };
			setOriginal( JSON.stringify( saved ) );
			qc.setQueryData( [ 'settings' ], ( current ) => ( {
				...current,
				...changes,
				...( response?.saved || {} ),
			} ) );
		},
	} );
	const set = ( key, val ) =>
		setSettings( ( s ) => ( {
			...s,
			[ key ]: val,
		} ) );
	const hasChanges = settings && JSON.stringify( settings ) !== original;
	useEffect( () => {
		if ( typeof window === 'undefined' ) {
			return;
		}
		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 ( ! savingSettings && original !== null ) {
				setSettings( JSON.parse( original ) );
			}
		};
		window.addEventListener(
			'arrayfunnel:discard-current-page',
			handleDiscard
		);
		return () =>
			window.removeEventListener(
				'arrayfunnel:discard-current-page',
				handleDiscard
			);
	}, [ original, savingSettings ] );
	const saveCurrentPage = useCallback( async () => {
		if ( ! hasChanges || savingSettings ) {
			return;
		}
		const baseline = JSON.parse( original );
		const changes = Object.fromEntries(
			Object.entries( settings ).filter(
				( [ key, value ] ) =>
					JSON.stringify( value ) !==
					JSON.stringify( baseline[ key ] )
			)
		);
		await save( { changes, snapshot: settings } );
	}, [ hasChanges, original, save, savingSettings, settings ] );
	useEffect( () => {
		const handleHeaderSave = ( event ) => {
			if ( ! hasChanges ) {
				return;
			}
			const task = saveCurrentPage();
			event?.detail?.register?.( task );
		};
		window.addEventListener(
			'arrayfunnel:save-current-page',
			handleHeaderSave
		);
		return () =>
			window.removeEventListener(
				'arrayfunnel:save-current-page',
				handleHeaderSave
			);
	}, [ hasChanges, saveCurrentPage ] );
	const countdownMinutes =
		Number.parseInt( settings?.arrayfunnel_checkout_countdown_mins, 10 ) ||
		15;
	const checkoutModules = useMemo(
		() => [
			{
				id: 'trust-badges',
				title: __( 'Connection Badges', 'arrayfunnel' ),
				description: __(
					'Shows HTTPS connection details below the order summary.',
					'arrayfunnel'
				),
				icon: Shield,
				enabled: settings?.arrayfunnel_checkout_trust_badges === 'yes',
			},

			{
				id: 'fomo-countdown',
				title: __( 'Checkout Timer', 'arrayfunnel' ),
				description: __(
					'Displays an informational timer during checkout.',
					'arrayfunnel'
				),
				icon: Timer,
				enabled: settings?.arrayfunnel_checkout_countdown === 'yes',
			},
		],
		[ settings ]
	);
	if ( isLoading || ! settings ) {
		return (
			<Page { ...pageHeader }>
				<div className="flex justify-center p-16">
					<Spinner />
				</div>
			</Page>
		);
	}
	return (
		<Page { ...pageHeader }>
			<fieldset
				disabled={ savingSettings }
				className="arrayfunnel-editor-fields"
			>
				<div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
					<div className="space-y-5">
						<Card title={ __( 'Core Modules', 'arrayfunnel' ) }>
							<div className="space-y-3">
								<Toggle
									checked={
										settings.arrayfunnel_checkout_optimized ===
										'yes'
									}
									onChange={ ( v ) =>
										set(
											'arrayfunnel_checkout_optimized',
											v ? 'yes' : 'no'
										)
									}
									label={ __(
										'Enable Checkout Optimization',
										'arrayfunnel'
									) }
									description={ __(
										'Activates all checkout enhancements and form refinements.',
										'arrayfunnel'
									) }
								/>
								<Toggle
									checked={
										settings.arrayfunnel_checkout_trust_badges ===
										'yes'
									}
									onChange={ ( v ) =>
										set(
											'arrayfunnel_checkout_trust_badges',
											v ? 'yes' : 'no'
										)
									}
									label={ __(
										'Show Connection Badges',
										'arrayfunnel'
									) }
									description={ __(
										'Displays HTTPS connection markers near the submit action.',
										'arrayfunnel'
									) }
								/>
								<Toggle
									checked={
										settings.arrayfunnel_checkout_countdown ===
										'yes'
									}
									onChange={ ( v ) =>
										set(
											'arrayfunnel_checkout_countdown',
											v ? 'yes' : 'no'
										)
									}
									label={ __(
										'Enable Countdown Timer',
										'arrayfunnel'
									) }
									description={ __(
										'Displays an informational timer above checkout totals.',
										'arrayfunnel'
									) }
								/>

								{ settings.arrayfunnel_checkout_countdown ===
									'yes' && (
									<div className="rounded border border-arrayfunnel-border bg-[#f6f7f7] p-3">
										<Input
											label={ __(
												'Timer Duration',
												'arrayfunnel'
											) }
											value={ countdownMinutes }
											onChange={ ( v ) =>
												set(
													'arrayfunnel_checkout_countdown_mins',
													Number.parseInt( v, 10 ) ||
														15
												)
											}
											type="number"
											suffix={ __(
												'minutes',
												'arrayfunnel'
											) }
											description={ __(
												'Choose how long the informational timer runs.',
												'arrayfunnel'
											) }
										/>
									</div>
								) }
							</div>
						</Card>
					</div>

					<div className="space-y-5">
						<Card
							title={ __( 'Live Mobile Preview', 'arrayfunnel' ) }
						>
							<div className="arrayfunnel-storefront-preview mx-auto max-w-[280px] rounded-[2rem] border border-slate-300 bg-slate-900 p-2">
								<div className="overflow-hidden rounded-[1.5rem] bg-white">
									<div className="border-b border-slate-200 bg-slate-50 px-3 py-2">
										<div className="flex items-center justify-between text-[10px] text-slate-500">
											<span className="font-medium text-slate-700">
												{ __(
													'Checkout',
													'arrayfunnel'
												) }
											</span>
											<Smartphone className="h-3.5 w-3.5" />
										</div>
									</div>
									<div className="space-y-2.5 p-3">
										<div className="rounded-lg border border-slate-200 p-2">
											<div className="h-2 w-24 rounded bg-slate-200" />
											<div className="mt-2 h-8 rounded-md border border-slate-200 bg-slate-50" />
											<div className="mt-2 h-8 rounded-md border border-slate-200 bg-slate-50" />
										</div>

										{ settings.arrayfunnel_checkout_countdown ===
											'yes' && (
											<div className="rounded-lg border border-rose-200 bg-rose-50 px-2.5 py-2 text-[11px] text-rose-700">
												{ sprintf(
													/* translators: %d: timer duration in minutes. */
													__(
														'Checkout timer: %d minutes',
														'arrayfunnel'
													),
													countdownMinutes
												) }
											</div>
										) }

										{ settings.arrayfunnel_checkout_trust_badges ===
											'yes' && (
											<div className="rounded-lg border border-emerald-200 bg-emerald-50 px-2.5 py-2 text-[10px] text-emerald-700">
												{ __(
													'HTTPS badges appear on secure checkout pages.',
													'arrayfunnel'
												) }
											</div>
										) }
									</div>
								</div>
							</div>
						</Card>

						<Card title={ __( 'Enabled Modules', 'arrayfunnel' ) }>
							<ul className="space-y-3">
								{ checkoutModules.map( ( module ) => {
									const Icon = module.icon;
									return (
										<li
											key={ module.id }
											className="rounded border border-arrayfunnel-border bg-white p-3"
										>
											<div className="flex items-start gap-3">
												<span
													className={ `flex h-8 w-8 shrink-0 items-center justify-center rounded ${
														module.enabled
															? 'bg-arrayfunnel-accent text-arrayfunnel-primary'
															: 'bg-[#f0f0f1] text-arrayfunnel-muted'
													}` }
												>
													<Icon
														size={ 16 }
														aria-hidden="true"
													/>
												</span>
												<div className="min-w-0 flex-1">
													<p className="text-sm font-semibold text-arrayfunnel-text">
														{ module.title }
													</p>
													<p className="mt-1 text-xs text-arrayfunnel-muted">
														{ module.description }
													</p>
												</div>
											</div>
											<span
												className={ `mt-3 inline-flex items-center gap-1 rounded border px-2 py-0.5 text-xs ${
													module.enabled
														? 'border-arrayfunnel-primary/20 bg-arrayfunnel-accent text-arrayfunnel-primary'
														: 'border-arrayfunnel-border bg-[#f6f7f7] text-arrayfunnel-muted'
												}` }
											>
												{ module.enabled && (
													<Check
														size={ 12 }
														aria-hidden="true"
													/>
												) }
												{ module.enabled
													? __(
															'Active',
															'arrayfunnel'
													  )
													: __(
															'Disabled',
															'arrayfunnel'
													  ) }
											</span>
										</li>
									);
								} ) }
							</ul>
						</Card>
					</div>
				</div>
			</fieldset>
		</Page>
	);
}