/**
 * Help / About: documentation, what changed, where to get support, and the
 * licence block.
 */
import { __, sprintf } from '@wordpress/i18n';

import { BlockStack, InlineStack } from '../../ui/molecules';
import { Button, Text } from '../../ui/atoms';
import Section from '../../components/Section';
import { useApp } from '../../store/AppStore';

const CHANGELOG = [
	{
		version: '0.4.0',
		items: [
			() =>
				__(
					'New dashboard with Dashboard, Connections, Mappings, Logs and Settings screens.',
					'rewind-form-bridge-for-brevo'
				),
			() =>
				__(
					'All admin traffic moved from admin-ajax to the rbfb/v1 REST API.',
					'rewind-form-bridge-for-brevo'
				),
			() =>
				__(
					'Delivery log is now readable, filterable, exportable and retryable.',
					'rewind-form-bridge-for-brevo'
				),
			() =>
				__(
					'Field mapping warns when a value would be silently dropped by Brevo.',
					'rewind-form-bridge-for-brevo'
				),
		],
	},
	{
		version: '0.3.0',
		items: [
			() =>
				__(
					'Feed editor, field mapping and the Forminator adapter.',
					'rewind-form-bridge-for-brevo'
				),
		],
	},
	{
		version: '0.2.0',
		items: [
			() =>
				__(
					'Brevo lists and attributes, with a 15-minute cache.',
					'rewind-form-bridge-for-brevo'
				),
		],
	},
	{
		version: '0.1.0',
		items: [
			() =>
				__(
					'First release: schema, settings and the connection test.',
					'rewind-form-bridge-for-brevo'
				),
		],
	},
];

export default function Help() {
	const { bootstrap } = useApp();

	return (
		<div className="rbfb-page rbfb-page--wide">
			<BlockStack gap={ 20 }>
				<Section
					title={ __( 'Get help', 'rewind-form-bridge-for-brevo' ) }
					icon="support_agent"
				>
					<BlockStack gap={ 12 } style={ { width: '100%' } }>
						<Text size="sm">
							{ __(
								'The documentation covers field mapping, consent handling and what each delivery-log status means.',
								'rewind-form-bridge-for-brevo'
							) }
						</Text>

						<InlineStack gap={ 8 }>
							<Button
								variant="primary"
								size="small"
								startIcon="menu_book"
								endIcon="open_in_new"
								href={ bootstrap.docsUrl }
								target="_blank"
							>
								{ __(
									'Read the documentation',
									'rewind-form-bridge-for-brevo'
								) }
							</Button>
							<Button
								variant="outlined"
								size="small"
								startIcon="forum"
								endIcon="open_in_new"
								href={ bootstrap.supportUrl }
								target="_blank"
							>
								{ __(
									'Open a support thread',
									'rewind-form-bridge-for-brevo'
								) }
							</Button>
						</InlineStack>

						<Text size="xs" color="gray-500">
							{ __(
								'When reporting a problem, include the System status report from Settings → Tools. It contains no credentials.',
								'rewind-form-bridge-for-brevo'
							) }
						</Text>
					</BlockStack>
				</Section>

				<Section
					title={ __(
						'What changed',
						'rewind-form-bridge-for-brevo'
					) }
					icon="history_edu"
				>
					<BlockStack gap={ 16 } style={ { width: '100%' } }>
						{ CHANGELOG.map( ( release ) => (
							<BlockStack key={ release.version } gap={ 6 }>
								<Text size="sm" weight="semibold">
									{ sprintf(
										/* translators: %s: version number. */
										__(
											'Version %s',
											'rewind-form-bridge-for-brevo'
										),
										release.version
									) }
								</Text>

								{ release.items.map( ( item, index ) => (
									<Text
										key={ index }
										size="xs"
										color="gray-600"
									>
										{ `• ${ item() }` }
									</Text>
								) ) }
							</BlockStack>
						) ) }
					</BlockStack>
				</Section>

				<Section
					title={ __( 'About', 'rewind-form-bridge-for-brevo' ) }
					icon="info"
				>
					<BlockStack gap={ 16 } style={ { width: '100%' } }>
						<InlineStack gap={ 32 } blockAlign="start" wrap>
							<BlockStack gap={ 4 }>
								<Text size="xs" color="gray-500">
									{ __(
										'Version',
										'rewind-form-bridge-for-brevo'
									) }
								</Text>
								<Text size="sm">{ bootstrap.version }</Text>
							</BlockStack>

							<BlockStack gap={ 4 }>
								<Text size="xs" color="gray-500">
									{ __(
										'Licence',
										'rewind-form-bridge-for-brevo'
									) }
								</Text>
								<Text size="sm">GPL-2.0-or-later</Text>
							</BlockStack>

							<BlockStack gap={ 4 }>
								<Text size="xs" color="gray-500">
									{ __(
										'Author',
										'rewind-form-bridge-for-brevo'
									) }
								</Text>
								<a
									href="https://profiles.wordpress.org/jakirulislambd19/"
									target="_blank"
									rel="noopener noreferrer"
								>
									jakirulislambd19
								</a>
							</BlockStack>
						</InlineStack>

						<Text size="xs" color="gray-500">
							{ __(
								'Brevo is a trademark of Sendinblue SAS. This plugin is not affiliated with or endorsed by Brevo.',
								'rewind-form-bridge-for-brevo'
							) }
						</Text>
					</BlockStack>
				</Section>
			</BlockStack>
		</div>
	);
}
