import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Modal, TextControl, SelectControl, Button, Spinner, FormTokenField } from '@wordpress/components';

const HFModal = ({ onRequestClose, onSuccess, editData = null }) => {
    const [title, setTitle] = useState(editData ? editData.title : '');
    const [type, setType] = useState(editData ? editData.type : 'header');
    const [displayOn, setDisplayOn] = useState(editData ? editData.condition : 'entire_website');
    const [specificPages, setSpecificPages] = useState([]); // Array of IDs
    const [specificPageTokens, setSpecificPageTokens] = useState([]); // Array of names/tokens for UI
    
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [searchSuggestions, setSearchSuggestions] = useState([]);
    
    useEffect(() => {
        // Hydrate specific pages if editing
        if (editData && editData.specific_pages && Array.isArray(editData.specific_pages)) {
           const initialIds = [];
           const initialTokens = [];
           
           editData.specific_pages.forEach(page => {
               if(page && page.id && page.title) {
                   initialIds.push(page.id);
                   initialTokens.push(page.title);
                   
                   // Populate map
                   if(!window.hfPageMap) window.hfPageMap = {};
                   window.hfPageMap[page.title] = page.id;
               }
           });
           
           setSpecificPages(initialIds);
           setSpecificPageTokens(initialTokens);
        }
    }, [editData]);

    const handleSearchPages = (search) => {
        if (search.length < 2) return;
        
        fetch(`${window.ajaxurl}?action=shopbuild_search_pages&term=${search}&security=${window.storebuild ? window.storebuild.hf_nonce : ''}`)
            .then(res => res.json())
            .then(response => {
                if(response.success) {
                    setSearchSuggestions(response.data.map(p => p.text)); // FormTokenField expects strings
                    // We need to map Titles back to IDs.
                    // This is the limitation of FormTokenField with simple strings.
                    // We need to store map somewhere.
                    window.hfPageMap = window.hfPageMap || {};
                    response.data.forEach(p => {
                        window.hfPageMap[p.text] = p.id;
                    });
                }
            });
    };

    const handleTokensChanged = (tokens) => {
        setSpecificPageTokens(tokens);
        
        // Convert tokens (titles/strings) to IDs
        const newIds = tokens.map(token => {
            // Check if it's already an ID (from initial load)
            if(typeof token === 'number' || !isNaN(token)) return parseInt(token);
            
            // Check map
            if(window.hfPageMap && window.hfPageMap[token]) return window.hfPageMap[token];
            
            return null; 
        }).filter(id => id !== null);
        
        setSpecificPages(newIds);
    };

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

        setIsSubmitting(true);
        const formData = new FormData();
        formData.append('action', editData ? 'shopbuild_update_hf' : 'shopbuild_create_hf');
        if(editData) formData.append('id', editData.id);
        formData.append('title', title);
        formData.append('type', type);
        formData.append('condition', displayOn);
        
        if (displayOn === 'specific_pages') {
            specificPages.forEach(id => formData.append('specific_pages[]', id));
        }
        
        formData.append('security', window.storebuild ? window.storebuild.hf_nonce : '');

        fetch(window.ajaxurl, {
            method: 'POST',
            body: formData,
        })
        .then(res => res.json())
        .then(response => {
            setIsSubmitting(false);
            if(response.success) {
                onSuccess();
            } else {
                alert(response.data);
            }
        })
        .catch(() => setIsSubmitting(false));
    };

    const renderDisplayOptions = () => {
        let conditions = [];
        if (window.storebuild && window.storebuild.hf_display_conditions) {
            conditions = window.storebuild.hf_display_conditions;
        } else {
             conditions = [
                { label: __('Entire Website', 'shopbuild'), value: 'entire_website' },
                { label: __('All Archives', 'shopbuild'), value: 'all_archives' },
                { label: __('All Singles', 'shopbuild'), value: 'all_singles' },
                { label: __('404 Page', 'shopbuild'), value: 'is_404' },
                { label: __('Search Page', 'shopbuild'), value: 'is_search' },
                { label: __('Blog Page', 'shopbuild'), value: 'is_home' },
                { label: __('Front Page', 'shopbuild'), value: 'is_front_page' },
            ];
        }

        const groups = {};
        const noGroup = [];

        conditions.forEach(opt => {
            if (opt.group) {
                if (!groups[opt.group]) groups[opt.group] = [];
                groups[opt.group].push(opt);
            } else {
                noGroup.push(opt);
            }
        });

        return (
            <>
                {noGroup.map((opt, index) => <option key={opt.value || index} value={opt.value}>{opt.label}</option>)}
                {Object.keys(groups).map(groupName => (
                    <optgroup key={groupName} label={groupName}>
                        {groups[groupName].map((opt, index) => (
                            <option key={opt.value || index} value={opt.value}>{opt.label}</option>
                        ))}
                    </optgroup>
                ))}
            </>
        );
    };

    return (
        <Modal 
        title={editData ? __('Edit Template', 'shopbuild') : __('Create Template', 'shopbuild')} 
        onRequestClose={onRequestClose}
        className="storebuild-hf-modal"
        size="medium"
        >
            <div className="storebuild-modal-content" style={{padding: '0 10px 20px'}}>
                <TextControl
                    label={__('Title', 'shopbuild')}
                    value={title}
                    onChange={(value) => setTitle(value)}
                    placeholder={__('Enter template name...', 'shopbuild')}
                />
                
                <SelectControl
                    label={__('Type of Template', 'shopbuild')}
                    value={type}
                    options={[
                        { label: __('Header', 'shopbuild'), value: 'header' },
                        { label: __('Footer', 'shopbuild'), value: 'footer' },
                        { label: __('Mega Menu', 'shopbuild'), value: 'megamenu' },
                    ]}
                    onChange={(value) => setType(value)}
                />

                {type !== 'megamenu' && (
                    <>
                        <SelectControl
                            label={__('Display On', 'shopbuild')}
                            value={displayOn}
                            onChange={(value) => setDisplayOn(value)}
                        >
                            {renderDisplayOptions()}
                        </SelectControl>

                        {displayOn === 'specific_pages' && (
                            <div style={{marginBottom: '10px'}}>
                                <label className="components-base-control__label">{__('Select Pages', 'shopbuild')}</label>
                                <div className="storebuild-page-select">
                                    <FormTokenField
                                        value={specificPageTokens}
                                        suggestions={searchSuggestions}
                                        onChange={handleTokensChanged}
                                        onInputChange={handleSearchPages}
                                        messages={{
                                            added: __('Page added', 'shopbuild'),
                                            remove: __('Page removed', 'shopbuild'),
                                            removeSeparators: __('Remove', 'shopbuild'),
                                        }}
                                    />
                                    <p className="description">{__('Type to search for pages...', 'shopbuild')}</p>
                                </div>
                            </div>
                        )}
                    </>
                )}

                <div className="storebuild-modal-actions" style={{marginTop: '20px', textAlign: 'right'}}>
                    <Button variant="secondary" onClick={onRequestClose} style={{marginRight: '10px'}}>
                        {__('Cancel', 'shopbuild')}
                    </Button>
                    <Button variant="primary" onClick={handleSubmit} isBusy={isSubmitting}>
                        {editData ? __('Update Template', 'shopbuild') : __('Create Template', 'shopbuild')}
                    </Button>
                </div>
            </div>
        </Modal>
    );
};

export default HFModal;