/**
 * Preferred quote card — highlights the recommended service with prominent styling.
 */
import { useMemo, useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Card, CardBody, Flex, Button, Icon } from '@wordpress/components';
import { starFilled } from '@wordpress/icons';
import type { Quote, Dropshop } from '../../types';
import { Badge, CourierBadge, PriceDisplay } from '../../shared/components';
import { useWindowSize } from '../../shared/hooks';
import ServiceType from './service-type';
import { formatShortDate } from '../../shared/utils';
import { getQuotesValidCollectionDates } from './utils/quoteHelpers';
import {
	computeFinalPrice,
	computeProtectedAmount,
	buildExtras,
} from './utils/quotePrice';

interface PreferredQuoteCardProps {
	quote: Quote;
	onSelect: (quote: Quote, extras: string[], amount: number) => void;
	fullProtection: boolean;
	totalValue: number;
	dropshops: Dropshop[];
	isPreferred?: boolean;
	disabled?: boolean;
}

export default function PreferredQuoteCard({
	quote,
	onSelect,
	fullProtection,
	totalValue,
	dropshops,
	isPreferred = true,
	disabled = false,
}: PreferredQuoteCardProps) {
	const { isSmOrUp } = useWindowSize();

	const price = useMemo(
		() => computeFinalPrice(quote, fullProtection),
		[quote, fullProtection]
	);

	const protectedAmount = useMemo(
		() => computeProtectedAmount(quote, fullProtection),
		[quote, fullProtection]
	);

	const estimatedDeliveryDate = useMemo(() => {
		const validDates = getQuotesValidCollectionDates(quote);
		const dateMin = validDates[0]?.delivery?.dateMin;
		return dateMin ? formatShortDate(dateMin) : '—';
	}, [quote]);

	const isFullCoverage = protectedAmount / 100 >= totalValue;

	const handleSelect = useCallback(() => {
		const extras = buildExtras(quote, fullProtection);
		onSelect(quote, extras, price.gross);
	}, [quote, fullProtection, price.gross, onSelect]);

	return (
		<Card
			style={{
				border: isPreferred ? '2px solid #007cba' : undefined,
				background: isPreferred ? '#f0f7fc' : undefined,
			}}
		>
			<CardBody>
				<Flex direction="column" gap={4}>
					{/* Header Section */}
					<Flex
						gap={3}
						align="center"
						justify="space-between"
						wrap
					>
						<Flex direction="column" gap={1}>
							<Flex gap={2} align="center">
								{isPreferred && (
									<Icon
										icon={starFilled}
										size={20}
										style={{ fill: '#007cba' }}
									/>
								)}
								<CourierBadge
									slug={quote.service.courierSlug || quote.service.courier || ''}
									courier={quote.service.courier}
									name={quote.service.name}
									size={32}
								/>
							</Flex>
							<div style={{ marginLeft: isPreferred ? 28 : 0 }}>
								<ServiceType quote={quote} dropshops={dropshops} />
							</div>
						</Flex>
						<Button
							variant={isPreferred ? 'primary' : 'secondary'}
							onClick={handleSelect}
							disabled={disabled}
						>
							{isPreferred
								? __('Book Preferred', 'parcel2go-shipping')
								: __('Book Service', 'parcel2go-shipping')}
						</Button>
					</Flex>

					{/* Details Section */}
					<Flex
						gap={4}
						align={isSmOrUp ? 'center' : 'start'}
						justify="space-between"
						wrap
						direction={isSmOrUp ? 'row' : 'column'}
					>
						{/* Estimated Delivery */}
						<Flex direction="column" gap={1}>
							<span style={{ fontSize: 12, color: '#646970' }}>
								{__('Estimated Delivery', 'parcel2go-shipping')}
							</span>
							<span style={{ fontWeight: 500 }}>
								{estimatedDeliveryDate}
							</span>
						</Flex>

						{/* Price */}
						<Flex
							direction="column"
							gap={1}
							style={{ textAlign: isSmOrUp ? 'right' : 'left' }}
						>
							<span style={{ fontSize: 12, color: '#646970' }}>
								{__('Price', 'parcel2go-shipping')}
							</span>
							<PriceDisplay
								net={price.net}
								gross={price.gross}
								hasVAT={quote.price.tax > 0}
							/>
						</Flex>

						{/* Protection */}
						<Flex
							direction="column"
							gap={1}
							align={isSmOrUp ? 'center' : 'start'}
						>
							<span style={{ fontSize: 12, color: '#646970' }}>
								{__('Protection', 'parcel2go-shipping')}
							</span>
							<Badge tone={isFullCoverage ? 'success' : 'default'}>
								{isFullCoverage
									? __('Full Coverage', 'parcel2go-shipping')
									: `£${(protectedAmount / 100).toFixed(0)} ${__('Coverage', 'parcel2go-shipping')}`}
							</Badge>
						</Flex>
					</Flex>
				</Flex>
			</CardBody>
		</Card>
	);
}