app-service/frontend/src/pages/admin/Features.tsx

import { useState, useEffect, useRef, useCallback } from 'react';
import { useAuth } from '../../contexts/AuthContext';
import { useTranslation } from '../../contexts/LanguageContext';
import { useSidebar } from '../../contexts/SidebarContext';
import { useModules, TOGGLEABLE_MODULES } from '../../contexts/ModulesContext';
import type { ModuleId } from '../../contexts/ModulesContext';
import Feature1Tab from '../../components/admin/Feature1Tab';
import { SwipeTabs } from '../../components/SwipeTabs';
import '../../styles/AdminPanel.css';

type TabId = 'config' | 'dashboard' | 'feature1' | 'feature2' | 'feature3' | 'search' | 'notifications';

export default function Features() {
    const { user: currentUser } = useAuth();
    const { t } = useTranslation();
    const { toggleMobileMenu } = useSidebar();
    const { moduleStates, moduleOrder, setModuleEnabled, setModulePosition, setModuleOrder, saveModulesToBackend, saveModuleOrder, hasInitialized, isLoading } = useModules();
    const [activeTab, setActiveTab] = useState<TabId>('config');
    const hasUserMadeChanges = useRef(false);
    const saveRef = useRef(saveModulesToBackend);
    const [draggedItem, setDraggedItem] = useState<string | null>(null);
    const [localOrder, setLocalOrder] = useState<string[]>([]);
    const [localPositions, setLocalPositions] = useState<Record<string, 'top' | 'bottom'>>({});
    const [hasOrderChanges, setHasOrderChanges] = useState(false);
    const tabsContainerRef = useRef<HTMLDivElement>(null);
    const isUserEditing = useRef(false); // Track if user is actively editing

    // Sync local order with context order (only when moduleOrder changes, not moduleStates)
    useEffect(() => {
        if (moduleOrder.length > 0 && !isUserEditing.current) {
            // Start with current order
            const fullOrder = [...moduleOrder];

            // Insert missing modules at their default positions from TOGGLEABLE_MODULES
            TOGGLEABLE_MODULES.forEach((module, defaultIndex) => {
                if (!fullOrder.includes(module.id)) {
                    // Insert at the default index position, or at end if index is beyond current length
                    const insertAt = Math.min(defaultIndex, fullOrder.length);
                    fullOrder.splice(insertAt, 0, module.id);
                }
            });

            setLocalOrder(fullOrder);
            setHasOrderChanges(false);
        }
    }, [moduleOrder]);

    // Sync positions from moduleStates only on initial load or when not editing
    useEffect(() => {
        if (!isUserEditing.current) {
            const positions: Record<string, 'top' | 'bottom'> = {};
            TOGGLEABLE_MODULES.forEach(module => {
                const state = moduleStates[module.id];
                positions[module.id] = state?.position || module.defaultPosition;
            });
            setLocalPositions(positions);
        }
    }, [moduleStates]);

    // Scroll active tab to center of container
    const scrollActiveTabIntoView = useCallback((tabId: string) => {
        if (tabsContainerRef.current) {
            const container = tabsContainerRef.current;
            const activeButton = container.querySelector(`[data-tab-id="${tabId}"]`) as HTMLElement;
            if (activeButton) {
                const containerWidth = container.clientWidth;
                const buttonLeft = activeButton.offsetLeft;
                const buttonWidth = activeButton.offsetWidth;
                // Calculate scroll position to center the button
                const scrollLeft = buttonLeft - (containerWidth / 2) + (buttonWidth / 2);
                container.scrollTo({ left: Math.max(0, scrollLeft), behavior: 'smooth' });
            }
        }
    }, []);

    // Handle tab change with scroll
    const handleTabChange = useCallback((tabId: TabId) => {
        setActiveTab(tabId);
        setTimeout(() => scrollActiveTabIntoView(tabId), 50);
    }, [scrollActiveTabIntoView]);
    // Keep saveRef updated with latest function
    useEffect(() => {
        saveRef.current = saveModulesToBackend;
    }, [saveModulesToBackend]);

    if (!currentUser?.is_superuser) {
        return null;
    }

    const handleModuleToggle = async (moduleId: ModuleId, type: 'admin' | 'user', enabled: boolean) => {
        hasUserMadeChanges.current = true;
        setModuleEnabled(moduleId, type, enabled);
    };

    // Save changes when moduleStates change, but debounce to avoid too many requests
    // Only save if: 1) Backend data has been loaded, and 2) User has made changes
    useEffect(() => {
        if (!hasInitialized || !hasUserMadeChanges.current) {
            return;
        }
        const timeoutId = setTimeout(() => {
            saveRef.current().catch(console.error);
        }, 300);
        return () => clearTimeout(timeoutId);
    }, [moduleStates, hasInitialized]);

    // Save on unmount if there are pending changes (empty deps = only on unmount)
    useEffect(() => {
        return () => {
            if (hasUserMadeChanges.current) {
                saveRef.current().catch(console.error);
            }
        };
    }, []);

    const renderModuleToggle = (moduleId: ModuleId) => {
        const state = moduleStates[moduleId];
        const adminEnabled = state?.admin ?? true;
        const userEnabled = state?.user ?? true;

        return (
            <div className="theme-tab-content">
                <div className="theme-section">
                    <div className="section-header">
                        <h3 className="section-title">{t.featuresPage?.visibility || 'Visibilità'}</h3>
                    </div>
                    <div className="feature-config-options">
                        <div className={`feature-status-badge ${adminEnabled ? 'active' : ''}`}>
                            {adminEnabled ? t.admin.active : t.admin.inactive}
                        </div>
                        <div className="toggle-group">
                            <span className="toggle-label">{t.admin.adminRole}</span>
                            <label className="toggle-modern">
                                <input
                                    type="checkbox"
                                    checked={adminEnabled}
                                    onChange={(e) => handleModuleToggle(moduleId, 'admin', e.target.checked)}
                                />
                                <span className="toggle-slider-modern"></span>
                            </label>
                        </div>
                        <div className="toggle-group">
                            <span className="toggle-label">{t.admin.userRole}</span>
                            <label className={`toggle-modern ${!adminEnabled ? 'disabled' : ''}`}>
                                <input
                                    type="checkbox"
                                    checked={userEnabled}
                                    disabled={!adminEnabled}
                                    onChange={(e) => handleModuleToggle(moduleId, 'user', e.target.checked)}
                                />
                                <span className="toggle-slider-modern"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        );
    };

    // Drag and drop handlers for ordering
    const handleDragStart = (e: React.DragEvent, moduleId: string) => {
        setDraggedItem(moduleId);
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/plain', moduleId);
        // Add dragging class after a small delay for visual feedback
        setTimeout(() => {
            (e.target as HTMLElement).classList.add('dragging');
        }, 0);
    };

    const handleDragEnd = (e: React.DragEvent) => {
        setDraggedItem(null);
        (e.target as HTMLElement).classList.remove('dragging');
    };

    const handleDragOver = (e: React.DragEvent) => {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
    };

    const handleDrop = (e: React.DragEvent, targetModuleId: string, targetSection: 'top' | 'bottom') => {
        e.preventDefault();
        e.stopPropagation();
        if (!draggedItem) return;

        const draggedPosition = localPositions[draggedItem] || 'top';

        // If dropping on same item, just change section if different
        if (draggedItem === targetModuleId) {
            if (draggedPosition !== targetSection) {
                isUserEditing.current = true; // Mark as user editing
                hasUserMadeChanges.current = true;
                setModulePosition(draggedItem as ModuleId, targetSection);
                // Update local positions immediately for UI responsiveness
                setLocalPositions(prev => ({ ...prev, [draggedItem]: targetSection }));
                setHasOrderChanges(true);
            }
            return;
        }

        // Change position if moving to different section
        if (draggedPosition !== targetSection) {
            isUserEditing.current = true; // Mark as user editing
            hasUserMadeChanges.current = true;
            setModulePosition(draggedItem as ModuleId, targetSection);
            // Update local positions immediately for UI responsiveness
            setLocalPositions(prev => ({ ...prev, [draggedItem]: targetSection }));
        }

        // Reorder within the list
        isUserEditing.current = true; // Mark as user editing
        const newOrder = [...localOrder];
        const draggedIndex = newOrder.indexOf(draggedItem);
        const targetIndex = newOrder.indexOf(targetModuleId);

        if (draggedIndex === -1 || targetIndex === -1) return;

        newOrder.splice(draggedIndex, 1);
        newOrder.splice(targetIndex, 0, draggedItem);

        setLocalOrder(newOrder);
        setHasOrderChanges(true);
    };

    const handleSectionDrop = (e: React.DragEvent, section: 'top' | 'bottom') => {
        e.preventDefault();
        if (!draggedItem) return;

        const draggedPosition = localPositions[draggedItem] || 'top';

        // Change position if moving to different section
        if (draggedPosition !== section) {
            isUserEditing.current = true; // Mark as user editing
            hasUserMadeChanges.current = true;
            setModulePosition(draggedItem as ModuleId, section);
            // Update local positions immediately for UI responsiveness
            setLocalPositions(prev => ({ ...prev, [draggedItem]: section }));
            setHasOrderChanges(true);
        }
    };

    const handleApplyOrder = async () => {
        try {
            setModuleOrder(localOrder);
            await saveModuleOrder(localOrder);
        } catch (error) {
            console.error('Failed to save order:', error);
        } finally {
            setDraggedItem(null); // Reset drag state
            isUserEditing.current = false;
            setHasOrderChanges(false);
        }
    };

    const handleCancelOrder = () => {
        setDraggedItem(null); // Reset drag state
        isUserEditing.current = false; // Done editing
        setLocalOrder(moduleOrder);
        // Reset positions from moduleStates
        const positions: Record<string, 'top' | 'bottom'> = {};
        TOGGLEABLE_MODULES.forEach(module => {
            const state = moduleStates[module.id];
            positions[module.id] = state?.position || module.defaultPosition;
        });
        setLocalPositions(positions);
        setHasOrderChanges(false);
    };

    const getModuleInfo = (moduleId: string) => {
        const module = TOGGLEABLE_MODULES.find(m => m.id === moduleId);
        return module || { id: moduleId, icon: 'extension', defaultEnabled: true };
    };

    // Split modules by position for the config tab (using localPositions for immediate UI updates)
    const topOrderModules = localOrder.filter(id => {
        const position = localPositions[id];
        return !position || position === 'top';
    });

    const bottomOrderModules = localOrder.filter(id => {
        const position = localPositions[id];
        return position === 'bottom';
    });

    const tabIds = ['config', ...topOrderModules, ...bottomOrderModules] as TabId[];

    const renderConfigTab = () => {
        return (
            <div className="theme-tab-content">
                <div className="theme-section">
                    <div className="section-header">
                        <h3 className="section-title">{t.featuresPage?.topSection || 'Sezione Principale'}</h3>
                    </div>
                    <div
                        className="order-cards"
                        onDragOver={handleDragOver}
                        onDrop={(e) => handleSectionDrop(e, 'top')}
                    >
                        {topOrderModules.map((moduleId) => {
                            const moduleInfo = getModuleInfo(moduleId);
                            const moduleName = t.sidebar[moduleId as keyof typeof t.sidebar] || moduleId;
                            return (
                                <div
                                    key={moduleId}
                                    className={`order-card ${draggedItem === moduleId ? 'dragging' : ''}`}
                                    draggable
                                    onDragStart={(e) => handleDragStart(e, moduleId)}
                                    onDragEnd={handleDragEnd}
                                    onDragOver={handleDragOver}
                                    onDrop={(e) => handleDrop(e, moduleId, 'top')}
                                >
                                    <div className="order-card-preview">
                                        <span className="material-symbols-outlined">{moduleInfo.icon}</span>
                                    </div>
                                    <div className="order-card-info">
                                        <span className="order-card-name">{moduleName}</span>
                                    </div>
                                    <div className="order-card-handle">
                                        <span className="material-symbols-outlined">drag_indicator</span>
                                    </div>
                                </div>
                            );
                        })}
                        {topOrderModules.length === 0 && (
                            <div className="order-empty">{t.featuresPage?.noModulesTop || 'Nessun modulo in questa sezione'}</div>
                        )}
                    </div>
                </div>

                <div className="theme-section">
                    <div className="section-header">
                        <h3 className="section-title">{t.featuresPage?.bottomSection || 'Sezione Inferiore'}</h3>
                    </div>
                    <div
                        className="order-cards"
                        onDragOver={handleDragOver}
                        onDrop={(e) => handleSectionDrop(e, 'bottom')}
                    >
                        {bottomOrderModules.map((moduleId) => {
                            const moduleInfo = getModuleInfo(moduleId);
                            const moduleName = t.sidebar[moduleId as keyof typeof t.sidebar] || moduleId;
                            return (
                                <div
                                    key={moduleId}
                                    className={`order-card ${draggedItem === moduleId ? 'dragging' : ''}`}
                                    draggable
                                    onDragStart={(e) => handleDragStart(e, moduleId)}
                                    onDragEnd={handleDragEnd}
                                    onDragOver={handleDragOver}
                                    onDrop={(e) => handleDrop(e, moduleId, 'bottom')}
                                >
                                    <div className="order-card-preview">
                                        <span className="material-symbols-outlined">{moduleInfo.icon}</span>
                                    </div>
                                    <div className="order-card-info">
                                        <span className="order-card-name">{moduleName}</span>
                                    </div>
                                    <div className="order-card-handle">
                                        <span className="material-symbols-outlined">drag_indicator</span>
                                    </div>
                                </div>
                            );
                        })}
                        {bottomOrderModules.length === 0 && (
                            <div className="order-empty">{t.featuresPage?.noModulesBottom || 'Nessun modulo in questa sezione'}</div>
                        )}
                    </div>
                </div>

                {hasOrderChanges && (
                    <div className="order-actions">
                        <button className="btn-secondary" onClick={handleCancelOrder}>
                            <span className="material-symbols-outlined">close</span>
                            {t.featuresPage?.cancelOrder || 'Annulla'}
                        </button>
                        <button className="btn-primary" onClick={handleApplyOrder}>
                            <span className="material-symbols-outlined">check</span>
                            {t.featuresPage?.applyOrder || 'Applica'}
                        </button>
                    </div>
                )}
            </div>
        );
    };

    const renderTabContent = (tabId: TabId) => {
        if (!hasInitialized || isLoading) {
            return <div className="loading">Loading...</div>;
        }
        switch (tabId) {
            case 'config':
                return renderConfigTab();
            case 'dashboard':
                return (
                    <>
                        {renderModuleToggle('dashboard')}
                        <div className="tab-content-placeholder">
                            <div className="placeholder-icon">
                                <span className="material-symbols-outlined">dashboard</span>
                            </div>
                            <h3>{t.sidebar.dashboard}</h3>
                            <p>{t.features.comingSoon}</p>
                        </div>
                    </>
                );
            case 'feature1':
                return (
                    <>
                        {renderModuleToggle('feature1')}
                        <Feature1Tab />
                    </>
                );
            case 'feature2':
                return (
                    <>
                        {renderModuleToggle('feature2')}
                        <div className="tab-content-placeholder">
                            <div className="placeholder-icon">
                                <span className="material-symbols-outlined">download</span>
                            </div>
                            <h3>{t.features.feature2}</h3>
                            <p>{t.features.comingSoon}</p>
                        </div>
                    </>
                );
            case 'feature3':
                return (
                    <>
                        {renderModuleToggle('feature3')}
                        <div className="tab-content-placeholder">
                            <div className="placeholder-icon">
                                <span className="material-symbols-outlined">cast</span>
                            </div>
                            <h3>{t.features.feature3}</h3>
                            <p>{t.features.comingSoon}</p>
                        </div>
                    </>
                );
            case 'search':
                return (
                    <>
                        {renderModuleToggle('search')}
                        <div className="tab-content-placeholder">
                            <div className="placeholder-icon">
                                <span className="material-symbols-outlined">search</span>
                            </div>
                            <h3>{t.sidebar.search}</h3>
                            <p>{t.features.comingSoon}</p>
                        </div>
                    </>
                );
            case 'notifications':
                return (
                    <>
                        {renderModuleToggle('notifications')}
                        <div className="tab-content-placeholder">
                            <div className="placeholder-icon">
                                <span className="material-symbols-outlined">notifications</span>
                            </div>
                            <h3>{t.sidebar.notifications}</h3>
                            <p>{t.features.comingSoon}</p>
                        </div>
                    </>
                );
            default:
                return null;
        }
    };

    return (
        <main className="main-content admin-panel-root">
            <div className="page-tabs-container">
                <div className="page-tabs-slider" ref={tabsContainerRef}>
                    <button className="mobile-menu-btn" onClick={toggleMobileMenu} aria-label={t.theme.toggleMenu}>
                        <span className="material-symbols-outlined">menu</span>
                    </button>
                    <div className="page-title-section">
                        <span className="page-title-text">{t.featuresPage.title}</span>
                    </div>
                    <div className="page-tabs-divider"></div>
                    <button
                        data-tab-id="config"
                        className={`page-tab-btn ${activeTab === 'config' ? 'active' : ''}`}
                        onClick={() => handleTabChange('config')}
                    >
                        <span className="material-symbols-outlined">tune</span>
                        <span>{t.featuresPage?.configTab || 'Configurazione'}</span>
                    </button>
                    {[...topOrderModules, ...bottomOrderModules].map((moduleId) => {
                        const moduleInfo = getModuleInfo(moduleId);
                        const moduleName = t.sidebar[moduleId as keyof typeof t.sidebar] || moduleId;
                        return (
                            <button
                                key={moduleId}
                                data-tab-id={moduleId}
                                className={`page-tab-btn ${activeTab === moduleId ? 'active' : ''}`}
                                onClick={() => handleTabChange(moduleId as TabId)}
                            >
                                <span className="material-symbols-outlined">{moduleInfo.icon}</span>
                                <span>{moduleName}</span>
                            </button>
                        );
                    })}
                </div>
            </div>

            <SwipeTabs
                className="admin-tab-swipe"
                tabs={tabIds}
                activeTab={activeTab}
                onTabChange={handleTabChange}
                renderPanel={renderTabContent}
                panelClassName="admin-tab-content swipe-panel-content"
            />
        </main>
    );
}