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 glassTabRecipe = useRecipe({key: "glassTab"});
  const tabStyles = glassTabRecipe();

  const [canScrollLeft, setCanScrollLeft] = useState(false);
  const [canScrollRight, setCanScrollRight] = useState(false);

  // Pull the glass container styles for the dropdown and modal
  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
  const popoverStyles = popoverRecipe();

  const dialogRecipe = useSlotRecipe({ key: "glassDialog" });
  const dialogStyles = dialogRecipe();

  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 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>
          {/* 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}>
              {/* settings icon size set 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={popoverStyles.content} 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)}
        closeOnInteractOutside={true}
        closeOnEscapeKeyDown={true}
        size="xl"
        placement="center"
      >
        {/* Soft blur can be added to the background behind the modal */}
        {/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
        <Dialog.Positioner>
          <Dialog.Content css={dialogStyles.content}>

            <Dialog.Header css={dialogStyles.header}>
              <Dialog.Title>Widgets Shop</Dialog.Title>
            </Dialog.Header>

            <Dialog.Body css={dialogStyles.body}>
              <Tabs.Root defaultValue={categories[0]} variant="unstyled">
                {/* HORIZONTAL SCROLLABLE MENU OF WIDGET CATEGORIES */}
                <Box>
                  {/* left glass crescent */}
                  {canScrollLeft && (
                    <Flex onClick={() => tabsRef.current.scrollBy({left: -200, behavior: 'smooth'})}>
                      <ChevronLeft size={18} style={{ marginLeft: "-30px" }}/> {/* Shifted slightly left to optically center it in the crescent mass */}
                    </Flex>
                  )}

                  {/* the categories */}
                  <Tabs.List ref={tabsRef} onScroll={checkScroll}
                    // For desktop users (not on trackpad) to scroll
                    onWheel={(e) => { if (e.currentTarget) e.currentTarget.scrollLeft += e.deltaY; }}
                  >
                    {categories.map(cat => (
                      <Tabs.Trigger key={cat} value={cat}>
                        {cat}
                      </Tabs.Trigger>
                    ))}
                  </Tabs.List>

                  {/* right glass crescent */}
                  {canScrollRight && (
                    <Flex onClick={() => tabsRef.current.scrollBy({left: 200, behavior: 'smooth'})}>
                      {/* Shifted slightly right to optically center it in the crescent mass */}
                      <ChevronRight size={18} style={{ marginRight: "-30px" }}/>
                    </Flex>
                  )}
                </Box>

                {/* THE WIDGET OPTIONS W/IN EACH CATEGORY */}
                {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"
                                    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>
    </>
  );
}