import useEditorStore from '../store/useEditorStore';
import TopToolbar from './TopToolbar';
import BlockInserter from './BlockInserter';
import Canvas from './Canvas';
import AdvancedCanvas from './AdvancedCanvas';
import InspectorPanel from './InspectorPanel';
import AdvancedTextEditor from './AdvancedTextEditor';

export default function BlockEditor() {
    const hasDraft = useEditorStore((s) => s.hasDraft);
    const discardDraft = useEditorStore((s) => s.discardDraft);
    const editingTemplate = useEditorStore((s) => s.editingTemplate);

    const isAdvanced = editingTemplate?.type === 'advanced';
    const FREE_NAMES = ['Light Centered', 'Dark Centered'];
    const isProTemplate = editingTemplate && !FREE_NAMES.includes(editingTemplate.name) && editingTemplate.type !== 'custom';
    const isPro = !!window.lpcdEditor?.isPro;

    return (
        <div className="lpcd-editor-fullscreen">
            <TopToolbar />

            {hasDraft && (
                <div className="lpcd-draft-banner">
                    <span>You have unsaved changes from a previous session.</span>
                    <button className="lpcd-btn lpcd-btn-sm lpcd-btn-primary" onClick={() => useEditorStore.setState({ hasDraft: false })}>
                        Keep Draft
                    </button>
                    <button className="lpcd-btn lpcd-btn-sm lpcd-btn-secondary" onClick={discardDraft}>
                        Discard
                    </button>
                </div>
            )}

            {isAdvanced && (
                <div className="lpcd-advanced-warning-banner">
                    <span className="dashicons dashicons-lock" />
                    <span><strong>Advanced Template</strong> — This is a special template with a locked design. You can only customize the text labels below. Layout, colors, and blocks cannot be changed.</span>
                </div>
            )}

            <div className="lpcd-editor-body">

                {!isAdvanced && <BlockInserter />}
                {isAdvanced ? <AdvancedCanvas /> : <Canvas />}
                {isAdvanced ? <AdvancedTextEditor /> : <InspectorPanel />}
            </div>
        </div>
    );
}
