/**
 * Icon Picker Component
 *
 * @package Everyone_Accessibility_Suite
 */

import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

const IconPicker = ({ open, onClose, onSelect, currentIcon }) => {
	const [activeLibrary, setActiveLibrary] = useState('custom');
	const [icons, setIcons] = useState({});
	const [loading, setLoading] = useState(false);
	const [searchQuery, setSearchQuery] = useState('');
	const [filteredIcons, setFilteredIcons] = useState([]);

	useEffect(() => {
		if (open) {
			loadIcons();
		}
	}, [open]);

	useEffect(() => {
		filterIcons();
	}, [searchQuery, icons, activeLibrary]);

	const loadIcons = async () => {
		setLoading(true);
		try {
			const response = await fetch('/wp-json/evas/v1/customizer/icons', {
				headers: {
					'X-WP-Nonce': window.evasAdmin?.nonce || '',
				},
			});
			
			if (!response.ok) {
				throw new Error('Failed to load icons');
			}
			
			const data = await response.json();
			setIcons(data);
		} catch (error) {
			console.error('Error loading icons:', error);
		} finally {
			setLoading(false);
		}
	};

	const filterIcons = () => {
		if (!icons[activeLibrary]) {
			setFilteredIcons([]);
			return;
		}

		const libraryIcons = icons[activeLibrary];
		
		if (!searchQuery) {
			setFilteredIcons(libraryIcons);
			return;
		}

		const query = searchQuery.toLowerCase();
		const filtered = libraryIcons.filter(icon => 
			icon.name.toLowerCase().includes(query) ||
			icon.id.toLowerCase().includes(query)
		);
		
		setFilteredIcons(filtered);
	};

	const handleIconSelect = (icon) => {
		onSelect(icon);
		onClose();
	};

	if (!open) {
		return null;
	}

	return (
		<div className="evas-icon-picker-overlay" onClick={onClose}>
			<div className="evas-icon-picker-dialog" onClick={(e) => e.stopPropagation()}>
				<div className="evas-icon-picker-header">
					<h3>{__( 'Select Icon', 'everyone-accessibility-suite' )}</h3>
					<button
						type="button"
						className="button-link"
						onClick={onClose}
					>
						<span className="dashicons dashicons-no-alt"></span>
					</button>
				</div>

				<div className="evas-icon-picker-content">
					<div className="evas-icon-search">
						<input
							type="text"
							className="regular-text"
							placeholder={__( 'Search icons...', 'everyone-accessibility-suite' )}
							value={searchQuery}
							onChange={(e) => setSearchQuery(e.target.value)}
						/>
						<span className="dashicons dashicons-search"></span>
					</div>

					<div className="evas-icon-tabs">
						<button
							type="button"
							className={`evas-icon-tab ${activeLibrary === 'custom' ? 'is-active' : ''}`}
							onClick={() => setActiveLibrary('custom')}
						>
							{__( 'Custom', 'everyone-accessibility-suite' )}
						</button>
						<button
							type="button"
							className={`evas-icon-tab ${activeLibrary === 'fontawesome' ? 'is-active' : ''}`}
							onClick={() => setActiveLibrary('fontawesome')}
						>
							{__( 'Font Awesome', 'everyone-accessibility-suite' )}
						</button>
						<button
							type="button"
							className={`evas-icon-tab ${activeLibrary === 'material' ? 'is-active' : ''}`}
							onClick={() => setActiveLibrary('material')}
						>
							{__( 'Material', 'everyone-accessibility-suite' )}
						</button>
					</div>

					{loading ? (
						<div className="evas-icon-loading">
							<span className="spinner is-active"></span>
						</div>
					) : (
						<div className="evas-icon-grid">
							{filteredIcons.map((icon) => (
								<div
									key={icon.id}
									className={`evas-icon-item ${currentIcon === icon.id ? 'is-selected' : ''}`}
									onClick={() => handleIconSelect(icon)}
									title={icon.name}
								>
									{icon.svg && (
										<div
											className="evas-icon-preview"
											dangerouslySetInnerHTML={{ __html: icon.svg }}
										/>
									)}
									{icon.url && (
										<img
											src={icon.url}
											alt={icon.name}
											className="evas-icon-preview"
										/>
									)}
									<span className="evas-icon-name">{icon.name}</span>
								</div>
							))}
						</div>
					)}

					{!loading && filteredIcons.length === 0 && (
						<div className="evas-icon-empty">
							<p>{__( 'No icons found', 'everyone-accessibility-suite' )}</p>
						</div>
					)}
				</div>

				<div className="evas-icon-picker-footer">
					<button
						type="button"
						className="button"
						onClick={onClose}
					>
						{__( 'Cancel', 'everyone-accessibility-suite' )}
					</button>
				</div>
			</div>
		</div>
	);
};

export default IconPicker;