import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { Button, TabPanel } from '@wordpress/components';
import OfferTable from '../components/offer/OfferTable';
import OfferModal from '../components/offer/OfferModal';

const OfferBuilder = () => {
    const [isCreateModalOpen, setCreateModalOpen] = useState(false);
    const [createModalType, setCreateModalType] = useState('popup'); // Track which tab is active for default type
    const [refreshKey, setRefreshKey] = useState(0);

    const onSelectTab = (tabName) => {
        setCreateModalType(tabName);
    };

    const handleSuccess = () => {
        setCreateModalOpen(false);
        setRefreshKey(prev => prev + 1);
    };

    return (
        <div className="storebuild-hf-builder storebuild-wrapper">
            <div className="storebuild-header flex justify-between items-center mb-6">
                <div>
                    <h1 className="text-2xl font-bold text-gray-900">{__('Offer Builder', 'shopbuild')}</h1>
                    <p className="text-gray-600 mt-1">{__('Create and manage your promotional offers', 'shopbuild')}</p>
                </div>
                <Button 
                    isPrimary 
                    onClick={() => setCreateModalOpen(true)}
                    className="storebuild-btn-primary"
                >
                    {__('Create New Offer', 'shopbuild')}
                </Button>
            </div>

            <div className="storebuild-content bg-white rounded-lg shadow-sm border border-gray-200">
                <TabPanel
                    className="storebuild-hf-tabs"
                    activeClass="is-active"
                    onSelect={onSelectTab}
                    tabs={[
                        {
                            name: 'popup',
                            title: __('Popups', 'shopbuild'),
                            className: 'tab-popup',
                        },
                        {
                            name: 'banner',
                            title: __('Banners', 'shopbuild'),
                            className: 'tab-banner',
                        }
                    ]}
                >
                    {
                        (tab) => (
                            <div className="p-6">
                                <OfferTable 
                                    type={tab.name} 
                                    key={`${tab.name}-${refreshKey}`} 
                                    onRefresh={() => setRefreshKey(prev => prev + 1)}
                                />
                            </div>
                        )
                    }
                </TabPanel>
            </div>

            {isCreateModalOpen && (
                <OfferModal 
                    isOpen={isCreateModalOpen}
                    onRequestClose={() => setCreateModalOpen(false)}
                    onSuccess={handleSuccess}
                    initialType={createModalType}
                />
            )}
        </div>
    );
};

export default OfferBuilder;