import { AppContent } from '@/components/layout/app-content';
import { AppShell } from '@/components/layout/app-shell';
import { FrontendSidebar } from '@/components/layout/frontend-sidebar';
import { AppSidebarHeader } from '@/components/layout/app-sidebar-header';
import { Toaster } from '@/components/ui/toaster';
import { toast } from 'sonner';
import { Flash, type BreadcrumbItem } from '@/types';
import { usePage } from '@inertiajs/react';
import { useEffect, useState, type PropsWithChildren } from 'react';
import { WelcomeModal } from '@/pages/website/components/WelcomeModal';

export default function FrontendSidebarLayout({ children, breadcrumbs = [], className }: PropsWithChildren<{ breadcrumbs?: BreadcrumbItem[], className?: string }>) {
    // Ambil flash message dari Inertia props
    const { flash } = usePage().props as { flash?: Flash };

    // State for welcome modal
    const [popupNews, setPopupNews] = useState<any>(null);
    const [showModal, setShowModal] = useState(false);

    // Fetch active popup news
    useEffect(() => {
        const fetchPopup = async () => {
            try {
                const response = await fetch('/api/news/popup/active');
                const data = await response.json();

                if (data && data.id) {
                    // Check if user has dismissed this popup
                    const storageKey = `news_popup_dismissed_${data.id}`;
                    const dismissed = localStorage.getItem(storageKey);

                    let shouldShow = true;

                    if (dismissed) {
                        if (data.popup_frequency === 'daily') {
                            try {
                                const dismissData = JSON.parse(dismissed);
                                if (dismissData.expiry && Date.now() < dismissData.expiry) {
                                    shouldShow = false;
                                } else {
                                    // Expired, remove from storage
                                    localStorage.removeItem(storageKey);
                                }
                            } catch {
                                // Invalid data, remove it
                                localStorage.removeItem(storageKey);
                            }
                        } else {
                            // For 'once' or 'always', if it's in storage, it means user dismissed it
                            shouldShow = false;
                        }
                    }

                    if (shouldShow) {
                        setPopupNews(data);
                        setShowModal(true);
                    }
                }
            } catch (error) {
                console.error('Failed to fetch popup news:', error);
            }
        };

        fetchPopup();
    }, []);

    // Tampilkan toast jika ada pesan flash
    useEffect(() => {
        if (flash?.success) toast.success(flash.success);
        if (flash?.error) toast.error(flash.error);
        if (flash?.info) toast.info(flash.info);
        if (flash?.warning) toast.warning(flash.warning);
    }, [flash]);

    return (
        <>
            <AppShell variant="sidebar">
                <FrontendSidebar />
                <AppContent variant="sidebar" className={className}>

                    {/* notify component */}
                    <Toaster />

                    <AppSidebarHeader breadcrumbs={breadcrumbs} />
                    <div className="flex flex-1 flex-col p-4 md:p-6">
                        {children}
                    </div>
                </AppContent>
            </AppShell>

            {/* Welcome Modal */}
            <WelcomeModal
                isOpen={showModal}
                onClose={() => setShowModal(false)}
                news={popupNews}
            />
        </>
    );
}