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

export const AccountHeader = 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: '24px 28px',
	display: 'flex',
	alignItems: 'center',
	gap: 18,
});

export const AccountAvatar = styled('div')({
	width: 58,
	height: 58,
	borderRadius: '50%',
	background: 'linear-gradient(135deg, var(--store-primary), color-mix(in srgb, var(--store-primary) 72%, var(--store-secondary)))',
	color: '#fff',
	display: 'grid',
	placeItems: 'center',
	fontWeight: 900,
	fontSize: 22,
	flexShrink: 0,
	boxShadow: '0 8px 20px color-mix(in srgb, var(--store-primary) 24%, transparent)',
});

export const AccountHeaderInfo = styled('div')({
	flex: 1,
	minWidth: 0,
	'& strong': {
		display: 'block',
		fontSize: 18,
		fontWeight: 900,
		color: 'var(--store-text)',
		overflow: 'hidden',
		textOverflow: 'ellipsis',
		whiteSpace: 'nowrap',
	},
	'& span': {
		display: 'block',
		fontSize: 13,
		fontWeight: 700,
		color: 'var(--store-muted)',
		marginTop: 2,
	},
});

export const AccountTabs = styled('div')({
	display: 'flex',
	gap: 6,
	padding: '4px',
	background: 'rgba(20,33,31,0.05)',
	borderRadius: 12,
	width: 'fit-content',
});

export const AccountTab = styled('button')<{ $active?: boolean }>(({ $active }) => ({
	height: 38,
	padding: '0 20px',
	border: 'none',
	borderRadius: 9,
	background: $active ? '#fff' : 'transparent',
	color: $active ? 'var(--store-primary)' : 'var(--store-muted)',
	fontWeight: 900,
	fontSize: 13,
	fontFamily: 'inherit',
	cursor: 'pointer',
	display: 'inline-flex',
	alignItems: 'center',
	gap: 7,
	transition: 'all 180ms',
	boxShadow: $active ? '0 2px 8px rgba(15,23,42,0.09)' : 'none',
}));

export const AccountPanel = 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',
	display: 'flex',
	flexDirection: 'column',
	gap: 18,
});

export const ProfileField = styled('div')({
	display: 'flex',
	flexDirection: 'column',
	gap: 6,
	'& label': {
		fontSize: 12,
		fontWeight: 800,
		letterSpacing: '0.06em',
		textTransform: 'uppercase',
		color: 'var(--store-muted)',
	},
	'& input': {
		height: 46,
		padding: '0 14px',
		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)',
		},
		'&:read-only': {
			opacity: 0.55,
			cursor: 'not-allowed',
			background: 'rgba(20,33,31,0.03)',
		},
	},
});

export const ProfileGrid = styled('div')(({ theme }) => ({
	display: 'grid',
	gridTemplateColumns: '1fr 1fr',
	gap: 16,
	[theme.breakpoints.down('sm')]: {
		gridTemplateColumns: '1fr',
	},
}));

export const ProfileSaveRow = styled('div')({
	display: 'flex',
	alignItems: 'center',
	gap: 14,
	paddingTop: 4,
});

export const SaveBtn = styled('button')({
	height: 44,
	padding: '0 24px',
	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: 7,
	boxShadow: '0 8px 20px color-mix(in srgb, var(--store-primary) 28%, transparent)',
	transition: 'transform 180ms, box-shadow 180ms',
	'&:hover': {
		transform: 'translateY(-1px)',
		boxShadow: '0 12px 28px color-mix(in srgb, var(--store-primary) 36%, transparent)',
	},
	'&:disabled': { opacity: 0.55, cursor: 'not-allowed', transform: 'none' },
});

export const SavedMsg = styled('span')({
	color: 'var(--store-success)',
	fontWeight: 800,
	fontSize: 13,
	display: 'inline-flex',
	alignItems: 'center',
	gap: 5,
});

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

export const OrderHistoryItem = styled('div')({
	border: '1px solid rgba(20,33,31,0.09)',
	borderRadius: 12,
	overflow: 'hidden',
});

export const OrderHistoryHeader = styled('div')({
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'space-between',
	gap: 12,
	padding: '14px 18px',
	background: 'rgba(20,33,31,0.02)',
	borderBottom: '1px solid rgba(20,33,31,0.07)',
	'& .code': {
		fontSize: 14,
		fontWeight: 900,
		color: 'var(--store-text)',
	},
	'& .date': {
		fontSize: 12,
		fontWeight: 700,
		color: 'var(--store-muted)',
	},
});

export const OrderHistoryBadge = styled('span')<{ $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: '#f1f5f9', text: '#475569' };
	return {
		padding: '3px 10px',
		borderRadius: 999,
		background: c.bg,
		color: c.text,
		fontSize: 12,
		fontWeight: 800,
		whiteSpace: 'nowrap',
	};
});

export const OrderHistoryBody = styled('div')({
	padding: '14px 18px',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'space-between',
	gap: 12,
	'& .summary': {
		fontSize: 13,
		fontWeight: 700,
		color: 'var(--store-muted)',
	},
	'& .total': {
		fontSize: 15,
		fontWeight: 900,
		color: 'var(--store-primary)',
		whiteSpace: 'nowrap',
	},
});

export const OrdersTableWrap = styled('div')({
	overflowX: 'auto',
});

export const OrdersTable = styled('table')({
	width: '100%',
	borderCollapse: 'collapse',
	fontSize: 13,
	minWidth: 540,
	'& thead tr': {
		borderBottom: '2px solid rgba(20,33,31,0.08)',
	},
	'& thead th': {
		padding: '14px 16px',
		fontSize: 11,
		fontWeight: 800,
		letterSpacing: '0.06em',
		textTransform: 'uppercase',
		color: 'var(--store-muted)',
		textAlign: 'left',
		background: 'rgba(20,33,31,0.02)',
		whiteSpace: 'nowrap',
	},
	'& thead th.num': { textAlign: 'right' },
	'& tbody tr': {
		borderBottom: '1px solid rgba(20,33,31,0.06)',
		transition: 'background 180ms',
		'&:last-child': { borderBottom: 'none' },
		'&:hover': { background: 'rgba(20,33,31,0.025)' },
	},
	'& tbody td': {
		padding: '12px 16px',
		verticalAlign: 'middle',
	},
	'& td.num': { textAlign: 'right', whiteSpace: 'nowrap' },
	'& .code-cell': {
		fontWeight: 900,
		color: 'var(--store-text)',
		whiteSpace: 'nowrap',
	},
	'& .date-cell': {
		color: 'var(--store-muted)',
		fontWeight: 700,
		whiteSpace: 'nowrap',
	},
	'& .summary-cell': { color: 'var(--store-muted)', fontWeight: 600 },
	'& .total-cell': {
		fontWeight: 900,
		color: 'var(--store-primary)',
		whiteSpace: 'nowrap',
	},
	'& .action-cell': { padding: '8px 16px' },
	'& .ver-btn': {
		height: 34,
		padding: '0 14px',
		border: '1.5px solid var(--store-primary)',
		borderRadius: 8,
		background: 'transparent',
		color: 'var(--store-primary)',
		fontWeight: 800,
		fontSize: 12,
		fontFamily: 'inherit',
		cursor: 'pointer',
		transition: 'background 180ms, color 180ms',
		whiteSpace: 'nowrap',
		'&:hover': { background: 'var(--store-primary)', color: '#fff' },
	},
});

export const PaginationRow = styled('div')({
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	gap: 12,
	padding: '14px 16px',
	borderTop: '1px solid rgba(20,33,31,0.07)',
	'& span': {
		fontSize: 13,
		fontWeight: 700,
		color: 'var(--store-muted)',
		minWidth: 120,
		textAlign: 'center',
	},
	'& button': {
		width: 34,
		height: 34,
		border: '1px solid rgba(20,33,31,0.14)',
		borderRadius: 8,
		background: 'transparent',
		color: 'var(--store-text)',
		cursor: 'pointer',
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'center',
		transition: 'border-color 180ms, color 180ms',
		'&:hover:not(:disabled)': {
			borderColor: 'var(--store-primary)',
			color: 'var(--store-primary)',
		},
		'&:disabled': { opacity: 0.35, cursor: 'not-allowed' },
	},
});

export const OrderDetailDialog = styled('div')({
	position: 'fixed',
	inset: 0,
	zIndex: 1400,
	background: 'rgba(15,23,42,0.55)',
	backdropFilter: 'blur(2px)',
	overflowY: 'auto',
});

export const OrderDetailPanel = styled('div')({
	background: '#fff',
	borderRadius: 20,
	width: 'calc(100% - 32px)',
	maxWidth: 700,
	margin: '40px auto',
	overflow: 'hidden',
	boxShadow: '0 24px 60px rgba(15,23,42,0.22)',
});

export const EmptyOrders = styled('div')({
	textAlign: 'center',
	padding: '48px 24px',
	'& svg': {
		fontSize: 52,
		color: 'rgba(20,33,31,0.18)',
		display: 'block',
		margin: '0 auto 16px',
	},
	'& h3': {
		margin: '0 0 8px',
		fontSize: 17,
		fontWeight: 900,
		color: 'var(--store-text)',
	},
	'& p': {
		margin: 0,
		fontSize: 13,
		fontWeight: 700,
		color: 'var(--store-muted)',
	},
});

export const LogoutBtn = styled('button')({
	marginLeft: 'auto',
	height: 38,
	padding: '0 16px',
	border: '1px solid rgba(20,33,31,0.14)',
	borderRadius: 10,
	background: 'transparent',
	color: 'var(--store-muted)',
	fontWeight: 800,
	fontSize: 13,
	fontFamily: 'inherit',
	cursor: 'pointer',
	display: 'inline-flex',
	alignItems: 'center',
	gap: 6,
	transition: 'color 180ms, border-color 180ms',
	'&:hover': {
		color: 'var(--store-danger)',
		borderColor: 'var(--store-danger)',
	},
});