'use client';
import { AppFooter } from "@/components/app/footer";
import { AppHeader } from "@/components/app/header";
import { EmailVerificationPrompt } from "@/components/app/email-verification-prompt";
import { EmailVerificationOTP } from "@/components/app/email-verification-otp";
import { useEmailVerification } from "@/hooks/use-email-verification";
import { USER_TOKEN_CL } from "@/utils/data/user-client";
import { usePathname } from "next/navigation";

import { useState, useEffect } from "react";

export default function WebsiteLayout({ children }) {
    const pathname = usePathname();
    const [token, setToken] = useState<string | undefined>(undefined);

    useEffect(() => {
        setToken(USER_TOKEN_CL());
    }, []);

    const isAuthPage = pathname.includes('/login') || 
                       pathname.includes('/register') || 
                       pathname.includes('/reset-password') ||
                       pathname.includes('/verify-email') ||
                       pathname.includes('/email-verify') ||
                       pathname.match(/\/surveys\/.+/);

    const {
        showPrompt,
        showOTP,
        handleVerifyClick,
        handleCancelPrompt,
        handleOTPSuccess,
        handleCloseOTP
    } = useEmailVerification();

    return (
        <>
            {!isAuthPage && <AppHeader />}
            {children}
            {!isAuthPage && <AppFooter />}
            
            {token && !isAuthPage && (
                <>
                    <EmailVerificationPrompt
                        open={showPrompt}
                        onVerify={handleVerifyClick}
                        onCancel={handleCancelPrompt}
                    />
                    <EmailVerificationOTP
                        open={showOTP}
                        onSuccess={handleOTPSuccess}
                        onClose={handleCloseOTP}
                    />
                </>
            )}
        </>
    )
}