import { AppContent } from '@/components/app-content';
import { AppShell } from '@/components/app-shell';
import { AppSidebar } from '@/components/app-sidebar';
import { AddOnProvider, useAddOn } from '@/hooks/use-addons';
import AppHeader from '@/layouts/app/app-header';
import { type BreadcrumbItem, type SharedData } from '@/types';
import { usePage } from '@inertiajs/react';
import { ChevronLeft, X } from 'lucide-react';
import { motion } from 'motion/react';
import { type PropsWithChildren, useEffect, useState } from 'react';
import AddOnSidebar from '@/layouts/addOns/AddOnSidebar';
export default function AppSidebarLayout({ children, breadcrumbs = [] }: PropsWithChildren<{ breadcrumbs?: BreadcrumbItem[] }>) {
    const page = usePage<SharedData>();
    const { auth } = page.props;
    const [isMobileSearchOpen, setIsMobileSearchOpen] = useState(false);
    const [isAddOnOpenMobile, setIsAddOnOpenMobile] = useState(false);
    return (
        <AddOnProvider>
            <AppShell variant="sidebar">
                <AppContent variant="sidebar" className="flex h-screen flex-col overflow-hidden">
                    {/* Main Content Area with Top Padding */}
                    <div className="flex flex-1 overflow-hidden transition-all duration-200">
                        <div className="hidden md:block">
                            <AppSidebar />
                        </div>

                        {/* Right: header + page content */}
                        <div className="flex min-h-0 flex-1 flex-col bg-background">
                            {/* Header */}
                            <AppHeader isMobileSearchOpen={isMobileSearchOpen} setIsMobileSearchOpen={setIsMobileSearchOpen} />

                            {/* Content area with sidebar */}
                            <div className="flex flex-1 overflow-hidden border-t bg-background">
                                {/* Main content */}
                                <MainContentRenderer>{children}</MainContentRenderer>

                                {/* Mobile edge toggle button (48x48) - visible only on small screens */}
                                <div className="fixed right-0 bottom-18 z-50 md:hidden">
                                    <button
                                        type="button"
                                        onClick={() => setIsAddOnOpenMobile(!isAddOnOpenMobile)}
                                        className="flex h-12 w-12 items-center justify-center rounded-md bg-background shadow-md"
                                        aria-label="Open add-ons"
                                    >
                                        {isAddOnOpenMobile ? <X className="h-5 w-5" /> : <ChevronLeft className="h-5 w-5" />}
                                    </button>
                                </div>

                                {/* Sidebar - width reduced for smaller devices: 48px on mobile, 64px on md+ */}
                                <div className="hidden w-12 shrink-0 items-start justify-center border-r border-l bg-card pt-2 pr-2 md:flex">
                                    <AddOnSidebar />
                                </div>

                                {/* Mobile slide-in panel for AddOnLayout - always rendered to allow transitions */}
                                <div
                                    className={`fixed inset-0 z-40 flex md:hidden pointer-events-${isAddOnOpenMobile ? 'auto' : 'none'}`}
                                    aria-hidden={!isAddOnOpenMobile}
                                >
                                    {/* backdrop */}
                                    <div
                                        className={`absolute inset-0 transition-opacity duration-200 ${isAddOnOpenMobile ? 'opacity-100' : 'opacity-0'}`}
                                        onClick={() => setIsAddOnOpenMobile(false)}
                                    />

                                    <div className="ml-auto h-full">
                                        <div
                                            className={`h-full w-[84%] max-w-xs transform bg-background shadow-lg transition-transform duration-300 ${
                                                isAddOnOpenMobile ? 'translate-x-0' : 'translate-x-full'
                                            }`}
                                        >
                                            <div className="h-full overflow-y-auto p-2">
                                                <AddOnSidebar />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </AppContent>
            </AppShell>
        </AddOnProvider>
    );
}

function MainContentRenderer({ children }: { children: React.ReactNode }) {
    const { activeAddOn, addOnClose } = useAddOn();
    const page = usePage<SharedData>();

    // Close addon when page changes (user navigates)
    useEffect(() => {
        if (activeAddOn) {
            addOnClose();
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [page.url]);

    return (
        <div className="relative w-full flex-1">
            <div className={`no-scrollbar h-full overflow-y-auto transition-all duration-300 ${activeAddOn ? '' : ''}`}>{children}</div>
            {/* <div className={`"no-scrollbar h-full ${activeAddOn && 'flex items-center'} overflow-y-auto"`}>{children}</div> */}

            {activeAddOn && (
                <motion.div className="" initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
                    {/* Backdrop overlay */}
                    <div className="absolute inset-0 z-10 bg-gray-400/20" onClick={addOnClose} />

                    {/* AddOn panel */}
                    <div className="no-scrollbar absolute top-0 right-0 z-20 h-full w-full overflow-auto border bg-background shadow-lg md:w-[400px]">
                        {activeAddOn.content}
                    </div>
                </motion.div>
            )}
        </div>
    );
}