"use client";

import { createContext, useContext, useState, useCallback, useEffect, type ReactNode } from "react";

interface SidebarContextType {
    collapsed: boolean;
    setCollapsed: (collapsed: boolean) => void;
    sidebarWidth: number;
    customWidth: number;
    setCustomWidth: (width: number) => void;
    isResizing: boolean;
    setIsResizing: (resizing: boolean) => void;
    isMobile: boolean;
    editMode: boolean;
    setEditMode: (editMode: boolean) => void;
    discardTrigger: number;
    triggerDiscard: () => void;
}

const COLLAPSED_WIDTH = 64;
const DEFAULT_WIDTH = 240;
const MIN_WIDTH = 180;
const MAX_WIDTH = 400;
const MOBILE_BREAKPOINT = 768;

const SidebarContext = createContext<SidebarContextType>({
    collapsed: false,
    setCollapsed: () => { },
    sidebarWidth: DEFAULT_WIDTH,
    customWidth: DEFAULT_WIDTH,
    setCustomWidth: () => { },
    isResizing: false,
    setIsResizing: () => { },
    isMobile: false,
    editMode: false,
    setEditMode: () => { },
    discardTrigger: 0,
    triggerDiscard: () => { },
});

export function useSidebar() {
    return useContext(SidebarContext);
}

export { MIN_WIDTH, MAX_WIDTH, COLLAPSED_WIDTH, DEFAULT_WIDTH };

export function SidebarProvider({ children }: { children: ReactNode }) {
    const [isMobile, setIsMobile] = useState(false);
    const [collapsed, setCollapsedRaw] = useState(false);
    const [customWidth, setCustomWidthRaw] = useState(DEFAULT_WIDTH);
    const [isResizing, setIsResizing] = useState(false);
    const [editMode, setEditMode] = useState(false);
    const [discardTrigger, setDiscardTrigger] = useState(0);

    const triggerDiscard = useCallback(() => {
        setDiscardTrigger(prev => prev + 1);
    }, []);

    // Detect mobile
    useEffect(() => {
        const check = () => {
            const mobile = window.innerWidth < MOBILE_BREAKPOINT;
            setIsMobile(mobile);
            if (mobile) setCollapsedRaw(true);
        };
        check();
        window.addEventListener("resize", check);
        return () => window.removeEventListener("resize", check);
    }, []);

    const setCollapsed = useCallback((val: boolean) => {
        setCollapsedRaw(val);
    }, []);

    const setCustomWidth = useCallback((width: number) => {
        setCustomWidthRaw(Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, width)));
    }, []);

    // On mobile, collapsed = no sidebar visible at all (width 0)
    // On mobile, expanded = overlay mode (content doesn't shift)
    const sidebarWidth = isMobile
        ? 0  // content never shifts on mobile
        : collapsed ? COLLAPSED_WIDTH : customWidth;

    return (
        <SidebarContext.Provider value={{
            collapsed, setCollapsed,
            sidebarWidth, customWidth, setCustomWidth,
            isResizing, setIsResizing,
            isMobile,
            editMode, setEditMode,
            discardTrigger, triggerDiscard,
        }}>
            {children}
        </SidebarContext.Provider>
    );
}