import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Modal, TextControl, SelectControl, Button, Spinner, ToggleControl, PanelBody, PanelRow } from '@wordpress/components';
import { toast } from 'react-toastify';

// Simple Page Search Component (Reused from previous implementation)
const PageSearch = ({ onSelect }) => {
    const [searchTerm, setSearchTerm] = useState('');
    const [results, setResults] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        if (!searchTerm) {
            setResults([]);
            return;
        }
        
        const timer = setTimeout(async () => {
            setLoading(true);
            try {
                // Fetch more results to enable scrolling
                const res = await fetch(`/wp-json/wp/v2/pages?search=${searchTerm}&per_page=20`);
                const data = await res.json();
                setResults(Array.isArray(data) ? data : []);
            } catch(e) {
                console.error(e);
                setResults([]);
            } finally {
                setLoading(false);
            }
        }, 500);
        return () => clearTimeout(timer);
    }, [searchTerm]);

    return (
        <div className="storebuild-page-search" style={{position:'relative'}}>
            <TextControl
                label={__('Search Page', 'shopbuild')}
                value={searchTerm}
                onChange={setSearchTerm}
                placeholder={__('Type page title...', 'shopbuild')}
            />
            {loading && <div style={{fontSize:'12px', color:'#666'}}>Searching...</div>}
            
            {results.length > 0 && (
                <ul className="storebuild-search-results" style={{
                    border: '1px solid #ddd',
                    maxHeight: '200px', // Increased height for better visibility
                    overflowY: 'scroll', // Forced scroll as requested
                    padding: 0,
                    margin: 0,
                    listStyle: 'none',
                    position: 'relative', // Changed from absolute to flow naturally or keep absolute if overlay needed. Keeping absolute standard for dropdowns.
                    position: 'absolute',
                    background: '#fff',
                    width: '100%',
                    zIndex: 10,
                    boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
                }}>
                    {results.map(page => (
                        <li key={page.id} 
                            onClick={() => {
                                onSelect(page);
                                setSearchTerm('');
                                setResults([]);
                            }}
                            style={{padding: '8px', cursor: 'pointer', borderBottom: '1px solid #eee'}}
                        >
                            {page.title.rendered} (ID: {page.id})
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
};

const OfferModal = ({ onRequestClose, onSuccess, editData = null, initialType = 'popup', initialSection = 'general', simpleEdit = false }) => {
    // Mode: 'create' or 'settings'
    // If editData is present, and we are editing the detailed config, it's 'settings'.

    // If it's just creating, it's 'create'.
    // However, the user might want to edit the "Create" fields later (Title, Display On).
    // Let's assume 'editData' implies we are editing an existing offer.

    const isEdit = !!editData;

    // Basic Fields
    const [title, setTitle] = useState(editData ? editData.title : '');
    const [type, setType] = useState(editData ? (editData.config?.type || 'popup') : initialType);
    const [displayOn, setDisplayOn] = useState('entire_site'); // Default, need to parse from editData if exists
    const [selectedPages, setSelectedPages] = useState([]);

    // Advanced Config Fields (for Edit/Settings mode)
    const [config, setConfig] = useState(editData ? (editData.config || {}) : {});

    const [isSubmitting, setIsSubmitting] = useState(false);
    const [activeSection, setActiveSection] = useState(initialSection); // general, trigger, appearance

    useEffect(() => {
        // Parse "Display On" from config if editing
        if (isEdit && config.targeting) {
             const inc = config.targeting.include || [];
             if (inc.includes('pages')) setDisplayOn('pages');
             else if (inc.includes('archive')) setDisplayOn('archive');
             else {
                 const pageIds = inc.filter(r => r.startsWith('id:')).map(r => r.replace('id:', ''));
                 if (pageIds.length > 0) {
                     setDisplayOn('specific_page');
                     
                     // Fetch page details to show in UI
                     const fetchPages = async () => {
                         try {
                             // Fetch pages by IDs. Note: WP API 'include' parameter takes comma-separated IDs
                             const res = await fetch(`/wp-json/wp/v2/pages?include=${pageIds.join(',')}&per_page=100`);
                             const data = await res.json();
                             if (Array.isArray(data)) {
                                 setSelectedPages(data);
                             }
                         } catch (e) {
                             console.error('Failed to fetch selected pages', e);
                         }
                     };
                     fetchPages();
                 } else {
                     setDisplayOn('entire_site');
                 }
             }
        }
    }, [isEdit]); // Run only on mount/editData change (removed 'config' dependency to avoid loop if fetching triggers render)

    // Helper to update deep config values
    const updateConfig = (path, value) => {
        const newConfig = { ...config };
        const keys = path.split('.');
        let current = newConfig;
        
        for (let i = 0; i < keys.length - 1; i++) {
            if (!current[keys[i]]) current[keys[i]] = {};
            current = current[keys[i]];
        }
        
        current[keys[keys.length - 1]] = value;
        setConfig(newConfig);
    };

    const handleSubmit = async () => {
        if(!title) {
            toast.error(__('Please enter a title', 'shopbuild'));
            return;
        }

        setIsSubmitting(true);
        const formData = new FormData();
        
        if (isEdit) {
            // Update Existing
            formData.append('action', 'storebuild_update_offer');
            formData.append('id', editData.id);
            formData.append('status', editData.status); // Preserve status or allow editing?
            
            // Merge Basic Fields into Config if needed or handle separately
            // For now, type is fixed on create usually, but let's allow updating config
            const finalConfig = { ...config, type: type };
            
            // Update Targeting in Config based on UI
            finalConfig.targeting = finalConfig.targeting || {};
            finalConfig.targeting.include = [];
            
             switch (displayOn) {
                case 'entire_site': finalConfig.targeting.include = ['all']; break;
                case 'pages': finalConfig.targeting.include = ['pages']; break;
                case 'archive': finalConfig.targeting.include = ['archive']; break;
                case 'specific_page': 
                    if(selectedPages.length > 0) {
                        finalConfig.targeting.include = selectedPages.map(p => `id:${p.id}`);
                    }
                    break;
                default: finalConfig.targeting.include = ['all'];
            }
            
            formData.append('config', JSON.stringify(finalConfig));

        } else {
            // Create New
            formData.append('action', 'storebuild_create_offer');
            formData.append('title', title);
            formData.append('type', type);
            formData.append('display_on', displayOn);
            if (selectedPages.length > 0) {
                 // For create, maybe just pass the first one or update backend to accept array?
                 // Safer to let 'create' handle simple logic and immediately update via config if complex targeting needed.
                 // Or we rely on 'display_on' => 'specific_page' and pass 'target_id' array if supported or comma list.
                 // Assuming backend supports target_id as single for now, let's just pass first ID.
                 // Ideally backend for create should support array or we treat create simple.
                 // Let's pass the first ID just to be safe with existing backend, but better is to update config right away.
                 // Actually the 'create' endpoint might build initial config.
                 formData.append('target_id', selectedPages[0]?.id); 
                 // If we want multiple support on create, we probably need to send config. 
                 // But typically create is simple. Users can edit later.
                 // However, let's try to send simple config if we can.
            }
        }

        try {
            const response = await fetch(ajaxurl, { method: 'POST', body: formData });
            const data = await response.json();
            
            if(data.success) {
                toast.success(isEdit ? __('Offer updated', 'shopbuild') : __('Offer created', 'shopbuild'));
                onSuccess();
            } else {
                toast.error(data.data);
            }
        } catch (error) {
            toast.error(__('Error saving offer', 'shopbuild'));
        } finally {
            setIsSubmitting(false);
        }
    };

    const handleAddPage = (page) => {
        if (!selectedPages.some(p => p.id === page.id)) {
            setSelectedPages([...selectedPages, page]);
        }
    };

    const handleRemovePage = (id) => {
        setSelectedPages(selectedPages.filter(p => p.id !== id));
    };

    const renderGeneralForm = () => (
        <>
            <TextControl
                label={__('Title', 'shopbuild')}
                value={title}
                onChange={setTitle}
                placeholder={__('Enter title...', 'shopbuild')}
            />
            
            <SelectControl
                label={__('Type', 'shopbuild')}
                value={type}
                options={[
                    { label: 'Popup', value: 'popup' },
                    { label: 'Banner', value: 'banner' },
                ]}
                onChange={setType}
                // disabled={isEdit} // Optional: Lock type after create
            />

            <SelectControl
                label={__('Display On', 'shopbuild')}
                value={displayOn}
                options={[
                    { label: 'Entire Site', value: 'entire_site' },
                    { label: 'All Pages', value: 'pages' },
                    { label: 'Archive Pages', value: 'archive' },
                    { label: 'Select Specific Page', value: 'specific_page' },
                ]}
                onChange={setDisplayOn}
            />

            {displayOn === 'specific_page' && (
                <div className="storebuild-page-selector">
                    <PageSearch onSelect={handleAddPage} />
                    
                    {selectedPages.length > 0 && (
                        <ul className="storebuild-selected-pages" style={{marginTop: '10px', listStyle: 'none', padding: 0}}>
                            {selectedPages.map(page => (
                                <li key={page.id} style={{
                                    background: '#f0f0f1', 
                                    padding: '8px 12px', 
                                    borderRadius: '4px', 
                                    marginBottom: '5px', 
                                    display:'flex', 
                                    justifyContent:'space-between', 
                                    alignItems:'center'
                                }}>
                                    <span>{page.title.rendered} (ID: {page.id})</span>
                                    <Button isSmall isDestructive onClick={() => handleRemovePage(page.id)}>Remove</Button>
                                </li>
                            ))}
                        </ul>
                    )}
                </div>
            )}
        </>
    );

    const renderSettingsForm = () => (
        <div className="storebuild-options-grid">
             <div className="options-section" style={{marginBottom: '20px', paddingBottom: '15px', borderBottom: '1px solid #eee'}}>
                 <h3 style={{margin: '0 0 10px 0', fontSize: '14px', textTransform: 'uppercase', color: '#666'}}>{__('Trigger & Timing', 'shopbuild')}</h3>
                 <div className="options-row" style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '15px'}}>
                    <SelectControl
                        label={__('Trigger Mode', 'shopbuild')}
                        value={config.trigger?.mode || 'delay'}
                        options={[
                            { label: 'Time Delay', value: 'delay' },
                            { label: 'On Scroll', value: 'scroll' },
                            { label: 'Exit Intent', value: 'exit' },
                            { label: 'On Click', value: 'click' } // Click requires a selector, simpler to just have delay/scroll/exit
                        ]}
                        onChange={(val) => updateConfig('trigger.mode', val)}
                    />
                    {config.trigger?.mode === 'delay' && (
                        <TextControl
                            label={__('Delay (seconds)', 'shopbuild')}
                            type="number"
                            value={config.trigger?.delay_sec || 0} // Ensure default 0 if undefined
                            onChange={(val) => updateConfig('trigger.delay_sec', val)}
                        />
                    )}
                 </div>
            </div>

            <div className="options-section" style={{marginBottom: '20px', paddingBottom: '15px', borderBottom: '1px solid #eee'}}>
                 <h3 style={{margin: '0 0 10px 0', fontSize: '14px', textTransform: 'uppercase', color: '#666'}}>{__('Appearance', 'shopbuild')}</h3>
                 <div className="options-row" style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '15px'}}>
                    {type !== 'banner' && (
                    <TextControl
                        label={__('Width', 'shopbuild')}
                        value={config.size?.width || '500px'}
                        onChange={(val) => updateConfig('size.width', val)}
                        help="e.g. 500px, 50%"
                    />
                    )}
                    <TextControl
                        label={__('Height', 'shopbuild')}
                        value={config.size?.height || 'auto'}
                        onChange={(val) => updateConfig('size.height', val)}
                        help="e.g. 400px, auto"
                    />
                 </div>
                 
                 <div className="options-row" style={{marginBottom: '15px'}}>
                     <TextControl
                        label={__('Border Radius', 'shopbuild')}
                        value={config.size?.border_radius || '0'}
                        onChange={(val) => updateConfig('size.border_radius', val)}
                        help="e.g. 8px, 0"
                    />
                 </div>

                 {type !== 'banner' && (
                 <SelectControl
                    label={__('Placement', 'shopbuild')}
                    value={config.placement || 'center'}
                    options={[
                        { label: 'Center Screen', value: 'center' },
                        { label: 'Top Bar', value: 'top' },
                        { label: 'Bottom Bar', value: 'bottom' },
                        { label: 'Bottom Right', value: 'bottom_right' },
                        { label: 'Bottom Left', value: 'bottom_left' }
                    ]}
                    onChange={(val) => updateConfig('placement', val)}
                />
                 )}
            </div>

            <div className="options-section">
                 <h3 style={{margin: '0 0 10px 0', fontSize: '14px', textTransform: 'uppercase', color: '#666'}}>{__('Advanced', 'shopbuild')}</h3>
                 <TextControl
                     label={__('Priority', 'shopbuild')}
                     type="number"
                     value={config.priority || 10}
                     onChange={(val) => updateConfig('priority', val)}
                     help={__('Higher number = Higher priority', 'shopbuild')}
                 />
            </div>
        </div>
    );

    return (
        <Modal 
            title={isEdit ? __('Edit Offer Settings', 'shopbuild') : __('Create New Offer', 'shopbuild')} 
            onRequestClose={onRequestClose}
            className="storebuild-hf-modal"
            size="medium"
        >
            <div className="storebuild-modal-content" style={{padding: '0 0 20px'}}>
                {isEdit && !simpleEdit ? (
                    renderSettingsForm()
                ) : (
                    renderGeneralForm()
                )}

                <div className="storebuild-modal-footer" style={{marginTop: '20px', textAlign: 'right', borderTop: '1px solid #ddd', paddingTop: '15px'}}>
                     <Button isSecondary onClick={onRequestClose} style={{marginRight: '10px'}}>
                        {__('Cancel', 'shopbuild')}
                    </Button>
                    <Button isPrimary isBusy={isSubmitting} onClick={handleSubmit}>
                        {isEdit ? __('Save Changes', 'shopbuild') : __('Create Offer', 'shopbuild')}
                    </Button>
                </div>
            </div>
        </Modal>
    );
};

export default OfferModal;