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

const OfferTable = ({ type }) => {
    const [items, setItems] = useState([]);
    const [loading, setLoading] = useState(true);
    const [editingItem, setEditingItem] = useState(null);
    const [modalInitialSection, setModalInitialSection] = useState('general');
    const [isSimpleEdit, setIsSimpleEdit] = useState(false);
    const [selectedItems, setSelectedItems] = useState([]);
    const [search, setSearch] = useState('');
    
    // Fetch Items
    const fetchItems = useCallback(async () => {
        setLoading(true);
        try {
            const formData = new FormData();
            formData.append('action', 'storebuild_get_offers');
            // Storebuild usually returns all offers, we filter client side or need to update API to accept type
            // Based on previous code, we filter client side.
            
            const response = await fetch(ajaxurl, { method: 'POST', body: formData });
            const data = await response.json();
            
            if(data.success) {
                // Filter by type if provided
                const filtered = data.data.filter(item => {
                    const itemType = item.config?.type || 'popup';
                    return itemType === type;
                });
                
                // Filter by search
                const searched = filtered.filter(item => 
                    item.title.toLowerCase().includes(search.toLowerCase())
                );

                setItems(searched);
                setSelectedItems([]);
            }
        } catch (e) {
            console.error(e);
            toast.error(__('Error fetching offers', 'shopbuild'));
        } finally {
            setLoading(false);
        }
    }, [type, search]);

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

    // Delete
    const handleDelete = async (id) => {
        if(!confirm(__('Are you sure you want to delete this offer?', 'shopbuild'))) return;
        
        try {
            const formData = new FormData();
            formData.append('action', 'storebuild_delete_offer');
            formData.append('id', id);

            const response = await fetch(ajaxurl, { method: 'POST', body: formData });
            const data = await response.json();
            if(data.success) {
                toast.success(__('Offer deleted', 'shopbuild'));
                setItems(items.filter(item => item.id !== id));
            } else {
                toast.error(data.data);
            }
        } catch(e) {
             toast.error(__('Error deleting offer', 'shopbuild'));
        }
    }

    // Toggle Status
    const handleStatusToggle = async (item, newStatus) => {
        // Optimistic
        const updatedItems = items.map(i => i.id === item.id ? { ...i, status: newStatus } : i);
        setItems(updatedItems);

        try {
            const formData = new FormData();
            formData.append('action', 'storebuild_update_offer');
            formData.append('id', item.id);
            formData.append('status', newStatus);
            // Config is needed? Dependent on PHP, but usually we just update status if handled
            // Based on previous `storebuild_update_offer` logic, if we convert `config` to JSON it might overwrite
            // We should ensure the PHP handler supports partial updates OR we must send full config.
            // Let's grab the item's config.
            formData.append('config', JSON.stringify(item.config));

            await fetch(ajaxurl, { method: 'POST', body: formData });
        } catch (e) {
            toast.error(__('Failed to update status', 'shopbuild'));
            fetchItems(); // Revert
        }
    }

    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));
        }
    };

    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">
                    {/* Bulk Actions Placeholder */}
                    {selectedItems.length > 0 && (
                        <Button isDestructive disabled>
                            {__('Bulk Delete (Coming Soon)', 'shopbuild')} ({selectedItems.length})
                        </Button>
                    )}
                </div>
                <div className="alignright actions" style={{display: 'flex', gap: '10px'}}>
                    <TextControl
                        type="search"
                        value={search}
                        placeholder={__('Search offers...', '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'}}>{__('Type', 'shopbuild')}</th>
                        <th style={{textAlign: 'left'}}>{__('Status', 'shopbuild')}</th>
                         <th style={{textAlign: 'left'}}>{__('Actions', 'shopbuild')}</th>
                    </tr>
                </thead>
                <tbody>
                    {items.length === 0 ? (
                        <tr><td colSpan="6">{__('No offers 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={() => {
                                                setModalInitialSection('general');
                                                setEditingItem(item);
                                                setIsSimpleEdit(true);
                                            }}>
                                                {__('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>
                                    <span className="storebuild-badge">
                                        {item.config?.type === 'banner' ? __('Banner', 'shopbuild') : __('Popup', 'shopbuild')}
                                    </span>
                                </td>
                                <td>
                                    <ToggleControl
                                        checked={item.status === 'publish'}
                                        onChange={(val) => handleStatusToggle(item, val ? 'publish' : 'draft')}
                                        label={item.status === 'publish' ? __('Active', 'shopbuild') : __('Inactive', 'shopbuild')}
                                    />
                                </td>
                                <td>
                                    <div style={{display:'flex', gap:'5px'}}>
                                        <Button isLink href={item.edit_url} target="_blank" className="storebuild-btn storebuild-btn-elementor">
                                            <span className="dashicons dashicons-edit"></span>
                                            {__('Elementor', 'shopbuild')}
                                        </Button>
                                        <Button isSecondary isSmall className="storebuild-btn storebuild-btn-options" onClick={() => {
                                            setModalInitialSection('settings');
                                            setEditingItem(item);
                                            setIsSimpleEdit(false);
                                        }}>
                                            <span className="dashicons dashicons-admin-generic" style={{marginRight: '4px', color:'white'}}></span>
                                            {__('Settings', 'shopbuild')}
                                        </Button>
                                    </div>
                                </td>
                            </tr>
                        ))
                    )}
                </tbody>
            </table>
            )}

            {editingItem && (
                <OfferModal
                    editData={editingItem}
                    initialSection={modalInitialSection}
                    simpleEdit={isSimpleEdit}
                    onRequestClose={() => setEditingItem(null)}
                    onSuccess={() => {
                        setEditingItem(null);
                        fetchItems();
                    }}
                />
            )}
        </div>
    );
};

export default OfferTable;