/**
 * Responsive toolbar for filtering, searching, and sorting quotes.
 */
import { memo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
	Flex,
	FlexItem,
	FlexBlock,
	Button,
	DropdownMenu,
	TextControl,
} from '@wordpress/components';
import { search, close, funnel } from '@wordpress/icons';
import { useWindowSize } from '../../shared/hooks';
import type { FilterType, SortType } from './hooks/useQuoteFiltering';

const SORT_LABELS: Record<SortType, string> = {
	price_asc: __('Price: Low → High', 'parcel2go-shipping'),
	price_desc: __('Price: High → Low', 'parcel2go-shipping'),
	delivery_asc: __('Delivery: Soonest first', 'parcel2go-shipping'),
	delivery_desc: __('Delivery: Latest first', 'parcel2go-shipping'),
};

export interface QuotesToolbarProps {
	filter: FilterType;
	setFilter: (f: FilterType) => void;
	queryValue: string;
	setQueryValue: (v: string) => void;
	isSearchOpen: boolean;
	handleOpenSearch: () => void;
	handleCloseSearch: () => void;
	searchInputRef: React.RefObject<HTMLInputElement>;
	sortBy: SortType | null;
	setSortBy: (s: SortType | null) => void;
	hasDDPQuotes: boolean;
}

function QuotesToolbarInner({
	filter,
	setFilter,
	queryValue,
	setQueryValue,
	isSearchOpen,
	handleOpenSearch,
	handleCloseSearch,
	searchInputRef,
	sortBy,
	setSortBy,
	hasDDPQuotes,
}: QuotesToolbarProps) {
	const { isSmOrUp } = useWindowSize();

	if (isSearchOpen) {
		return (
			<Flex
				gap={2}
				align="center"
				style={{ marginBottom: 16 }}
			>
				<FlexBlock>
					<TextControl
						ref={searchInputRef}
						value={queryValue}
						onChange={setQueryValue}
						placeholder={__(
							'Search services…',
							'parcel2go-shipping',
						)}
						__nextHasNoMarginBottom
					/>
				</FlexBlock>
				<FlexItem>
					<Button
						icon={close}
						label={__('Close search', 'parcel2go-shipping')}
						onClick={handleCloseSearch}
						size="compact"
					/>
				</FlexItem>
			</Flex>
		);
	}

	return (
		<Flex
			direction={isSmOrUp ? 'row' : 'column'}
			gap={isSmOrUp ? 2 : 3}
			align={isSmOrUp ? 'center' : 'stretch'}
			justify="space-between"
			style={{ marginBottom: 16 }}
		>
			{/* Filter buttons */}
			<FlexItem>
				<Flex
					gap={2}
					style={{ flexWrap: 'wrap' }}
				>
					<Button
						isPressed={filter === 'all'}
						variant="secondary"
						size={isSmOrUp ? 'default' : 'compact'}
						onClick={() => setFilter('all')}
					>
						{__('All', 'parcel2go-shipping')}
					</Button>
					<Button
						isPressed={filter === 'dropoff'}
						variant="secondary"
						size={isSmOrUp ? 'default' : 'compact'}
						onClick={() => setFilter('dropoff')}
					>
						{__('Drop off', 'parcel2go-shipping')}
					</Button>
					<Button
						isPressed={filter === 'collection'}
						variant="secondary"
						size={isSmOrUp ? 'default' : 'compact'}
						onClick={() => setFilter('collection')}
					>
						{__('Collection', 'parcel2go-shipping')}
					</Button>
					{hasDDPQuotes && (
						<Button
							isPressed={filter === 'ddp'}
							variant="secondary"
							size={isSmOrUp ? 'default' : 'compact'}
							onClick={() => setFilter('ddp')}
						>
							{__('DDP', 'parcel2go-shipping')}
						</Button>
					)}
				</Flex>
			</FlexItem>

			{/* Search + Sort icons / badge */}
			<FlexItem>
				<Flex
					gap={1}
					align="center"
					justify={isSmOrUp ? 'flex-end' : 'flex-start'}
				>
					<Button
						icon={search}
						label={__('Search services', 'parcel2go-shipping')}
						onClick={handleOpenSearch}
						size="compact"
					/>
					{sortBy ? (
						<span
							style={{
								display: 'inline-flex',
								alignItems: 'center',
								gap: 4,
								padding: '2px 8px 2px 10px',
								borderRadius: 12,
								background: 'var(--wp-admin-theme-color, #3858e9)',
								color: '#fff',
								fontSize: 12,
								fontWeight: 500,
								whiteSpace: 'nowrap',
							}}
						>
							{SORT_LABELS[sortBy]}
							<Button
								icon={close}
								label={__('Clear sort', 'parcel2go-shipping')}
								onClick={() => setSortBy(null)}
								size="small"
								style={{
									color: '#fff',
									minWidth: 'auto',
									padding: 0,
									height: 'auto',
								}}
							/>
						</span>
					) : (
						<DropdownMenu
							icon={funnel}
							label={__('Sort quotes', 'parcel2go-shipping')}
							controls={[
								{
									title: SORT_LABELS.price_asc,
									onClick: () => setSortBy('price_asc'),
								},
								{
									title: SORT_LABELS.price_desc,
									onClick: () => setSortBy('price_desc'),
								},
								{
									title: SORT_LABELS.delivery_asc,
									onClick: () => setSortBy('delivery_asc'),
								},
								{
									title: SORT_LABELS.delivery_desc,
									onClick: () => setSortBy('delivery_desc'),
								},
							]}
						/>
					)}
				</Flex>
			</FlexItem>
		</Flex>
	);
}

const QuotesToolbar = memo(QuotesToolbarInner);
export default QuotesToolbar;