"use client";

import * as React from "react";
import { cn } from "@/app/lib/utils";
import { Input } from "./input";
import { SearchIcon } from "@astraicons/react/linear";

interface SidebarContextType {
  isOpen: boolean;
  toggleSidebar: () => void;
  activeTab: string | null;
  setActiveTab: (tab: string | null) => void;
  searchQuery: string;
  setSearchQuery: (query: string) => void;
  noSearchResults: boolean;
  setNoSearchResults: (noResults: boolean) => void;
}

const SidebarContext = React.createContext<SidebarContextType | undefined>(
  undefined
);

interface SidebarProviderProps {
  children: React.ReactNode;
  defaultOpen?: boolean;
  defaultValue?: string;
  onValueChange?: (value: string | null) => void;
}

const SidebarProvider: React.FC<SidebarProviderProps> = ({
  children,
  defaultOpen = false,
  defaultValue = null,
  onValueChange,
}) => {
  const [isOpen, setIsOpen] = React.useState(defaultOpen);
  const [activeTab, setActiveTab] = React.useState(defaultValue);
  const [searchQuery, setSearchQuery] = React.useState("");
  const [noSearchResults, setNoSearchResults] = React.useState(false);

  const toggleSidebar = () => setIsOpen((prev) => !prev);

  const handleSetActiveTab = (tab: string | null) => {
    setActiveTab(tab);
    if (onValueChange) {
      onValueChange(tab);
    }
  };

  return (
    <SidebarContext.Provider
      value={{
        isOpen,
        toggleSidebar,
        activeTab,
        setActiveTab: handleSetActiveTab,
        searchQuery,
        setSearchQuery,
        noSearchResults,
        setNoSearchResults,
      }}
    >
      {children}
    </SidebarContext.Provider>
  );
};

const useSidebar = (): SidebarContextType => {
  const context = React.useContext(SidebarContext);
  if (context === undefined) {
    throw new Error("Sidebar must be used within a SidebarProvider");
  }
  return context;
};

const Sidebar = React.forwardRef<
  HTMLDivElement,
  React.HTMLProps<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { isOpen } = useSidebar();

  return (
    <div
      ref={ref}
      className={cn(
        "flex flex-col justify-start items-center gap-y-8 bg-shape-white/80 dark:bg-shape-dark/80 relative transition-all mr-auto backdrop-blur-xl",
        isOpen ? "w-full p-6 rounded-r-4xl" : "w-[88px] px-5 py-6",
        className
      )}
      {...props}
    />
  );
});
Sidebar.displayName = "Sidebar";

const SidebarTrigger = React.forwardRef<
  HTMLDivElement,
  React.HTMLProps<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { isOpen, toggleSidebar } = useSidebar();

  return (
    <div
      ref={ref}
      onClick={toggleSidebar}
      className={cn(
        "flex justify-center items-center rounded-xl size-[30px] bg-grayscale-surface text-grayscale-textIcon-body border border-grayscale-border cursor-pointer absolute top-10 -right-[15px] transition-transform",
        isOpen ? "rotate-180" : "",
        className
      )}
      {...props}
    />
  );
});
SidebarTrigger.displayName = "SidebarTrigger";

const SidebarHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLProps<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { isOpen } = useSidebar();

  return (
    <div
      ref={ref}
      className={cn(
        "flex items-center gap-x-2 w-full py-3 transition-all",
        isOpen ? "justify-start" : "px-3 justify-center",
        className
      )}
      {...props}
    />
  );
});
SidebarHeader.displayName = "SidebarHeader";

const SidebarHeaderIcon = React.forwardRef<
  HTMLDivElement,
  React.HTMLProps<HTMLDivElement>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      className={cn(
        "inline-flex justify-center items-center text-primary-500",
        className
      )}
      {...props}
    />
  );
});
SidebarHeaderIcon.displayName = "SidebarIcon";

const SidebarHeaderTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLProps<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { isOpen } = useSidebar();

  if (!isOpen) return null;

  return (
    <div
      ref={ref}
      className={cn("whitespace-nowrap text-button-surface", className)}
      {...props}
    />
  );
});
SidebarHeaderTitle.displayName = "SidebarTitle";

const SidebarBody = React.forwardRef<
  HTMLDivElement,
  React.HTMLProps<HTMLDivElement>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      className={cn("flex flex-col gap-y-5 w-full", className)}
      {...props}
    />
  );
});
SidebarBody.displayName = "SidebarBody";

const SidebarSearch = React.forwardRef<
  HTMLDivElement,
  React.HTMLProps<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { isOpen, toggleSidebar, searchQuery, setSearchQuery } = useSidebar();

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(e.target.value);
  };

  return (
    <div
      ref={ref}
      onClick={!isOpen ? toggleSidebar : undefined}
      className={cn(
        "flex justify-center items-center bg-grayscale-surface gap-x-3 w-full h-12 py-1 px-3 rounded-xl",
        className
      )}
      {...props}
    >
      <SearchIcon className="size-5 text-grayscale-textIcon-subtitle" />
      {isOpen && (
        <Input
          placeholder="Search"
          className="bg-transparent border-none hover:border-none p-0 flex-1 h-10 text-grayscale-textIcon-body placeholder:text-grayscale-textIcon-body"
          value={searchQuery}
          onChange={handleSearchChange}
        />
      )}
    </div>
  );
});
SidebarSearch.displayName = "SidebarSearch";

const SidebarContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLProps<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { searchQuery, setNoSearchResults } = useSidebar();
  const [sidebarItems, setSidebarItems] = React.useState<React.ReactNode[]>([]);

  React.useEffect(() => {
    const items = React.Children.toArray(props.children).flatMap((child) => {
      if (React.isValidElement(child) && child.type === SidebarItemGroup) {
        return React.Children.toArray(child.props.children).flatMap((item) => {
          if (React.isValidElement(item) && item.type === SidebarItem) {
            return item;
          }
          return [];
        });
      }
      return [];
    });
    setSidebarItems(items);
  }, [props.children]);

  const filteredItems = React.useMemo(() => {
    const query = searchQuery.toLowerCase();
    return sidebarItems.filter((item) => {
      const label = React.isValidElement(item)
        ? (React.Children.toArray(item.props.children).find(
            (child) =>
              React.isValidElement(child) && child.type === SidebarItemLabel
          ) as React.ReactElement | undefined)
        : undefined;

      const labelText = label?.props.children as string | undefined;
      return labelText?.toLowerCase().includes(query);
    });
  }, [sidebarItems, searchQuery]);

  React.useEffect(() => {
    setNoSearchResults(filteredItems.length === 0 && searchQuery.length > 0);
  }, [filteredItems, searchQuery, setNoSearchResults]);

  if (filteredItems.length === 0 && searchQuery.length > 0) {
    return <SidebarNoResults />;
  }

  return (
    <div
      ref={ref}
      className={cn("flex flex-col justify-start gap-y-5 w-full", className)}
      {...props}
    />
  );
});
SidebarContent.displayName = "SidebarContent";

const SidebarItemGroup = React.forwardRef<
  HTMLDivElement,
  React.HTMLProps<HTMLDivElement>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      className={cn("flex flex-col gap-y-2", className)}
      {...props}
    />
  );
});
SidebarItemGroup.displayName = "SidebarItemGroup";

const SidebarItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLProps<HTMLDivElement> & { value?: string }
>(({ value, className, children, ...props }, ref) => {
  const { isOpen, activeTab, setActiveTab, searchQuery } = useSidebar();

  const handleClick = () => {
    setActiveTab(value != null ? String(value) : null);
  };

  const label = React.Children.toArray(children).find((child) => {
    if (React.isValidElement(child) && child.type === SidebarItemLabel) {
      return true;
    }
    return false;
  }) as React.ReactElement | undefined;

  const labelText = label?.props?.children as string | undefined;

  const isVisible =
    labelText &&
    labelText.toString().toLowerCase().includes(searchQuery.toLowerCase());

  if (!isVisible) {
    return null;
  }

  return (
    <div
      ref={ref}
      onClick={handleClick}
      className={cn(
        "flex items-center gap-x-2 w-full h-12 p-3 rounded-2xl cursor-pointer transition-colors",
        isOpen ? "justify-start" : "justify-center",
        activeTab === value
          ? "bg-button-surface text-grayscale-textIcon-textButton shadow-elevation-xxl"
          : "hover:bg-grayscale-surface-bg2 text-grayscale-textIcon-caption [&>div>svg]:text-grayscale-textIcon-subtitle",
        className
      )}
      {...props}
    >
      {children}
    </div>
  );
});
SidebarItem.displayName = "SidebarItem";

const SidebarItemIcon = React.forwardRef<
  HTMLDivElement,
  React.HTMLProps<HTMLDivElement>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      className={cn("inline-flex justify-center items-center p-0.5", className)}
      {...props}
    />
  );
});
SidebarItemIcon.displayName = "SidebarItemIcon";

const SidebarItemLabel = React.forwardRef<
  HTMLDivElement,
  React.HTMLProps<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { isOpen } = useSidebar();

  if (!isOpen) return null;

  return (
    <div
      ref={ref}
      className={cn(
        "text-sm leading-[22px] font-normal SidebarItemLabel",
        className
      )}
      {...props}
    />
  );
});
SidebarItemLabel.displayName = "SidebarItemLabel";

const SidebarItemBadge = React.forwardRef<
  HTMLDivElement,
  React.HTMLProps<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { isOpen } = useSidebar();

  if (!isOpen) return null;

  return (
    <div
      ref={ref}
      className={cn(
        "flex justify-center items-center ml-auto bg-primary-500 text-shape-white text-xs font-medium rounded-lg px-2 py-1",
        className
      )}
      {...props}
    />
  );
});
SidebarItemBadge.displayName = "SidebarItemBadge";

const SidebarSeparator = React.forwardRef<
  HTMLDivElement,
  React.HTMLProps<HTMLDivElement>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      className={cn("w-full h-[1px] bg-grayscale-border", className)}
      {...props}
    />
  );
});
SidebarSeparator.displayName = "SidebarSeparator";

const SidebarNoResults = React.forwardRef<
  HTMLDivElement,
  React.HTMLProps<HTMLDivElement>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      className={cn(
        "flex justify-center items-center w-full h-12 text-gray-500",
        className
      )}
      {...props}
    >
      No results found
    </div>
  );
});
SidebarNoResults.displayName = "SidebarNoResults";

export {
  SidebarProvider,
  Sidebar,
  SidebarTrigger,
  SidebarHeader,
  SidebarHeaderIcon,
  SidebarHeaderTitle,
  SidebarBody,
  SidebarContent,
  SidebarSearch,
  SidebarItemGroup,
  SidebarNoResults,
  SidebarItem,
  SidebarItemIcon,
  SidebarItemLabel,
  SidebarItemBadge,
  SidebarSeparator,
};
Components
