import useEditorStore from '../store/useEditorStore';

const BLOCK_TYPES = [
    { type: 'loginForm', label: 'Login Form', icon: 'admin-users' },
    { type: 'logo', label: 'Logo', icon: 'format-image' },
    { type: 'heading', label: 'Heading', icon: 'heading' },
    { type: 'text', label: 'Paragraph', icon: 'editor-paragraph' },
    { type: 'divider', label: 'Divider', icon: 'minus' },
];



const ADVANCED_BLOCKS = [
    { type: 'customHtml', label: 'Custom HTML', icon: 'editor-code' },
];

const LAYOUTS = [
    {
        type: 'centered',
        label: 'Centered',
        desc: 'All blocks stacked in center',
        svg: (
            <svg viewBox="0 0 60 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="0.5" y="0.5" width="59" height="39" rx="3" stroke="currentColor" fill="none" />
                <rect x="18" y="8" width="24" height="24" rx="2" fill="currentColor" opacity="0.2" />
                <rect x="22" y="14" width="16" height="3" rx="1" fill="currentColor" opacity="0.5" />
                <rect x="22" y="20" width="16" height="3" rx="1" fill="currentColor" opacity="0.5" />
                <rect x="22" y="26" width="10" height="3" rx="1" fill="currentColor" opacity="0.7" />
            </svg>
        ),
    },
    {
        type: 'split_left',
        label: 'Split Left',
        desc: 'Branding left, form right',
        svg: (
            <svg viewBox="0 0 60 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="0.5" y="0.5" width="59" height="39" rx="3" stroke="currentColor" fill="none" />
                <rect x="1" y="1" width="28" height="38" rx="2" fill="currentColor" opacity="0.25" />
                <rect x="6" y="12" width="18" height="2" rx="1" fill="currentColor" opacity="0.6" />
                <rect x="6" y="17" width="14" height="2" rx="1" fill="currentColor" opacity="0.4" />
                <rect x="6" y="22" width="18" height="2" rx="1" fill="currentColor" opacity="0.4" />
                <rect x="35" y="10" width="18" height="20" rx="2" fill="currentColor" opacity="0.12" />
                <rect x="38" y="15" width="12" height="2" rx="1" fill="currentColor" opacity="0.4" />
                <rect x="38" y="20" width="12" height="2" rx="1" fill="currentColor" opacity="0.4" />
                <rect x="38" y="25" width="8" height="2" rx="1" fill="currentColor" opacity="0.6" />
            </svg>
        ),
    },
    {
        type: 'split_right',
        label: 'Split Right',
        desc: 'Form left, branding right',
        svg: (
            <svg viewBox="0 0 60 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="0.5" y="0.5" width="59" height="39" rx="3" stroke="currentColor" fill="none" />
                <rect x="31" y="1" width="28" height="38" rx="2" fill="currentColor" opacity="0.25" />
                <rect x="36" y="12" width="18" height="2" rx="1" fill="currentColor" opacity="0.6" />
                <rect x="36" y="17" width="14" height="2" rx="1" fill="currentColor" opacity="0.4" />
                <rect x="36" y="22" width="18" height="2" rx="1" fill="currentColor" opacity="0.4" />
                <rect x="7" y="10" width="18" height="20" rx="2" fill="currentColor" opacity="0.12" />
                <rect x="10" y="15" width="12" height="2" rx="1" fill="currentColor" opacity="0.4" />
                <rect x="10" y="20" width="12" height="2" rx="1" fill="currentColor" opacity="0.4" />
                <rect x="10" y="25" width="8" height="2" rx="1" fill="currentColor" opacity="0.6" />
            </svg>
        ),
    },
];

export default function BlockInserter() {
    const addBlock = useEditorStore((s) => s.addBlock);
    const editingTemplate = useEditorStore((s) => s.editingTemplate);
    const updatePageSettings = useEditorStore((s) => s.updatePageSettings);

    const blocks = editingTemplate?.jsonData?.blocks || [];
    const hasLoginForm = blocks.some((b) => b.type === 'loginForm');

    const currentLayout = editingTemplate?.jsonData?.pageSettings?.layoutType || 'centered';

    const renderBlockButton = (block, isDisabled, disabledTitle) => (
        <button
            key={block.type}
            className={`lpcd-inserter-item ${isDisabled ? 'disabled' : ''}`}
            onClick={() => !isDisabled && addBlock(block.type)}
            disabled={isDisabled}
            title={isDisabled ? disabledTitle : `Add ${block.label}`}
        >
            <span className={`dashicons dashicons-${block.icon}`} />
            <span className="lpcd-inserter-label">{block.label}</span>
        </button>
    );

    return (
        <div className="lpcd-inserter-panel">
            {/* Layout Picker */}
            <h3 className="lpcd-inserter-title">Choose Layout</h3>
            <div className="lpcd-layout-picker">
                {LAYOUTS.map((layout) => (
                    <button
                        key={layout.type}
                        className={`lpcd-layout-option ${currentLayout === layout.type ? 'active' : ''}`}
                        onClick={() => updatePageSettings('layoutType', layout.type)}
                        title={layout.desc}
                    >
                        <div className="lpcd-layout-icon">{layout.svg}</div>
                        <span className="lpcd-layout-label">{layout.label}</span>
                    </button>
                ))}
            </div>

            {/* Block Inserter */}
            <h3 className="lpcd-inserter-title" style={{ marginTop: 20 }}>Add Blocks</h3>
            <div className="lpcd-inserter-list">
                {BLOCK_TYPES.map((block) => {
                    const isDisabled = block.type === 'loginForm' && hasLoginForm;
                    return renderBlockButton(block, isDisabled, 'Only one login form allowed');
                })}
            </div>



            {/* Advanced Blocks */}
            <h3 className="lpcd-inserter-title" style={{ marginTop: 16, fontSize: '11px', color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '1px' }}>Advanced</h3>
            <div className="lpcd-inserter-list">
                {ADVANCED_BLOCKS.map((block) => renderBlockButton(block, false, ''))}
            </div>
        </div>
    );
}
