Panel

import { AgentAvatar } from '../AgentAvatar/AgentAvatar';
import { Button } from '../Button/Button';
import { CodeDiff, CodeDiffFile } from '../CodeDiff/CodeDiff';
import { Icon } from '../Icon/Icon';
import { Panel } from './Panel';

import './approval-report.css';

const composerJsonDiff = `diff --git a/composer.json b/composer.json
index 3f2a9c1..8d41e7b 100644
--- a/composer.json
+++ b/composer.json
@@ -24,7 +24,7 @@
         "drupal/core-composer-scaffold": "^10.3",
         "drupal/core-recommended": "^10.3",
         "drupal/pantheon_advanced_page_cache": "^2.3",
-        "drupal/pathauto": "^1.8",
+        "drupal/pathauto": "^1.13",
         "drupal/redis": "^1.8",
         "drush/drush": "^12.5"
     },`;

const FILES: CodeDiffFile[] = [
	{
		additions: 1,
		deletions: 1,
		diff: composerJsonDiff,
		expandButtonLabel: 'Show changes to composer.json',
		id: 'composer-json',
		name: 'composer.json',
	},
];

/**
 * Story-only. Sample content for the agentic Panel: an investigation report
 * that needs approval. The content belongs to the screen, not to the Panel.
 */
export const ApprovalReport = () => (
	<div className='approval-report'>
		<header className='approval-report__header'>
			<AgentAvatar iconName='zappy' label='Zappy' size='m' />
			<div className='approval-report__title'>
				<h3 className='pds-heading-l'>
					Needs approval: Zappy investigated an error and found a fix
				</h3>
				<p className='approval-report__meta pds-copy-xs'>
					<Icon iconName='clock' size='s' />
					Investigation started at Sep 22, 2026, 9:14 AM PT by Chris Yates
				</p>
			</div>
		</header>
		<hr className='approval-report__rule' />
		<Panel padding='condensed' variant='sunken'>
			<p className='approval-report__eyebrow pds-overline-s'>
				What Zappy investigated
			</p>
			<p className='approval-report__error'>
				Error: Upstream updates could not be applied
			</p>
			<p className='pds-copy-xs'>
				The upstream updates could not be applied to your site. Zappy can
				investigate the failure, work out a fix, and confirm the site builds
				before anything is proposed to you.
			</p>
		</Panel>
		<section className='approval-report__section'>
			<h4 className='pds-heading-m'>Root cause</h4>
			<p className='approval-report__text pds-copy-s'>
				The upstream update bumped the drupal/pathauto constraint, and the merge
				left the site pinned to the old version. Composer can’t resolve the
				updated dependency tree against that stale constraint, so the build
				stops before any packages are installed. Bumping the constraint to the
				upstream version (^1.13) resolves the conflict, and the full build
				passes.
			</p>
		</section>
		<section className='approval-report__section'>
			<h4 className='pds-heading-m'>Proposed fix</h4>
			<CodeDiff files={FILES} />
		</section>
		<ul className='approval-report__checks'>
			<li>
				<Icon iconName='circleCheck' size='s' />
				Fix verified — Zappy applied it in an isolated sandbox and ran the full
				build, and it passed.
			</li>
			<li>
				<Icon iconName='circleCheck' size='s' />
				Nothing has touched your site yet. The sandbox was discarded — this fix
				lands only if you approve.
			</li>
		</ul>
		<div className='approval-report__actions'>
			<Button
				displayType='icon-start'
				iconName='zappy'
				isAgentic
				label='Approve and apply to Dev'
			/>
			<Button label='Discard investigation' variant='secondary' />
		</div>
	</div>
);