import { Button, ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { Plus, X } from 'lucide-react';

const DAYS = [
	{ key: 'mon', label: __( 'Monday', 'cliq-store-locator' ) },
	{ key: 'tue', label: __( 'Tuesday', 'cliq-store-locator' ) },
	{ key: 'wed', label: __( 'Wednesday', 'cliq-store-locator' ) },
	{ key: 'thu', label: __( 'Thursday', 'cliq-store-locator' ) },
	{ key: 'fri', label: __( 'Friday', 'cliq-store-locator' ) },
	{ key: 'sat', label: __( 'Saturday', 'cliq-store-locator' ) },
	{ key: 'sun', label: __( 'Sunday', 'cliq-store-locator' ) },
];

const DEFAULT_SLOT = { from: '09:00', to: '17:00' };

const normalizeDay = ( day ) => {
	if ( ! day || typeof day !== 'object' ) {
		return { closed: true, open24: false, slots: [] };
	}

	const slots = Array.isArray( day.slots ) && day.slots.length
		? day.slots.map( ( slot ) => ( {
			from: slot?.from ?? '09:00',
			to: slot?.to ?? '17:00',
		} ) )
		: [ { ...DEFAULT_SLOT } ];

	return {
		closed: Boolean( day.closed ),
		open24: Boolean( day.open24 ),
		slots,
	};
};

const normalizeValue = ( value ) => {
	const source = value && typeof value === 'object' ? value : {};

	return DAYS.reduce( ( acc, { key } ) => {
		acc[ key ] = normalizeDay( source[ key ] );
		return acc;
	}, {} );
};

/**
 * Weekly opening-hours editor: per day, with an Open toggle, a 24-hours
 * toggle, and one or more open/close time intervals (split shifts).
 */
const HoursField = ( { field, value, onChange } ) => {
	const model = normalizeValue( value );

	const update = ( dayKey, patch ) => {
		onChange( {
			...model,
			[ dayKey ]: { ...model[ dayKey ], ...patch },
		} );
	};

	const updateSlot = ( dayKey, index, patch ) => {
		const slots = model[ dayKey ].slots.map( ( slot, i ) =>
			i === index ? { ...slot, ...patch } : slot
		);
		update( dayKey, { slots } );
	};

	const addSlot = ( dayKey ) => {
		update( dayKey, { slots: [ ...model[ dayKey ].slots, { ...DEFAULT_SLOT } ] } );
	};

	const removeSlot = ( dayKey, index ) => {
		const slots = model[ dayKey ].slots.filter( ( _, i ) => i !== index );
		update( dayKey, { slots: slots.length ? slots : [ { ...DEFAULT_SLOT } ] } );
	};

	return (
		<div className="cliqthemes-ui-hours-field">
			{ field?.label && (
				<span className="cliqthemes-ui-hours-field__label">{ field.label }</span>
			) }

			<div className="cliqthemes-ui-hours-field__grid">
				{ DAYS.map( ( { key, label } ) => {
					const day = model[ key ];
					const isOpen = ! day.closed;

					return (
						<div className="cliqthemes-ui-hours-row" key={ key }>
							<div className="cliqthemes-ui-hours-row__day">{ label }</div>

							<div className="cliqthemes-ui-hours-row__toggles">
								<ToggleControl
									__nextHasNoMarginBottom
									label={ isOpen ? __( 'Open', 'cliq-store-locator' ) : __( 'Closed', 'cliq-store-locator' ) }
									checked={ isOpen }
									onChange={ ( checked ) => update( key, { closed: ! checked } ) }
								/>
								{ isOpen && (
									<ToggleControl
										__nextHasNoMarginBottom
										label={ __( '24 Hours', 'cliq-store-locator' ) }
										checked={ day.open24 }
										onChange={ ( checked ) => update( key, { open24: checked } ) }
									/>
								) }
							</div>

							<div className="cliqthemes-ui-hours-row__slots">
								{ ! isOpen && (
									<span className="cliqthemes-ui-hours-row__muted">
										{ __( 'Closed all day', 'cliq-store-locator' ) }
									</span>
								) }
								{ isOpen && day.open24 && (
									<span className="cliqthemes-ui-hours-row__muted">
										{ __( 'Open 24 hours', 'cliq-store-locator' ) }
									</span>
								) }
								{ isOpen && ! day.open24 && (
									<>
										{ day.slots.map( ( slot, index ) => (
											<div className="cliqthemes-ui-hours-slot" key={ index }>
												<input
													type="time"
													className="cliqthemes-ui-hours-slot__input"
													value={ slot.from }
													onChange={ ( e ) => updateSlot( key, index, { from: e.target.value } ) }
													aria-label={ __( 'Opening time', 'cliq-store-locator' ) }
												/>
												<span className="cliqthemes-ui-hours-slot__sep">
													{ __( 'to', 'cliq-store-locator' ) }
												</span>
												<input
													type="time"
													className="cliqthemes-ui-hours-slot__input"
													value={ slot.to }
													onChange={ ( e ) => updateSlot( key, index, { to: e.target.value } ) }
													aria-label={ __( 'Closing time', 'cliq-store-locator' ) }
												/>
												<Button
													size="small"
													icon={ <X size={ 14 } /> }
													isDestructive
													label={ __( 'Remove interval', 'cliq-store-locator' ) }
													onClick={ () => removeSlot( key, index ) }
												/>
											</div>
										) ) }
										<Button
											size="small"
											variant="link"
											icon={ <Plus size={ 14 } /> }
											onClick={ () => addSlot( key ) }
											className="cliqthemes-ui-hours-row__add"
										>
											{ __( 'Add hours', 'cliq-store-locator' ) }
										</Button>
									</>
								) }
							</div>
						</div>
					);
				} ) }
			</div>

			{ field?.help && (
				<p className="cliqthemes-ui-field-help">{ field.help }</p>
			) }
		</div>
	);
};

export default HoursField;
