import { styled } from '@mui/material/styles';
import Alert from '@mui/material/Alert';
import Drawer from '@mui/material/Drawer';

export const CheckoutPage = styled('section')({
	display: 'grid',
	gap: 18
});

export const CheckoutAccessGate = styled('section')({
	display: 'grid',
	gap: 18,
	padding: 'clamp(18px, 4vw, 42px)',
	borderRadius: 18,
	background: 'var(--store-surface)',
	border: '1px solid rgba(20, 33, 31, 0.08)',
	boxShadow: '0 18px 48px rgba(15, 23, 42, 0.08)'
});

export const CheckoutAccessHero = styled('div')({
	display: 'grid',
	justifyItems: 'start',
	gap: 10,
	'& h1': {
		fontWeight: 950,
		letterSpacing: 0
	},
	'& p': {
		maxWidth: 720,
		margin: 0,
		color: 'var(--store-muted)',
		fontSize: 15,
		lineHeight: 1.55
	}
});

export const CheckoutAccessOptions = styled('div')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
	gap: 14,
	[theme.breakpoints.down('md')]: {
		gridTemplateColumns: '1fr'
	}
}));

export const CheckoutAccessCard = styled('button')({
	display: 'grid',
	justifyItems: 'start',
	gap: 10,
	minHeight: 166,
	padding: 18,
	borderRadius: 16,
	border: '1px solid color-mix(in srgb, var(--store-primary) 14%, rgba(255, 255, 255, 0.8))',
	background:
		'linear-gradient(135deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--store-background) 88%, #ffffff))',
	color: 'var(--store-text)',
	textAlign: 'left',
	cursor: 'pointer',
	boxShadow: '0 14px 30px rgba(15, 23, 42, 0.06)',
	transition: 'transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease',
	'& svg': {
		width: 42,
		height: 42,
		padding: 9,
		borderRadius: 14,
		background: 'color-mix(in srgb, var(--store-primary) 10%, #ffffff)',
		color: 'var(--store-primary)'
	},
	'& strong': {
		fontSize: 17,
		fontWeight: 'var(--store-label-weight)' as unknown as number
	},
	'& span': {
		color: 'var(--store-muted)',
		fontSize: 13,
		lineHeight: 1.45,
		fontWeight: 'var(--store-body-weight)' as unknown as number
	},
	'&:hover': {
		transform: 'translateY(-3px)',
		borderColor: 'color-mix(in srgb, var(--store-primary) 34%, rgba(255, 255, 255, 0.9))',
		boxShadow: '0 22px 42px rgba(15, 23, 42, 0.11)'
	}
});

// `$steps`: en el checkout por pasos se muestra un grupo de paneles por vez, así que
// las dos columnas quedarían una vacía. Se colapsa a una sola y se centra.
export const CheckoutWorkLayout = styled('section', {
	shouldForwardProp: (prop) => prop !== '$steps'
})<{ $steps?: boolean }>(({ theme, $steps }) => ({
	display: 'grid',
	gridTemplateColumns: $steps ? 'minmax(0, 720px)' : 'minmax(300px, 0.42fr) minmax(0, 1fr)',
	justifyContent: $steps ? 'center' : undefined,
	gap: 22,
	alignItems: 'start',
	[theme.breakpoints.down('lg')]: {
		gridTemplateColumns: '1fr'
	}
}));

export const CheckoutStepper = styled('ol')(({ theme }) => ({
	display: 'flex',
	alignItems: 'center',
	gap: 10,
	listStyle: 'none',
	margin: '0 0 18px',
	padding: 0,
	'& li': {
		display: 'flex',
		alignItems: 'center',
		gap: 8,
		fontSize: 13,
		fontWeight: 600,
		color: theme.palette.text.disabled
	},
	'& li[data-active="true"]': { color: 'var(--store-primary)' },
	'& li[data-done="true"]': { color: theme.palette.text.secondary },
	'& .step-dot': {
		width: 24,
		height: 24,
		borderRadius: '50%',
		display: 'grid',
		placeItems: 'center',
		fontSize: 12,
		fontWeight: 700,
		border: '1.5px solid currentColor'
	},
	'& li[data-active="true"] .step-dot': { background: 'var(--store-primary)', color: '#fff', borderColor: 'transparent' },
	'& .step-sep': { flex: '0 0 18px', height: 1.5, background: 'currentColor', opacity: 0.35 }
}));

export const CheckoutStepNav = styled('div')({
	display: 'flex',
	justifyContent: 'space-between',
	gap: 12,
	marginTop: 6
});

export const CheckoutLeftColumn = styled('div')({
	display: 'grid',
	gap: 18
});

export const CheckoutRightColumn = styled('div')({
	display: 'grid',
	gap: 18,
	minWidth: 0
});

export const CheckoutMethodGrid = styled('div')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
	gap: 18,
	[theme.breakpoints.down('md')]: {
		gridTemplateColumns: '1fr'
	}
}));

export const CheckoutPanel = styled('section')({
	display: 'grid',
	gap: 14,
	padding: 16,
	borderRadius: 10,
	background: 'var(--store-surface)',
	border: '1px solid rgba(20, 33, 31, 0.08)',
	boxShadow: '0 12px 28px rgba(15, 23, 42, 0.05)'
});

export const CheckoutSectionTitle = styled('h2')({
	display: 'flex',
	alignItems: 'center',
	gap: 10,
	margin: 0,
	color: 'var(--store-text)',
	fontSize: 18,
	fontWeight: 'var(--store-label-weight)' as unknown as number,
	'& span': {
		width: 30,
		height: 30,
		display: 'grid',
		placeItems: 'center',
		borderRadius: 999,
		background: 'var(--store-primary)',
		color: '#fff',
		fontSize: 13,
		fontWeight: 'var(--store-label-weight)' as unknown as number
	}
});

export const CheckoutFields = styled('div')({
	display: 'grid',
	gridTemplateColumns: '1fr',
	gap: 12,
	'& .MuiOutlinedInput-root': {
		borderRadius: 12,
		background: '#fff'
	}
});

export const CheckoutSessionNote = styled('p')({
	margin: 0,
	padding: '9px 11px',
	borderRadius: 10,
	background: 'color-mix(in srgb, var(--store-primary) 8%, #ffffff)',
	color: 'var(--store-muted)',
	fontSize: 13,
	fontWeight: 'var(--store-body-weight)' as unknown as number,
	'& strong': {
		color: 'var(--store-primary)',
		fontWeight: 'var(--store-label-weight)' as unknown as number
	}
});

export const CheckoutChoiceList = styled('div')({
	display: 'grid',
	gap: 10
});

export const CheckoutRadioRow = styled('label')({
	display: 'grid',
	gridTemplateColumns: '22px minmax(0, 1fr)',
	gap: 10,
	alignItems: 'start',
	padding: 12,
	// Toda la tarjeta es tocable (es un <label>); el radio se agranda para que se vea
	// cuál está elegido y la fila llega a 48 px de alto en celular.
	minHeight: 48,
	borderRadius: 12,
	border: '1px solid rgba(20, 33, 31, 0.1)',
	background: 'color-mix(in srgb, var(--store-background) 45%, #ffffff)',
	cursor: 'pointer',
	'& input': {
		width: 20,
		height: 20,
		margin: '1px 0 0',
		accentColor: 'var(--store-primary)'
	},
	'& span': {
		display: 'grid',
		gap: 3
	},
	'& strong': {
		color: 'var(--store-text)',
		fontSize: 14,
		fontWeight: 'var(--store-label-weight)' as unknown as number
	},
	'& small': {
		color: 'var(--store-muted)',
		fontSize: 12,
		fontWeight: 'var(--store-body-weight)' as unknown as number
	}
});

export const PaymentBox = styled('div')({
	display: 'grid',
	gridTemplateColumns: '42px minmax(0, 1fr) 32px',
	gap: 12,
	alignItems: 'center',
	padding: 14,
	borderRadius: 16,
	background: 'color-mix(in srgb, var(--store-primary) 8%, #ffffff)',
	border: '1px solid color-mix(in srgb, var(--store-primary) 18%, transparent)',
	'& svg': {
		color: 'var(--store-primary)'
	},
	'& strong': {
		display: 'block',
		color: 'var(--store-text)',
		fontWeight: 'var(--store-label-weight)' as unknown as number
	},
	'& span': {
		color: 'var(--store-muted)',
		fontSize: 13,
		lineHeight: 1.4,
		fontWeight: 'var(--store-body-weight)' as unknown as number
	}
});

export const CheckoutCartTable = styled('div')({
	display: 'grid',
	border: '1px solid rgba(20, 33, 31, 0.1)',
	borderRadius: 10,
	overflow: 'hidden'
});

export const CheckoutCartHead = styled('div')({
	display: 'grid',
	gridTemplateColumns: '82px minmax(180px, 1fr) 150px 120px 120px',
	gap: 0,
	background: 'color-mix(in srgb, var(--store-background) 72%, #ffffff)',
	borderBottom: '1px solid rgba(20, 33, 31, 0.1)',
	'& span': {
		padding: '11px 10px',
		color: 'var(--store-text)',
		fontSize: 12,
		fontWeight: 'var(--store-label-weight)' as unknown as number
	},
	'@media (max-width: 860px)': {
		display: 'none'
	}
});

export const CheckoutCartRow = styled('div')({
	display: 'grid',
	gridTemplateColumns: '82px minmax(180px, 1fr) 150px 120px 120px',
	gap: 0,
	alignItems: 'center',
	borderBottom: '1px solid rgba(20, 33, 31, 0.08)',
	'& > *': {
		padding: 10
	},
	'& img': {
		width: 54,
		height: 54,
		objectFit: 'cover',
		borderRadius: 8,
		justifySelf: 'center',
		border: '1px solid rgba(20, 33, 31, 0.08)'
	},
	'& strong': {
		color: 'var(--store-text)',
		fontSize: 13,
		fontWeight: 'var(--store-label-weight)' as unknown as number
	},
	'& > span': {
		color: 'var(--store-muted)',
		fontSize: 13,
		fontWeight: 'var(--store-body-weight)' as unknown as number,
		textAlign: 'right'
	},
	'& b': {
		color: 'var(--store-primary)',
		fontSize: 13,
		textAlign: 'right'
	},
	'@media (max-width: 860px)': {
		gridTemplateColumns: '64px minmax(0, 1fr)',
		gap: 10,
		padding: 12,
		'& > *': {
			padding: 0
		},
		'& .MuiIconButton-root': {
			width: 28,
			height: 28
		},
		'& > span, & b': {
			gridColumn: '2',
			textAlign: 'left'
		}
	}
});

export const CheckoutOrderTotals = styled('div')({
	display: 'grid',
	justifyItems: 'end',
	background: '#fff',
	'& div': {
		width: 'min(340px, 100%)',
		display: 'flex',
		justifyContent: 'space-between',
		gap: 14,
		padding: '10px 12px',
		borderBottom: '1px solid rgba(20, 33, 31, 0.08)'
	},
	'& span': {
		color: 'var(--store-muted)',
		fontSize: 13,
		fontWeight: 'var(--store-body-weight)' as unknown as number
	},
	'& strong': {
		color: 'var(--store-text)',
		fontWeight: 'var(--store-label-weight)' as unknown as number
	},
	'& div:last-child strong': {
		color: 'var(--store-primary)',
		fontSize: 20
	}
});

export const TermsCheck = styled('label')({
	display: 'grid',
	gridTemplateColumns: '22px minmax(0, 1fr)',
	gap: 10,
	alignItems: 'start',
	// El checkbox de 13 px era difícil de acertar con el dedo; el área tocable es toda
	// la fila y la caja pasa a 20 px.
	padding: '10px 0',
	color: 'var(--store-muted)',
	fontSize: 12,
	fontWeight: 'var(--store-body-weight)' as unknown as number,
	lineHeight: 1.35,
	cursor: 'pointer',
	'& input': {
		width: 20,
		height: 20,
		margin: 0,
		accentColor: 'var(--store-primary)'
	},
	'& span button': {
		background: 'none',
		border: 'none',
		padding: 0,
		color: 'var(--store-primary)',
		fontSize: 'inherit',
		fontWeight: 600,
		cursor: 'pointer',
		textDecoration: 'underline',
		textUnderlineOffset: 2,
	}
});

export const CheckoutConfirmActions = styled('div')(({ theme }) => ({
	display: 'flex',
	justifyContent: 'flex-end',
	gap: 12,
	[theme.breakpoints.down('sm')]: {
		flexDirection: 'column-reverse',
		'& .MuiButton-root': {
			width: '100%'
		}
	}
}));

export const CheckoutSuccess = styled('section')({
	display: 'grid',
	justifyItems: 'center',
	gap: 14,
	padding: '54px clamp(18px, 5vw, 72px)',
	borderRadius: 20,
	background: 'var(--store-surface)',
	border: '1px solid rgba(20, 33, 31, 0.08)',
	boxShadow: '0 18px 48px rgba(15, 23, 42, 0.08)',
	textAlign: 'center',
	'& > svg': {
		fontSize: 64,
		color: 'var(--store-success)'
	},
	'& h1': {
		fontWeight: 950
	},
	'& p': {
		maxWidth: 620,
		margin: 0,
		color: 'var(--store-muted)',
		fontSize: 15,
		lineHeight: 1.55
	}
});

export const CheckoutSuccessActions = styled('div')(({ theme }) => ({
	display: 'flex',
	gap: 12,
	marginTop: 8,
	[theme.breakpoints.down('sm')]: {
		width: '100%',
		flexDirection: 'column'
	}
}));

export const CartDrawer = styled(Drawer)({
	'& .MuiDrawer-paper': {
		width: 'min(420px, 100vw)',
		display: 'grid',
		gridTemplateRows: 'auto 1fr auto'
	}
});

export const CartToast = styled(Alert)({
	width: 'min(420px, calc(100vw - 32px))',
	borderRadius: 14,
	background:
		'linear-gradient(135deg, var(--store-text), color-mix(in srgb, var(--store-text) 82%, var(--store-primary)))',
	boxShadow: '0 20px 48px rgba(15, 23, 42, 0.24)',
	'& .MuiAlert-message': {
		width: '100%',
		padding: '4px 0'
	},
	'& .MuiAlert-action': {
		alignItems: 'center',
		paddingTop: 0
	}
});

/**
 * El nombre del producto iba suelto en el toast: uno largo lo estiraba a varias
 * líneas y tapaba media pantalla. Se recorta a dos líneas.
 */
export const CartToastName = styled('span')({
	display: '-webkit-box',
	WebkitLineClamp: 2,
	WebkitBoxOrient: 'vertical',
	overflow: 'hidden'
});

export const CartToastContent = styled('span')({
	display: 'grid',
	gridTemplateColumns: '54px minmax(0, 1fr)',
	gap: 12,
	alignItems: 'center',
	color: '#fff',
	'& img': {
		width: 54,
		height: 54,
		objectFit: 'cover',
		borderRadius: 10,
		border: '1px solid rgba(255, 255, 255, 0.18)'
	},
	'& span': {
		display: 'grid',
		gap: 3,
		minWidth: 0,
		fontSize: 13,
		lineHeight: 1.35
	},
	'& strong': {
		display: 'block',
		color: '#fff',
		fontSize: 14,
		fontWeight: 950
	}
});

export const CartHeader = styled('div')({
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'space-between',
	gap: 12,
	padding: 18,
	borderBottom: '1px solid rgba(20, 33, 31, 0.1)',
	'& .MuiIconButton-root': {
		width: 40,
		height: 40,
		borderRadius: 999,
		border: '1px solid color-mix(in srgb, var(--store-primary) 16%, rgba(255, 255, 255, 0.8))',
		background: '#fff',
		color: 'var(--store-text)',
		boxShadow: '0 10px 22px rgba(15, 23, 42, 0.07)',
		transition: 'transform 180ms ease, color 180ms ease, box-shadow 180ms ease'
	},
	'& .MuiIconButton-root:hover': {
		transform: 'translateY(-2px) scale(1.04)',
		color: 'var(--store-danger)',
		boxShadow: '0 16px 30px rgba(15, 23, 42, 0.12)'
	}
});

export const CartList = styled('div')({
	overflow: 'auto',
	padding: 16,
	display: 'grid',
	alignContent: 'start',
	gap: 12
});

export const CartLine = styled('div')({
	display: 'grid',
	gridTemplateColumns: '82px minmax(0, 1fr)',
	gap: 12,
	padding: 10,
	border: '1px solid rgba(20, 33, 31, 0.08)',
	borderRadius: 8,
	'& img': {
		width: 82,
		height: 82,
		objectFit: 'cover',
		borderRadius: 8
	},
	'& strong': {
		display: 'block',
		lineHeight: 1.25
	},
	'& span': {
		color: 'var(--store-muted)',
		fontSize: 13
	}
});

export const QtyControl = styled('div')({
	display: 'inline-flex',
	alignItems: 'center',
	// Como ítem directo de grid (CheckoutCartRow), sin esto el pill se estira al
	// ancho completo de la columna "Cantidad" (150px) en vez de ajustarse a su
	// contenido. justifySelf no afecta cuando no es hijo directo de grid (ej.
	// CartDrawerSection), así que es seguro en ambos usos.
	justifySelf: 'center',
	gap: 6,
	marginTop: 8,
	padding: 4,
	border: '1px solid color-mix(in srgb, var(--store-primary) 14%, rgba(255, 255, 255, 0.76))',
	borderRadius: 999,
	background:
		'linear-gradient(135deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--store-background) 88%, #ffffff))',
	boxShadow: '0 8px 18px rgba(15, 23, 42, 0.06)',
	'& .MuiIconButton-root': {
		width: 30,
		height: 30,
		borderRadius: 999,
		color: 'var(--store-primary)',
		transition: 'transform 160ms ease, background 160ms ease, color 160ms ease'
	},
	'& .MuiIconButton-root:hover': {
		transform: 'scale(1.06)',
		background: 'var(--store-primary)',
		color: '#fff'
	},
	'& span': {
		minWidth: 22,
		textAlign: 'center',
		color: 'var(--store-text)',
		fontWeight: 900
	}
});

export const EmptyCart = styled('div')({
	minHeight: 220,
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'center',
	justifyContent: 'center',
	gap: 8,
	color: 'var(--store-muted)',
	'& svg': {
		fontSize: 42
	}
});

export const CartSummary = styled('div')({
	display: 'grid',
	gap: 14,
	padding: 18,
	borderTop: '1px solid rgba(20, 33, 31, 0.1)',
	'& > div': {
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	'& strong': {
		fontSize: 20,
		color: 'var(--store-primary)'
	}
});

/**
 * Textarea propio para los comentarios del pedido.
 *
 * El `<TextField multiline>` de MUI no se puede usar acá: MUI fija
 * `height: 1.4375em` en `.MuiInputBase-input` y lo sobrescribe con `height: auto`
 * sólo en la variante multiline, pero con las capas de Tailwind ese override no
 * gana. La caja quedaba de una sola línea y el texto escrito se dibujaba fuera,
 * flotando por encima. Ni `rows` ni un `sx` con `!important` lo arreglaron.
 * Este es el mismo patrón que ya usa el formulario de contacto, que sí anda.
 */
export const CheckoutNotesField = styled('label')({
	display: 'grid',
	gap: 6,
	'& > span': {
		fontSize: 13,
		fontWeight: 'var(--store-label-weight)' as unknown as number,
		color: 'var(--store-muted)'
	},
	'& textarea': {
		width: '100%',
		minHeight: 96,
		padding: '10px 12px',
		border: '1px solid rgba(20, 33, 31, 0.23)',
		borderRadius: 12,
		background: '#fff',
		color: 'var(--store-text)',
		fontSize: 14,
		fontFamily: 'inherit',
		lineHeight: 1.45,
		resize: 'vertical',
		outline: 0,
		transition: 'border-color 160ms ease, box-shadow 160ms ease'
	},
	'& textarea:focus': {
		borderColor: 'var(--store-primary)',
		boxShadow: '0 0 0 3px color-mix(in srgb, var(--store-primary) 12%, transparent)'
	},
	'& > small': {
		justifySelf: 'end',
		fontSize: 12,
		color: 'var(--store-muted)'
	}
});