import { useState, useEffect, useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Spinner, Button, TextControl, SelectControl } from '@wordpress/components';
import HFModal from './HFModal';
import HeaderOptionsModal from './HeaderOptionsModal';

const HFTable = ({ type }) => {
    const [items, setItems] = useState([]);
    const [loading, setLoading] = useState(true);
    const [editingItem, setEditingItem] = useState(null);
    const [optionItem, setOptionItem] = useState(null);
    const [selectedItems, setSelectedItems] = useState([]);
    const [search, setSearch] = useState('');
    const [filterCondition, setFilterCondition] = useState('');

    const fetchItems = useCallback(() => {
        setLoading(true);
        const formData = new FormData();
        formData.append('action', 'shopbuild_get_hf_items');
        formData.append('type', type);
        formData.append('search', search);
        formData.append('filter_condition', filterCondition);
        formData.append('security', window.storebuild ? window.storebuild.hf_nonce : '');

        fetch(window.ajaxurl, {
            method: 'POST',
            body: formData,
        })
        .then(res => res.json())
        .then(response => {
           if(response.success) {
               setItems(response.data);
               setSelectedItems([]);
           }
           setLoading(false);
        })
        .catch(err => setLoading(false));
    }, [type, search, filterCondition]);

    useEffect(() => {
        const timer = setTimeout(() => {
            fetchItems();
        }, 300);
        return () => clearTimeout(timer);
    }, [fetchItems]);

    const handleDelete = (id) => {
        if(!confirm(__('Are you sure you want to delete this template?', 'shopbuild'))) return;
        
        const formData = new FormData();
        formData.append('action', 'shopbuild_delete_hf');
        formData.append('id', id);
        formData.append('security', window.storebuild ? window.storebuild.hf_nonce : '');

        fetch(window.ajaxurl, {
            method: 'POST',
            body: formData,
        })
        .then(res => res.json())
        .then(response => {
            if(response.success) {
                setItems(items.filter(item => item.id !== id));
            } else {
                alert(response.data);
            }
        });
    }

    const handleBulkDelete = () => {
        if(!confirm(__('Are you sure you want to delete selected templates?', 'shopbuild'))) return;

        const formData = new FormData();
        formData.append('action', 'shopbuild_delete_hf_bulk');
        selectedItems.forEach(id => formData.append('ids[]', id));
        formData.append('security', window.storebuild ? window.storebuild.hf_nonce : '');

        fetch(window.ajaxurl, {
            method: 'POST',
            body: formData,
        })
        .then(res => res.json())
        .then(response => {
            if(response.success) {
                fetchItems();
            } else {
                alert(response.data || __('Error deleting items', 'shopbuild'));
            }
        });
    }

    const toggleSelectAll = (checked) => {
        if (checked) {
            setSelectedItems(items.map(item => item.id));
        } else {
            setSelectedItems([]);
        }
    };

    const toggleSelectItem = (id, checked) => {
        if (checked) {
            setSelectedItems([...selectedItems, id]);
        } else {
            setSelectedItems(selectedItems.filter(itemId => itemId !== id));
        }
    };

    // Get conditions from server side
    const serverConditions = window.storebuild?.hf_display_conditions || [];

    const formatCondition = (condition) => {
        const found = serverConditions.find(c => c.value === condition);
        return found ? found.label : condition;
    };

    // Prepare filter options manually to support OptGroup
    const renderFilterOptions = () => {
        // Group items
        const groups = {};
        const noGroup = [];

        serverConditions.forEach(opt => {
            if(!opt.value) return; // Skip default empty
            if(opt.group) {
                if(!groups[opt.group]) groups[opt.group] = [];
                groups[opt.group].push(opt);
            } else {
                noGroup.push(opt);
            }
        });

        return (
            <>
                <option value="">{__('All Conditions', 'shopbuild')}</option>
                {noGroup.map(opt => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
                {Object.keys(groups).map(groupName => (
                    <optgroup key={groupName} label={groupName}>
                        {groups[groupName].map(opt => (
                            <option key={opt.value} value={opt.value}>{opt.label}</option>
                        ))}
                    </optgroup>
                ))}
            </>
        );
    };

    return (
        <div className="storebuild-hf-table-wrapper mt-4">
            <div className="tablenav top" style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px'}}>
                <div className="alignleft actions bulkactions">
                    {selectedItems.length > 0 && (
                        <Button isDestructive onClick={handleBulkDelete}>
                            {__('Bulk Delete', 'shopbuild')} ({selectedItems.length})
                        </Button>
                    )}
                </div>
                <div className="alignright actions" style={{display: 'flex', gap: '10px'}}>
                    <SelectControl
                        value={filterCondition}
                        onChange={setFilterCondition}
                    >
                        {renderFilterOptions()}
                    </SelectControl>
                    <TextControl
                        type="search"
                        value={search}
                        placeholder={__('Search...', 'shopbuild')}
                        onChange={setSearch}
                    />
                </div>
            </div>

            {loading ? <div className="p-4"><Spinner /></div> : (
             <table className="wp-list-table widefat fixed striped table-view-list">
                <thead>
                    <tr>
                        <td id="cb" className="manage-column column-cb check-column" style={{verticalAlign: 'middle'}}>
                             <input
                                type="checkbox"
                                checked={items.length > 0 && selectedItems.length === items.length}
                                onChange={(e) => toggleSelectAll(e.target.checked)}
                             />
                        </td>
                        <th style={{textAlign: 'left'}}>{__('Title', 'shopbuild')}</th>
                        <th style={{textAlign: 'left'}}>{__('Shortcode', 'shopbuild')}</th>
                        <th style={{textAlign: 'left'}}>{__('Display Condition', 'shopbuild')}</th>
                        <th style={{textAlign: 'left'}}>{__('Actions', 'shopbuild')}</th>
                    </tr>
                </thead>
                <tbody>
                    {items.length === 0 ? (
                        <tr><td colSpan="5">{__('No templates found.', 'shopbuild')}</td></tr>
                    ) : (
                        items.map(item => (
                            <tr key={item.id}>
                                <th scope="row" className="check-column">
                                    <input
                                        type="checkbox"
                                        checked={selectedItems.includes(item.id)}
                                        onChange={(e) => toggleSelectItem(item.id, e.target.checked)}
                                    />
                                </th>
                                <td>
                                    <strong>{item.title}</strong>
                                    <div className="row-actions" style={{ visibility: 'visible' }}>
                                        <span className="edit">
                                            <Button isLink onClick={() => setEditingItem(item)}>
                                                {__('Edit Info', 'shopbuild')}
                                            </Button>
                                        </span>
                                        <span className="trash"> | 
                                            <Button isLink isDestructive onClick={() => handleDelete(item.id)} className="storebuild-btn-delete-link">
                                                {__('Delete', 'shopbuild')}
                                            </Button>
                                        </span>
                                    </div>
                                </td>
                                <td><code>[shopbuild_hf id="{item.id}"]</code></td>
                                <td>{formatCondition(item.condition)}</td>
                                <td>
                                    <div style={{display: 'flex', gap: '5px', alignItems: 'center'}}>
                                        <Button isLink href={item.edit_url} target="_blank" className="storebuild-btn storebuild-btn-elementor">
                                            <span className="dashicons dashicons-edit"></span>
                                            {__('Elementor', 'shopbuild')}
                                        </Button>
                                        
                                        {type === 'header' && (
                                            <Button isSecondary isSmall className="storebuild-btn storebuild-btn-options" onClick={() => setOptionItem(item)}>
                                                <span className="dashicons dashicons-admin-generic" style={{marginRight: '4px', color:'white'}}></span>
                                                {__('Options', 'shopbuild')}
                                            </Button>
                                        )}
                                    </div>
                                </td>
                            </tr>
                        ))
                    )}
                </tbody>
             </table>
            )}

             {editingItem && (
                 <HFModal 
                    editData={editingItem}
                    onRequestClose={() => setEditingItem(null)}
                    onSuccess={() => {
                        setEditingItem(null);
                        fetchItems();
                    }}
                 />
             )}
             
             {optionItem && (
                 <HeaderOptionsModal
                    item={optionItem}
                    onRequestClose={() => setOptionItem(null)}
                 />
             )}
        </div>
    );
};

export default HFTable;