import { styled } from '@mui/material/styles';
import { bannerHoverEffectStyles } from '../bannerEffects';

export const SectionBackBtn = styled('button')({
	display: 'inline-flex',
	alignItems: 'center',
	gap: 6,
	marginBottom: 4,
	padding: '6px 14px',
	border: '1px solid rgba(20,33,31,0.12)',
	borderRadius: 999,
	background: 'rgba(255,255,255,0.88)',
	color: 'var(--store-muted)',
	fontWeight: 800,
	fontSize: 13,
	fontFamily: 'inherit',
	cursor: 'pointer',
	transition: 'color 180ms, border-color 180ms',
	'&:hover': { color: 'var(--store-primary)', borderColor: 'var(--store-primary)' },
});

export const WishlistWrap = styled('div')({
	display: 'flex',
	flexDirection: 'column',
	gap: 24,
});

export const WishlistGrid = styled('div')({
	display: 'grid',
	gridTemplateColumns: 'repeat(var(--catalog-columns-desktop, 4), minmax(0, 1fr))',
	gap: 18,
	'@media (max-width: 1200px)': {
		gridTemplateColumns: 'repeat(var(--catalog-columns-tablet, 3), minmax(0, 1fr))',
	},
	'@media (max-width: 640px)': {
		gridTemplateColumns: 'repeat(var(--catalog-columns-mobile, 2), minmax(0, 1fr))',
	},
});

export const WishlistItemCard = styled('div')({
	position: 'relative',
	background: '#fff',
	borderRadius: 14,
	border: '1px solid rgba(20,33,31,0.08)',
	boxShadow: '0 8px 24px rgba(15,23,42,0.05)',
	overflow: 'hidden',
	display: 'flex',
	flexDirection: 'column',
	transition: 'transform 200ms, box-shadow 200ms',
	'&:hover': {
		transform: 'translateY(-3px)',
		boxShadow: '0 18px 40px rgba(15,23,42,0.1)',
	},
});

export const WishlistItemImage = styled('button')({
	border: 'none',
	padding: 0,
	background: 'none',
	cursor: 'pointer',
	display: 'block',
	width: '100%',
	aspectRatio: 'var(--catalog-image-ratio, 1)',
	overflow: 'hidden',
	...bannerHoverEffectStyles,
	'& img': {
		width: '100%',
		height: '100%',
		objectFit: 'cover',
		transition: 'transform 280ms',
	},
});

export const RemoveHeart = styled('button')({
	position: 'absolute',
	top: 10,
	right: 10,
	width: 34,
	height: 34,
	borderRadius: '50%',
	border: 'none',
	background: 'rgba(255,255,255,0.92)',
	color: 'var(--store-danger)',
	display: 'grid',
	placeItems: 'center',
	cursor: 'pointer',
	backdropFilter: 'blur(4px)',
	boxShadow: '0 4px 12px rgba(0,0,0,0.12)',
	transition: 'transform 180ms, background 180ms',
	'&:hover': {
		transform: 'scale(1.12)',
		background: 'color-mix(in srgb, var(--store-danger) 8%, #fff)',
	},
});

export const WishlistItemBody = styled('div')({
	padding: '12px 14px 14px',
	display: 'flex',
	flexDirection: 'column',
	gap: 4,
	flex: 1,
	'& .brand': {
		fontSize: 11,
		fontWeight: 800,
		color: 'var(--store-muted)',
		textTransform: 'uppercase',
		letterSpacing: '0.04em',
	},
	'& .name': {
		fontSize: 13,
		fontWeight: 900,
		color: 'var(--store-text)',
		lineHeight: 1.3,
		display: '-webkit-box',
		WebkitLineClamp: 2,
		WebkitBoxOrient: 'vertical',
		overflow: 'hidden',
	},
	'& .price': {
		fontSize: 'var(--store-price-size)',
		fontWeight: 900,
		color: 'var(--store-price-color)',
		marginTop: 4,
	},
});

export const AddToCartBtn = styled('button')({
	margin: '0 14px 14px',
	height: 40,
	border: 'none',
	borderRadius: 9,
	background: 'linear-gradient(135deg, var(--store-primary), color-mix(in srgb, var(--store-primary) 72%, var(--store-secondary)))',
	color: '#fff',
	fontWeight: 900,
	fontSize: 13,
	fontFamily: 'inherit',
	cursor: 'pointer',
	display: 'inline-flex',
	alignItems: 'center',
	justifyContent: 'center',
	gap: 6,
	transition: 'opacity 180ms, transform 180ms',
	boxShadow: '0 6px 16px color-mix(in srgb, var(--store-primary) 28%, transparent)',
	'&:hover': { opacity: 0.88, transform: 'translateY(-1px)' },
});

export const WishlistEmpty = styled('div')({
	textAlign: 'center',
	padding: '64px 24px',
	'& svg': {
		fontSize: 64,
		color: 'rgba(20,33,31,0.15)',
		display: 'block',
		margin: '0 auto 18px',
	},
	'& h3': {
		margin: '0 0 8px',
		fontSize: 20,
		fontWeight: 900,
		color: 'var(--store-text)',
	},
	'& p': {
		margin: '0 0 24px',
		fontSize: 14,
		fontWeight: 700,
		color: 'var(--store-muted)',
	},
});

export const CatalogBtn = styled('button')({
	height: 46,
	padding: '0 28px',
	border: 'none',
	borderRadius: 999,
	background: 'linear-gradient(135deg, var(--store-primary), color-mix(in srgb, var(--store-primary) 72%, var(--store-secondary)))',
	color: '#fff',
	fontWeight: 900,
	fontSize: 14,
	fontFamily: 'inherit',
	cursor: 'pointer',
	boxShadow: '0 10px 26px color-mix(in srgb, var(--store-primary) 28%, transparent)',
	transition: 'transform 180ms',
	'&:hover': { transform: 'translateY(-2px)' },
});

export const WishlistHeader = styled('div')({
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'space-between',
	gap: 12,
	'& h2': {
		margin: 0,
		fontSize: 20,
		fontWeight: 900,
		color: 'var(--store-text)',
	},
	'& span': {
		fontSize: 13,
		fontWeight: 700,
		color: 'var(--store-muted)',
	},
});