/**
 * Reusable notice listing what must be completed before booking (store, customer address, item weights).
 * Renders as a list for clarity. Use on landing, order ship page, and service-quotes.
 */
import { __ } from '@wordpress/i18n';
import { Notice, Icon } from '@wordpress/components';
import { cautionFilled } from '@wordpress/icons';
import type { InternationalMissing } from '../utils';

export interface BookingPrereqsNoticeProps {
	/** Missing store/collection address fields (e.g. from validateAddresses). */
	storeMissing: string[];
	/** Missing customer/shipping address fields (e.g. from validateAddresses). */
	customerMissing: string[];
	/** When delivery is international: grouped by Settings vs products (link shown in front of each group). */
	internationalMissing?: InternationalMissing | null;
	/** Whether every order line item has a weight (only relevant when orderId is set). */
	orderHasWeight: boolean;
	/** Order ID for "edit order" links; null when there is no order (e.g. landing page). */
	orderId: number | null;
	/** URL to the plugin settings page. */
	settingsUrl: string;
	/** Function to build the WooCommerce edit-order URL. Omit when orderId is null (e.g. landing page). */
	getEditOrderUrl?: (orderId: number) => string;
}

const emptyInternational: InternationalMissing = { settings: [], products: [] };

export default function BookingPrereqsNotice({
	storeMissing,
	customerMissing,
	internationalMissing = emptyInternational,
	orderHasWeight,
	orderId,
	settingsUrl,
	getEditOrderUrl,
}: BookingPrereqsNoticeProps) {
	const hasStoreIssues = storeMissing.length > 0;
	const hasCustomerIssues = customerMissing.length > 0;
	const intl = internationalMissing ?? emptyInternational;
	const hasInternationalSettings = intl.settings.length > 0;
	const hasInternationalProducts = intl.products.length > 0;
	const hasWeightIssues = orderId != null && !orderHasWeight;

	const items: React.ReactNode[] = [];

	const listItemStyle = { display: 'flex', alignItems: 'flex-start', gap: 8, marginBottom: 4 };

	if (hasStoreIssues) {
		items.push(
			<li key="store" style={listItemStyle}>
				<Icon icon={cautionFilled} size={18} style={{ flexShrink: 0, marginTop: 2 }} />
				<span>
					{__('Store details (collection address):', 'parcel2go-shipping')}{' '}
					{storeMissing.join(', ')}.{' '}
					<a href={settingsUrl} style={{ whiteSpace: 'nowrap' }}>
						{__('Fix in Settings', 'parcel2go-shipping')}
					</a>
				</span>
			</li>
		);
	}
	if (hasCustomerIssues && orderId != null) {
		const editUrl = getEditOrderUrl?.(orderId) ?? settingsUrl;
		items.push(
			<li key="customer" style={listItemStyle}>
				<Icon icon={cautionFilled} size={18} style={{ flexShrink: 0, marginTop: 2 }} />
				<span>
					{__('Customer shipping address:', 'parcel2go-shipping')}{' '}
					{customerMissing.join(', ')}.{' '}
					<a href={editUrl} style={{ whiteSpace: 'nowrap' }}>
						{__('Edit order', 'parcel2go-shipping')}
					</a>
				</span>
			</li>
		);
	}
	if (hasWeightIssues) {
		const editUrl = orderId != null ? getEditOrderUrl?.(orderId) ?? settingsUrl : settingsUrl;
		items.push(
			<li key="weight" style={listItemStyle}>
				<Icon icon={cautionFilled} size={18} style={{ flexShrink: 0, marginTop: 2 }} />
				<span>
					{__('Item weights: set weight for each product on the order.', 'parcel2go-shipping')}{' '}
					<a href={editUrl} style={{ whiteSpace: 'nowrap' }}>
						{__('Edit order', 'parcel2go-shipping')}
					</a>
				</span>
			</li>
		);
	}
	if (hasInternationalSettings) {
		items.push(
			<li key="international-settings" style={listItemStyle}>
				<Icon icon={cautionFilled} size={18} style={{ flexShrink: 0, marginTop: 2 }} />
				<span>
					<a href={settingsUrl} style={{ whiteSpace: 'nowrap' }}>
						{__('Settings', 'parcel2go-shipping')}
					</a>
					{': '}
					{intl.settings.join(', ')}.
				</span>
			</li>
		);
	}
	if (hasInternationalProducts) {
		const editUrl = orderId != null ? getEditOrderUrl?.(orderId) ?? settingsUrl : settingsUrl;
		items.push(
			<li key="international-products" style={listItemStyle}>
				<Icon icon={cautionFilled} size={18} style={{ flexShrink: 0, marginTop: 2 }} />
				<span>
					<a href={editUrl} style={{ whiteSpace: 'nowrap' }}>
						{orderId != null ? __('Edit order', 'parcel2go-shipping') : __('Products', 'parcel2go-shipping')}
					</a>
					{': '}
					{intl.products.join(', ')}.
				</span>
			</li>
		);
	}

	if (items.length === 0) {
		return null;
	}

	return (
		<Notice status="warning" isDismissible={false}>
			<span style={{ fontWeight: 500 }}>
				{__('Complete the following before booking:', 'parcel2go-shipping')}
			</span>
			<ul style={{ margin: '8px 0 0 0', paddingLeft: 20 }}>
				{items}
			</ul>
		</Notice>
	);
}