const { registerBlockType } = wp.blocks;
const el = wp.element.createElement;

const placeholderStyle = {
    padding: '24px',
    background: '#f4f8ff',
    border: '2px dashed #2563eb',
    borderRadius: '12px',
    textAlign: 'center',
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
    color: '#0f172a'
};

// Register Expense Entry Block
registerBlockType('manfi-expense-tracker/expense-entry', {
    title: 'Expense Entry',
    category: 'manfi-expense-tracker',
    icon: 'money-alt',
    description: 'Renders an interactive form to easily add and categorize new expenses.',
    edit: function() {
        return el('div', { style: placeholderStyle }, 
            el('h4', { style: { margin: '0 0 8px 0', fontSize: '18px' } }, 'Expense Entry Block'),
            el('p', { style: { margin: 0, fontSize: '13px', color: '#64748b' } }, 'Displays a beautifully styled interactive form on the frontend for users to quickly add expenses.')
        );
    },
    save: function() {
        return null; // Dynamic block rendering via PHP callback
    }
});

// Register Expense Dashboard Block
registerBlockType('manfi-expense-tracker/expense-dashboard', {
    title: 'Expense Dashboard',
    category: 'manfi-expense-tracker',
    icon: 'dashboard',
    description: 'Renders the complete user or administrator expense dashboard.',
    edit: function() {
        return el('div', { style: placeholderStyle }, 
            el('h4', { style: { margin: '0 0 8px 0', fontSize: '18px' } }, 'Expense Dashboard Block'),
            el('p', { style: { margin: 0, fontSize: '13px', color: '#64748b' } }, 'Displays the main interactive dashboard on the frontend with expense stats, lists, and filter controls.')
        );
    },
    save: function() {
        return null; // Dynamic block rendering via PHP callback
    }
});

// Register Budget Showcase Block
registerBlockType('manfi-expense-tracker/budget-showcase', {
    title: 'Budget Showcase',
    category: 'manfi-expense-tracker',
    icon: 'chart-bar',
    description: 'Renders the interactive budget stats and spending limits showcase.',
    edit: function() {
        return el('div', { style: placeholderStyle }, 
            el('h4', { style: { margin: '0 0 8px 0', fontSize: '18px' } }, 'Budget Showcase Block'),
            el('p', { style: { margin: 0, fontSize: '13px', color: '#64748b' } }, 'Displays a real-time spending progress panel on the frontend with custom alert statuses.')
        );
    },
    save: function() {
        return null; // Dynamic block rendering via PHP callback
    }
});
