import {useState} from '@wordpress/element';
import {Spinner} from '@wordpress/components';
import {__, _n, sprintf} from '@wordpress/i18n';
import './AssignmentTargetColumn.scss';
import EditableLinkedItem from './EditableLinkItem';
import TextInput from './TextInput';
import Checkbox from './Checkbox';

const PlacementCard = ( {placement, isAssigned, onAssignmentChange, activeContext} ) => {
	const [isReplacing, setIsReplacing] = useState( false );

	const isOccupiedByOther = placement.item_id !== 0 && placement.item_id !== activeContext?.id;
	const isOccupied = placement.item_id !== 0 && placement.id !== activeContext.id && !isAssigned;
	const showReplaceLink = isOccupiedByOther && !isAssigned;
	const isDisabled = showReplaceLink;

	const handleCheckboxChange = ( isChecked ) => {
		const action = isChecked ? 'assign_to_placement' : 'unassign_from_placement';
		onAssignmentChange( {action, placementId: placement.id} );

		if ( !isChecked ) {
			setIsReplacing( false );
		}
	};

	const handleReplaceClick = ( e ) => {
		e.preventDefault();
		setIsReplacing( true );
		onAssignmentChange( {action: 'assign_to_placement', placementId: placement.id} );
	};

	return (
		<div
			className={`adpresso-card adpresso-card--placement ${isAssigned ? 'is-assigned' : ''} ${isDisabled ? 'is-disabled' : ''} ${showReplaceLink ? 'has-replace' : ''}`}
			role="listitem"
			data-entity-type="placement"
			data-entity-id={placement.id}
		>
			<div className="adpresso-card__checkbox">
				<Checkbox
					checked={isAssigned}
					onChange={handleCheckboxChange}
					disabled={isDisabled}
					variantClass="adpresso-color-accent"
				/>
			</div>
			<span
				className="adpresso-card__type-image"
				aria-hidden="true"
				dangerouslySetInnerHTML={{__html: placement.image}}
			/>
			<div className="adpresso-card__main">
				<span className="adpresso-card__title">{placement.title}</span>
				<span className="adpresso-card__meta">{placement.type_label}</span>

				<div className="adpresso-card__notice" role="note">
					{showReplaceLink && (
						<>
							<span className="dashicons dashicons-info" aria-hidden="true"></span>
							<a
								href="#"
								className="adpresso-card__notice-action"
								onClick={handleReplaceClick}
							>
								{__( 'Replace assigned item', 'adpresso' )}
							</a>
						</>
					)}
					<EditableLinkedItem
						label={__( '', 'adpresso' )}
						buttonText={__( 'Edit', 'adpresso' )}
						entityType="placements"
						entityId={placement.id}
						element="link"
					/>
				</div>
			</div>
		</div>
	);
};

const TargetColumn = ( {placements, activeContext, assignments, onAssignmentChange, isTargetLoading, onSearchChange, searchQuery} ) => {

	let statusMessage = '';
	if ( activeContext && isTargetLoading ) {
		statusMessage = __( 'Loading placements…', 'adpresso' );
	} else if ( activeContext ) {
		statusMessage = placements.length === 0
			? __( 'No placements available.', 'adpresso' )
			/* translators: %d: number of placements */
			: sprintf( _n( '%d placement', '%d placements', placements.length, 'adpresso' ), placements.length );
	}

	// Stays mounted across all branches (same slot in every fragment), so updates are announced.
	const statusRegion = (
		<div className="screen-reader-text" role="status" aria-live="polite" aria-atomic="true">{statusMessage}</div>
	);

	if ( !activeContext ) {
		return (
			<>
			{statusRegion}
			<div className="adpresso-assignment-target-column is-empty">
				<p className="adpresso-no-items-notice">{__( 'Select an option on the left.', 'adpresso' )}</p>
			</div>
			</>
		);
	}

	if ( isTargetLoading ) {
		return (
			<>
			{statusRegion}
			<div className="adpresso-assignment-target-column is-loading">
				<Spinner/>
			</div>
			</>
		);
	}

	return (
		<>
		{statusRegion}
		<section className="adpresso-assignment__column adpresso-assignment__column--target">

			<div className="adpresso-assignment__section adpresso-assignment__section--groups">
				<div className="adpresso-assignment__section-header">
					<div className="adpresso-assignment__search">
						<TextInput
							placeholder={__( 'Search placements', 'adpresso' )}
							value={searchQuery}
							onChange={onSearchChange}
						/>
					</div>
				</div>

				{/* Stage 1: */}
				{!activeContext && (
					<div className="adpresso-assignment__placeholder">
						{__( 'Select an option on the left', 'adpresso' )}
					</div>
				)}

				{/* Loading */}
				{activeContext && isTargetLoading && (
					<div className="adpresso-assignment__loading">
						{__( 'Loading placements…', 'adpresso' )}
					</div>
				)}

				{/* List */}
				{activeContext && !isTargetLoading && (
					<>
						<div className="adpresso-assignment__section-body">
							<div className="adpresso-card-list adpresso-card-list--placements" role="list">
								{placements.length === 0 && (
									<p className="adpresso-empty-notice">
										{__( 'No placements available.', 'adpresso' )}
									</p>
								)}

								{placements.map( ( placement ) => (
									<PlacementCard
										key={placement.id}
										placement={placement}
										isAssigned={assignments.placementIds.includes( placement.id )}
										onAssignmentChange={onAssignmentChange}
										activeContext={activeContext}
									/>
								) )}
							</div>
						</div>
						<footer className="adpresso-assignment__section-footer">
							{/*<button type="button" className="adpresso-btn adpresso-color-primary adpresso-btn-action">*/}
							{/*	+ {__( 'Create placement', 'adpresso' )}*/}
							{/*</button>*/}
						</footer>
					</>
				)}
			</div>
		</section>
		</>
	);
};

export default TargetColumn;