/**
 * Order progress: paid → booked (P2G) → fulfilled (WC complete).
 * Uses WordPress/WooCommerce components only; progress bar uses role="progressbar" and inline width.
 */
import { __ } from '@wordpress/i18n';
import { useMemo } from '@wordpress/element';
import { Card, CardBody, Flex, FlexItem, Notice } from '@wordpress/components';
import { Badge } from '.';

export interface OrderProgressProps {
	paid: boolean;
	booked: boolean;
	fulfilled: boolean;
	attempts?: number;
	orderReference?: string | number | null;
	contactName?: string;
	contactEmail?: string;
	orderLineCount?: number;
	bookedOrderLineCount?: number;
}

export default function OrderProgress({
	paid,
	booked,
	fulfilled,
	attempts = 0,
	orderReference,
	contactName = '',
	contactEmail = '',
	orderLineCount = 1,
	bookedOrderLineCount = 0,
}: OrderProgressProps) {
	const progress = useMemo(() => {
		// Progress calculation focused on booking stage movement
		if (fulfilled) return 100;

		if (booked) {
			let bookedProgress = 80;
			if (orderLineCount > 0) {
				const itemCompletionRate =
					bookedOrderLineCount / orderLineCount;
				bookedProgress += itemCompletionRate * 15; // Up to 15% for item completion
			}
			const attemptProgress = Math.min((attempts / 30) * 4, 4); // Up to 4% from attempts
			return Math.min(bookedProgress + attemptProgress, 99); // Cap just before 100%
		}

		if (paid) {
			let paidProgress = 30;
			if (orderLineCount > 0) {
				const bookingRate = bookedOrderLineCount / orderLineCount;
				paidProgress += bookingRate * 35; // Up to 35% for partial bookings
			}

			const attemptProgress = Math.min((attempts / 30) * 15, 15); // Up to 15% from attempts
			return Math.min(paidProgress + attemptProgress, 79); // Cap before booked stage
		}

		const baseProgress = 25;
		const attemptProgress = Math.min((attempts / 30) * 4, 4); // Minimal progress from attempts
		return Math.min(baseProgress + attemptProgress, 29); // Cap before payment
	}, [
		paid,
		booked,
		fulfilled,
		attempts,
		orderLineCount,
		bookedOrderLineCount,
	]);

	const currentStep = useMemo(() => {
		if (fulfilled) return 4;
		if (booked) return 4;
		if (paid) return 3;
		return 2;
	}, [paid, booked, fulfilled]);

	const steps = useMemo(
		() => [
			{
				label: __('Order placed', 'parcel2go-shipping'),
				completed: true,
				description: __(
					'Your order has been received.',
					'parcel2go-shipping'
				),
			},
			{
				label: __('Payment confirmed', 'parcel2go-shipping'),
				completed: paid,
				description: __(
					'Payment has been processed.',
					'parcel2go-shipping'
				),
			},
			{
				label: __('Booking confirmed', 'parcel2go-shipping'),
				completed: booked,
				description: booked
					? orderLineCount > 1
						? `${bookedOrderLineCount} ${__('of', 'parcel2go-shipping')} ${orderLineCount} ${__('orders booked with Parcel2Go.', 'parcel2go-shipping')}`
						: __(
								'Your shipment has been booked with Parcel2Go.',
								'parcel2go-shipping'
							)
					: orderLineCount > 1
						? `${__('We are working on booking your shipments.', 'parcel2go-shipping')} (${bookedOrderLineCount}/${orderLineCount})`
						: `${__('We are working on booking your shipment.', 'parcel2go-shipping')} (${bookedOrderLineCount}/${orderLineCount})`,
			},
			{
				label: __('Order fulfilled', 'parcel2go-shipping'),
				completed: fulfilled,
				description: __(
					'Your order is on its way.',
					'parcel2go-shipping'
				),
			},
		],
		[paid, booked, fulfilled, orderLineCount, bookedOrderLineCount]
	);

	const statusMessage = useMemo(() => {
		if (fulfilled)
			return __(
				'Your order has been fulfilled and is on its way!',
				'parcel2go-shipping'
			);
		if (booked) {
			const itemStatus =
				orderLineCount > 0 && bookedOrderLineCount < orderLineCount
					? ` ${bookedOrderLineCount}/${orderLineCount} ${__('items ready.', 'parcel2go-shipping')}`
					: '';
			return __(
				"Your shipment has been confirmed and we're preparing for fulfillment.",
				'parcel2go-shipping'
			).concat(itemStatus);
		}
		if (paid)
			return __(
				"Payment confirmed! We're working on booking your shipment.",
				'parcel2go-shipping'
			);
		return __(
			"We've received your order and are processing it now.",
			'parcel2go-shipping'
		);
	}, [fulfilled, booked, paid, orderLineCount, bookedOrderLineCount]);

	const attemptsBadgeTone = useMemo(() => {
		if (attempts >= 30) return 'error';
		if (attempts > 15) return 'warning';
		return 'default';
	}, [attempts]);

	return (
		<Card size="large" style={{ marginTop: 24 }}>
			<CardBody>
				<Flex direction="column" gap={4}>
					<Flex justify="space-between" align="center">
						<FlexItem>
							<h3 style={{ margin: 0, fontSize: '1.25rem' }}>
								{__('Order progress', 'parcel2go-shipping')}
								{orderReference != null && orderReference !== ''
									? ` ${orderReference}`
									: ''}
							</h3>
						</FlexItem>
						{attempts > 15 && (
							<FlexItem>
								<Badge tone={attemptsBadgeTone}>
									{attempts >= 30
										? __(
												'Processing delayed',
												'parcel2go-shipping'
											)
										: __(
												'Taking longer',
												'parcel2go-shipping'
											)}
								</Badge>
							</FlexItem>
						)}
					</Flex>

					{/* Progress bar: semantic progress, fill width is the only dynamic value */}
					<Flex direction="column" gap={2}>
						<div
							role="progressbar"
							aria-valuenow={Math.round(progress)}
							aria-valuemin={0}
							aria-valuemax={100}
							aria-label={__(
								'Order progress',
								'parcel2go-shipping'
							)}
							style={{
								height: 8,
								backgroundColor: '#e0e0e0',
								borderRadius: 4,
								overflow: 'hidden',
							}}
						>
							<div
								style={{
									width: `${progress}%`,
									height: '100%',
									backgroundColor: fulfilled
										? '#00a32a'
										: '#007cba',
									borderRadius: 4,
									transition: 'width 0.3s ease',
								}}
							/>
						</div>
						<Flex justify="space-between">
							<FlexItem>
								<span
									className="is-subdued"
									style={{ fontSize: 12, color: '#757575' }}
								>
									{__(
										'Step %1$d of 4',
										'parcel2go-shipping'
									).replace('%1$d', String(currentStep))}
								</span>
							</FlexItem>
							<FlexItem>
								<span
									className="is-subdued"
									style={{ fontSize: 12, color: '#757575' }}
								>
									{Math.round(progress)}%{' '}
									{__('complete', 'parcel2go-shipping')}
								</span>
							</FlexItem>
						</Flex>
					</Flex>

					<Notice status="success" isDismissible={false}>
						{statusMessage}
					</Notice>

					<Flex direction="column" gap={2}>
						<h4 style={{ margin: 0, fontSize: '0.95rem' }}>
							{__('Order timeline', 'parcel2go-shipping')}
						</h4>
						{steps.map((step, index) => (
							<Flex key={index} gap={3} align="flex-start">
								<FlexItem
									style={{
										flexShrink: 0,
										fontSize: 18,
										lineHeight: 1.4,
									}}
								>
									{step.completed ? '✓' : '○'}
								</FlexItem>
								<FlexItem style={{ flex: 1, minWidth: 0 }}>
									<Flex gap={2} align="center" wrap>
										<span
											style={{
												fontWeight: step.completed
													? 600
													: 400,
											}}
										>
											{step.label}
										</span>
										{step.completed && (
											<Badge tone="success">
												{__(
													'Complete',
													'parcel2go-shipping'
												)}
											</Badge>
										)}
										{!step.completed &&
											index + 1 === currentStep && (
												<Badge tone="warning">
													{__(
														'In progress',
														'parcel2go-shipping'
													)}
												</Badge>
											)}
									</Flex>
									<p
										style={{
											margin: '4px 0 0',
											fontSize: 13,
											color: '#757575',
										}}
									>
										{step.description}
									</p>
								</FlexItem>
							</Flex>
						))}
					</Flex>

					{attempts > 15 && attempts < 30 && (
						<Notice status="warning" isDismissible={false}>
							{__(
								"We're still processing your order, but it's taking longer than expected. Our team is actively working on it.",
								'parcel2go-shipping'
							)}{' '}
							{__('Contact Us:', 'parcel2go-shipping')}{' '}
							<a
								target="_blank"
								rel="noopener noreferrer"
								href="https://www.parcel2go.com/help-centre/livechat"
							>
								{__('Live Chat', 'parcel2go-shipping')}
							</a>
						</Notice>
					)}

					{attempts >= 30 && (
						<Notice status="error" isDismissible={false}>
							{__(
								"We're experiencing delays with your order. Our support team has been notified and will contact you shortly.",
								'parcel2go-shipping'
							)}{' '}
							{__('Contact Us:', 'parcel2go-shipping')}{' '}
							<a
								target="_blank"
								rel="noopener noreferrer"
								href="https://www.parcel2go.com/help-centre/livechat"
							>
								{__('Live Chat', 'parcel2go-shipping')}
							</a>
						</Notice>
					)}
				</Flex>
			</CardBody>
		</Card>
	);
}