Neon-Desk/components/financials/financials-toolbar.tsx

"use client";

import {
  Fragment,
  memo,
  useMemo,
  useCallback,
  useRef,
  useEffect,
  useState,
} from "react";
import { Download, Search, BarChart3 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

export type FinancialControlOption = {
  value: string;
  label: string;
};

export type FinancialControlSection = {
  key: string;
  label: string;
  options: FinancialControlOption[];
  value: string;
  onChange: (value: string) => void;
};

export type FinancialsToolbarProps = {
  sections: FinancialControlSection[];
  searchValue: string;
  onSearchChange: (value: string) => void;
  onExport?: () => void;
  showChart?: boolean;
  onToggleChart?: () => void;
  className?: string;
};

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

function ControlGroup({
  children,
  showDivider = false,
}: {
  children: React.ReactNode;
  showDivider?: boolean;
}) {
  return (
    <div className="flex items-center gap-1.5">
      {showDivider && <div className="mr-1.5 h-5 w-px bg-[var(--line-weak)]" />}
      {children}
    </div>
  );
}

function FinancialsToolbarComponent({
  sections,
  searchValue,
  onSearchChange,
  onExport,
  showChart = false,
  onToggleChart,
  className,
}: FinancialsToolbarProps) {
  const [localSearch, setLocalSearch] = useState(searchValue);
  const debouncedSearch = useDebounce(localSearch, 300);

  useEffect(() => {
    onSearchChange(debouncedSearch);
  }, [debouncedSearch, onSearchChange]);

  useEffect(() => {
    setLocalSearch(searchValue);
  }, [searchValue]);

  const groupedSections = useMemo(() => {
    const statementKeys = ["surface"];
    const periodKeys = ["cadence"];
    const modeKeys = ["display"];
    const scaleKeys = ["scale"];

    return {
      statement: sections.filter((s) => statementKeys.includes(s.key)),
      period: sections.filter((s) => periodKeys.includes(s.key)),
      mode: sections.filter((s) => modeKeys.includes(s.key)),
      scale: sections.filter((s) => scaleKeys.includes(s.key)),
    };
  }, [sections]);

  return (
    <div className={cn("flex flex-col gap-2", className)}>
      <div className="flex flex-wrap items-center gap-y-2">
        <ControlGroup>
          {groupedSections.statement.map((section) => (
            <Fragment key={section.key}>
              {section.options.map((option) => {
                const isActive = section.value === option.value;
                return (
                  <Button
                    key={`${section.key}-${option.value}`}
                    variant={isActive ? "secondary" : "ghost"}
                    size="compact"
                    onClick={() => section.onChange(option.value)}
                    className="text-xs"
                  >
                    {option.label}
                  </Button>
                );
              })}
            </Fragment>
          ))}
        </ControlGroup>

        <ControlGroup showDivider>
          {groupedSections.period.map((section) => (
            <Fragment key={section.key}>
              {section.options.map((option) => {
                const isActive = section.value === option.value;
                return (
                  <Button
                    key={`${section.key}-${option.value}`}
                    variant={isActive ? "secondary" : "ghost"}
                    size="compact"
                    onClick={() => section.onChange(option.value)}
                    className="text-xs"
                  >
                    {option.label}
                  </Button>
                );
              })}
            </Fragment>
          ))}
        </ControlGroup>

        {groupedSections.mode.length > 0 && (
          <ControlGroup showDivider>
            {groupedSections.mode.map((section) => (
              <Fragment key={section.key}>
                {section.options.map((option) => {
                  const isActive = section.value === option.value;
                  return (
                    <Button
                      key={`${section.key}-${option.value}`}
                      variant={isActive ? "secondary" : "ghost"}
                      size="compact"
                      onClick={() => section.onChange(option.value)}
                      className="text-xs"
                    >
                      {option.label}
                    </Button>
                  );
                })}
              </Fragment>
            ))}
          </ControlGroup>
        )}

        <ControlGroup showDivider>
          {groupedSections.scale.map((section) => (
            <Fragment key={section.key}>
              {section.options.map((option) => {
                const isActive = section.value === option.value;
                return (
                  <Button
                    key={`${section.key}-${option.value}`}
                    variant={isActive ? "secondary" : "ghost"}
                    size="compact"
                    onClick={() => section.onChange(option.value)}
                    className="text-xs"
                  >
                    {option.label}
                  </Button>
                );
              })}
            </Fragment>
          ))}
        </ControlGroup>

        <div className="flex-1" />

        <div className="flex items-center gap-2">
          <div className="relative">
            <Search className="absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-[var(--terminal-muted)]" />
            <Input
              placeholder="Search metrics..."
              value={localSearch}
              onChange={(e) => setLocalSearch(e.target.value)}
              inputSize="compact"
              className="w-40 pl-7"
            />
          </div>

          {onToggleChart && (
            <Button
              variant={showChart ? "secondary" : "ghost"}
              size="compact"
              onClick={onToggleChart}
              className="gap-1.5"
              aria-pressed={showChart}
            >
              <BarChart3 className="h-3.5 w-3.5" />
              <span className="hidden sm:inline">
                {showChart ? "Hide" : "Show"} Chart
              </span>
            </Button>
          )}

          {onExport && (
            <Button
              variant="ghost"
              size="compact"
              onClick={onExport}
              className="gap-1.5"
            >
              <Download className="h-3.5 w-3.5" />
              Export
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}

export const FinancialsToolbar = memo(FinancialsToolbarComponent);