/**
 * Inspector — maps to [movie_engine_hero] attributes.
 */
import {
	PanelBody,
	RangeControl,
	TextControl,
	ToggleControl,
	SelectControl,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';

export default function HeroInspector({ attributes, setAttributes }) {
	const {
		limit,
		type,
		ids,
		postType,
		style,
		height,
		customClass,
		autoplay,
		autoplaySpeed,
		loop,
		pauseOnHover,
		fullwidth,
		showNav,
		showDots,
		showRating,
		showImdbBadge,
		showDescription,
		descriptionLength,
		showTrailer,
		showMeta,
		showStarring,
		showGenres,
		starringLimit,
		genresLimit,
		showPlayButton,
		playButtonText,
		trailerButtonText,
		genre,
		year,
		orderby,
		order,
		showWatchlist,
	} = attributes;

	const limitOpts = [2, 3, 4, 6, 7, 10].map((n) => ({
		label: String(n),
		value: n,
	}));

	return (
		<>
			<PanelBody title={__('Query', 'cine-movie-engine')} initialOpen={true}>
				<RangeControl
					label={__('Number of slides', 'cine-movie-engine')}
					value={limit > 0 ? limit : 5}
					onChange={(v) => setAttributes({ limit: v > 0 ? v : 5 })}
					min={1}
					max={30}
				/>
				<SelectControl
					label={__('Preset', 'cine-movie-engine')}
					value={type}
					options={[
						{ label: __('Trending (by views)', 'cine-movie-engine'), value: 'trending' },
						{ label: __('New releases', 'cine-movie-engine'), value: 'new_releases' },
						{ label: __('Upcoming', 'cine-movie-engine'), value: 'upcoming' },
						{ label: __('Top rated', 'cine-movie-engine'), value: 'top_rated' },
						{
							label: __('Custom (use order by below)', 'cine-movie-engine'),
							value: 'custom',
						},
					]}
					onChange={(v) => setAttributes({ type: v || 'trending' })}
					help={__(
						'“Custom” uses the Order by / Order fields instead of a preset.',
						'cine-movie-engine'
					)}
				/>
				<TextControl
					label={__('Specific post IDs', 'cine-movie-engine')}
					value={ids}
					onChange={(v) => setAttributes({ ids: v || '' })}
					help={__('Comma-separated. When set, preset / filters below are ignored.', 'cine-movie-engine')}
				/>
				<SelectControl
					label={__('Post types', 'cine-movie-engine')}
					value={postType}
					options={[
						{
							label: __('Movies & series', 'cine-movie-engine'),
							value: 'movie_engine_movie,movie_engine_series',
						},
						{ label: __('Movies only', 'cine-movie-engine'), value: 'movie_engine_movie' },
						{ label: __('TV series only', 'cine-movie-engine'), value: 'movie_engine_series' },
					]}
					onChange={(v) => setAttributes({ postType: v || 'movie_engine_movie,movie_engine_series' })}
				/>
				<TextControl
					label={__('Genre slug', 'cine-movie-engine')}
					value={genre}
					onChange={(v) => setAttributes({ genre: v || '' })}
					placeholder={__('e.g. action', 'cine-movie-engine')}
				/>
				<TextControl
					label={__('Year slug', 'cine-movie-engine')}
					value={year}
					onChange={(v) => setAttributes({ year: v || '' })}
					placeholder={__('e.g. 2024', 'cine-movie-engine')}
				/>
				<TextControl
					label={__('Order by', 'cine-movie-engine')}
					value={orderby}
					onChange={(v) => setAttributes({ orderby: v || '' })}
					help={__(
						'Used when Preset is “Custom”. Examples: date, title, meta_value_num.',
						'cine-movie-engine'
					)}
				/>
				<SelectControl
					label={__('Order', 'cine-movie-engine')}
					value={order}
					options={[
						{ label: __('Descending', 'cine-movie-engine'), value: 'DESC' },
						{ label: __('Ascending', 'cine-movie-engine'), value: 'ASC' },
					]}
					onChange={(v) => setAttributes({ order: v || 'DESC' })}
				/>
			</PanelBody>

			<PanelBody title={__('Layout & appearance', 'cine-movie-engine')} initialOpen={false}>
				<SelectControl
					label={__('Hero style', 'cine-movie-engine')}
					value={style}
					options={[
						{ label: __('Style 1', 'cine-movie-engine'), value: 'style1' },
						{ label: __('Style 2', 'cine-movie-engine'), value: 'style2' },
						{ label: __('Style 3', 'cine-movie-engine'), value: 'style3' },
					]}
					onChange={(v) => setAttributes({ style: v || 'style1' })}
				/>
				<TextControl
					label={__('Min height', 'cine-movie-engine')}
					value={height}
					onChange={(v) => setAttributes({ height: v || '700px' })}
					help={__('Example: 700px or 80vh', 'cine-movie-engine')}
				/>
				<ToggleControl
					label={__('Full width (break out of container)', 'cine-movie-engine')}
					checked={!!fullwidth}
					onChange={(v) => setAttributes({ fullwidth: v })}
				/>
				<TextControl
					label={__('Extra CSS class', 'cine-movie-engine')}
					value={customClass}
					onChange={(v) => setAttributes({ customClass: v || '' })}
				/>
			</PanelBody>

			<PanelBody title={__('Slider', 'cine-movie-engine')} initialOpen={false}>
				<ToggleControl
					label={__('Autoplay', 'cine-movie-engine')}
					checked={!!autoplay}
					onChange={(v) => setAttributes({ autoplay: v })}
				/>
				<RangeControl
					label={__('Autoplay interval (ms)', 'cine-movie-engine')}
					value={autoplaySpeed || 5000}
					onChange={(v) => setAttributes({ autoplaySpeed: v })}
					min={2000}
					max={30000}
					step={500}
				/>
				<ToggleControl
					label={__('Loop', 'cine-movie-engine')}
					checked={!!loop}
					onChange={(v) => setAttributes({ loop: v })}
				/>
				<ToggleControl
					label={__('Pause on hover', 'cine-movie-engine')}
					checked={pauseOnHover !== false}
					onChange={(v) => setAttributes({ pauseOnHover: v })}
				/>
				<ToggleControl
					label={__('Show prev/next arrows', 'cine-movie-engine')}
					checked={showNav !== false}
					onChange={(v) => setAttributes({ showNav: v })}
				/>
				<ToggleControl
					label={__('Show dot indicators', 'cine-movie-engine')}
					checked={showDots !== false}
					onChange={(v) => setAttributes({ showDots: v })}
				/>
			</PanelBody>

			<PanelBody title={__('Slide content', 'cine-movie-engine')} initialOpen={false}>
				<ToggleControl
					label={__('Show rating', 'cine-movie-engine')}
					checked={showRating !== false}
					onChange={(v) => setAttributes({ showRating: v })}
				/>
				<ToggleControl
					label={__('Show IMDb badge', 'cine-movie-engine')}
					checked={showImdbBadge !== false}
					onChange={(v) => setAttributes({ showImdbBadge: v })}
				/>
				<ToggleControl
					label={__('Show description', 'cine-movie-engine')}
					checked={showDescription !== false}
					onChange={(v) => setAttributes({ showDescription: v })}
				/>
				<RangeControl
					label={__('Description word limit', 'cine-movie-engine')}
					value={descriptionLength > 0 ? descriptionLength : 30}
					onChange={(v) => setAttributes({ descriptionLength: v > 0 ? v : 30 })}
					min={10}
					max={200}
				/>
				<ToggleControl
					label={__('Show trailer button', 'cine-movie-engine')}
					checked={showTrailer !== false}
					onChange={(v) => setAttributes({ showTrailer: v })}
				/>
				<ToggleControl
					label={__('Show meta row', 'cine-movie-engine')}
					checked={showMeta !== false}
					onChange={(v) => setAttributes({ showMeta: v })}
				/>
				<ToggleControl
					label={__('Show starring', 'cine-movie-engine')}
					checked={showStarring !== false}
					onChange={(v) => setAttributes({ showStarring: v })}
				/>
				<SelectControl
					label={__('Starring limit', 'cine-movie-engine')}
					value={starringLimit}
					options={limitOpts}
					onChange={(v) => setAttributes({ starringLimit: parseInt(v, 10) || 6 })}
				/>
				<ToggleControl
					label={__('Show genres', 'cine-movie-engine')}
					checked={showGenres !== false}
					onChange={(v) => setAttributes({ showGenres: v })}
				/>
				<SelectControl
					label={__('Genres limit', 'cine-movie-engine')}
					value={genresLimit}
					options={limitOpts}
					onChange={(v) => setAttributes({ genresLimit: parseInt(v, 10) || 3 })}
				/>
				<ToggleControl
					label={__('Show play button', 'cine-movie-engine')}
					checked={showPlayButton !== false}
					onChange={(v) => setAttributes({ showPlayButton: v })}
				/>
				<TextControl
					label={__('Play button label (optional)', 'cine-movie-engine')}
					value={playButtonText}
					onChange={(v) => setAttributes({ playButtonText: v || '' })}
				/>
				<TextControl
					label={__('Trailer button label (optional)', 'cine-movie-engine')}
					value={trailerButtonText}
					onChange={(v) => setAttributes({ trailerButtonText: v || '' })}
				/>
				<ToggleControl
					label={__('Show watchlist control', 'cine-movie-engine')}
					checked={showWatchlist !== false}
					onChange={(v) => setAttributes({ showWatchlist: v })}
				/>
			</PanelBody>
		</>
	);
}
