import React from 'react';
import ReactDOM from 'react-dom/client';
import '../css/app.css';
import { DashboardWorkspace, type DashboardBootstrap } from './components/dashboard/DashboardWorkspace';
import { ContactsWorkspace, type ContactsBootstrap } from './components/contacts/ContactsWorkspace';
import { AdminDashboardWorkspace, type AdminDashboardBootstrap } from './components/admin/AdminDashboardWorkspace';
import { AdminBillingWorkspace, type AdminBillingBootstrap } from './components/admin/AdminBillingWorkspace';
import { AdminPlansWorkspace, type AdminPlansBootstrap } from './components/admin/AdminPlansWorkspace';
import { AdminTenantDetailWorkspace, type TenantDetailBootstrap } from './components/admin/AdminTenantDetailWorkspace';
import { AdminTenantsWorkspace, type AdminTenantsBootstrap } from './components/admin/AdminTenantsWorkspace';
import { FollowUpQueueWorkspace, type FollowUpBootstrap } from './components/tasks/FollowUpQueueWorkspace';
import { InboxWorkspace, type InboxBootstrap } from './components/inbox/InboxWorkspace';
import { OrderDetailWorkspace, type OrderDetailBootstrap } from './components/orders/OrderDetailWorkspace';
import { OrdersWorkspace, type OrdersBootstrap } from './components/orders/OrdersWorkspace';
import { QuotesWorkspace, type QuotesBootstrap } from './components/quotes/QuotesWorkspace';
import { ReportsWorkspace, type ReportsBootstrap } from './components/reports/ReportsWorkspace';
import { AiSettingsWorkspace, type AiSettingsBootstrap } from './components/settings/AiSettingsWorkspace';
import { BillingSettingsWorkspace, type BillingBootstrap } from './components/settings/BillingSettingsWorkspace';
import { ChannelsSettingsWorkspace, type ChannelsBootstrap } from './components/settings/ChannelsSettingsWorkspace';
import { RolesSettingsWorkspace, type RolesSettingsBootstrap } from './components/settings/RolesSettingsWorkspace';
import { TasksWorkspace, type TasksBootstrap } from './components/tasks/TasksWorkspace';
import { UsersSettingsWorkspace, type UsersSettingsBootstrap } from './components/settings/UsersSettingsWorkspace';
import { PipelineWorkspace, type PipelineBootstrap } from './components/pipeline/PipelineWorkspace';
import { ProductsWorkspace, type ProductsBootstrap } from './components/products/ProductsWorkspace';

function parseDataset<T>(input: string | undefined): T | null {
    if (!input) {
        return null;
    }

    try {
        return JSON.parse(input) as T;
    } catch {
        return null;
    }
}

const dashboardElement = document.getElementById('dashboard-app');

if (dashboardElement) {
    const bootstrap = parseDataset<DashboardBootstrap>(dashboardElement.dataset.dashboard);

    if (bootstrap) {
        ReactDOM.createRoot(dashboardElement).render(
            <React.StrictMode>
                <DashboardWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const inboxElement = document.getElementById('inbox-app');

if (inboxElement) {
    const bootstrap = parseDataset<InboxBootstrap>(inboxElement.dataset.inbox);

    if (bootstrap) {
        ReactDOM.createRoot(inboxElement).render(
            <React.StrictMode>
                <InboxWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const contactsElement = document.getElementById('contacts-app');

if (contactsElement) {
    const bootstrap = parseDataset<ContactsBootstrap>(contactsElement.dataset.contacts);

    if (bootstrap) {
        ReactDOM.createRoot(contactsElement).render(
            <React.StrictMode>
                <ContactsWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const productsElement = document.getElementById('products-app');

if (productsElement) {
    const bootstrap = parseDataset<ProductsBootstrap>(productsElement.dataset.products);

    if (bootstrap) {
        ReactDOM.createRoot(productsElement).render(
            <React.StrictMode>
                <ProductsWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const quotesElement = document.getElementById('quotes-app');

if (quotesElement) {
    const bootstrap = parseDataset<QuotesBootstrap>(quotesElement.dataset.quotes);

    if (bootstrap) {
        ReactDOM.createRoot(quotesElement).render(
            <React.StrictMode>
                <QuotesWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const reportsElement = document.getElementById('reports-app');

if (reportsElement) {
    const bootstrap = parseDataset<ReportsBootstrap>(reportsElement.dataset.reports);

    if (bootstrap) {
        ReactDOM.createRoot(reportsElement).render(
            <React.StrictMode>
                <ReportsWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const ordersElement = document.getElementById('orders-app');

if (ordersElement) {
    const bootstrap = parseDataset<OrdersBootstrap>(ordersElement.dataset.orders);

    if (bootstrap) {
        ReactDOM.createRoot(ordersElement).render(
            <React.StrictMode>
                <OrdersWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const adminDashboardElement = document.getElementById('admin-dashboard-app');

if (adminDashboardElement) {
    const bootstrap = parseDataset<AdminDashboardBootstrap>(adminDashboardElement.dataset.adminDashboard);

    if (bootstrap) {
        ReactDOM.createRoot(adminDashboardElement).render(
            <React.StrictMode>
                <AdminDashboardWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const adminBillingElement = document.getElementById('admin-billing-app');

if (adminBillingElement) {
    const bootstrap = parseDataset<AdminBillingBootstrap>(adminBillingElement.dataset.adminBilling);

    if (bootstrap) {
        ReactDOM.createRoot(adminBillingElement).render(
            <React.StrictMode>
                <AdminBillingWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const adminTenantsElement = document.getElementById('admin-tenants-app');

if (adminTenantsElement) {
    const bootstrap = parseDataset<AdminTenantsBootstrap>(adminTenantsElement.dataset.adminTenants);

    if (bootstrap) {
        ReactDOM.createRoot(adminTenantsElement).render(
            <React.StrictMode>
                <AdminTenantsWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const adminTenantDetailElement = document.getElementById('admin-tenant-detail-app');

if (adminTenantDetailElement) {
    const bootstrap = parseDataset<TenantDetailBootstrap>(adminTenantDetailElement.dataset.adminTenantDetail);

    if (bootstrap) {
        ReactDOM.createRoot(adminTenantDetailElement).render(
            <React.StrictMode>
                <AdminTenantDetailWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const adminPlansElement = document.getElementById('admin-plans-app');

if (adminPlansElement) {
    const bootstrap = parseDataset<AdminPlansBootstrap>(adminPlansElement.dataset.adminPlans);

    if (bootstrap) {
        ReactDOM.createRoot(adminPlansElement).render(
            <React.StrictMode>
                <AdminPlansWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const orderDetailElement = document.getElementById('order-detail-app');

if (orderDetailElement) {
    const bootstrap = parseDataset<OrderDetailBootstrap>(orderDetailElement.dataset.orderDetail);

    if (bootstrap) {
        ReactDOM.createRoot(orderDetailElement).render(
            <React.StrictMode>
                <OrderDetailWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const tasksElement = document.getElementById('tasks-app');

if (tasksElement) {
    const bootstrap = parseDataset<TasksBootstrap>(tasksElement.dataset.tasks);

    if (bootstrap) {
        ReactDOM.createRoot(tasksElement).render(
            <React.StrictMode>
                <TasksWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const followUpElement = document.getElementById('follow-up-queue-app');

if (followUpElement) {
    const bootstrap = parseDataset<FollowUpBootstrap>(followUpElement.dataset.followUp);

    if (bootstrap) {
        ReactDOM.createRoot(followUpElement).render(
            <React.StrictMode>
                <FollowUpQueueWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const aiSettingsElement = document.getElementById('ai-settings-app');

if (aiSettingsElement) {
    const bootstrap = parseDataset<AiSettingsBootstrap>(aiSettingsElement.dataset.aiSettings);

    if (bootstrap) {
        ReactDOM.createRoot(aiSettingsElement).render(
            <React.StrictMode>
                <AiSettingsWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const channelsSettingsElement = document.getElementById('channels-settings-app');

if (channelsSettingsElement) {
    const bootstrap = parseDataset<ChannelsBootstrap>(channelsSettingsElement.dataset.channelsSettings);

    if (bootstrap) {
        ReactDOM.createRoot(channelsSettingsElement).render(
            <React.StrictMode>
                <ChannelsSettingsWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const usersSettingsElement = document.getElementById('users-settings-app');

if (usersSettingsElement) {
    const bootstrap = parseDataset<UsersSettingsBootstrap>(usersSettingsElement.dataset.usersSettings);

    if (bootstrap) {
        ReactDOM.createRoot(usersSettingsElement).render(
            <React.StrictMode>
                <UsersSettingsWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const rolesSettingsElement = document.getElementById('roles-settings-app');

if (rolesSettingsElement) {
    const bootstrap = parseDataset<RolesSettingsBootstrap>(rolesSettingsElement.dataset.rolesSettings);

    if (bootstrap) {
        ReactDOM.createRoot(rolesSettingsElement).render(
            <React.StrictMode>
                <RolesSettingsWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const billingSettingsElement = document.getElementById('billing-settings-app');

if (billingSettingsElement) {
    const bootstrap = parseDataset<BillingBootstrap>(billingSettingsElement.dataset.billingSettings);

    if (bootstrap) {
        ReactDOM.createRoot(billingSettingsElement).render(
            <React.StrictMode>
                <BillingSettingsWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const pipelineElement = document.getElementById('pipeline-app');

if (pipelineElement) {
    const bootstrap = parseDataset<PipelineBootstrap>(pipelineElement.dataset.pipeline);

    if (bootstrap) {
        ReactDOM.createRoot(pipelineElement).render(
            <React.StrictMode>
                <PipelineWorkspace bootstrap={bootstrap} />
            </React.StrictMode>
        );
    }
}

const marketingRoot = document.getElementById('app');

if (marketingRoot) {
    ReactDOM.createRoot(marketingRoot).render(
        <React.StrictMode>
            <></>
        </React.StrictMode>
    );
}
