//edit.js
import { __ } from '@wordpress/i18n';
import {
	useBlockProps,
	InspectorControls,
	MediaUpload,
	MediaUploadCheck,
	InnerBlocks,
	useInnerBlocksProps
} from '@wordpress/block-editor';
import {
	PanelBody,
	Button,
	ToggleControl,
	BaseControl,
	RangeControl,
	SelectControl
} from '@wordpress/components';
import './editor.scss';

const ALLOWED_VIDEO_TYPES = ['video'];

const INNER_BLOCKS_TEMPLATE = [
	['core/heading', {
		level: 1,
		placeholder: 'Add heading...',
		textAlign: 'center'
	}],
	['core/paragraph', {
		placeholder: 'Add description...',
		align: 'center'
	}],
	['core/buttons', {
		layout: { type: 'flex', justifyContent: 'center' }
	}]
];



export default function Edit({ attributes, setAttributes }) {
	const {
		posterId,
		posterUrl,
		videoSources,
		fadeEffect,
		overlayOpacity,
		contentAlignment,
		minHeight
	} = attributes;

	const blockProps = useBlockProps({
		className: 'video-cover-editor',
		style: {
			minHeight: minHeight ? `${minHeight}px` : undefined
		}
	});

	const innerBlocksProps = useInnerBlocksProps(
		{ className: 'video-cover-content' },
		{
			template: INNER_BLOCKS_TEMPLATE,
			templateLock: false
		}
	);

	const onSelectPoster = (media) => {
		setAttributes({
			posterId: media.id,
			posterUrl: media.url
		});
	};

	const onSelectVideos = (mediaItems) => {
		// multiple=true returns an array
		const items = Array.isArray(mediaItems) ? mediaItems : [mediaItems];
		const newSources = items
			.filter(media => !videoSources.some(s => s.id === media.id))
			.map(media => ({
				id: media.id,
				url: media.url,
				mime: media.mime
			}));

		if (newSources.length) {
			setAttributes({
				videoSources: [...videoSources, ...newSources]
			});
		}
	};

	const removeVideoSource = (index) => {
		const updated = [...videoSources];
		updated.splice(index, 1);
		setAttributes({ videoSources: updated });
	};

	const renderVideoSourceList = (sources, isMobile = false) => {
		if (sources.length === 0) return null;

		return (
			<ul className="video-source-list">
				{sources.map((source, index) => (
					<li key={index} className="video-source-item">
						<span className="video-source-mime">{source.mime}</span>
						<Button
							isDestructive
							isSmall
							onClick={() => removeVideoSource(index, isMobile)}
						>
							{__('Remove', 'jvb')}
						</Button>
					</li>
				))}
			</ul>
		);
	};

	return (
		<>
			<InspectorControls>
				<PanelBody title={__('Video Settings', 'jvb')} initialOpen={true}>
					<BaseControl
						label={__('Poster Image', 'jvb')}
						help={__('Image shown while video loads', 'jvb')}
					>
						<MediaUploadCheck>
							<MediaUpload
								onSelect={onSelectPoster}
								allowedTypes={['image']}
								value={posterId}
								render={({ open }) => (
									<>
										{posterUrl && (
											<img
												src={posterUrl}
												alt={__('Poster preview', 'jvb')}
												style={{ maxWidth: '100%', marginBottom: '10px' }}
											/>
										)}
										<Button
											onClick={open}
											variant={posterUrl ? 'secondary' : 'primary'}
										>
											{posterUrl
												? __('Change Poster', 'jvb')
												: __('Select Poster', 'jvb')}
										</Button>
										{posterUrl && (
											<Button
												isDestructive
												onClick={() => setAttributes({ posterId: 0, posterUrl: '' })}
												style={{ marginLeft: '10px' }}
											>
												{__('Remove', 'jvb')}
											</Button>
										)}
									</>
								)}
							/>
						</MediaUploadCheck>
					</BaseControl>

					<BaseControl
						label={__('Video Sources', 'jvb')}
						help={__('Add multiple formats for better browser support (mp4, webm, etc.)', 'jvb')}
					>
						{videoSources.length > 0 && (
							<ul className="video-source-list">
								{videoSources.map((source, index) => (
									<li key={index} className="video-source-item">
										<span className="video-source-mime">{source.mime}</span>
										<Button
											isDestructive
											isSmall
											onClick={() => removeVideoSource(index)}
										>
											{__('Remove', 'jvb')}
										</Button>
									</li>
								))}
							</ul>
						)}
						<MediaUploadCheck>
							<MediaUpload
								multiple={true}
								onSelect={onSelectVideos}
								allowedTypes={ALLOWED_VIDEO_TYPES}
								render={({ open }) => (
									<Button onClick={open} variant="secondary">
										{__('Add Video', 'jvb')}
									</Button>
								)}
							/>
						</MediaUploadCheck>
					</BaseControl>

					<ToggleControl
						label={__('Fade Effect', 'jvb')}
						help={__('Add fade class to video element', 'jvb')}
						checked={fadeEffect}
						onChange={(value) => setAttributes({ fadeEffect: value })}
					/>
				</PanelBody>

				<PanelBody title={__('Overlay Settings', 'jvb')} initialOpen={true}>
					<RangeControl
						label={__('Overlay Opacity', 'jvb')}
						help={__('Darken video for better text readability', 'jvb')}
						value={overlayOpacity}
						onChange={(value) => setAttributes({ overlayOpacity: value })}
						min={0}
						max={100}
						step={5}
					/>

					<SelectControl
						label={__('Content Alignment', 'jvb')}
						value={contentAlignment}
						options={[
							{ label: __('Top Left', 'jvb'), value: 'top-left' },
							{ label: __('Top Center', 'jvb'), value: 'top-center' },
							{ label: __('Top Right', 'jvb'), value: 'top-right' },
							{ label: __('Center Left', 'jvb'), value: 'center-left' },
							{ label: __('Center', 'jvb'), value: 'center' },
							{ label: __('Center Right', 'jvb'), value: 'center-right' },
							{ label: __('Bottom Left', 'jvb'), value: 'bottom-left' },
							{ label: __('Bottom Center', 'jvb'), value: 'bottom-center' },
							{ label: __('Bottom Right', 'jvb'), value: 'bottom-right' }
						]}
						onChange={(value) => setAttributes({ contentAlignment: value })}
					/>

					<RangeControl
						label={__('Minimum Height', 'jvb')}
						help={__('Minimum height in pixels (leave 0 for auto)', 'jvb')}
						value={minHeight}
						onChange={(value) => setAttributes({ minHeight: value })}
						min={0}
						max={1000}
						step={50}
					/>
				</PanelBody>
			</InspectorControls>

			<div {...blockProps}>
				{posterUrl || videoSources.length > 0 ? (
					<div className="video-cover-preview">
						{posterUrl && (
							<>
								<img src={posterUrl} alt={__('Video poster', 'jvb')} />
								{overlayOpacity > 0 && (
									<div
										className="video-overlay-preview"
										style={{ opacity: overlayOpacity / 100 }}
									/>
								)}
							</>
						)}
						<div className={`video-cover-content-preview align-${contentAlignment}`}>
							<div {...innerBlocksProps} />
						</div>
						<div className="video-info">
							<p>
								{videoSources.length} {__('desktop source(s)', 'jvb')}
							</p>
						</div>
					</div>
				) : (
					<div className="video-cover-placeholder">
						<p>{__('Configure video sources in the sidebar →', 'jvb')}</p>
					</div>
				)}
			</div>
		</>
	);
}