/**
 * The detail modal behind a log row: the human explanation, the retry
 * count, and the exact request and response payloads.
 */
import Dialog from '../../components/Dialog';
import { __, sprintf } from '@wordpress/i18n';

import { BlockStack, InlineStack } from '../../ui/molecules';
import { Button, Text } from '../../ui/atoms';
import StatusBadge from '../../components/StatusBadge';
import { formatDateTime, prettyJson } from '../../utils/format';

/* flex:0 0 auto keeps a fact sized to its content, so a row of them lays
   out side by side instead of each stretching to the container width. */
function Fact( { label, children } ) {
	return (
		<BlockStack gap={ 4 } style={ { flex: '0 0 auto', minWidth: 110 } }>
			<Text size="xs" color="gray-500">
				{ label }
			</Text>
			<div>{ children }</div>
		</BlockStack>
	);
}

export default function LogDetail( { entry, onClose, onRetry, retrying } ) {
	return (
		<Dialog
			title={
				entry.email ||
				__( 'Delivery attempt', 'rewind-form-bridge-for-brevo' )
			}
			onRequestClose={ onClose }
			className="rbfb-payload-modal"
		>
			<BlockStack gap={ 20 } style={ { width: '100%' } }>
				<Text size="xs" color="gray-500">
					{ sprintf(
						/* translators: 1: form name, 2: timestamp. */
						__( '%1$s · %2$s', 'rewind-form-bridge-for-brevo' ),
						entry.feed_title,
						formatDateTime( entry.created_at )
					) }
				</Text>

				<InlineStack gap={ 32 } blockAlign="start" wrap>
					<Fact
						label={ __( 'Status', 'rewind-form-bridge-for-brevo' ) }
					>
						<StatusBadge status={ entry.status } />
					</Fact>

					<Fact
						label={ __(
							'HTTP code',
							'rewind-form-bridge-for-brevo'
						) }
					>
						<Text size="sm">{ entry.http_code || '—' }</Text>
					</Fact>

					<Fact
						label={ __(
							'Brevo error code',
							'rewind-form-bridge-for-brevo'
						) }
					>
						<Text size="sm">{ entry.error_code || '—' }</Text>
					</Fact>

					<Fact
						label={ __(
							'Attempts',
							'rewind-form-bridge-for-brevo'
						) }
					>
						<Text size="sm">{ entry.attempts }</Text>
					</Fact>

					<Fact
						label={ __(
							'Entry reference',
							'rewind-form-bridge-for-brevo'
						) }
					>
						<Text size="sm">{ entry.entry_ref || '—' }</Text>
					</Fact>
				</InlineStack>

				{ entry.message && <Text size="sm">{ entry.message }</Text> }

				<BlockStack gap={ 6 } style={ { width: '100%' } }>
					<Text size="xs" weight="semibold">
						{ __(
							'Request sent to Brevo',
							'rewind-form-bridge-for-brevo'
						) }
					</Text>
					<pre className="rbfb-json">
						{ prettyJson( entry.request ) }
					</pre>
				</BlockStack>

				<BlockStack gap={ 6 } style={ { width: '100%' } }>
					<Text size="xs" weight="semibold">
						{ __(
							'Response from Brevo',
							'rewind-form-bridge-for-brevo'
						) }
					</Text>
					<pre className="rbfb-json">
						{ prettyJson( entry.response ) }
					</pre>
				</BlockStack>

				<Text size="xs" color="gray-500">
					{ __(
						'Payloads are stored exactly as sent. The API key travels in a request header, so it never appears here.',
						'rewind-form-bridge-for-brevo'
					) }
				</Text>

				<InlineStack gap={ 8 } align="end">
					<Button
						variant="outlined"
						size="small"
						startIcon="close"
						onClick={ onClose }
					>
						{ __( 'Close', 'rewind-form-bridge-for-brevo' ) }
					</Button>
					<Button
						startIcon="replay"
						variant="primary"
						size="small"
						loading={ retrying }
						disabled={ retrying || ! entry.request }
						onClick={ () => onRetry( entry ) }
					>
						{ __(
							'Retry delivery',
							'rewind-form-bridge-for-brevo'
						) }
					</Button>
				</InlineStack>
			</BlockStack>
		</Dialog>
	);
}
