Web-Frontend/client/src/components/dashboard/SettingsButton.jsx

import {useState, useMemo, useRef, useEffect, useCallback} from "react";
import {
  Button,
  Box,
  Text,
  Flex,
  Grid,
  Dialog,
  Tabs,
  Badge,
  Menu,
  HStack,
  useRecipe,
  useSlotRecipe
} from "@chakra-ui/react";
import {Settings, LayoutGrid, Move, Save, X, ChevronRight, ChevronLeft} from 'lucide-react';
import {useDashboardStore} from "../../store/useDashboardStore.jsx";
import {WIDGET_REGISTRY} from "../../constants/widgetRegistry.jsx";

// 🚨 NEW: Tiny helper to convert size keys into abbreviations
const getSizeAbbreviation = (key) => {
  const mapping = { small: "S", medium: "M", large: "L", xlarge: "XL" };
  return mapping[key.toLowerCase()] || key.charAt(0).toUpperCase();
};

export function SettingsButton() {
  // 1. ☁Store connections
  const isEditing = useDashboardStore(state => state.isEditing);
  const enterEditMode = useDashboardStore(state => state.enterEditMode);
  const saveEdit = useDashboardStore(state => state.saveEdit);
  const cancelEdit = useDashboardStore(state => state.cancelEdit);
  const addWidget = useDashboardStore(state => state.addWidget);

  const recipe = useRecipe({key: "glassTab"});
  const tabStyles = recipe();

  // Pull the glass container styles for the dropdown and modal
  const panelRecipe = useSlotRecipe({key: "glassPanel"});
  const panelStyles = panelRecipe({layout: "dropdown"});
  const modalStyles = panelRecipe({layout: "popover"});

  const [isLibraryOpen, setIsLibraryOpen] = useState(false);

  // ⬅️ ➡️ This is the callbacks and scroll control to add the chevron arrows in the tab list
  const tabsRef = useRef(null);
  const [canScrollLeft, setCanScrollLeft] = useState(false);
  const [canScrollRight, setCanScrollRight] = useState(false);

  const checkScroll = useCallback(() => {
    if (tabsRef.current) {
      const { scrollLeft, scrollWidth, clientWidth } = tabsRef.current;
      setCanScrollLeft(scrollLeft > 0);
      // We use -1 here to account for sub-pixel rendering in some browsers
      setCanScrollRight(Math.ceil(scrollLeft + clientWidth) < scrollWidth - 1);
    }
  }, []);

  useEffect(() => {
    if (isLibraryOpen) {
      // Small timeout ensures the DOM has rendered the tabs before measuring
      setTimeout(checkScroll, 50);
      window.addEventListener('resize', checkScroll);
      return () => window.removeEventListener('resize', checkScroll);
    }
  }, [isLibraryOpen, checkScroll]);

  // Smart Add Handler
  const handleAddWidget = (widgetId, sizeKey) => {
    enterEditMode();
    addWidget(widgetId, sizeKey);
  };

  const categorizedWidgets = useMemo(() => {
    return Object.entries(WIDGET_REGISTRY).reduce((acc, [id, widget]) => {
      const cat = widget.category || 'General';
      if (!acc[cat]) acc[cat] = [];
      acc[cat].push({id, ...widget});
      return acc;
    }, {});
  }, []);

  const categories = Object.keys(categorizedWidgets);

  // use ref to capture html node for placing menu accordingly
  const menuRef = useRef(null);
  const getAnchorRect = () => {
    if (!menuRef.current) return null;
    return menuRef.current.getBoundingClientRect();
  };

  return (
    <>
      {isEditing ? (
        // 📝 EDIT MODE: The 3-Pill Layout
        <HStack gap={2}>
          {/* 1. The Add Widget Button */}
          <Box
            as="button"
            css={tabStyles}
            data-state="open"
            onClick={() => setIsLibraryOpen(true)}
            color={{ base: "blue.500", _dark: "blue.300" }}
            _hover={{ bg: "rgba(66, 153, 225, 0.1)" }}
          >
            <LayoutGrid size={20} style={{ flexShrink: 0 }} />
            <Box as="span">Widget Library</Box>
          </Box>

          {/* 2. The Save Button */}
          <Box
            as="button"
            css={tabStyles}
            data-state="open"
            onClick={saveEdit}
            color={{ base: "green.600", _dark: "green.400" }}
            _hover={{ bg: "rgba(72, 187, 120, 0.1)" }}
          >
            <Save size={20} style={{ flexShrink: 0 }} />
            <Box as="span">Save Layout</Box>
          </Box>

          {/* 3. The Discard Button */}
          <Box
            as="button"
            css={tabStyles}
            data-state="open"
            onClick={cancelEdit}
            color={{ base: "red.500", _dark: "red.400" }}
            _hover={{ bg: "rgba(245, 101, 101, 0.1)" }}
          >
            <X size={20} style={{ flexShrink: 0 }} />
            <Box as="span">Discard</Box>
          </Box>
        </HStack>
      ) : (
        // 👀 VIEW MODE: The Static Dropdown Menu
        <Menu.Root positioning={{ getAnchorRect }}>
          <Menu.Trigger asChild>
            <Box ref={menuRef} as="button" css={tabStyles}>
              {/* size increased to 24 to match tabs. flexShrink: 0 is CRITICAL */}
              <Settings size={24} style={{ flexShrink: 0 }} />
              <Box as="span">Dashboard Settings</Box>
            </Box>
          </Menu.Trigger>

          <Menu.Positioner>
            <Menu.Content css={panelStyles.root} zIndex="dropdown" minW="200px">
              <Menu.Item
                onClick={enterEditMode}
                cursor="pointer"
                _hover={{ WebkitTextStroke: "0.5px currentColor" }}
              >
                <Move size={16} style={{ marginRight: '8px' }} /> Edit Layout
              </Menu.Item>

                    <Menu.Separator my={1} borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}/>

                    <Menu.Item
                      onClick={() => setIsLibraryOpen(true)}
                      cursor="pointer"
                      _hover={{
                        bg: {base: "rgba(0, 0, 0, 0.05)", _dark: "rgba(255, 255, 255, 0.1)"},
                        WebkitTextStroke: "0.5px currentColor"
                      }}
                    >
                      <LayoutGrid size={16} style={{marginRight: '8px'}}/> Widget Library
                    </Menu.Item>
                  </Menu.Content>
                </Menu.Positioner>
              </Menu.Root>
            )}

              {/* 📚📚📚 THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}
              <Dialog.Root
                open={isLibraryOpen}
                onOpenChange={(e) => setIsLibraryOpen(e.open)}
                size="xl"
                placement="center"
                closeOnInteractOutside={true}
                closeOnEscapeKeyDown={true}
              >
                {/* Soft blur can be added to the background behind the modal */}
                {/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
                <Dialog.Positioner>

                  <Dialog.Content css={modalStyles.root} overflow="hidden" maxW="800px" minH="800px" p={0}>

                    <Dialog.Header bg="transparent" color={{base: "gray.800", _dark: "white"}} py={4}
                                    borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
                      <Dialog.Title fontSize="xl" fontWeight="bold">Widgets Shop</Dialog.Title>
                    </Dialog.Header>

                    <Dialog.Body p={0}>
                      <Tabs.Root defaultValue={categories[0]} variant="unstyled">
                        <Box position="relative" display="flex" mx="auto" maxWidth="100%" mt={4} mb={6}>

                          {/* LEFT GLASS CRESCENT */}
                          {canScrollLeft && (
                            <Flex
                              position="absolute"
                              left="0" top="0" bottom="0"
                              w="40px"
                              align="center" justify="center"
                              zIndex={2}
                              cursor="pointer"
                              onClick={() => tabsRef.current.scrollBy({ left: -200, behavior: 'smooth' })}
                              // The Glass Look hugging the left pill edge
                              bg={{ base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)" }}
                              backdropFilter="blur(8px)"
                              borderTopLeftRadius="full"
                              borderBottomLeftRadius="full"
                              // Fades the inner edge so it blends into the track
                              boxShadow={{ base: "10px 0 15px -5px rgba(255,255,255,0.8)", _dark: "10px 0 15px -5px rgba(30,30,30,0.9)" }}
                              color={{ base: "gray.600", _dark: "gray.300" }}
                              _hover={{ color: { base: "blue.500", _dark: "blue.300" } }}
                            >
                              <ChevronLeft size={18} />
                            </Flex>
                          )}
                          <Tabs.List
                            ref={tabsRef}
                            onScroll={checkScroll}
                            bg={{ base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)" }}
                            p={1}
                            mx={3}
                            mt={4}
                            mb={6}
                            borderRadius="full"
                            display="flex"
                            flexWrap="nowrap"
                            overflowX="auto"
                            maxWidth="100%"
                            border="1px solid"
                            borderColor={{ base: "blackAlpha.50", _dark: "whiteAlpha.100" }}
                            css={{
                              scrollbarWidth: "none",
                              "&::-webkit-scrollbar": { display: "none" },
                            }}
                            // This is for desktop users not on trackpad to scroll the
                            onWheel={(e) => {
                            if (e.currentTarget) {
                              e.currentTarget.scrollLeft += e.deltaY;
                            }
                          }}
                          >
                            {categories.map(cat => (
                              <Tabs.Trigger
                                key={cat}
                                value={cat}
                                px={5}
                                py={2}
                                borderRadius="full"
                                whiteSpace="nowrap"
                                flexShrink={0}
                                color={{ base: "gray.500", _dark: "gray.400" }}
                                fontWeight="medium"
                                transition="background-color 0.2s, color 0.2s, box-shadow 0.2s"
                                _hover={{
                                  color: { base: "gray.800", _dark: "gray.200" }
                                }}
                                _selected={{
                                  bg: { base: "white", _dark: "rgba(255, 255, 255, 0.12)" },
                                  color: { base: "blue.600", _dark: "blue.200" },
                                  boxShadow: "sm",
                                  fontWeight: "bold",
                                }}
                              >
                                {cat}
                              </Tabs.Trigger>
                            ))}
                          </Tabs.List>
                          {canScrollRight && (
                            <Flex
                              position="absolute"
                              right="0" top="0" bottom="0"
                              w="40px"
                              align="center" justify="center"
                              zIndex={2}
                              cursor="pointer"
                              onClick={() => tabsRef.current.scrollBy({ left: 200, behavior: 'smooth' })}
                              // The Glass Look hugging the right pill edge
                              bg={{ base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)" }}
                              backdropFilter="blur(8px)"
                              borderTopRightRadius="full"
                              borderBottomRightRadius="full"
                              boxShadow={{ base: "-10px 0 15px -5px rgba(255,255,255,0.8)", _dark: "-10px 0 15px -5px rgba(30,30,30,0.9)" }}
                              color={{ base: "gray.600", _dark: "gray.300" }}
                              _hover={{ color: { base: "blue.500", _dark: "blue.300" } }}
                            >
                              <ChevronRight size={18} />
                            </Flex>
                          )}

                        </Box>
                        {categories.map(cat => (
                          <Tabs.Content key={cat} value={cat} p={6}>
                            <Grid templateColumns="repeat(auto-fill, minmax(300px, 1fr))" gap={4}>
                              {categorizedWidgets[cat].map(widget => (
                                <Flex
                                  key={widget.id}
                                  direction="column"
                                  bg={{base: "rgba(255, 255, 255, 0.6)", _dark: "rgba(0, 0, 0, 0.2)"}}
                                  p={4}
                                  borderRadius="xl"
                                  border="1px solid"
                                  borderColor={{base: "rgba(255, 255, 255, 0.9)", _dark: "whiteAlpha.200"}}
                                  boxShadow="sm"
                                >
                                  <Text fontWeight="bold" fontSize="md" mb={1}>{widget.name}</Text>
                                  <Text fontSize="sm" color="gray.500" mb={4} flex="1">{widget.description}</Text>

                                  <Box borderTop="1px solid" borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}
                                       pt={3}>
                                    <Text fontSize="xs" fontWeight="bold" color="gray.400" textTransform="uppercase"
                                          mb={2}>
                                      Add to Dashboard:
                                    </Text>
                                    <HStack gap={2} flexWrap="wrap">
                                      {Object.keys(widget.allowedSizes).map(sizeKey => (
                                        <Box
                                          key={sizeKey}
                                          as="button"
                                          css={tabStyles}
                                          onClick={() => handleAddWidget(widget.id, sizeKey)}
                                          color={{base: "blue.600", _dark: "blue.300"}}
                                        >
                                          {/* 🚨 THE ABBREVIATION ICON: Always visible */}
                                          <Flex
                                            align="center"
                                            justify="center"
                                            w="24px"
                                            h="24px"
                                            flexShrink={0}
                                            borderRadius="full"
                                            bg={{ base: "blue.50", _dark: "whiteAlpha.200" }}
                                            fontWeight="black"
                                            fontSize="xs"
                                            bg='transparent'
                                          >
                                            {getSizeAbbreviation(sizeKey)}
                                          </Flex>

                                          {/* 🚨 THE EXPANDED TEXT: Only visible on hover */}
                                          <Box as="span">Add Widget</Box>
                                        </Box>
                                      ))}
                                    </HStack>
                                  </Box>
                                </Flex>
                              ))}
                            </Grid>
                          </Tabs.Content>
                        ))}
                      </Tabs.Root>
                    </Dialog.Body>
                    <Dialog.CloseTrigger position="absolute" top={3} right={3} color={{ base: "gray.500", _dark: "whiteAlpha.800" }} _hover={{ color: "red.400" }} />
                  </Dialog.Content>
                </Dialog.Positioner>
              </Dialog.Root>
    </>
  );
}