import { useState } from 'react';
import { __ } from '@wordpress/i18n';
import {
	Button,
	Card,
	CardBody,
	Flex,
	Notice,
	TextControl,
} from '@wordpress/components';
import z from 'zod';

interface IOSSSectionProps {
	isIOSSEligible: boolean;
	isValidating: boolean;
	onSubmitIOSS: (ioss: string | null) => void;
}

const iossSchema = z
	.string()
	.transform((v) => v.replace(/\s+/g, ''))
	.refine((v) => v === '' || /^\d{12}$/.test(v), {
		message: 'IOSS must be exactly 12 digits',
	});

export default function IOSSSection({
	isIOSSEligible,
	isValidating,
	onSubmitIOSS,
}: IOSSSectionProps) {
	const [ioss, setIoss] = useState<string>('');
	const [showIOSSInput, setShowIOSSInput] = useState<boolean>(false);
	const [iossResponse, setIossResponse] = useState<string>('');

	if (!isIOSSEligible) return null;

	return (
		<Card size="small" style={{ background: '#f6f7f7' }}>
			<CardBody>
				<Flex direction="column" gap={2}>
					<Button
						variant="link"
						onClick={() => setShowIOSSInput(!showIOSSInput)}
					>
						{__('Got an IOSS number?', 'parcel2go-shipping')}
					</Button>
					{showIOSSInput && (
						<Flex direction="column" gap={2}>
							<p style={{ fontSize: 12, color: '#646970' }}>
								{__(
									'If you have an IOSS number, enter it here to simplify VAT collection for your EU shipments only and for parcels less than 150 EUR.',
									'parcel2go-shipping'
								)}
							</p>
							<Flex
								direction="row"
								align="flex-end"
								justify="flex-start"
								gap={2}
							>
								<div style={{ flex: 1, minWidth: 0 }}>
									<TextControl
										label={__(
											'IOSS Number',
											'parcel2go-shipping'
										)}
										type="text"
										inputMode="numeric"
										pattern="[0-9]*"
										maxLength={12}
										value={ioss}
										onChange={(value) => setIoss(value)}
										placeholder={__(
											'Enter your 12-digit IOSS number',
											'parcel2go-shipping'
										)}
										__nextHasNoMarginBottom
									/>
								</div>
								<Button
									variant="primary"
									disabled={isValidating}
									isBusy={isValidating}
									onClick={() => {
										const result =
											iossSchema.safeParse(ioss);
										if (result.success) {
											setIossResponse('');
											onSubmitIOSS(
												result.data === ''
													? null
													: result.data
											);
										} else {
											setIossResponse(
												result.error.issues[0]?.message ??
													__('Invalid IOSS value.', 'parcel2go-shipping')
											);
										}
									}}
								>
									{__('Add IOSS', 'parcel2go-shipping')}
								</Button>
							</Flex>
								<p style={{ fontSize: 12, color: '#646970', margin: 0 }}>
									{__('12-digit number used for EU VAT (IOSS)', 'parcel2go-shipping')}
								</p>
							{iossResponse && (
								<Notice
									status="error"
									isDismissible
									onRemove={() => setIossResponse('')}
								>
									{iossResponse}
								</Notice>
							)}
						</Flex>
					)}
				</Flex>
			</CardBody>
		</Card>
	);
}