/**
 * Inspector controls — maps to [movie_engine_library] attributes.
 */
import { PanelColorSettings } from '@wordpress/block-editor';
import {
	PanelBody,
	RangeControl,
	TextControl,
	ToggleControl,
	SelectControl,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';

export default function LibraryInspector({ attributes, setAttributes, defaults, lockShowSearch = null }) {
	const {
		limit,
		columns,
		columnsLaptop,
		columnsTablet,
		columnsMobile,
		postType,
		genre,
		year,
		language,
		ids,
		orderby,
		order,
		queryType,
		layout,
		showSearch,
		showFilters,
		filterLayout,
		enableAjax,
		title,
		showViewAll,
		viewAllUrl,
		viewAllText,
		pagination,
		autoplay,
		autoplaySpeed,
		loop,
		pauseOnHover,
		showDots,
		gap,
		showRating,
		showYear,
		showQuality,
		showType,
		access,
		showPrice,
		showAccessLabel,
		showFree,
		showBadges,
		showPremiumBadge,
		showPpvBadge,
		ratio,
		customRatio,
		backgroundColor,
		customClass,
	} = attributes;

	const effectiveShowSearch =
		lockShowSearch === 'search' ? true : lockShowSearch === 'grid' ? false : !!showSearch;

	const limitHelp =
		!limit || limit <= 0
			? __('0 = use site archive/search “items per page” setting.', 'cine-movie-engine')
			: '';
	const colHelp = __('0 = use design settings for this breakpoint.', 'cine-movie-engine');

	return (
		<>
			<PanelColorSettings
				title={__('Background', 'cine-movie-engine')}
				colorSettings={[
					{
						value: backgroundColor,
						onChange: (v) => setAttributes({ backgroundColor: v || '' }),
						label: __('Section background', 'cine-movie-engine'),
					},
				]}
			/>
			<PanelBody title={__('Content & header', 'cine-movie-engine')} initialOpen={true}>
				<TextControl
					label={__('Section title', 'cine-movie-engine')}
					value={title}
					onChange={(v) => setAttributes({ title: v || '' })}
				/>
				<ToggleControl
					label={__('Show “View all” link', 'cine-movie-engine')}
					checked={!!showViewAll}
					onChange={(v) => setAttributes({ showViewAll: v })}
				/>
				<TextControl
					label={__('View all URL (optional)', 'cine-movie-engine')}
					value={viewAllUrl}
					onChange={(v) => setAttributes({ viewAllUrl: v || '' })}
					help={__('Leave empty to use plugin browse/archive pages.', 'cine-movie-engine')}
				/>
				<TextControl
					label={__('View all label (optional)', 'cine-movie-engine')}
					value={viewAllText}
					onChange={(v) => setAttributes({ viewAllText: v || '' })}
				/>
			</PanelBody>

			<PanelBody title={__('Query', 'cine-movie-engine')} initialOpen={true}>
				<SelectControl
					label={__('Post types', 'cine-movie-engine')}
					value={postType}
					options={[
						{ label: __('Default (movies & series)', 'cine-movie-engine'), value: '' },
						{ label: __('Movies only', 'cine-movie-engine'), value: 'movie_engine_movie' },
						{ label: __('TV series only', 'cine-movie-engine'), value: 'movie_engine_series' },
						{
							label: __('Movies & series (explicit)', 'cine-movie-engine'),
							value: 'movie_engine_movie,movie_engine_series',
						},
					]}
					onChange={(v) => setAttributes({ postType: v || '' })}
				/>
				<SelectControl
					label={__('Preset query type', 'cine-movie-engine')}
					value={queryType}
					help={__(
						'Uses meta/date rules (trending, upcoming, etc.). Leave empty for normal archive query.',
						'cine-movie-engine'
					)}
					options={[
						{ label: __('— None —', 'cine-movie-engine'), value: '' },
						{ 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' },
					]}
					onChange={(v) => setAttributes({ queryType: v || '' })}
				/>
				<TextControl
					label={__('Specific post IDs', 'cine-movie-engine')}
					value={ids}
					onChange={(v) => setAttributes({ ids: v || '' })}
					help={__('Comma-separated IDs. When set, order follows this list.', 'cine-movie-engine')}
				/>
				<TextControl
					label={__('Genre slug', 'cine-movie-engine')}
					value={genre}
					onChange={(v) => setAttributes({ genre: v || '' })}
					placeholder={__('e.g. action, drama', 'cine-movie-engine')}
					help={__(
						'Term slug from your genre taxonomy (not the label). Leave empty to show all genres.',
						'cine-movie-engine'
					)}
				/>
				<TextControl
					label={__('Year slug', 'cine-movie-engine')}
					value={year}
					onChange={(v) => setAttributes({ year: v || '' })}
					placeholder={__('e.g. 2024', 'cine-movie-engine')}
					help={__(
						'Year term slug as stored in Movie Engine (often the year number). Empty = any year.',
						'cine-movie-engine'
					)}
				/>
				<TextControl
					label={__('Language slug', 'cine-movie-engine')}
					value={language}
					onChange={(v) => setAttributes({ language: v || '' })}
					placeholder={__('e.g. en, es', 'cine-movie-engine')}
					help={__(
						'Language term slug from your language taxonomy. Empty = all languages.',
						'cine-movie-engine'
					)}
				/>
				<SelectControl
					label={__('Order by', 'cine-movie-engine')}
					value={orderby}
					options={[
						{ label: __('Date', 'cine-movie-engine'), value: 'date' },
						{ label: __('Rating (meta)', 'cine-movie-engine'), value: 'rating' },
						{ label: __('Views (meta)', 'cine-movie-engine'), value: 'views' },
						{ label: __('Title', 'cine-movie-engine'), value: 'title' },
					]}
					onChange={(v) => setAttributes({ orderby: v || 'date' })}
				/>
				<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' })}
				/>
				<RangeControl
					label={__('Items per page', 'cine-movie-engine')}
					help={limitHelp}
					value={limit > 0 ? limit : 0}
					onChange={(v) => setAttributes({ limit: v > 0 ? v : 0 })}
					min={0}
					max={100}
					initialPosition={
						effectiveShowSearch ? defaults.searchItemsPerPage : defaults.archiveItemsPerPage
					}
				/>
				<ToggleControl
					label={__('Pagination', 'cine-movie-engine')}
					checked={pagination !== false}
					onChange={(v) => setAttributes({ pagination: v })}
				/>
			</PanelBody>
			<PanelBody title={__('Layout & grid', 'cine-movie-engine')} initialOpen={false}>
				<SelectControl
					label={__('Layout mode', 'cine-movie-engine')}
					value={layout}
					options={[
						{ label: __('Grid', 'cine-movie-engine'), value: 'grid' },
						{ label: __('Slider', 'cine-movie-engine'), value: 'slider' },
					]}
					onChange={(v) => setAttributes({ layout: v || 'grid' })}
				/>
				<RangeControl
					label={__('Columns — desktop', 'cine-movie-engine')}
					help={colHelp}
					value={columns > 0 ? columns : 0}
					onChange={(v) => setAttributes({ columns: v > 0 ? v : 0 })}
					min={0}
					max={15}
					initialPosition={defaults.archiveColumnsDesktop}
				/>
				<RangeControl
					label={__('Columns — laptop', 'cine-movie-engine')}
					help={colHelp}
					value={columnsLaptop > 0 ? columnsLaptop : 0}
					onChange={(v) => setAttributes({ columnsLaptop: v > 0 ? v : 0 })}
					min={0}
					max={15}
					initialPosition={defaults.archiveColumnsLaptop}
				/>
				<RangeControl
					label={__('Columns — tablet', 'cine-movie-engine')}
					help={colHelp}
					value={columnsTablet > 0 ? columnsTablet : 0}
					onChange={(v) => setAttributes({ columnsTablet: v > 0 ? v : 0 })}
					min={0}
					max={15}
					initialPosition={defaults.archiveColumnsTablet}
				/>
				<RangeControl
					label={__('Columns — mobile', 'cine-movie-engine')}
					help={colHelp}
					value={columnsMobile > 0 ? columnsMobile : 0}
					onChange={(v) => setAttributes({ columnsMobile: v > 0 ? v : 0 })}
					min={0}
					max={15}
					initialPosition={defaults.archiveColumnsMobile}
				/>
				<TextControl
					label={__('Gap (px)', 'cine-movie-engine')}
					value={gap}
					onChange={(v) => setAttributes({ gap: v || '' })}
					help={__('Example: 15', 'cine-movie-engine')}
				/>
				<SelectControl
					label={__('Poster / card ratio', 'cine-movie-engine')}
					value={ratio}
					options={[
						{ label: __('Portrait', 'cine-movie-engine'), value: 'portrait' },
						{ label: __('Landscape', 'cine-movie-engine'), value: 'landscape' },
						{ label: __('Custom (set below)', 'cine-movie-engine'), value: 'custom' },
					]}
					onChange={(v) => setAttributes({ ratio: v || 'portrait' })}
				/>
				{ratio === 'custom' && (
					<TextControl
						label={__('Custom ratio (e.g. 2/3)', 'cine-movie-engine')}
						value={customRatio}
						onChange={(v) => setAttributes({ customRatio: v || '' })}
					/>
				)}
			</PanelBody>

			<PanelBody title={__('Search & filters', 'cine-movie-engine')} initialOpen={false}>
				{!lockShowSearch && (
					<ToggleControl
						label={__('Show search field', 'cine-movie-engine')}
						checked={!!showSearch}
						onChange={(v) => setAttributes({ showSearch: v })}
					/>
				)}
				<ToggleControl
					label={__('Show archive filters', 'cine-movie-engine')}
					checked={!!showFilters}
					onChange={(v) => setAttributes({ showFilters: v })}
				/>
				<SelectControl
					label={__('Filter bar layout', 'cine-movie-engine')}
					value={filterLayout}
					options={[
						{ label: __('Sidebar', 'cine-movie-engine'), value: 'sidebar' },
						{ label: __('Top', 'cine-movie-engine'), value: 'top' },
					]}
					onChange={(v) => setAttributes({ filterLayout: v || 'sidebar' })}
				/>
				<ToggleControl
					label={__('Enable AJAX filtering', 'cine-movie-engine')}
					checked={enableAjax !== false}
					onChange={(v) => setAttributes({ enableAjax: v })}
				/>
			</PanelBody>

			{layout === 'slider' && (
				<PanelBody title={__('Slider options', 'cine-movie-engine')} initialOpen={false}>
					<ToggleControl
						label={__('Autoplay', 'cine-movie-engine')}
						checked={!!autoplay}
						onChange={(v) => setAttributes({ autoplay: v })}
					/>
					<RangeControl
						label={__('Autoplay speed (ms)', 'cine-movie-engine')}
						value={autoplaySpeed || 3000}
						onChange={(v) => setAttributes({ autoplaySpeed: v })}
						min={1000}
						max={20000}
						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 dots', 'cine-movie-engine')}
						checked={!!showDots}
						onChange={(v) => setAttributes({ showDots: v })}
					/>
				</PanelBody>
			)}
			<PanelBody title={__('Card meta & badges', 'cine-movie-engine')} initialOpen={false}>
				<ToggleControl
					label={__('Show rating', 'cine-movie-engine')}
					checked={showRating !== false}
					onChange={(v) => setAttributes({ showRating: v })}
				/>
				<ToggleControl
					label={__('Show year', 'cine-movie-engine')}
					checked={showYear !== false}
					onChange={(v) => setAttributes({ showYear: v })}
				/>
				<ToggleControl
					label={__('Show quality', 'cine-movie-engine')}
					checked={showQuality !== false}
					onChange={(v) => setAttributes({ showQuality: v })}
				/>
				<ToggleControl
					label={__('Show type (movie/series)', 'cine-movie-engine')}
					checked={showType !== false}
					onChange={(v) => setAttributes({ showType: v })}
				/>
				<ToggleControl
					label={__('Show “free” label', 'cine-movie-engine')}
					checked={!!showFree}
					onChange={(v) => setAttributes({ showFree: v })}
				/>
				<ToggleControl
					label={__('Show badges', 'cine-movie-engine')}
					checked={showBadges !== false}
					onChange={(v) => setAttributes({ showBadges: v })}
				/>
				<ToggleControl
					label={__('Show premium badge', 'cine-movie-engine')}
					checked={showPremiumBadge !== false}
					onChange={(v) => setAttributes({ showPremiumBadge: v })}
				/>
				<ToggleControl
					label={__('Show PPV badge', 'cine-movie-engine')}
					checked={showPpvBadge !== false}
					onChange={(v) => setAttributes({ showPpvBadge: v })}
				/>
				<TextControl
					label={__('Access filter (Pro)', 'cine-movie-engine')}
					value={access}
					onChange={(v) => setAttributes({ access: v || '' })}
					help={__(
						'Comma-separated: free, premium, rent, sale — requires Movie Engine Pro features.',
						'cine-movie-engine'
					)}
				/>
				<ToggleControl
					label={__('Show price (Pro)', 'cine-movie-engine')}
					checked={!!showPrice}
					onChange={(v) => setAttributes({ showPrice: v })}
				/>
				<ToggleControl
					label={__('Show access label (Pro)', 'cine-movie-engine')}
					checked={!!showAccessLabel}
					onChange={(v) => setAttributes({ showAccessLabel: v })}
				/>
			</PanelBody>

			<PanelBody title={__('Advanced', 'cine-movie-engine')} initialOpen={false}>
				<TextControl
					label={__('Extra CSS class', 'cine-movie-engine')}
					value={customClass}
					onChange={(v) => setAttributes({ customClass: v || '' })}
				/>
			</PanelBody>
		</>
	);
}
