import React, { useState, useRef, useEffect } from "react";
import {
  ChangeLayoutIcon,
  SortingIcon,
  FilterationIcon,
  HideColumnIcon,
} from "../../../assets/svg.tsx";
import { Box, Popover } from "@mui/material";
import LayoutSelector from "../table-change-layout.tsx";
import { Table } from "@tanstack/react-table";
import { TopbarOptionsProps } from "../../types/table.ts";
import "./index.scss";
import ViewMore from "../viewmore/index.tsx";
import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen.tsx";
import SortPopover from "../sorting-modal.tsx/index.tsx";
import ColumnToggle from "../column-visibility-modal/index.tsx";
import { CraftTableOptionsProps } from "../../types/table-options.ts";
import { TableSearch } from "../search/index.tsx";

interface TopbarProps<T> {
  table: Table<T>;
  isFullscreen: boolean;
  fullscreenToggle: () => void;
  isCompactTable: boolean;
  setIsCompactTable: React.Dispatch<React.SetStateAction<boolean>>;
  paginationComponent?: React.ReactNode;
  topbarOptions?: TopbarOptionsProps;
  columnOrder?: string[];
  setColumnOrder?: React.Dispatch<React.SetStateAction<string[]>>;
  tableStates: CraftTableOptionsProps;
  searchValue?: string;
  onSearchChange?: (val: string) => void;
  onFilterButtonClick?: () => void;
}

function Topbar<T>({
  table,
  isCompactTable,
  isFullscreen,
  fullscreenToggle,
  setIsCompactTable,
  paginationComponent,
  topbarOptions,
  tableStates,
  onFilterButtonClick,
}: TopbarProps<T>) {
  const [sortAnchorEl, setSortAnchorEl] = useState<HTMLElement | null>(null);
  const [groupBy, setGroupBy] = useState<string>("None");

  const [layoutAnchorEl, setLayoutAnchorEl] = useState<null | HTMLElement>(
    null
  );
  const [selectedLayout, setSelectedLayout] = useState("Table");
  const [columnAnchorEl, setColumnAnchorEl] = useState<HTMLElement | null>(
    null
  );
  const [columnOrder, setColumnOrder] = useState<string[]>(
    table.getAllLeafColumns().map((col) => col.id)
  );

  const searchContainerRef = useRef<HTMLDivElement>(null);

  // sync column order with table instance
  useEffect(() => {
    table.setColumnOrder(columnOrder);
  }, [columnOrder]);

  useEffect(() => {
    if (isFullscreen) {
      // Close all popovers when fullscreen is enabled
      setLayoutAnchorEl(null);
      setSortAnchorEl(null);
      setColumnAnchorEl(null);
      setViewMoreAnchorEl(null);
    }
  }, [isFullscreen]);

  const {
    leftSideComponent,
    rightSideComponent,
    showColumnToggle,
    showChangeLayoutToggle,
    showSortingToggle,
    showFilterToggle,
    showSearch,
    searchValue,
    onSearchChange,
  } = topbarOptions ?? {};

  const { container: fullscreenContainer } = useFullscreenPopoverContainer();

  const handleLayoutSelect = (layout: string) => {
    setSelectedLayout(layout);
    setLayoutAnchorEl(null);
  };

  useEffect(() => {
    const handleExternalLayoutTrigger = (e: Event) => {
      const target = (e as CustomEvent).detail?.target as HTMLElement;
      setLayoutAnchorEl(target);
    };

    const handleExternalFilterTrigger = () => {
      onFilterButtonClick?.();
    };

    const handleExternalViewMoreTrigger = (e: Event) => {
      const target = (e as CustomEvent).detail?.target as HTMLElement;
      if (target) setViewMoreAnchorEl(target);
    };

    const handleExternalSearchTrigger = () => {
      setTimeout(() => {
        searchContainerRef.current?.querySelector("input")?.focus();
      }, 100);
    };

    window.addEventListener(
      "triggerLayoutPopover",
      handleExternalLayoutTrigger
    );
    window.addEventListener("triggerFilterButton", handleExternalFilterTrigger);
    window.addEventListener("triggerViewMore", handleExternalViewMoreTrigger);
    window.addEventListener("triggerSearchInput", handleExternalSearchTrigger); // ✅

    return () => {
      window.removeEventListener(
        "triggerLayoutPopover",
        handleExternalLayoutTrigger
      );
      window.removeEventListener(
        "triggerFilterButton",
        handleExternalFilterTrigger
      );
      window.removeEventListener(
        "triggerViewMore",
        handleExternalViewMoreTrigger
      );
      window.removeEventListener(
        "triggerSearchInput",
        handleExternalSearchTrigger
      ); // ✅
    };
  }, [onFilterButtonClick]);

  const [viewMoreAnchorEl, setViewMoreAnchorEl] = useState<HTMLElement | null>(
    null
  );

  const isViewMoreOpen = Boolean(viewMoreAnchorEl);

  return (
    <div className="ts-topbar">
      <div className="tabs-section">
        <div style={{ overflowX: "auto", whiteSpace: "nowrap" }}>
          {leftSideComponent}
        </div>
      </div>

      <div className="right-section">
        {rightSideComponent}
        {paginationComponent}

        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            gap: 0.5,
          }}
        >
          {showSearch && (
            <Box
              title="Search"
              className="external-search-trigger"
              onClick={() => {
                const customEvent = new CustomEvent("triggerSearchInput");
                window.dispatchEvent(customEvent);
              }}
              ref={searchContainerRef}
            >
              <TableSearch
                value={searchValue ?? ""}
                onChange={onSearchChange ?? (() => {})}
              />
            </Box>
          )}

          {showChangeLayoutToggle && (
            <>
              <div className="change-layout ts--button" title="Layout">
                <div
                  onClick={(e) => {
                    const customEvent = new CustomEvent(
                      "triggerLayoutPopover",
                      {
                        detail: { target: e.currentTarget },
                      }
                    );
                    window.dispatchEvent(customEvent);
                  }}
                  className="external-layout-trigger"
                >
                  <ChangeLayoutIcon />
                </div>
              </div>
            </>
          )}
          <Popover
            open={Boolean(layoutAnchorEl)}
            anchorEl={layoutAnchorEl}
            onClose={() => setLayoutAnchorEl(null)}
            anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
            container={fullscreenContainer}
            sx={{
              mt: 2.2,
            }}
          >
            <LayoutSelector
              onSelect={handleLayoutSelect}
              selectedLayout={selectedLayout}
            />
          </Popover>
          {showColumnToggle && (
            <>
              <div
                className="hide-column ts--button"
                onClick={(e) => setColumnAnchorEl(e.currentTarget)}
                title="Column"
              >
                <HideColumnIcon />
              </div>
              <ColumnToggle
                anchorEl={columnAnchorEl}
                onClose={() => setColumnAnchorEl(null)}
                table={table}
                columnOrder={columnOrder}
                setColumnOrder={setColumnOrder}
              />
            </>
          )}

          {showSortingToggle && (
            <>
              <div
                className="filter ts--button"
                title="Sort"
                onClick={(e) => setSortAnchorEl(e.currentTarget)}
              >
                <SortingIcon />
              </div>
              <SortPopover
                anchorEl={sortAnchorEl}
                onClose={() => setSortAnchorEl(null)}
                columns={table.getAllLeafColumns().map((col) => ({
                  id: col.id,
                  label: (col.columnDef.meta as any)?.label || col.id,
                }))}
                onChange={(sortingRules) => table.setSorting(sortingRules)}
              />
            </>
          )}

          {/* {showFilterToggle && (
          <div
            className="filter ts--button"
            title="Filter"
            onClick={onFilterButtonClick}
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              backgroundColor:
                tableStates.showTableFilter || tableStates.filters.length > 0
                  ? "#e8e2fb"
                  : "transparent",
              height: "25px",
              width: "25px",
              borderRadius: "6px",
              cursor: "pointer",
            }}
          >
            <FilterationIcon
              color={
                tableStates.showTableFilter || tableStates.filters.length > 0
                  ? "#7A5AF8"
                  : "#1C1B1F"
              }
            />
          </div>
        )} */}

          {showFilterToggle && (
            <div
              className="filter ts--button"
              title="Filter"
              onClick={onFilterButtonClick}
              style={{
                position: "relative",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                backgroundColor:
                  tableStates.showTableFilter || tableStates.filters.length > 0
                    ? "#eae4fe"
                    : "transparent",
                height: "25px",
                width: "25px",
                borderRadius: "6px",
                cursor: "pointer",
              }}
            >
              <FilterationIcon
                color={
                  tableStates.showTableFilter || tableStates.filters.length > 0
                    ? "#7A5AF8"
                    : "#1C1B1F"
                }
              />

              {tableStates.filters.length > 0 &&
                !tableStates.showTableFilter && (
                  <span
                    style={{
                      position: "absolute",
                      top: "1px",
                      right: "1px",
                      width: "6px",
                      height: "6px",
                      borderRadius: "50%",
                      backgroundColor: "#F63D68",
                    }}
                  />
                )}
            </div>
          )}

          {/* {viewMoreToggle && (
          <div className="view-more ts--button" title="View More">
            <ViewMore
              compactMode={isCompactTable}
              onCompactToggle={(value: string) =>
                setIsCompactTable(value === "Compact")
              }
              isFullscreen={isFullscreen}
              onFullscreenToggle={fullscreenToggle}
              groupBy={groupBy}
              onGroupByChange={(value: string) => setGroupBy(value)}
              tableStates={tableStates}
            />
          </div>
        )} */}
          {/* {viewMoreToggle && (
          <div
            className="view-more ts--button view-more-trigger"
            title="View More"
          >
            <ViewMore
              compactMode={isCompactTable}
              onCompactToggle={(value: string) =>
                setIsCompactTable(value === "Compact")
              }
              isFullscreen={isFullscreen}
              onFullscreenToggle={fullscreenToggle}
              groupBy={groupBy}
              onGroupByChange={(value: string) => setGroupBy(value)}
              tableStates={tableStates}
            />
          </div>
        )} */}
          <Popover
            open={isViewMoreOpen}
            anchorEl={viewMoreAnchorEl}
            onClose={() => setViewMoreAnchorEl(null)}
            anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
            transformOrigin={{ vertical: "top", horizontal: "left" }}
            container={fullscreenContainer}
            // PaperProps={{
            //   sx: {
            //     mt: 2,
            //     padding: 0,
            //     width: 380,
            //     borderRadius: 1,
            //     boxShadow: 4,
            //   },
            // }}
          >
            <ViewMore
              compactMode={isCompactTable}
              onCompactToggle={(value: string) =>
                setIsCompactTable(value === "Compact")
              }
              isFullscreen={isFullscreen}
              onFullscreenToggle={fullscreenToggle}
              groupBy={groupBy}
              onGroupByChange={(value: string) => setGroupBy(value)}
              tableStates={tableStates}
              onClose={() => setViewMoreAnchorEl(null)}
            />
          </Popover>
        </Box>
      </div>
    </div>
  );
}

export default Topbar;