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

const Configuration = ({ currentTheme, onToggleTheme }) => {
    const [modalOpen, setModalOpen] = useState(false);
    const [modalType, setModalType] = useState(''); // 'add' or 'configure'
    const [newWidgetName, setNewWidgetName] = useState('');

    const openModal = (type) => {
        setModalType(type);
        setModalOpen(true);
        setNewWidgetName('');
    };

    const handleSave = () => {
        // Here we would typically update a context or backend
        // For simulation, we just alert the user
        if (modalType === 'add') {
            alert(`Simulated Action: Created new widget "${newWidgetName}"`);
        } else {
            alert('Simulated Action: Dashboard layout updated!');
        }
        setModalOpen(false);
    };

    return (
        <div style={{ maxWidth: '800px', margin: '0 auto', position: 'relative' }}>
            <h2 style={{ marginBottom: '2rem', borderBottom: '1px solid var(--border-color)', paddingBottom: '1rem' }}>
                System Configuration
            </h2>

            <div style={{ display: 'grid', gap: '2rem' }}>
                {/* Widget Management Section */}
                <section>
                    <h3 style={{ color: 'var(--text-secondary)', marginBottom: '1rem' }}>Widget Management</h3>
                    <div style={{
                        display: 'grid',
                        gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
                        gap: '1rem'
                    }}>
                        {/* Custom Widget Add Button */}
                        <div
                            className={styles.card}
                            onClick={() => openModal('add')}
                            style={{
                                height: '150px',
                                justifyContent: 'center',
                                alignItems: 'center',
                                borderStyle: 'dashed',
                                opacity: 0.8,
                                cursor: 'pointer',
                                background: 'rgba(255,255,255,0.02)'
                            }}
                        >
                            <div style={{ fontSize: '2rem', color: 'var(--accent-primary)', marginBottom: '0.5rem' }}>+</div>
                            <p style={{ color: 'var(--text-primary)', margin: 0 }}>Add Custom Widget</p>
                            <span style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>Click to configure new widget</span>
                        </div>

                        {/* Existing Configurable Item */}
                        <div className={styles.card} style={{ height: '150px', padding: '1.5rem' }}>
                            <h4 style={{ margin: '0 0 0.5rem 0' }}>Dashboard Layout</h4>
                            <p style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
                                Current: Grid View (Default)
                            </p>
                            <button
                                onClick={() => openModal('configure')}
                                className={styles.iconBtn}
                                style={{ marginTop: 'auto', alignSelf: 'flex-start', border: '1px solid var(--border-color)' }}
                            >
                                Configure
                            </button>
                        </div>
                    </div>
                </section>

                {/* User Settings Section */}
                <section>
                    <h3 style={{ color: 'var(--text-secondary)', marginBottom: '1rem' }}>User Preferences</h3>
                    <div className={styles.card} style={{ height: 'auto', padding: '1.5rem' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
                            <span>Theme Mode</span>
                            <button
                                onClick={onToggleTheme}
                                style={{
                                    background: 'var(--bg-tertiary)',
                                    padding: '0.5rem 1rem',
                                    borderRadius: '8px',
                                    border: '1px solid var(--border-color)',
                                    color: 'var(--text-primary)',
                                    fontWeight: '500',
                                    cursor: 'pointer',
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: '0.5rem'
                                }}
                            >
                                {currentTheme === 'dark' ? '🌙 Dark Mode' : '☀️ Light Mode'}
                            </button>
                        </div>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                            <span>Notifications</span>
                            <span style={{ color: 'var(--text-secondary)' }}>Enabled</span>
                        </div>
                    </div>
                </section>
            </div>

            {/* Modal Overlay */}
            {modalOpen && (
                <div style={{
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    zIndex: 1000
                }}>
                    <div className={styles.card} style={{
                        width: '400px',
                        height: 'auto',
                        background: 'var(--bg-secondary)',
                        padding: '1.5rem',
                        border: '1px solid var(--accent-primary)'
                    }}>
                        <h3 style={{ marginTop: 0 }}>
                            {modalType === 'add' ? 'Add New Widget' : 'Configure Layout'}
                        </h3>

                        {modalType === 'add' ? (
                            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', margin: '1.5rem 0' }}>
                                <label style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                                    <span style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Widget Name</span>
                                    <input
                                        autoFocus
                                        value={newWidgetName}
                                        onChange={(e) => setNewWidgetName(e.target.value)}
                                        placeholder="e.g. Engine Health Monitor"
                                        style={{
                                            padding: '0.75rem',
                                            background: 'var(--bg-primary)',
                                            border: '1px solid var(--border-color)',
                                            color: 'white',
                                            borderRadius: '4px'
                                        }}
                                    />
                                </label>
                                <label style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                                    <span style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Widget Type</span>
                                    <select style={{
                                        padding: '0.75rem',
                                        background: 'var(--bg-primary)',
                                        border: '1px solid var(--border-color)',
                                        color: 'white',
                                        borderRadius: '4px'
                                    }}>
                                        <option>List View</option>
                                        <option>Chart/Graph</option>
                                        <option>Metric Card</option>
                                    </select>
                                </label>
                            </div>
                        ) : (
                            <div style={{ margin: '1.5rem 0' }}>
                                <p style={{ color: 'var(--text-secondary)' }}>Select Layout Density:</p>
                                <div style={{ display: 'flex', gap: '1rem', marginTop: '1rem' }}>
                                    <button style={{ padding: '0.5rem 1rem', background: 'var(--accent-primary)', color: 'white', borderRadius: '4px' }}>Standard</button>
                                    <button style={{ padding: '0.5rem 1rem', background: 'var(--bg-tertiary)', color: 'var(--text-secondary)', borderRadius: '4px' }}>Compact</button>
                                </div>
                            </div>
                        )}

                        <div className={styles.formActions} style={{ justifyContent: 'flex-end', marginTop: '1rem' }}>
                            <button
                                onClick={() => setModalOpen(false)}
                                className={styles.cancelBtn}
                                style={{ padding: '0.5rem 1rem' }}
                            >
                                Cancel
                            </button>
                            <button
                                onClick={handleSave}
                                className={styles.saveBtn}
                                style={{ padding: '0.5rem 1rem' }}
                            >
                                {modalType === 'add' ? 'Create Widget' : 'Save Changes'}
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default Configuration;
