Web-Frontend/client/src/pages/home/tabs/MyDashboard.jsx

import { Box, Text, Flex, IconButton, Spinner, Popover } from "@chakra-ui/react";
import { X, MoreVertical } from "lucide-react";
import { Responsive, WidthProvider } from "react-grid-layout";
import { useDashboardStore } from "@/store/useDashboardStore.jsx";
import { Suspense, useEffect, useRef } from 'react';
import { useColorModeValue } from "@/components/ui/color-mode";
// 1. Import database messenger
import useAuthStore from "@/store/authStore";

// 2. Import registry
import { WIDGET_REGISTRY } from '@/constants/widgetRegistry.jsx';

// React-Grid-Layout requires this wrapper to automatically calculate screen width
const ResponsiveGridLayout = WidthProvider(Responsive);

export default function MyDashboard() {
    // 🌗 Let's adjust for our light and dark mode
    const frameBg = useColorModeValue("gray.100", "#1E1E2B");
    const titleColor = useColorModeValue("gray.800", "gray.100");
    const iconColor = useColorModeValue("gray.600", "gray.400");
    const iconHoverBg = useColorModeValue("gray.100", "gray.700");

    // ☁️ Database Connection
    const { user } = useAuthStore();

    // ☁️ Local UI Connections
    const widgets = useDashboardStore(state => state.widgets);
    const isEditing = useDashboardStore(state => state.isEditing);
    const updateLayoutPositions = useDashboardStore(state => state.updateLayoutPositions);
    const removeWidget = useDashboardStore(state => state.removeWidget);
    const setWidgets = useDashboardStore(state => state.setWidgets); // The injection action

    // 🔒 Safety lock to prevent infinite re-renders
    const hasHydrated = useRef(false);

    // ==========================================
    // INITIAL LOAD: Grab data from Django
    // ==========================================
    useEffect(() => {
        if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
            const savedLayout = user.preferences.dashboard_layout;

            // Safety check: Only inject if it's actually an array of widgets.
            // (Prevents a crash if MariaDB returns a default empty object {})
            if (Array.isArray(savedLayout)) {
                setWidgets(savedLayout);
            }

            hasHydrated.current = true;
        }
    }, [user, setWidgets]);


    // 🛠️ Format the data for RGL
    const rglLayout = widgets.map(w => ({
        i: w.id,
        x: w.x,
        y: w.y,
        w: w.w,
        h: w.h,
        isResizable: false // 🚫 The magic lock! No resizing allowed globally.
    }));

    // 3. THE COMPONENT MAPPER
    const renderWidget = (widget) => {
        const registryEntry = WIDGET_REGISTRY[widget.type];

        if (registryEntry && registryEntry.component) {
            const Component = registryEntry.component;

            // 1. Check if this widget type has a settings component registered
            const SettingsUI = registryEntry.settingsComponent;

            return (
                // The "Frame" that holds both the Title and the Chart
                <Flex direction="column" height="100%" width="100%" bg={frameBg}>

                    {/* THE TITLE BAR */}
                    <Flex
                        justify="space-between"
                        align="center"
                        px={3}
                        py={2}
                    >
                        <Text color={titleColor} fontWeight="semibold" fontSize="md" isTruncated>
                            {registryEntry.name}
                        </Text>

                        {/* THE SETTINGS ELLIPSIS */}
                        {SettingsUI ? (
                            <Popover.Root positioning={{ placement: "bottom-end" }}>
                                <Popover.Trigger asChild>
                                    <IconButton
                                        size="xs"
                                        variant="ghost"
                                        color="gray.400"
                                        _hover={{ color: "white", bg: "gray.700" }}
                                        aria-label="Widget Settings"
                                    >
                                        <MoreVertical size={16} />
                                    </IconButton>
                                </Popover.Trigger>

                                {/* NEW: The Positioner lifts the content out of the Flexbox flow */}
                                <Popover.Positioner zIndex={10}>
                                    <Popover.Content bg="gray.50" p={4} boxShadow="xl" borderRadius="md">
                                        <Suspense fallback={<Spinner size="sm" />}>
                                            <SettingsUI
                                                widgetId={widget.id}
                                                currentSettings={widget.settings || {}}
                                            />
                                        </Suspense>
                                    </Popover.Content>
                                </Popover.Positioner>
                            </Popover.Root>
                        ) : (
                            <Box w="20px" h="20px" />
                        )}
                    </Flex>

                    {/* THE CHART CANVAS */}
                    <Box flex="1" overflow="hidden" position="relative" p={1}>
                        {/* Pass the settings object into the actual chart component */}
                        <Component settings={widget.settings || {}} />
                    </Box>

                </Flex>
            );
        }

        // Fallback if someone asks for a widget that doesn't exist
        return (
            <Flex width="100%" height="100%" align="center" justify="center" direction="column" bg="gray.800">
                <Text fontWeight="bold" color="red.400">Error</Text>
                <Text fontSize="sm" color="gray.400">Widget '{widget.type}' not found.</Text>
            </Flex>
        );
    };

    return (
        <Box width="100%" height="100%">
            <ResponsiveGridLayout
                className="layout"
                layouts={{ lg: rglLayout }} // We feed it the formatted layout map
                breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
                cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }} // Our 12-column master grid
                rowHeight={30}
                isDraggable={isEditing}     // Only allows dragging when Settings tools toggle this
                isResizable={false}         // Double lock-down
                onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
                compactType="vertical"      // Auto-packs widgets to the top
            >
                {/* 3. 🎨 Paint the Widgets */}
                {widgets.map(widget => (
                    <Box
                        key={widget.id}
                        bg="white"
                        borderRadius="md"
                        boxShadow={isEditing ? "outline" : "sm"} // Visual cue when editing
                        border={isEditing ? "2px dashed gray" : "1px solid"}
                        borderColor={isEditing ? "gray.400" : "gray.200"}
                        overflow="hidden"
                        cursor={isEditing ? "grab" : "default"}
                        position="relative" // 3. REQUIRED so the absolute button stays inside this box
                    >
                        {/* 4. THE DELETE BUTTON */}
                        {isEditing && (
                            <IconButton
                                aria-label="Remove widget"
                                position="absolute"
                                top={2}
                                right={2}
                                size="xs"
                                bg="white"
                                color={iconColor}
                                border="1px solid"
                                borderColor="gray.200"
                                _hover={{ bg: "red.50", color: "red.500", borderColor: "red.200" }}
                                zIndex={2}
                                onClick={() => removeWidget(widget.id)}
                                onMouseDown={(e) => e.stopPropagation()} // 🚫 Stops RGL from grabbing the widget
                                onTouchStart={(e) => e.stopPropagation()} // 🚫 Same protection for mobile touches
                            >
                                <X size={14} />
                            </IconButton>
                        )}

                        {/* 4. SUSPENSE BOUNDARY wrapping the render function */}
                        <Suspense fallback={
                            <Flex w="100%" h="100%" align="center" justify="center" bg="gray.800">
                                <Spinner size="md" color="blue.400" thickness="3px" />
                            </Flex>
                        }>
                            {renderWidget(widget)}
                        </Suspense>

                    </Box>
                ))}
            </ResponsiveGridLayout>

            {/* Empty State Helper */}
            {widgets.length === 0 && (
                <Flex width="100%" height="200px" align="center" justify="center">
                    <Text color="gray.400">Your dashboard is empty. Click Settings to add widgets.</Text>
                </Flex>
            )}
        </Box>
    );
}