import React from 'react';
import { Alert, Badge, Button, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconExternalLink, IconInfoCircle } from '@tabler/icons-react';
import { __ } from '@wordpress/i18n';

function Diagnostic({ label, value }) {
	return (
		<Paper p="md" withBorder>
			<Text size="xs" tt="uppercase" c="dimmed" fw={600}>{label}</Text>
			<Text mt={4} fw={500}>{value || __('Unavailable', 'digital-apps-payments-for-adyen')}</Text>
		</Paper>
	);
}

export default function DebugTab({ settingsData }) {
	const diagnostics = settingsData?.diagnostics || {};
	return (
		<Stack gap="md">
			<Alert icon={<IconInfoCircle size={18} />} title={__('WooCommerce-managed logging', 'digital-apps-payments-for-adyen')} color="blue">
				{__('The plugin now writes to the standard WooCommerce logger. WooCommerce controls storage, retention, downloads and deletion, so there is only one authoritative log.', 'digital-apps-payments-for-adyen')}
			</Alert>

			<Paper p="md" withBorder>
				<Group justify="space-between" align="flex-start" mb="md">
					<div>
						<Text size="lg" fw={500}>{__('Logging status', 'digital-apps-payments-for-adyen')}</Text>
						<Text size="sm" c="dimmed" mt={3}>
							{__('Warnings and errors are always recorded. Verbose debug events can be enabled in Configuration.', 'digital-apps-payments-for-adyen')}
						</Text>
					</div>
					<Badge color={settingsData?.debugLogging ? 'orange' : 'gray'} variant="light">
						{settingsData?.debugLogging ? __('Verbose logging on', 'digital-apps-payments-for-adyen') : __('Verbose logging off', 'digital-apps-payments-for-adyen')}
					</Badge>
				</Group>
				<Text size="sm" mb="md">
					{__('In WooCommerce logs, select the source:', 'digital-apps-payments-for-adyen')} <code>{diagnostics.loggerSource || 'digital-apps-payments-for-adyen'}</code>
				</Text>
				<Button
					component="a"
					href={DigitalAppsPaymentsForAdyenSettings.loggingUrl}
					target="_blank"
					rel="noreferrer"
					leftSection={<IconExternalLink size={16} />}
				>
					{__('Open WooCommerce logs', 'digital-apps-payments-for-adyen')}
				</Button>
			</Paper>

			<section aria-labelledby="digitalapps-system-heading">
				<Text id="digitalapps-system-heading" size="lg" fw={500} mb="sm">{__('System information', 'digital-apps-payments-for-adyen')}</Text>
				<SimpleGrid cols={{ base: 1, sm: 3 }}>
					<Diagnostic label={__('WordPress', 'digital-apps-payments-for-adyen')} value={diagnostics.wordpressVersion} />
					<Diagnostic label={__('WooCommerce', 'digital-apps-payments-for-adyen')} value={diagnostics.woocommerceVersion} />
					<Diagnostic label={__('PHP', 'digital-apps-payments-for-adyen')} value={diagnostics.phpVersion} />
				</SimpleGrid>
			</section>
		</Stack>
	);
}
