import { Link } from '@tanstack/react-router'
import { type ReactNode, useState } from 'react'

interface WebPreviewProps {
	workflow: string
	task: string
	children: ReactNode
}

export function WebPreview({ workflow, task, children }: WebPreviewProps) {
	const [showHeader] = useState(() => !window.location.hash.includes('header=false'))

	return (
		<div style={styles.wrapper}>
			{showHeader && (
				<nav style={styles.nav}>
					<Link to="/" style={styles.backLink}>
						&larr; All workflows
					</Link>
					<span style={styles.breadcrumb}>
						{workflow} / web / {task}
					</span>
				</nav>
			)}
			<div style={styles.container}>
				<div style={styles.phone}>{children}</div>
			</div>
		</div>
	)
}

const styles = {
	wrapper: {
		minHeight: '100vh',
		backgroundColor: '#fdfcfd',
	} satisfies React.CSSProperties,

	nav: {
		display: 'flex',
		alignItems: 'center',
		gap: '1rem',
		padding: '0.75rem 1.5rem',
		borderBottom: '1px solid #e2e8f0',
		backgroundColor: '#fff',
	} satisfies React.CSSProperties,

	backLink: {
		fontSize: '0.84rem',
		color: '#0d9488',
		textDecoration: 'none',
		fontWeight: 500,
	} satisfies React.CSSProperties,

	breadcrumb: {
		fontSize: '0.75rem',
		color: '#829ab1',
		fontFamily: '"Geist Mono", monospace',
	} satisfies React.CSSProperties,

	container: {
		display: 'flex',
		justifyContent: 'center',
		padding: '2rem',
	} satisfies React.CSSProperties,

	phone: {
		width: 420,
		minHeight: 400,
		padding: '1.5rem',
		borderRadius: 12,
		border: '1px solid #e2e8f0',
		backgroundColor: '#fff',
		boxShadow: '0 4px 24px rgba(0,0,0,0.06)',
	} satisfies React.CSSProperties,
}
