import { useState } from '@wordpress/element';
import Dashboard from './pages/Dashboard';
import Settings from './pages/Settings';

const { __ } = wp.i18n;

export default function App() {
    const [currentPage, setCurrentPage] = useState(
        window.location.hash === '#settings' ? 'settings' : 'dashboard'
    );

    const navigate = (page) => {
        setCurrentPage(page);
        window.location.hash = page === 'settings' ? '#settings' : '';
    };

    return (
        <div className="aibp-admin-app">
            <nav className="aibp-nav">
                <button
                    className={`aibp-nav-tab ${currentPage === 'dashboard' ? 'aibp-nav-tab-active' : ''}`}
                    onClick={() => navigate('dashboard')}
                >
                    {__('Agents', 'ai-bulk-post')}
                </button>
                <button
                    className={`aibp-nav-tab ${currentPage === 'settings' ? 'aibp-nav-tab-active' : ''}`}
                    onClick={() => navigate('settings')}
                >
                    {__('Settings', 'ai-bulk-post')}
                </button>
            </nav>

            <div className="aibp-content">
                {currentPage === 'dashboard' && <Dashboard />}
                {currentPage === 'settings' && <Settings />}
            </div>
        </div>
    );
}