'use client';
import { FC, Suspense, memo } from "react";
import { ContentProps, ModeTypes, ModeTypesList } from "@/validations/mutual/dashboard/props";
import { LanguageTypes } from "@/validations/mutual/language/validations";
import PageToBeChildrendMulti from "./PageToBeChildrendMulti";
import LoadingContent from "@/components/mutual/loader/component";

const MemoizedMultiPage = memo(PageToBeChildrendMulti);

const translations = {
    en: {
        errorLoadingContent: "Error Loading Content",
        contentArea: "Content Area",
        contentLoading: "Content Loading",
        contentLoadingDescription: "The requested page is currently unavailable or still loading.",
        pageUrl: "Page URL",
        language: "Language",
    },
    tr: {
        errorLoadingContent: "İçerik Yüklenirken Hata",
        contentArea: "İçerik Alanı",
        contentLoading: "İçerik Yükleniyor",
        contentLoadingDescription: "İçerik Yüklenirken Hata",
        pageUrl: "Sayfa URL",
        language: "Dil",
    }
}

const FallbackContent: FC<{ lang: LanguageTypes; activePageUrl: string }> = memo(({ lang, activePageUrl }) => (
    <div className="p-6 bg-white rounded-lg shadow-md">
        <h2 className="text-2xl font-bold mb-4">{translations[lang].contentLoading}</h2>
        <p className="text-gray-600 mb-4">{translations[lang].contentLoadingDescription}</p>
        <div className="p-4 bg-blue-50 border border-blue-200 rounded-md">
            <p className="text-sm text-blue-700">{translations[lang].pageUrl}: {activePageUrl}</p>
            <p className="text-sm text-blue-700">{translations[lang].language}: {lang}</p>
        </div>
    </div>
));

const ContentComponent: FC<ContentProps> = ({
    searchParams, activePageUrl, mode, userData, userLoading, userError, refreshUser, updateUser,
    onlineData, onlineLoading, onlineError, refreshOnline, updateOnline,
}) => {
    const loadingContent = <LoadingContent height="h-16" size="w-36 h-48" plane="h-full w-full" />;
    const classNameDiv = "fixed top-24 left-80 right-0 py-10 px-15 border-emerald-150 border-l-2 overflow-y-auto h-[calc(100vh-64px)]";
    const lang = onlineData?.lang as LanguageTypes || 'en';

    if (userLoading) { return <div className={classNameDiv}>{loadingContent}</div> }
    if (userError) {
        return (
            <div className={classNameDiv}><div className="p-6 bg-white rounded-lg shadow-md">
                <h2 className="text-2xl font-bold mb-4 text-red-600">{translations[lang].errorLoadingContent}</h2><p className="text-gray-600 mb-4">{userError}</p></div>
            </div>
        )
    }
    return (
        <div className={classNameDiv}>
            <Suspense fallback={loadingContent}>
                <div className="p-6 bg-white rounded-lg shadow-md">
                    <h2 className="text-2xl font-bold mb-4">{translations[lang].contentArea}</h2>
                    {(!userData) && (<FallbackContent lang={lang} activePageUrl={activePageUrl || ''} />)}
                    <MemoizedMultiPage
                        activePageUrl={activePageUrl || ''} searchParams={searchParams}
                        userData={userData} userLoading={userLoading} userError={userError} refreshUser={refreshUser} updateUser={updateUser}
                        onlineData={onlineData} onlineLoading={onlineLoading} onlineError={onlineError} refreshOnline={refreshOnline} updateOnline={updateOnline} />
                </div>
            </Suspense>
        </div>
    );
};

export default ContentComponent;


// {userData && (
//     <div className="mb-6 p-4 bg-blue-50 rounded-lg">
//         {/* User Information */}
//         <h3 className="text-lg font-semibold mb-2">User Information</h3>
//         <p>User Type: {userData.user_tag || 'N/A'}</p>
//         {userData.person && (
//             <p>Name: {userData.person.firstname} {userData.person.surname}</p>
//         )}
//     </div>
// )}

// {selectionData && (
//     <div className="mb-6 p-4 bg-green-50 rounded-lg">
//         {/* Selection Information */}
//         <h3 className="text-lg font-semibold mb-2">Selection Information</h3>
//         <p>Current Page: {activePageUrl || 'Home'}</p>
//         <p>Mode: {modeFromQuery}</p>
//     </div>
// )}