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

'use client';

import { memo, useMemo, useCallback, useRef, useEffect, useState } from 'react';
import { Download, Search } 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;
  className?: string;
};

// Debounce hook
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 FinancialsToolbarComponent({
  sections,
  searchValue,
  onSearchChange,
  onExport,
  className
}: FinancialsToolbarProps) {
  const [localSearch, setLocalSearch] = useState(searchValue);
  const debouncedSearch = useDebounce(localSearch, 300);

  // Sync debounced search to parent
  useEffect(() => {
    onSearchChange(debouncedSearch);
  }, [debouncedSearch, onSearchChange]);

  // Sync parent search to local (if changed externally)
  useEffect(() => {
    setLocalSearch(searchValue);
  }, [searchValue]);

  return (
    <div className={cn('flex flex-wrap items-center gap-2 pb-3 mb-3 border-b border-[var(--line-weak)]', className)}>
      {/* Control sections */}
      <div className="flex flex-wrap items-center gap-1.5">
        {sections.map((section) => (
          <div key={section.key} className="flex items-center gap-1">
            {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>
              );
            })}
          </div>
        ))}
      </div>

      {/* Spacer */}
      <div className="flex-1" />

      {/* Search and actions */}
      <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-48 pl-7"
          />
        </div>
        {onExport && (
          <Button
            variant="ghost"
            size="compact"
            onClick={onExport}
            className="gap-1.5"
          >
            <Download className="h-3.5 w-3.5" />
            Export
          </Button>
        )}
      </div>
    </div>
  );
}

export const FinancialsToolbar = memo(FinancialsToolbarComponent);