'use client';

import { useEffect, useState } from 'react';
import { styled } from '@mui/material/styles';

type Stage = 'covering' | 'opening' | 'done';

const CurtainRoot = styled('div', {
	shouldForwardProp: (p) => p !== 'stage'
})<{ stage: Stage }>(({ stage }) => ({
	position: 'fixed',
	inset: 0,
	zIndex: 9999,
	display: 'flex',
	overflow: 'hidden',
	pointerEvents: stage === 'done' ? 'none' : 'all',
	animation: 'storeCurtainFailsafe 1200ms ease forwards',
	'@keyframes storeCurtainFailsafe': {
		'0%, 94%': {
			opacity: 1,
			visibility: 'visible',
			pointerEvents: 'all'
		},
		'100%': {
			opacity: 0,
			visibility: 'hidden',
			pointerEvents: 'none'
		}
	}
}));

const Panel = styled('div', {
	shouldForwardProp: (p) => !['open', 'side'].includes(p as string)
})<{ open: boolean; side: 'left' | 'right' }>(({ open, side }) => ({
	width: '50%',
	height: '100%',
	flexShrink: 0,
	background: 'rgba(255, 255, 255, 0.45)',
	backdropFilter: 'blur(3px)',
	transition: 'transform 900ms cubic-bezier(0.76, 0, 0.24, 1)',
	transform: open
		? `translateX(${side === 'left' ? '-100%' : '100%'})`
		: 'translateX(0)'
}));

const Seam = styled('div', {
	shouldForwardProp: (p) => p !== 'open'
})<{ open: boolean }>(({ open }) => ({
	position: 'absolute',
	left: '50%',
	top: 0,
	bottom: 0,
	width: 1,
	transform: 'translateX(-50%)',
	background: 'rgba(0, 0, 0, 0.08)',
	transition: 'opacity 300ms ease',
	opacity: open ? 0 : 1,
	zIndex: 2
}));

const SpinnerWrap = styled('div', {
	shouldForwardProp: (p) => p !== 'visible'
})<{ visible: boolean }>(({ visible }) => ({
	position: 'absolute',
	inset: 0,
	zIndex: 3,
	display: 'grid',
	placeItems: 'center',
	pointerEvents: 'none',
	opacity: visible ? 1 : 0,
	transition: 'opacity 300ms ease'
}));

// 5-bar equalizer loader
const Equalizer = styled('div')({
	display: 'flex',
	alignItems: 'flex-end',
	gap: 5,
	height: 36,
	'@keyframes storeEq': {
		'0%, 100%': { transform: 'scaleY(0.2)', opacity: 0.4 },
		'50%': { transform: 'scaleY(1)', opacity: 1 }
	},
	'& > span': {
		display: 'block',
		width: 5,
		borderRadius: 3,
		background: 'var(--store-primary)',
		transformOrigin: 'bottom',
		animation: 'storeEq 0.85s ease-in-out infinite'
	},
	'& > span:nth-of-type(1)': { height: 28, animationDelay: '0ms' },
	'& > span:nth-of-type(2)': { height: 36, animationDelay: '120ms' },
	'& > span:nth-of-type(3)': { height: 22, animationDelay: '240ms' },
	'& > span:nth-of-type(4)': { height: 36, animationDelay: '120ms' },
	'& > span:nth-of-type(5)': { height: 28, animationDelay: '0ms' }
});

interface Props {
	storeName: string;
	logoText: string;
	slogan?: string;
}

export default function StoreCurtainLoader({ storeName, logoText, slogan }: Props) {
	const [stage, setStage] = useState<Stage>('covering');

	// suppress unused-var — props kept for future use
	void storeName;
	void logoText;
	void slogan;

	useEffect(() => {
		document.body.classList.remove('loading');

		const t1 = window.setTimeout(() => setStage('opening'), 250);
		const t2 = window.setTimeout(() => setStage('done'), 850);
		const fallback = window.setTimeout(() => setStage('done'), 1200);
		return () => {
			window.clearTimeout(t1);
			window.clearTimeout(t2);
			window.clearTimeout(fallback);
		};
	}, []);

	if (stage === 'done') return null;

	const open = stage === 'opening';

	return (
		<CurtainRoot stage={stage}>
			<Panel side="left" open={open} />
			<Panel side="right" open={open} />
			<Seam open={open} />
			<SpinnerWrap visible={!open}>
				<Equalizer>
					<span />
					<span />
					<span />
					<span />
					<span />
				</Equalizer>
			</SpinnerWrap>
		</CurtainRoot>
	);
}