NetMesh/components/ui/aside-panel.tsx

import { ArrowLeft, MoreVertical, X } from 'lucide-react';
import React, { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react';
import { cn } from '../../lib/utils';
import { localStorageAdapter } from '@/infrastructure/persistence/localStorageAdapter';
import { Popover, PopoverContent, PopoverTrigger } from './popover';
import { ScrollArea } from './scroll-area';

export const DEFAULT_ASIDE_INLINE_WIDTH_PX = 380;
const MIN_ASIDE_INLINE_WIDTH_PX = 320;
const MAX_ASIDE_INLINE_WIDTH_PX = 720;

export function clampAsideInlineWidth(width: number): number {
    return Math.max(MIN_ASIDE_INLINE_WIDTH_PX, Math.min(MAX_ASIDE_INLINE_WIDTH_PX, width));
}

export interface AsidePanelResizeProps {
    resizable?: boolean;
    persistWidthStorageKey?: string;
    resizeAriaLabel?: string;
}

function parseInlineWidthPx(width: string): number {
    const arbitraryWidthMatch = width.match(/w-\[(.+)\]/);
    if (arbitraryWidthMatch) {
        const raw = arbitraryWidthMatch[1].trim();
        const parsed = parseInt(raw, 10);
        if (!Number.isNaN(parsed)) return clampAsideInlineWidth(parsed);
    }

    switch (width) {
        case 'w-full':
        case 'w-screen':
            return DEFAULT_ASIDE_INLINE_WIDTH_PX;
        default:
            return DEFAULT_ASIDE_INLINE_WIDTH_PX;
    }
}

function readPersistedAsideWidth(storageKey: string | undefined, fallback: number): number {
    if (!storageKey) return fallback;
    const stored = localStorageAdapter.readNumber(storageKey);
    if (stored === null) return fallback;
    return clampAsideInlineWidth(stored);
}

// Types
interface AsideContentItem {
    id: string;
    title: string;
    subtitle?: string;
    actions?: ReactNode;
    content: ReactNode;
}

interface AsidePanelContextType {
    push: (item: AsideContentItem) => void;
    pop: () => void;
    replace: (item: AsideContentItem) => void;
    clear: () => void;
    canGoBack: boolean;
    currentItem: AsideContentItem | null;
}

const AsidePanelContext = createContext<AsidePanelContextType | null>(null);
const AsideActionMenuContext = createContext<(() => void) | null>(null);

export const useAsidePanel = () => {
    const context = useContext(AsidePanelContext);
    if (!context) {
        throw new Error('useAsidePanel must be used within an AsidePanel');
    }
    return context;
};

// Props
interface AsidePanelProps extends AsidePanelResizeProps {
    open: boolean;
    onClose: () => void;
    title?: string;
    subtitle?: string;
    actions?: ReactNode;
    showBackButton?: boolean;
    onBack?: () => void;
    children: ReactNode;
    className?: string;
    width?: string;
    layout?: AsidePanelLayout;
    /**
     * Optional stable identifier emitted as `data-section` on the panel
     * root. Used as a targeting hook for Custom CSS (Settings → Appearance).
     */
    dataSection?: string;
}

interface AsidePanelHeaderProps {
    title: string;
    subtitle?: string;
    actions?: ReactNode;
    onBack?: () => void;
    onClose: () => void;
    showBackButton?: boolean;
}

// Header Component
export const AsidePanelHeader: React.FC<AsidePanelHeaderProps> = ({
    title,
    subtitle,
    actions,
    onBack,
    onClose,
    showBackButton = false,
}) => {
    return (
        <div className="px-4 py-3 flex items-center justify-between border-b border-border/60 app-no-drag shrink-0">
            <div className="flex items-center gap-2 min-w-0">
                {showBackButton && onBack && (
                    <button
                        onClick={onBack}
                        className="p-1 hover:bg-muted rounded-md transition-colors cursor-pointer shrink-0"
                    >
                        <ArrowLeft size={18} />
                    </button>
                )}
                <div className="min-w-0">
                    <h3 className="text-sm font-semibold truncate">{title}</h3>
                    {subtitle && (
                        <p className="text-xs text-muted-foreground truncate">{subtitle}</p>
                    )}
                </div>
            </div>
            <div className="flex items-center gap-1 shrink-0">
                {actions}
                <button
                    onClick={onClose}
                    className="p-1.5 hover:bg-muted rounded-md transition-colors cursor-pointer"
                >
                    <X size={18} />
                </button>
            </div>
        </div>
    );
};

// Content Component (wraps children with scroll)
export const AsidePanelContent: React.FC<{ children: ReactNode; className?: string }> = ({
    children,
    className,
}) => {
    return (
        <ScrollArea className={cn("flex-1 min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block [&>[data-radix-scroll-area-viewport]>div]:!min-w-0", className)}>
            <div className="p-4 space-y-4 min-w-0 overflow-hidden">
                {children}
            </div>
        </ScrollArea>
    );
};

// Footer Component
export const AsidePanelFooter: React.FC<{ children: ReactNode; className?: string }> = ({
    children,
    className,
}) => {
    return (
        <div className={cn("px-4 py-3 border-t border-border/60 shrink-0", className)}>
            {children}
        </div>
    );
};

// Action Menu Component (for the ... button)
interface AsideActionMenuProps {
    children: ReactNode;
}

export const AsideActionMenu: React.FC<AsideActionMenuProps> = ({ children }) => {
    const [open, setOpen] = useState(false);
    const close = useCallback(() => setOpen(false), []);

    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <button className="p-1.5 hover:bg-muted rounded-md transition-colors cursor-pointer">
                    <MoreVertical size={18} />
                </button>
            </PopoverTrigger>
            <PopoverContent className="w-40 p-1" align="end">
                <AsideActionMenuContext.Provider value={close}>
                    {children}
                </AsideActionMenuContext.Provider>
            </PopoverContent>
        </Popover>
    );
};

export const invokeAsideActionMenuItemClick = (
    closeMenu: (() => void) | null,
    onClick?: () => void,
) => {
    closeMenu?.();
    onClick?.();
};

// Action Menu Item
export const AsideActionMenuItem: React.FC<{
    icon?: ReactNode;
    children: ReactNode;
    onClick?: () => void;
    variant?: 'default' | 'destructive';
}> = ({ icon, children, onClick, variant = 'default' }) => {
    const closeMenu = useContext(AsideActionMenuContext);

    return (
        <button
            onClick={() => invokeAsideActionMenuItemClick(closeMenu, onClick)}
            className={cn(
                "w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-md transition-colors cursor-pointer",
                variant === 'destructive'
                    ? "text-destructive hover:bg-destructive/10"
                    : "hover:bg-muted"
            )}
        >
            {icon}
            {children}
        </button>
    );
};

// Main Panel Component with Stack Support
interface AsidePanelStackProps {
    open: boolean;
    onClose: () => void;
    initialItem: AsideContentItem;
    className?: string;
    width?: string;
    layout?: AsidePanelLayout;
    /**
     * Optional stable identifier emitted as `data-section` on the panel
     * root. Used as a targeting hook for Custom CSS.
     */
    dataSection?: string;
}

export type AsidePanelLayout = 'overlay' | 'inline';

const resolveInlineWidth = (width: string) => {
    const arbitraryWidthMatch = width.match(/w-\[(.+)\]/);
    if (arbitraryWidthMatch) {
        return arbitraryWidthMatch[1];
    }

    switch (width) {
        case 'w-full':
            return '100%';
        case 'w-screen':
            return '100vw';
        default:
            return '380px';
    }
};

export const AsidePanelStack: React.FC<AsidePanelStackProps> = ({
    open,
    onClose,
    initialItem,
    className,
    width = 'w-[380px]',
    layout = 'overlay',
    dataSection,
}) => {
    const [stack, setStack] = useState<AsideContentItem[]>([initialItem]);

    const push = useCallback((item: AsideContentItem) => {
        setStack(prev => [...prev, item]);
    }, []);

    const pop = useCallback(() => {
        setStack(prev => {
            if (prev.length > 1) {
                return prev.slice(0, -1);
            }
            return prev;
        });
    }, []);

    const replace = useCallback((item: AsideContentItem) => {
        setStack([item]);
    }, []);

    const clear = useCallback(() => {
        setStack([initialItem]);
    }, [initialItem]);

    const currentItem = stack[stack.length - 1];
    const canGoBack = stack.length > 1;
    const inlineWidth = useMemo(() => resolveInlineWidth(width), [width]);
    const inlineStyle = layout === 'inline'
        ? ({
            width: inlineWidth,
            ['--aside-inline-width' as string]: inlineWidth,
        } as React.CSSProperties)
        : undefined;

    // Reset stack when panel closes/opens
    React.useEffect(() => {
        if (open) {
            setStack([initialItem]);
        }
    }, [open, initialItem]);

    if (!open) return null;

    return (
        <AsidePanelContext.Provider value={{ push, pop, replace, clear, canGoBack, currentItem }}>
            <div className={cn(
                layout === 'inline'
                    ? "relative split-panel-enter shrink-0 h-full min-h-0 max-w-full border-l border-border/60 bg-background flex flex-col app-no-drag overflow-hidden shadow-[-16px_0_32px_hsl(var(--foreground)/0.08)]"
                    : "absolute right-0 top-0 bottom-0 max-w-full border-l border-border/60 bg-background z-30 flex flex-col app-no-drag overflow-hidden",
                layout === 'overlay' && width,
                className
            )}
            style={inlineStyle}
            data-section={dataSection}>
                <AsidePanelHeader
                    title={currentItem.title}
                    subtitle={currentItem.subtitle}
                    actions={currentItem.actions}
                    onBack={canGoBack ? pop : undefined}
                    onClose={onClose}
                    showBackButton={canGoBack}
                />
                {currentItem.content}
            </div>
        </AsidePanelContext.Provider>
    );
};

// Simple Panel Component (no stack)
export const AsidePanel: React.FC<AsidePanelProps> = ({
    open,
    onClose,
    title,
    subtitle,
    actions,
    showBackButton,
    onBack,
    children,
    className,
    width = 'w-[380px]',
    layout = 'overlay',
    resizable = false,
    persistWidthStorageKey,
    resizeAriaLabel,
    dataSection,
}) => {
    const fallbackWidthPx = parseInlineWidthPx(width);
    const [panelWidthPx, setPanelWidthPx] = useState(() =>
        resizable ? readPersistedAsideWidth(persistWidthStorageKey, fallbackWidthPx) : fallbackWidthPx,
    );
    const [isResizing, setIsResizing] = useState(false);
    const effectivePanelWidthPx = resizable ? panelWidthPx : fallbackWidthPx;
    // Resizable panels always use pixel width so overlay and inline share the same drag path.
    const usesPixelWidth = resizable || layout === 'inline';

    const panelStyle = usesPixelWidth
        ? ({
            width: `${effectivePanelWidthPx}px`,
            ['--aside-inline-width' as string]: `${effectivePanelWidthPx}px`,
        } as React.CSSProperties)
        : undefined;

    const handleResizeStart = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
        if (!resizable) return;

        event.preventDefault();
        event.stopPropagation();

        const startX = event.clientX;
        const startWidth = panelWidthPx;
        const previousCursor = document.body.style.cursor;
        const previousUserSelect = document.body.style.userSelect;

        setIsResizing(true);
        document.body.style.cursor = 'col-resize';
        document.body.style.userSelect = 'none';

        const handlePointerMove = (moveEvent: PointerEvent) => {
            setPanelWidthPx(clampAsideInlineWidth(startWidth + startX - moveEvent.clientX));
        };
        const handlePointerUp = (upEvent: PointerEvent) => {
            const nextWidth = clampAsideInlineWidth(startWidth + startX - upEvent.clientX);
            setPanelWidthPx(nextWidth);
            if (persistWidthStorageKey) {
                localStorageAdapter.writeNumber(persistWidthStorageKey, nextWidth);
            }
            setIsResizing(false);
            document.body.style.cursor = previousCursor;
            document.body.style.userSelect = previousUserSelect;
            window.removeEventListener('pointermove', handlePointerMove);
            window.removeEventListener('pointerup', handlePointerUp);
            window.removeEventListener('pointercancel', handlePointerUp);
        };

        window.addEventListener('pointermove', handlePointerMove);
        window.addEventListener('pointerup', handlePointerUp);
        window.addEventListener('pointercancel', handlePointerUp);
    }, [panelWidthPx, persistWidthStorageKey, resizable]);

    if (!open) return null;

    return (
        <div className={cn(
            layout === 'inline'
                ? "relative split-panel-enter shrink-0 h-full min-h-0 max-w-full border-l border-border/60 bg-background flex flex-col app-no-drag overflow-hidden shadow-[-16px_0_32px_hsl(var(--foreground)/0.08)]"
                : "absolute right-0 top-0 bottom-0 max-w-full border-l border-border/60 bg-background z-30 flex flex-col app-no-drag overflow-hidden",
            layout === 'overlay' && !usesPixelWidth && width,
            isResizing && 'transition-none',
            className
        )}
        style={panelStyle}
        data-section={dataSection}>
            {resizable ? (
                <div
                    role="separator"
                    aria-orientation="vertical"
                    aria-label={resizeAriaLabel}
                    className={cn(
                        'absolute left-0 top-0 z-40 h-full w-2 -translate-x-1/2 cursor-col-resize',
                        'after:absolute after:left-1/2 after:top-2 after:h-[calc(100%-16px)] after:w-px after:-translate-x-1/2 after:bg-border/0 after:transition-colors',
                        'hover:after:bg-border/70',
                        isResizing && 'after:bg-primary/70',
                    )}
                    onPointerDown={handleResizeStart}
                />
            ) : null}
            {title && (
                <AsidePanelHeader
                    title={title}
                    subtitle={subtitle}
                    actions={actions}
                    onClose={onClose}
                    showBackButton={showBackButton}
                    onBack={onBack}
                />
            )}
            {children}
        </div>
    );
};

export default AsidePanel;