import { useCallback } from 'react';

interface UseCanvasNavigationProps {
    activeCanvasType: 'main' | 'asset' | 'storyboard' | null;
    activeCanvasId: string | null;
    assets: any[];
    storyboards: any[];
    switchCanvas?: (id: string, type: 'asset' | 'storyboard') => void;
}

/**
 * Hook to manage Canvas navigation (next/prev)
 * Extracts navigation logic from Canvas component
 */
export const useCanvasNavigation = ({
    activeCanvasType,
    activeCanvasId,
    assets,
    storyboards,
    switchCanvas
}: UseCanvasNavigationProps) => {
    
    const handleSwitchNext = useCallback(() => {
        if (!switchCanvas || !activeCanvasId) return;

        if (activeCanvasType === 'asset') {
            const currentAsset = assets.find(a => a.id === activeCanvasId);
            if (!currentAsset) return;

            const sameTypeAssets = assets
                .filter(a => a.type === currentAsset.type)
                .sort((a, b) => a.name.localeCompare(b.name, 'zh-CN'));

            if (sameTypeAssets.length === 0) return;

            const currentIndex = sameTypeAssets.findIndex(item => item.id === activeCanvasId);
            if (currentIndex === -1) return;

            const nextIndex = (currentIndex + 1) % sameTypeAssets.length;
            switchCanvas(sameTypeAssets[nextIndex].id, 'asset');

        } else if (activeCanvasType === 'storyboard') {
            if (storyboards.length === 0) return;

            const currentIndex = storyboards.findIndex(item => item.id === activeCanvasId);
            if (currentIndex === -1) return;

            const nextIndex = (currentIndex + 1) % storyboards.length;
            switchCanvas(storyboards[nextIndex].id, 'storyboard');
        }
    }, [activeCanvasType, activeCanvasId, assets, storyboards, switchCanvas]);

    const handleSwitchPrev = useCallback(() => {
        if (!switchCanvas || !activeCanvasId) return;

        if (activeCanvasType === 'asset') {
            const currentAsset = assets.find(a => a.id === activeCanvasId);
            if (!currentAsset) return;

            const sameTypeAssets = assets
                .filter(a => a.type === currentAsset.type)
                .sort((a, b) => a.name.localeCompare(b.name, 'zh-CN'));

            if (sameTypeAssets.length === 0) return;

            const currentIndex = sameTypeAssets.findIndex(item => item.id === activeCanvasId);
            if (currentIndex === -1) return;

            const prevIndex = (currentIndex - 1 + sameTypeAssets.length) % sameTypeAssets.length;
            switchCanvas(sameTypeAssets[prevIndex].id, 'asset');

        } else if (activeCanvasType === 'storyboard') {
            if (storyboards.length === 0) return;

            const currentIndex = storyboards.findIndex(item => item.id === activeCanvasId);
            if (currentIndex === -1) return;

            const prevIndex = (currentIndex - 1 + storyboards.length) % storyboards.length;
            switchCanvas(storyboards[prevIndex].id, 'storyboard');
        }
    }, [activeCanvasType, activeCanvasId, assets, storyboards, switchCanvas]);

    return {
        handleSwitchNext,
        handleSwitchPrev
    };
};
