import { useEffect } from '@wordpress/element';
import useEditorStore from './store/useEditorStore';
import TemplateSidebar from './components/TemplateSidebar';
import LivePreview from './components/LivePreview';
import BlockEditor from './components/BlockEditor';

export default function App() {
    const mode = useEditorStore((s) => s.mode);
    const notices = useEditorStore((s) => s.notices);
    const fetchTemplates = useEditorStore((s) => s.fetchTemplates);
    const isLoading = useEditorStore((s) => s.isLoading);

    useEffect(() => {
        fetchTemplates();
    }, [fetchTemplates]);

    if (isLoading) {
        return (
            <div className="lpcd-loading">
                <div className="lpcd-loading-spinner" />
                <p>Loading editor...</p>
            </div>
        );
    }

    return (
        <div className="lpcd-app">
            { /* Notices */}
            <div className="lpcd-notices">
                {notices.map((n) => (
                    <div key={n.id} className={`lpcd-notice lpcd-notice-${n.type}`}>
                        {n.msg}
                    </div>
                ))}
            </div>

            {mode === 'gallery' ? (
                <div className="lpcd-gallery-layout">
                    <TemplateSidebar />
                    <LivePreview />
                </div>
            ) : (
                <BlockEditor />
            )}
        </div>
    );
}
