import { useLayoutEffect, useState } from 'react';
import { Skeleton } from '@/components/ui/skeleton';
import { LAYOUT_CONSTANTS, calculateOptimalMaxWidth, calculateResponsiveWidth, calculateResponsiveScale } from '@/modules/editor/utils/layout-constants';

// Hook for responsive dimensions (same as Editor)
const useResponsiveDimensions = () => {
    const [dimensions, setDimensions] = useState(() => ({
        maxWidth: calculateOptimalMaxWidth(),
        responsiveWidth: calculateResponsiveWidth(),
    }));

    useLayoutEffect(() => {
        const newMaxWidth = calculateOptimalMaxWidth();
        const newResponsiveWidth = calculateResponsiveWidth();
        setDimensions({
            maxWidth: newMaxWidth,
            responsiveWidth: newResponsiveWidth,
        });
    }, []);

    return dimensions;
};

// Hook for responsive canvas scale (same as EditorCanvas)
const useResponsiveCanvas = (maxWidth = 350) => {
    const [scale, setScale] = useState(() => calculateResponsiveScale(maxWidth));

    useLayoutEffect(() => {
        setScale(calculateResponsiveScale(maxWidth));
    }, [maxWidth]);

    return scale;
};

const EditorSkeleton = () => {
    const { maxWidth, responsiveWidth } = useResponsiveDimensions();
    const scale = useResponsiveCanvas(maxWidth);
    const displayWidth = LAYOUT_CONSTANTS.CANVAS_WIDTH * scale;
    const displayHeight = LAYOUT_CONSTANTS.CANVAS_HEIGHT * scale;

    return (
        <div className="relative mx-auto flex min-h-[88vh] flex-col space-y-2" style={{ width: `${responsiveWidth}px` }}>
            {/* Header Skeleton - EditorHeader currently returns empty <></> */}
            <div className="mx-auto" style={{ width: `${responsiveWidth}px` }}>
                {/* Header is empty in actual component, so we skip it */}
            </div>

            {/* Canvas Skeleton - matching EditorCanvas structure */}
            <div className="flex w-full justify-center">
                <div
                    style={{
                        width: `${displayWidth}px`,
                        height: `${displayHeight}px`,
                    }}
                >
                    <Skeleton
                        className="origin-top-left rounded-3xl border bg-white shadow-sm dark:bg-black bg-gradient-to-r from-muted via-background to-muted bg-[length:200%_100%] animate-shimmer"
                        style={{
                            width: `${LAYOUT_CONSTANTS.CANVAS_WIDTH}px`,
                            height: `${LAYOUT_CONSTANTS.CANVAS_HEIGHT}px`,
                            transform: `scale(${scale})`,
                        }}
                    />
                </div>
            </div>

            {/* Controls Skeleton - matching EditorControls structure */}
            <div className="mx-auto flex items-center justify-center gap-2" style={{ width: `${responsiveWidth}px` }}>
                {/* Play/Pause button */}
                <Skeleton className="h-12 w-12 rounded-full border shadow-sm bg-gradient-to-r from-muted via-background to-muted bg-[length:200%_100%] animate-shimmer" />
                
                {/* Edit button */}
                <Skeleton className="h-12 w-12 rounded-full border shadow-sm bg-gradient-to-r from-muted via-background to-muted bg-[length:200%_100%] animate-shimmer" />
                
                {/* Refresh button */}
                <Skeleton className="h-12 w-12 rounded-full border shadow-sm bg-gradient-to-r from-muted via-background to-muted bg-[length:200%_100%] animate-shimmer" />
                
                {/* Download button */}
                <Skeleton className="h-12 w-12 rounded-full border shadow-sm bg-gradient-to-r from-muted via-background to-muted bg-[length:200%_100%] animate-shimmer" />
            </div>
        </div>
    );
};

export default EditorSkeleton;