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

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 TrackingWrap = styled('div')({
	maxWidth: 760,
	margin: '0 auto',
	display: 'flex',
	flexDirection: 'column',
	gap: 24,
});

export const TrackingSearch = styled('div')({
	background: '#fff',
	borderRadius: 16,
	border: '1px solid rgba(20,33,31,0.09)',
	boxShadow: '0 12px 40px rgba(15,23,42,0.06)',
	padding: '28px 28px 24px',
	display: 'flex',
	flexDirection: 'column',
	gap: 8,
	'& h2': {
		margin: 0,
		fontSize: 20,
		fontWeight: 900,
		color: 'var(--store-text)',
	},
	'& p': {
		margin: 0,
		fontSize: 13,
		color: 'var(--store-muted)',
		fontWeight: 600,
	},
});

export const TrackingSearchRow = styled('div')({
	display: 'flex',
	gap: 10,
	marginTop: 8,
	'& input': {
		flex: 1,
		height: 46,
		padding: '0 16px',
		border: '1.5px solid rgba(20,33,31,0.14)',
		borderRadius: 10,
		fontSize: 14,
		fontWeight: 700,
		fontFamily: 'inherit',
		color: 'var(--store-text)',
		background: 'var(--store-background)',
		outline: 'none',
		transition: 'border-color 180ms',
		'&:focus': {
			borderColor: 'var(--store-primary)',
			boxShadow: '0 0 0 3px color-mix(in srgb, var(--store-primary) 14%, transparent)',
		},
		'&::placeholder': { color: 'var(--store-muted)', fontWeight: 600 },
	},
	'& button': {
		height: 46,
		padding: '0 22px',
		border: 'none',
		borderRadius: 10,
		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',
		display: 'inline-flex',
		alignItems: 'center',
		gap: 6,
		boxShadow: '0 8px 20px color-mix(in srgb, var(--store-primary) 28%, transparent)',
		transition: 'transform 180ms, box-shadow 180ms',
		whiteSpace: 'nowrap',
		'&:hover': {
			transform: 'translateY(-1px)',
			boxShadow: '0 12px 28px color-mix(in srgb, var(--store-primary) 36%, transparent)',
		},
		'&:disabled': { opacity: 0.6, cursor: 'not-allowed', transform: 'none' },
	},
});

export const TrackingError = styled('div')({
	padding: '14px 18px',
	borderRadius: 10,
	background: 'color-mix(in srgb, var(--store-danger) 8%, #fff)',
	border: '1px solid color-mix(in srgb, var(--store-danger) 22%, transparent)',
	color: 'var(--store-danger)',
	fontWeight: 700,
	fontSize: 13,
});

export const OrderCard = styled('div')({
	background: '#fff',
	borderRadius: 16,
	border: '1px solid rgba(20,33,31,0.09)',
	boxShadow: '0 12px 40px rgba(15,23,42,0.06)',
	overflow: 'hidden',
});

export const OrderStatusBanner = styled('div')<{ $estado: string }>(({ $estado }) => {
	const colorMap: Record<string, { bg: string; text: string }> = {
		pendiente_pago: { bg: '#fff7ed', text: '#c2410c' },
		pago_confirmado: { bg: '#eff6ff', text: '#1d4ed8' },
		en_verificacion: { bg: '#eff6ff', text: '#1d4ed8' },
		verificado: { bg: '#ecfdf5', text: '#0f766e' },
		preparando: { bg: '#faf5ff', text: '#7c3aed' },
		empaquetado: { bg: '#faf5ff', text: '#7c3aed' },
		listo_retiro: { bg: '#ecfeff', text: '#0e7490' },
		listo_despacho: { bg: '#ecfeff', text: '#0e7490' },
		en_camino: { bg: '#f0f9ff', text: '#0369a1' },
		retirado: { bg: '#f0fdf4', text: '#15803d' },
		pagado: { bg: '#eff6ff', text: '#1d4ed8' },
		en_preparacion: { bg: '#faf5ff', text: '#7c3aed' },
		enviado: { bg: '#ecfeff', text: '#0e7490' },
		entregado: { bg: '#f0fdf4', text: '#15803d' },
		cancelado: { bg: '#fff1f2', text: '#be123c' },
	};
	const c = colorMap[$estado] ?? { bg: '#f8fafc', text: '#475569' };
	return {
		background: c.bg,
		color: c.text,
		padding: '16px 24px',
		display: 'flex',
		alignItems: 'center',
		gap: 10,
		fontWeight: 900,
		fontSize: 15,
		'& svg': { fontSize: 22 },
	};
});

export const OrderStatusLabel: Record<string, string> = {
	pendiente_pago: 'Pendiente de pago',
	pago_confirmado: 'Pago confirmado',
	en_verificacion: 'En verificación',
	verificado: 'Verificado',
	preparando: 'En preparación',
	empaquetado: 'Empaquetado',
	listo_retiro: 'Listo para retiro',
	listo_despacho: 'Listo para despacho',
	en_camino: 'En camino',
	retirado: 'Retirado',
	pagado: 'Pago confirmado',
	en_preparacion: 'En preparación',
	enviado: 'Enviado',
	entregado: 'Entregado',
	cancelado: 'Cancelado',
};

export const OrderBody = styled('div')({
	padding: '20px 24px',
	display: 'flex',
	flexDirection: 'column',
	gap: 20,
});

export const OrderMeta = styled('div')({
	display: 'grid',
	gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
	gap: 16,
});

export const OrderMetaItem = styled('div')({
	'& label': {
		display: 'block',
		fontSize: 11,
		fontWeight: 800,
		letterSpacing: '0.06em',
		textTransform: 'uppercase',
		color: 'var(--store-muted)',
		marginBottom: 4,
	},
	'& span': {
		fontSize: 14,
		fontWeight: 800,
		color: 'var(--store-text)',
	},
});

export const OrderItemsList = styled('div')({
	paddingTop: 16,
	borderTop: '1px solid rgba(20,33,31,0.08)',
	'& h4': {
		margin: '0 0 12px',
		fontSize: 12,
		fontWeight: 800,
		letterSpacing: '0.06em',
		textTransform: 'uppercase',
		color: 'var(--store-muted)',
	},
});

export const OrderItemsTable = styled('table')({
	width: '100%',
	borderCollapse: 'collapse',
	fontSize: 13,
	'& thead tr': {
		borderBottom: '2px solid rgba(20,33,31,0.1)',
	},
	'& thead th': {
		padding: '6px 10px 10px',
		fontSize: 11,
		fontWeight: 800,
		letterSpacing: '0.06em',
		textTransform: 'uppercase',
		color: 'var(--store-muted)',
		textAlign: 'left',
		whiteSpace: 'nowrap',
	},
	'& thead th.num': { textAlign: 'right' },
	'& tbody tr': {
		borderBottom: '1px solid rgba(20,33,31,0.06)',
		'&:last-child': { borderBottom: 'none' },
	},
	'& tbody td': {
		padding: '12px 10px',
		verticalAlign: 'middle',
	},
	'& td.num': { textAlign: 'right', whiteSpace: 'nowrap' },
	'& .img-cell': { width: 56, paddingLeft: 0 },
	'& .name-cell': {
		fontWeight: 700,
		color: 'var(--store-text)',
		minWidth: 120,
	},
	'& .qty-cell': {
		textAlign: 'center',
		color: 'var(--store-muted)',
		fontWeight: 700,
		whiteSpace: 'nowrap',
	},
	'& .unit-cell': {
		color: 'var(--store-muted)',
		fontWeight: 600,
		textAlign: 'right',
		whiteSpace: 'nowrap',
	},
	'& .subtotal-cell': {
		fontWeight: 900,
		color: 'var(--store-primary)',
		textAlign: 'right',
		whiteSpace: 'nowrap',
		paddingRight: 0,
	},
});

export const OrderItemThumb = styled('div')({
	width: 44,
	height: 44,
	borderRadius: 8,
	overflow: 'hidden',
	background: 'color-mix(in srgb, var(--store-primary) 8%, #f8fafc)',
	display: 'grid',
	placeItems: 'center',
	flexShrink: 0,
	'& img': {
		width: '100%',
		height: '100%',
		objectFit: 'cover',
		display: 'block',
	},
});

// Keep for backward compat (unused after table refactor)
export const OrderItem = styled('div')({});

export const OrderTotals = styled('div')({
	paddingTop: 16,
	borderTop: '1px solid rgba(20,33,31,0.08)',
	display: 'flex',
	flexDirection: 'column',
	gap: 6,
	alignItems: 'flex-end',
	'& .row': {
		display: 'flex',
		gap: 24,
		justifyContent: 'flex-end',
		fontSize: 13,
		fontWeight: 700,
		color: 'var(--store-muted)',
	},
	'& .row.total': {
		fontSize: 16,
		fontWeight: 900,
		color: 'var(--store-text)',
	},
});

export const OrderDelivery = styled('div')({
	paddingTop: 16,
	borderTop: '1px solid rgba(20,33,31,0.08)',
	'& h4': {
		margin: '0 0 8px',
		fontSize: 12,
		fontWeight: 800,
		letterSpacing: '0.06em',
		textTransform: 'uppercase',
		color: 'var(--store-muted)',
	},
	'& p': {
		margin: 0,
		fontSize: 13,
		fontWeight: 700,
		color: 'var(--store-text)',
	},
});

export const OrderTimeline = styled('div')({
	paddingTop: 16,
	borderTop: '1px solid rgba(20,33,31,0.08)',
	'& h4': {
		margin: '0 0 12px',
		fontSize: 12,
		fontWeight: 800,
		letterSpacing: '0.06em',
		textTransform: 'uppercase',
		color: 'var(--store-muted)',
	},
	'& ol': {
		listStyle: 'none',
		margin: 0,
		padding: 0,
		display: 'grid',
		gap: 14,
	},
	'& li': {
		position: 'relative',
		paddingLeft: 22,
		fontSize: 13,
		color: 'var(--store-text)',
	},
	// Punto + línea que une los hitos; el último no continúa.
	'& li::before': {
		content: '""',
		position: 'absolute',
		left: 3,
		top: 4,
		width: 9,
		height: 9,
		borderRadius: '50%',
		background: 'var(--store-primary)',
	},
	'& li:not(:last-child)::after': {
		content: '""',
		position: 'absolute',
		left: 7,
		top: 15,
		bottom: -12,
		width: 1,
		background: 'rgba(20,33,31,0.14)',
	},
	'& li strong': {
		display: 'block',
		fontWeight: 700,
	},
	'& li span': {
		fontSize: 12,
		color: 'var(--store-muted)',
	},
});