import { vars } from '@luke-ui/react/theme';
import { globalStyle, style } from '@vanilla-extract/css';

export const root = style({
	'@layer': {
		components: {
			backgroundColor: vars.color.surface.subdued,
			borderColor: vars.color.border.decorative,
			borderRadius: vars.radius.surface,
			borderStyle: 'solid',
			borderWidth: '1px',
			color: vars.color.text.primary,
			display: 'flex',
			flexDirection: 'column',
			fontFamily: vars.font.family.code,
			fontSize: vars.font.caption.fontSize,
			lineHeight: vars.font.caption.lineHeight,
			maxInlineSize: '100%',
			overflow: 'hidden',
			position: 'relative',
		},
	},
});

/**
 * Vertical rhythm for code blocks in MDX flow. A `not-prose` root gets no Prose margin, so the
 * block supplies its own; a parent Stack/Cluster owns spacing elsewhere.
 */
export const mdxFence = style({
	'@layer': {
		components: {
			marginBlockStart: vars.space.sp32,
		},
	},
});

export const flush = style({
	'@layer': {
		components: {
			borderInlineWidth: 0,
			borderRadius: 'inherit',
			borderBlockEndWidth: 0,
			overflow: 'visible',
		},
	},
});

export const header = style({
	'@layer': {
		components: {
			alignItems: 'center',
			borderBlockEndColor: vars.color.border.decorative,
			borderBlockEndStyle: 'solid',
			borderBlockEndWidth: '1px',
			display: 'flex',
			gap: vars.space.sp8,
			minBlockSize: vars.controlSize.medium,
			paddingBlock: vars.space.sp4,
			paddingInline: vars.space.sp12,
		},
	},
});

export const title = style({
	'@layer': {
		components: {
			color: vars.color.text.secondary,
			flex: '1 1 auto',
			fontFamily: vars.font.family.body,
			fontSize: vars.font.label.fontSize,
			lineHeight: vars.font.label.lineHeight,
			minInlineSize: 0,
			overflow: 'hidden',
			textOverflow: 'ellipsis',
			whiteSpace: 'nowrap',
		},
	},
});

export const actions = style({
	'@layer': {
		components: {
			alignItems: 'center',
			display: 'flex',
			flexShrink: 0,
			gap: vars.space.sp4,
			marginInlineStart: 'auto',
		},
	},
});

/**
 * Titleless copy overlays the full-width scrollport (no side column).
 * Block offset centres the control on the first code line (viewport pad + half line − half control).
 */
export const overlayActions = style({
	'@layer': {
		components: {
			backgroundColor: vars.color.surface.subdued,
			insetBlockStart: `calc(${vars.space.sp12} + (${vars.font.caption.lineHeight} / 2) - (${vars.controlSize.small} / 2))`,
			insetInlineEnd: vars.space.sp8,
			position: 'absolute',
			zIndex: 1,
		},
	},
});

export const viewport = style({
	'@layer': {
		components: {
			minInlineSize: 0,
			paddingBlock: vars.space.sp12,
			paddingInline: vars.space.sp16,
			selectors: {
				// The figure (and flush example parents) clip overflow, so inset the global ring.
				'&:focus-visible': {
					outlineOffset: '-2px',
				},
			},
		},
	},
});

/**
 * Clear the overlay copy without a side column. Padding stays on the full-width
 * scrollport so the recessed surface continues under the button.
 */
export const viewportWithOverlayCopy = style({
	'@layer': {
		components: {
			paddingInlineEnd: vars.space.sp48,
		},
	},
});

export const pre = style({
	'@layer': {
		components: {
			// max-content so long lines widen the scrollport; min 100% so short blocks fill the frame.
			inlineSize: 'max-content',
			margin: 0,
			minInlineSize: '100%',
			overflow: 'visible',
			whiteSpace: 'pre',
		},
	},
});

globalStyle(`${pre} code`, {
	'@layer': {
		components: {
			// Reset inline-code chrome so highlighted lines do not look like inline `code`.
			backgroundColor: 'transparent',
			borderRadius: 0,
			borderWidth: 0,
			display: 'flex',
			flexDirection: 'column',
			fontFamily: 'inherit',
			fontSize: 'inherit',
			lineHeight: 'inherit',
			padding: 0,
		},
	},
});

// Empty lines are flex items and collapse to zero height without a minimum.
globalStyle(`${pre} code .line`, {
	'@layer': {
		components: {
			minBlockSize: vars.font.caption.lineHeight,
		},
	},
});

// Dual-theme Shiki spans: light-dark picks the active colour mode.
globalStyle(`${pre} :is(.shiki, code) span`, {
	'@layer': {
		components: {
			color: 'light-dark(var(--shiki-light), var(--shiki-dark))',
		},
	},
});