import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

import Sidebar from "./shared/Sidebar";
import Topbar from "./shared/Topbar";

import Dashboard from "./Dashboard";
import IncomeQuotation from "./IncomeQuotation";
import IncomeInvoice from "./IncomeInvoice";
import IncomeReceipt from "./IncomeReceipt";
import Expense from "./Expense";
import Staff from "./Staff";
import StaffSalary from "./StaffSalary";
import Contact from "./Contact";
import Product from "./Product";
import Shareholder from "./Shareholder";
import ShareholderLoan from "./ShareholderLoan";
import AccountingOthers from "./AccountingOthers";
import AccountingBalance from "./AccountingBalance";
import AdminUser from "./AdminUser";
import ApiCredential from "./ApiCredential";
import News from "./News";
import Subscriber from "./Subscriber";

const SCREENS: Record<string, React.FC> = {
    Dashboard,
    IncomeQuotation, IncomeInvoice, IncomeReceipt,
    Expense,
    Staff, StaffSalary,
    Contact, Product,
    Shareholder, ShareholderLoan,
    AccountingOthers, AccountingBalance,
    News, Subscriber,
    AdminUser, ApiCredential,
};

const Home = () => {
    const [route, setRoute] = useState<string>('Dashboard');
    const [sidebarOpen, setSidebarOpen] = useState(false);
    const navigate = useNavigate();

    useEffect(() => {
        if ($admin_id == 0) navigate("/");
    }, [navigate]);

    // Close the mobile sidebar whenever the route changes.
    useEffect(() => { setSidebarOpen(false); }, [route]);

    const Screen = SCREENS[route] || Dashboard;

    return (
        <div className={`app ${sidebarOpen ? 'is-sidebar-open' : ''}`}>
            <div className="app__body">
                <Sidebar route={route} setRoute={setRoute} />
                <div className="sidebar-backdrop" onClick={() => setSidebarOpen(false)} />
                <main className="main">
                    <Topbar route={route} onMenuClick={() => setSidebarOpen(o => !o)} />
                    <div className="content">
                        <div className="screen">
                            {route === 'Dashboard'
                                ? <Dashboard onNavigate={setRoute} />
                                : <Screen />}
                        </div>
                    </div>
                </main>
            </div>
        </div>
    );
};

export default Home;