import { Dropdown, Button } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Columns, GripVertical } from 'lucide-react';

/**
 * Column visibility + ordering control. Renders a popover with a draggable,
 * checkable list of columns. Preferences are owned by the parent (persisted
 * per provider).
 *
 * @param {Object}   props
 * @param {string[]} props.columns All available column keys.
 * @param {Function} props.label   (key) => display label.
 * @param {Object}   props.prefs   { order: string[], hidden: string[] }.
 * @param {Function} props.onChange (nextPrefs) => void.
 */
const ColumnManager = ( { columns, label, prefs, onChange } ) => {
	const [ dragKey, setDragKey ] = useState( null );

	const hidden = new Set( prefs?.hidden ?? [] );
	const order = ( prefs?.order ?? [] ).filter( ( k ) => columns.includes( k ) );
	const ordered = [ ...order, ...columns.filter( ( k ) => ! order.includes( k ) ) ];

	const toggle = ( key ) => {
		const next = new Set( hidden );
		if ( next.has( key ) ) {
			next.delete( key );
		} else {
			next.add( key );
		}
		onChange( { order: ordered, hidden: [ ...next ] } );
	};

	const handleDrop = ( target ) => {
		if ( ! dragKey || dragKey === target ) {
			setDragKey( null );
			return;
		}
		const list = [ ...ordered ];
		const from = list.indexOf( dragKey );
		const to = list.indexOf( target );
		if ( from === -1 || to === -1 ) {
			return;
		}
		list.splice( to, 0, list.splice( from, 1 )[ 0 ] );
		onChange( { order: list, hidden: [ ...hidden ] } );
		setDragKey( null );
	};

	return (
		<Dropdown
			className="cliqthemes-ui-colmanager"
			contentClassName="cliqthemes-ui-colmanager__pop"
			popoverProps={ { placement: 'bottom-end' } }
			renderToggle={ ( { isOpen, onToggle } ) => (
				<Button
					variant="tertiary"
					className="cliqthemes-ui-button cliqthemes-ui-button--ghost"
					onClick={ onToggle }
					aria-expanded={ isOpen }
				>
					<Columns
						size={ 16 }
						strokeWidth={ 1.8 }
						className="cliqthemes-ui-button__icon"
					/>
					{ __( 'Columns', 'cliq-store-locator' ) }
				</Button>
			) }
			renderContent={ () => (
				<div className="cliqthemes-ui-colmanager__list">
					<p className="cliqthemes-ui-colmanager__hint">
						{ __( 'Drag to reorder · toggle to show/hide', 'cliq-store-locator' ) }
					</p>
					{ ordered.map( ( key ) => (
						<div
							key={ key }
							className={ `cliqthemes-ui-colitem${ dragKey === key ? ' is-dragging' : '' }` }
							draggable
							onDragStart={ () => setDragKey( key ) }
							onDragOver={ ( e ) => e.preventDefault() }
							onDrop={ () => handleDrop( key ) }
						>
							<GripVertical
								size={ 14 }
								className="cliqthemes-ui-colitem__grip"
							/>
							<label className="cliqthemes-ui-colitem__label">
								<input
									type="checkbox"
									checked={ ! hidden.has( key ) }
									onChange={ () => toggle( key ) }
								/>
								<span>{ label( key ) }</span>
							</label>
						</div>
					) ) }
				</div>
			) }
		/>
	);
};

export default ColumnManager;
