import { AppContent } from '@/components/app-content';
import { AppShell } from '@/components/app-shell';
import { AppSidebar } from '@/components/app-sidebar';
import { 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 '../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 (
        <AppShell variant="sidebar">
            <AppContent variant="sidebar" className="flex h-screen flex-col">
                {/* Main Content Area */}
                <div className="flex min-h-0 flex-1">
                    <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 min-h-0 flex-1 border-t bg-background">
                            {/* Main content */}
                            <MainContentRenderer isAddOnOpenMobile={isAddOnOpenMobile}>{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>
    );
}

function MainContentRenderer({ children, isAddOnOpenMobile }: { children: React.ReactNode; isAddOnOpenMobile: boolean }) {
    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]);

    const isAnySidebarOpen = activeAddOn || isAddOnOpenMobile;

    return (
        <div
            className={`relative min-h-0 w-full flex-1 ${
                isAnySidebarOpen
                    ? 'overflow-hidden'
                    : 'overflow-y-auto [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300/80 [&::-webkit-scrollbar-track]:bg-transparent'
            }`}
            style={!isAnySidebarOpen ? { scrollbarWidth: 'thin', scrollbarColor: 'rgba(209,213,219,0.8) transparent' } : undefined}
        >
            <div>{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>
    );
}