import React from 'react';
import { Badge, Group, Paper, SimpleGrid, Skeleton, Stack, Text, ThemeIcon } from '@mantine/core';
import { IconAlertTriangle, IconCheck, IconCircle } from '@tabler/icons-react';
import { __, sprintf } from '@wordpress/i18n';

const itemLabels = {
	merchantAccount: __('Merchant account', 'digital-apps-payments-for-adyen'),
	apiKey: __('API key', 'digital-apps-payments-for-adyen'),
	clientKey: __('Client key', 'digital-apps-payments-for-adyen'),
	gateway: __('Card gateway enabled', 'digital-apps-payments-for-adyen'),
	hmacKey: __('Webhook HMAC', 'digital-apps-payments-for-adyen'),
};

function StatusItem({ label, value, optional }) {
	const color = value === true ? 'green' : value === false ? 'orange' : 'gray';
	const Icon = value === true ? IconCheck : value === false ? IconAlertTriangle : IconCircle;
	return (
		<Group gap="xs" wrap="nowrap">
			<ThemeIcon size="sm" variant="light" color={color} aria-hidden="true">
				<Icon size={13} />
			</ThemeIcon>
			<Text size="sm">
				{label}{optional ? ` ${__('(recommended)', 'digital-apps-payments-for-adyen')}` : ''}
			</Text>
		</Group>
	);
}

function EnvironmentCard({ environment, data, readiness }) {
	const active = Boolean(data?.active);
	const checkoutKeys = ['merchantAccount', 'apiKey', 'clientKey', 'gateway'];
	const checkoutReadyCount = checkoutKeys.filter((key) => data?.items?.[key] === true).length;
	const ready = active && readiness?.checkoutReady;
	const badgeText = !active
		? __('Not selected', 'digital-apps-payments-for-adyen')
		: ready
			? __('Checkout ready', 'digital-apps-payments-for-adyen')
			: sprintf(
				/* translators: 1: completed item count, 2: total item count. */
				__('%1$d of %2$d ready', 'digital-apps-payments-for-adyen'),
				checkoutReadyCount,
				checkoutKeys.length
			);

	return (
		<Paper p="md" withBorder className={active ? 'digitalappsReadinessCard digitalappsReadinessCard--active' : 'digitalappsReadinessCard'}>
			<Group justify="space-between" mb="sm">
				<Text fw={600}>{environment}</Text>
				<Badge color={!active ? 'gray' : ready ? 'green' : 'orange'} variant="light">{badgeText}</Badge>
			</Group>
			<Stack gap={7}>
				{Object.entries(itemLabels).map(([key, label]) => (
					<StatusItem key={key} label={label} value={data?.items?.[key]} optional={key === 'hmacKey'} />
				))}
			</Stack>
			{!active && (
				<Text size="xs" c="dimmed" mt="sm">
					{__('Select this environment in Configuration to evaluate its settings.', 'digital-apps-payments-for-adyen')}
				</Text>
			)}
		</Paper>
	);
}

export default function ReadinessSummary({ settings, loading }) {
	if (loading && !settings) {
		return <Skeleton height={210} mb="lg" radius="md" />;
	}

	const readiness = settings?.readiness;
	return (
		<section aria-labelledby="digitalapps-readiness-heading">
			<Group justify="space-between" mb="xs">
				<Text id="digitalapps-readiness-heading" fw={600} size="lg">
					{__('Environment readiness', 'digital-apps-payments-for-adyen')}
				</Text>
				{readiness?.checkoutReady && !readiness?.webhookReady && (
					<Badge color="orange" variant="light">
						{__('Checkout ready, webhook setup incomplete', 'digital-apps-payments-for-adyen')}
					</Badge>
				)}
			</Group>
			<SimpleGrid cols={{ base: 1, md: 2 }} spacing="md" mb="xl">
				<EnvironmentCard environment={__('Test environment', 'digital-apps-payments-for-adyen')} data={readiness?.environments?.test} readiness={readiness} />
				<EnvironmentCard environment={__('Live environment', 'digital-apps-payments-for-adyen')} data={readiness?.environments?.live} readiness={readiness} />
			</SimpleGrid>
		</section>
	);
}
