import { ExternalLinkIcon } from '@elementor/icons';
import { Stack, Box, Typography, Switch, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Radio, FormControlLabel, Link, Alert, AlertTitle } from '@elementor/ui';
import { __ } from '@wordpress/i18n';
import { useState, useEffect } from 'react';
import * as PropTypes from 'prop-types';
import { UpgradeTooltip } from './upgrade-tooltip';

export function ThemeBuilderCustomization( { state, settingKey, onStateChange, data, disabled, tooltip = false } ) {
	const isImport = data.hasOwnProperty( 'uploadedData' );

	const [ conflicts, setConflicts ] = useState( [] );
	const [ loading, setLoading ] = useState( false );

	useEffect( () => {
		if ( state?.enabled && isImport ) {
			loadConflicts();
		} else {
			setConflicts( [] );
			setLoading( false );
		}
	}, [ state?.enabled, isImport, data ] );

	const loadConflicts = async () => {
		setLoading( true );
		try {
			const actualConflicts = data?.uploadedData?.conflicts ? Object.entries( data.uploadedData.conflicts ) : [];

			const formattedConflicts = actualConflicts.map( ( [ importedTemplateId, conflictsList ] ) => {
				const importedTemplate = data?.uploadedData?.manifest?.templates?.[ importedTemplateId ];
				const firstConflict = conflictsList[ 0 ];

				return {
					template_id: firstConflict.template_id,
					template_name: firstConflict.template_title,
					edit_url: firstConflict.edit_url,

					imported_template_id: parseInt( importedTemplateId ),
					imported_template_name: importedTemplate?.title || 'Unknown Template',

					location: importedTemplate?.location || '',
					location_label: getTemplateTypeLabel( importedTemplateId ),
				};
			} );

			setConflicts( formattedConflicts );

			if ( ! state?.overrideConditions || 0 === state.overrideConditions.length ) {
				const defaultOverrides = formattedConflicts.map( ( conflict ) => conflict.imported_template_id );

				onStateChange( settingKey, {
					...state,
					overrideConditions: defaultOverrides,
				} );
			}
		} catch ( error ) {
			setConflicts( [] );
		} finally {
			setLoading( false );
		}
	};

	const getTemplateTypeLabel = ( templateId ) => {
		const template = data?.uploadedData?.manifest?.templates?.[ templateId ];
		if ( ! template ) {
			return 'Unknown Template';
		}

		const templateType = template.doc_type;
		const summaryTitle = elementorAppConfig?.[ 'import-export-customization' ]?.summaryTitles?.templates?.[ templateType ];

		return summaryTitle?.single || templateType;
	};

	const handleToggleEnabled = () => {
		const newState = {
			enabled: ! state?.enabled,
		};

		if ( isImport ) {
			newState.overrideConditions = state?.enabled ? [] : ( state?.overrideConditions || [] );
		}

		onStateChange( settingKey, newState );
	};

	const handleConflictChoice = ( location, choice, importedTemplateId ) => {
		const currentOverrides = state?.overrideConditions || [];
		let newOverrides;

		if ( 'imported' === choice ) {
			if ( ! currentOverrides.includes( importedTemplateId ) ) {
				newOverrides = [ ...currentOverrides, importedTemplateId ];
			} else {
				newOverrides = currentOverrides;
			}
		} else {
			newOverrides = currentOverrides.filter( ( templateId ) => templateId !== importedTemplateId );
		}

		onStateChange( settingKey, {
			...state,
			overrideConditions: newOverrides,
		} );
	};

	const getConflictChoice = ( importedTemplateId ) => {
		const overrides = state?.overrideConditions || [];
		const hasOverride = overrides.includes( importedTemplateId );
		return hasOverride ? 'imported' : 'current';
	};

	const renderConflictTable = () => {
		if ( loading ) {
			return (
				<Typography variant="body2" color="text.secondary">
					{ __( 'Checking for conflicts...', 'elementor-pro' ) }
				</Typography>
			);
		}

		return (
			<Stack spacing={ 2 }>
				<Alert severity="warning">
					<AlertTitle key="title">{ __( 'Conflicted part', 'elementor-pro' ) }</AlertTitle>
					{ __( 'Some parts are in conflict. Choose which one you want to assign.', 'elementor-pro' ) }
				</Alert>

				<TableContainer component={ Box } sx={ {
					maxWidth: '100%',
					border: 1,
					borderRadius: 1,
					borderColor: 'action.focus',
				} }>
					<Table size="small">
						<TableHead>
							<TableRow>
								<TableCell>{ __( 'Conflicted part', 'elementor-pro' ) }</TableCell>
								<TableCell>{ __( 'Current site part', 'elementor-pro' ) }</TableCell>
								<TableCell>{ __( 'Imported template part', 'elementor-pro' ) }</TableCell>
							</TableRow>
						</TableHead>
						<TableBody>
							{ conflicts.map( ( conflict, index ) => (
								<TableRow key={ index }>
									<TableCell>
										<Typography variant="body2" fontWeight="medium">
											{ getTemplateTypeLabel( conflict.imported_template_id ) }
										</Typography>
									</TableCell>
									<TableCell>
										<FormControlLabel
											control={
												<Radio
													checked={ 'current' === getConflictChoice( conflict.imported_template_id, conflict.location ) }
													onChange={ () => handleConflictChoice( conflict.location, 'current', conflict.imported_template_id ) }
													size="small"
												/>
											}
											label={ conflict.template_name }
										/>
									</TableCell>
									<TableCell>
										<FormControlLabel
											control={
												<Radio
													checked={ 'imported' === getConflictChoice( conflict.imported_template_id, conflict.location ) }
													onChange={ () => handleConflictChoice( conflict.location, 'imported', conflict.imported_template_id ) }
													size="small"
												/>
											}
											label={ conflict.imported_template_name }
										/>
									</TableCell>
								</TableRow>
							) ) }
						</TableBody>
					</Table>
				</TableContainer>
			</Stack>
		);
	};

	return (
		<Box sx={ { mb: 3, border: 1, borderRadius: 1, borderColor: 'action.focus', p: 2.5 } }>
			<Box sx={ { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }>
				<Stack spacing={ 1 }>
					<Typography variant="h6">
						{ __( 'Theme builder', 'elementor-pro' ) }
					</Typography>
					<Link
						href={ elementorAppConfig.base_url + '#/site-editor/templates' }
						target="_blank"
						rel="noopener noreferrer"
						color="info.light"
						underline="hover"
						sx={ {
							display: 'inline-flex',
							alignItems: 'center',
							gap: 0.5,
						} }
					>
						{ __( 'Check your themes builder', 'elementor-pro' ) }
						<ExternalLinkIcon />
					</Link>
				</Stack>
				<UpgradeTooltip disabled={ disabled } tooltip={ tooltip }>
					<Switch
						data-testid={ `${ settingKey }-switch` }
						checked={ state?.enabled || false }
						disabled={ disabled }
						onChange={ handleToggleEnabled }
						color="info"
						size="medium"
						sx={ {
							alignSelf: 'center',
							...( disabled && tooltip && { cursor: 'pointer' } ),
						} }
					/>
				</UpgradeTooltip>
			</Box>

			{ state?.enabled && isImport && 0 < conflicts.length && (
				<Box sx={ { mt: 1 } }>
					{ renderConflictTable() }
				</Box>
			) }
		</Box>
	);
}

ThemeBuilderCustomization.propTypes = {
	state: PropTypes.object.isRequired,
	settingKey: PropTypes.string.isRequired,
	onStateChange: PropTypes.func.isRequired,
	data: PropTypes.object.isRequired,
	disabled: PropTypes.bool,
	tooltip: PropTypes.bool,
};
jQuery( window ).on( 'load', function () {
	const responsive = function () {
		/**
		 *  init variables
		 */
		let large_screen = '',
			desktop = '',
			tablet = '',
			tablet_portrait = '',
			mobile_landscape = '',
			mobile = '';

		/**
		 *  generate responsive @media css
		 *------------------------------------------------------------*/
		jQuery( '.ult-responsive' ).each( function ( index, element ) {
			let t = jQuery( element ),
				n = t.attr( 'data-responsive-json-new' ),
				target = t.data( 'ultimate-target' ),
				temp_large_screen = '',
				temp_desktop = '',
				temp_tablet = '',
				temp_tablet_portrait = '',
				temp_mobile_landscape = '',
				temp_mobile = '';

			if ( typeof n !== 'undefined' || n != null ) {
				jQuery.each( jQuery.parseJSON( n ), function ( i, v ) {
					// set css property
					const css_prop = i;
					if ( typeof v !== 'undefined' && v != null ) {
						const vals = v.split( ';' );
						jQuery.each( vals, function ( i, vl ) {
							if ( typeof vl !== 'undefined' || vl != null ) {
								const splitval = vl.split( ':' );
								switch ( splitval[ 0 ] ) {
									case 'large_screen':
										temp_large_screen +=
											css_prop +
											':' +
											splitval[ 1 ] +
											';';
										break;
									case 'desktop':
										temp_desktop +=
											css_prop +
											':' +
											splitval[ 1 ] +
											';';
										break;
									case 'tablet':
										temp_tablet +=
											css_prop +
											':' +
											splitval[ 1 ] +
											';';
										break;
									case 'tablet_portrait':
										temp_tablet_portrait +=
											css_prop +
											':' +
											splitval[ 1 ] +
											';';
										break;
									case 'mobile_landscape':
										temp_mobile_landscape +=
											css_prop +
											':' +
											splitval[ 1 ] +
											';';
										break;
									case 'mobile':
										temp_mobile +=
											css_prop +
											':' +
											splitval[ 1 ] +
											';';
										break;
								}
							}
						} );
					}
				} );
			}

			if ( temp_mobile != '' ) {
				mobile += target + '{' + temp_mobile + '}';
			}
			if ( temp_mobile_landscape != '' ) {
				mobile_landscape += target + '{' + temp_mobile_landscape + '}';
			}
			if ( temp_tablet_portrait != '' ) {
				tablet_portrait += target + '{' + temp_tablet_portrait + '}';
			}
			if ( temp_tablet != '' ) {
				tablet += target + '{' + temp_tablet + '}';
			}
			if ( temp_desktop != '' ) {
				desktop += target + '{' + temp_desktop + '}';
			}
			if ( temp_large_screen != '' ) {
				large_screen += target + '{' + temp_large_screen + '}';
			}
		} );

		/*
		 *      REMOVE Comments for TESTING
		 *-------------------------------------------*/
		let UltimateMedia = '<style>\n/** Ultimate: CountDown Responsive **/ ';
		UltimateMedia += desktop;
		UltimateMedia +=
			'\n@media (min-width: 1824px) { ' + large_screen + '\n}';
		UltimateMedia += '\n@media (max-width: 1199px) { ' + tablet + '\n}';
		UltimateMedia +=
			'\n@media (max-width: 991px)  { ' + tablet_portrait + '\n}';
		UltimateMedia +=
			'\n@media (max-width: 767px)  { ' + mobile_landscape + '\n}';
		UltimateMedia += '\n@media (max-width: 479px)  { ' + mobile + '\n}';
		UltimateMedia += '\n/** Ultimate: Tooltipster Responsive - **/</style>';
		jQuery( 'head' ).append( UltimateMedia );
	};
	responsive();
	jQuery( '.ult_countdown-dateAndTime' ).each( function () {
		const t = new Date( jQuery( this ).html() );
		const tz = jQuery( this ).data( 'time-zone' ) * 60;
		const tfrmt = jQuery( this ).data( 'countformat' );
		const labels_new = jQuery( this ).data( 'labels' );
		const new_labels = labels_new.split( ',' );
		const labels_new_2 = jQuery( this ).data( 'labels2' );
		const new_labels_2 = labels_new_2.split( ',' );
		const server_time = function () {
			return new Date( jQuery( this ).data( 'time-now' ) );
		};

		const ticked = function ( a ) {
			const json_responsive = jQuery( '.ult_countdown-dateAndTime' ).attr(
				'data-responsive-json-new'
			);
			const target_responsive = jQuery(
				'.ult_countdown-dateAndTime'
			).attr( 'data-ultimate-target' );
			const json_responsive_sep = jQuery( '.ult_countdown' ).attr(
				'data-responsive-json-new'
			);
			const json_target_sep = jQuery( '.ult_countdown' ).attr(
				'data-ultimate-target'
			);
			jQuery( '.ult_countdown-period' ).addClass( 'ult-responsive' );

			const count_amount = jQuery( this ).find( '.ult_countdown-amount' );
			const count_period = jQuery( this ).find( '.ult_countdown-period' );

			const tick_color = jQuery( this ).data( 'tick-col' ),
				tick_p_size = jQuery( this ).data( 'tick-p-size' ),
				tick_fontfamily = jQuery( this ).data( 'tick-font-family' ),
				count_amount_css = '',
				count_amount_font = '',
				tick_br_color = jQuery( this ).data( 'br-color' ),
				tick_br_size = jQuery( this ).data( 'br-size' ),
				tick_br_style = jQuery( this ).data( 'br-style' ),
				tick_br_radius = jQuery( this ).data( 'br-radius' ),
				tick_bg_color = jQuery( this ).data( 'bg-color' ),
				tick_padd = jQuery( this ).data( 'padd' );

			count_amount.attr( {
				'data-ultimate-target': target_responsive,
				'data-responsive-json-new': json_responsive,
			} );
			count_period.attr( {
				'data-ultimate-target': json_target_sep,
				'data-responsive-json-new': json_responsive_sep,
			} );

			//  Added class
			count_amount.addClass( 'ult-responsive' );

			// Applied CSS for Count Amount & Period
			count_amount.css( {
				// 'color'         : tick_color,
				'font-family': tick_fontfamily,
				'border-width': tick_br_size,
				'border-style': tick_br_style,
				'border-radius': tick_br_radius,
				background: tick_bg_color,
				padding: tick_padd,
				'border-color': tick_br_color,
			} );
		};

		if ( jQuery( this ).hasClass( 'ult-usrtz' ) ) {
			jQuery( this ).ult_countdown( {
				labels: new_labels,
				labels1: new_labels_2,
				until: t,
				format: tfrmt,
				padZeroes: true,
				onTick: ticked,
			} );
		} else {
			jQuery( this ).ult_countdown( {
				labels: new_labels,
				labels1: new_labels_2,
				until: t,
				format: tfrmt,
				padZeroes: true,
				onTick: ticked,
				serverSync: server_time,
			} );
		}
	} );
} );