"use client";
import React, { Suspense } from "react";
import SecurePage from "@components/Secure/Secure";
import SuspenseLoading from "@components/SuspendeLoading/SuspenseLoading";
import style from "./page.module.css";
import AssistantHome from "./components/AssistantHome/AssistantHome";
import StepEngine from "./components/StepEngine/StepEngine";
import { ThemeProvider } from "@mui/material";
import turnosXpressTheme from "@core/app/theme/turnosXpress";
import { useSearchParams } from "next/navigation";
import { useBottomToolbarStore } from "@core/Store/BottomToolbar.Store";
import { useEffect } from "react";

function AssistantContent() {
    const searchParams = useSearchParams();
    const flow = searchParams?.get("flow");
    const action = searchParams?.get("action");
    const companyId = searchParams?.get("companyId");
    const employeeId = searchParams?.get("employeeId");
    const bottomToolbar = useBottomToolbarStore();

    useEffect(() => {
        // Force hide bottom toolbar completely
        bottomToolbar.set(null);
        return () => {
            bottomToolbar.clear();
        };
    }, []);

    return (
        <div className={style.assistantContainer}>
            {flow ? <StepEngine flowId={flow} action={action} initialCompanyId={companyId} initialEmployeeId={employeeId} /> : <AssistantHome />}
        </div>
    );
}

export default function AssistantPage() {
    return (
        <ThemeProvider theme={turnosXpressTheme}>
            <Suspense fallback={<SuspenseLoading />}>
                <SecurePage>
                    <AssistantContent />
                </SecurePage>
            </Suspense>
        </ThemeProvider>
    );
}
