import React from 'react';
import { createRoot } from 'react-dom/client';
import AdminDashboard from './components/AdminDashboard';
import UserDashboard from './components/UserDashboard';
import BudgetDashboard from './components/BudgetDashboard';
import CategoryManager from './components/CategoryManager';
import ReportsDashboard from './components/ReportsDashboard';
import TagDashboard from './components/TagDashboard';
import InvoiceManager from './components/InvoiceManager';
import FinancialAccounts from './components/FinancialAccounts';
import VendorsManager from './components/VendorsManager';
import ClientsManager from './components/ClientsManager';
import ExpenseForm from './components/ExpenseForm';
import SettingsManager from './components/SettingsManager';

const appData = window.manfietExpenseTrackerData || {};

const resolvePageView = () => {
    const searchParams = new URLSearchParams(window.location.search);
    const page = searchParams.get('page') || '';

    if (page === 'manfiet-invoice-manager') {
        return 'invoice-manager';
    }

    if (page === 'manfiet-invoice-create') {
        return 'invoice-create';
    }

    if (page === 'manfiet-expense-categories') {
        return 'categories';
    }

    if (page === 'manfiet-expense-tags') {
        return 'tags';
    }

    if (page === 'manfiet-expense-budget') {
        return 'budget';
    }

    if (page === 'manfiet-expense-reports') {
        return 'reports';
    }

    if (page === 'manfiet-financial-accounts') {
        return 'financial-accounts';
    }

    if (page === 'manfiet-financial-accounts-create') {
        return 'financial-accounts-create';
    }

    if (page === 'manfiet-vendors') {
        return 'vendors';
    }

    if (page === 'manfiet-vendors-create') {
        return 'vendors-create';
    }

    if (page === 'manfiet-clients') {
        return 'clients';
    }

    if (page === 'manfiet-clients-create') {
        return 'clients-create';
    }

    return appData.pageView || 'frontend';
};

const App = ({ overrideView }) => {
    const pageView = overrideView || resolvePageView();
    const canManageExpenses = Boolean(appData.canManageExpenses);

    if (pageView === 'expense-entry') {
        return <ExpenseForm onExpenseAdded={() => {}} />;
    }

    if (pageView === 'categories') {
        return canManageExpenses ? (
            <CategoryManager />
        ) : (
            <p>You do not have permission to manage expense categories.</p>
        );
    }

    if (pageView === 'budget') {
        return canManageExpenses ? (
            <BudgetDashboard />
        ) : (
            <p>You do not have permission to manage budgets.</p>
        );
    }

    if (pageView === 'tags') {
        return canManageExpenses ? (
            <TagDashboard />
        ) : (
            <p>You do not have permission to manage tags.</p>
        );
    }

    if (pageView === 'reports') {
        return canManageExpenses ? (
            <ReportsDashboard />
        ) : (
            <p>You do not have permission to view reports.</p>
        );
    }

    if (pageView === 'invoice-manager') {
        return canManageExpenses ? (
            <InvoiceManager mode="dashboard" />
        ) : (
            <p>You do not have permission to manage invoices.</p>
        );
    }

    if (pageView === 'invoice-create') {
        return canManageExpenses ? (
            <InvoiceManager mode="create" />
        ) : (
            <p>You do not have permission to manage invoices.</p>
        );
    }

    if (pageView === 'financial-accounts') {
        return canManageExpenses ? (
            <FinancialAccounts />
        ) : (
            <p>You do not have permission to manage financial accounts.</p>
        );
    }

    if (pageView === 'financial-accounts-create') {
        return canManageExpenses ? (
            <FinancialAccounts mode="create" />
        ) : (
            <p>You do not have permission to manage financial accounts.</p>
        );
    }

    if (pageView === 'vendors') {
        return canManageExpenses ? (
            <VendorsManager />
        ) : (
            <p>You do not have permission to manage vendors.</p>
        );
    }

    if (pageView === 'vendors-create') {
        return canManageExpenses ? (
            <VendorsManager mode="create" />
        ) : (
            <p>You do not have permission to manage vendors.</p>
        );
    }

    if (pageView === 'clients') {
        return canManageExpenses ? (
            <ClientsManager />
        ) : (
            <p>You do not have permission to manage clients.</p>
        );
    }

	if (pageView === 'settings') {
		return canManageExpenses ? (
			<SettingsManager />
		) : (
			<p>You do not have permission to manage settings.</p>
		);
	}

    if (pageView === 'clients-create') {
        return canManageExpenses ? (
            <ClientsManager mode="create" />
        ) : (
            <p>You do not have permission to manage clients.</p>
        );
    }

    return (
        <div>
            {canManageExpenses ? (
                <AdminDashboard />
            ) : (
                <UserDashboard />
            )}
        </div>
    );
};

// Mount React on legacy ID wrapper (shortcodes or admin pages)
const legacyRootElement = document.getElementById('manfi-expense-tracker');
if (legacyRootElement) {
    const root = createRoot(legacyRootElement);
    root.render(<App />);
}

// Mount React on all new modern Gutenberg block placeholders
const blockRootElements = document.querySelectorAll('.manfi-expense-tracker-mount');
blockRootElements.forEach((element) => {
    const root = createRoot(element);
    const view = element.getAttribute('data-view');
    root.render(<App overrideView={view} />);
});
