
import React, { useState } from 'react';
import styles from './WidgetContainer.module.css';

const WidgetContainer = ({ title, children, onEdit, onAdd, onDelete, onExpand, customActions }) => {
    const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 });

    const handleContextMenu = (e) => {
        e.preventDefault();
        setContextMenu({ visible: true, x: e.pageX, y: e.pageY });
    };

    const closeContextMenu = () => {
        setContextMenu({ ...contextMenu, visible: false });
    };

    // Close menu on click anywhere
    React.useEffect(() => {
        const handleClick = () => closeContextMenu();
        window.addEventListener('click', handleClick);
        return () => window.removeEventListener('click', handleClick);
    }, []);

    const handleAction = (action) => {
        if (action === 'expand' && onExpand) onExpand();
        if (action === 'edit' && onEdit) onEdit();
        if (action === 'add' && onAdd) onAdd();
        if (action === 'delete' && onDelete) onDelete();
        if (action === 'refresh') {
            alert('Simulated Action: Refreshing widget data...');
        }
        closeContextMenu();
    };

    return (
        <div
            className={styles.card}
            onContextMenu={handleContextMenu}
            style={{ position: 'relative' }} // Ensure relative positioning context
        >
            <div className={styles.header}>
                <h3 className={styles.title} onClick={onExpand} style={onExpand ? { cursor: 'pointer' } : {}} title={onExpand ? "Click to Expand" : ""}>{title}</h3>
                <div className={styles.actions}>
                    {onExpand && (
                        <button onClick={onExpand} className={styles.iconBtn} title="Expand View">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                <path d="M15 3h6v6"></path><path d="M9 21H3v-6"></path><path d="M21 3l-7 7"></path><path d="M3 21l7-7"></path>
                            </svg>
                        </button>
                    )}
                    {onAdd && (
                        <button onClick={onAdd} className={styles.iconBtn} title="Add Item">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                <line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line>
                            </svg>
                        </button>
                    )}
                    {onEdit && (
                        <button onClick={onEdit} className={styles.iconBtn} title="Edit/Filter">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                            </svg>
                        </button>
                    )}
                    {onDelete && (
                        <button onClick={onDelete} className={styles.iconBtn} title="Delete Widget">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                <polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                            </svg>
                        </button>
                    )}
                </div>
            </div>
            <div className={styles.body}>
                {children}
            </div>

            {/* Context Menu Overlay */}
            {contextMenu.visible && (
                <div
                    className={styles.contextMenu}
                    style={{
                        top: contextMenu.y,
                        left: contextMenu.x,
                        position: 'fixed' // Fixed to viewport to avoid overflow issues
                    }}
                >
                    <div className={styles.menuItem} onClick={() => handleAction('refresh')}>
                        🔄 Refresh Data
                    </div>
                    {onExpand && (
                        <div className={styles.menuItem} onClick={() => handleAction('expand')}>
                            ↗️ Expand View
                        </div>
                    )}
                    {onEdit && (
                        <div className={styles.menuItem} onClick={() => handleAction('edit')}>
                            ✏️ Edit Configuration
                        </div>
                    )}
                    {onAdd && (
                        <div className={styles.menuItem} onClick={() => handleAction('add')}>
                            ➕ Add New Item
                        </div>
                    )}
                    <div className={styles.menuDivider} />
                    <div className={styles.menuItem} onClick={() => handleAction('delete')}>
                        🗑️ Remove Widget
                    </div>
                    <div className={styles.menuItem} onClick={() => alert('Simulated: Exporting to PDF...')}>
                        📄 Export to PDF
                    </div>
                </div>
            )}
        </div>
    );
};

export default WidgetContainer;
