import * as React from 'react';
import { ChevronDown, ChevronUp, Filter } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Collapsible } from './ui/collapsible';
import { Tooltip } from './ui/tooltip';

export interface AdvancedFiltersProps {
  /**
   * Content to display when expanded (the advanced filter controls)
   */
  children: React.ReactNode;

  /**
   * Label for the toggle button
   * @default "Advanced Filters"
   */
  label?: string;

  /**
   * Whether the filters are open by default
   * @default false
   */
  defaultOpen?: boolean;

  /**
   * Controlled open state
   */
  open?: boolean;

  /**
   * Callback when open state changes
   */
  onOpenChange?: (open: boolean) => void;

  /**
   * Additional CSS classes for the container
   */
  className?: string;

  /**
   * Additional CSS classes for the content area
   */
  contentClassName?: string;

  /**
   * Whether to show the filter icon
   * @default true
   */
  showIcon?: boolean;

  /**
   * Tooltip text to explain what advanced filters are
   * If provided, wraps the trigger in a Tooltip component
   */
  tooltip?: string;
}

/**
 * AdvancedFilters - Collapsible component for advanced filter options
 *
 * A component that wraps advanced filter controls in a collapsible section,
 * allowing users to hide/show advanced filtering options to reduce cognitive load.
 * Follows progressive disclosure pattern.
 *
 * @example
 * ```tsx
 * <AdvancedFilters>
 *   <Select label="Genre" options={genres} />
 *   <Select label="Format" options={formats} />
 *   <Select label="Sort By" options={sortOptions} />
 * </AdvancedFilters>
 * ```
 *
 * @example
 * ```tsx
 * <AdvancedFilters
 *   label="More Options"
 *   defaultOpen={false}
 *   onOpenChange={(open) => console.log('Filters:', open)}
 * >
 *   <div className="space-y-4">
 *     <Select label="Genre" options={genres} />
 *     <Select label="Format" options={formats} />
 *   </div>
 * </AdvancedFilters>
 * ```
 */
export function AdvancedFilters({
  children,
  label = 'Advanced Filters',
  defaultOpen = false,
  open: controlledOpen,
  onOpenChange,
  className,
  contentClassName,
  showIcon = true,
  tooltip,
}: AdvancedFiltersProps) {
  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);

  // Use controlled state if provided, otherwise use uncontrolled
  const isOpen = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;

  const handleToggle = () => {
    const newOpen = !isOpen;
    if (controlledOpen === undefined) {
      setUncontrolledOpen(newOpen);
    }
    onOpenChange?.(newOpen);
  };

  const ChevronIcon = isOpen ? ChevronUp : ChevronDown;

  const triggerContent = (
    <div className="flex items-center gap-2">
      {showIcon && <Filter className="w-4 h-4" />}
      <span>{label}</span>
      <ChevronIcon className="w-4 h-4 ml-auto" />
    </div>
  );

  const collapsibleTrigger = tooltip ? (
    <Tooltip content={tooltip} position="top">
      {triggerContent}
    </Tooltip>
  ) : (
    triggerContent
  );

  return (
    <div className={cn('w-full', className)}>
      <Collapsible
        trigger={collapsibleTrigger}
        open={isOpen}
        onOpenChange={handleToggle}
        defaultOpen={defaultOpen}
        triggerClassName="p-2 rounded-lg border border-kodo-steel bg-kodo-void/50 hover:bg-kodo-void transition-colors"
        contentClassName={cn('pt-3', contentClassName)}
      >
        <div className="space-y-3">{children}</div>
      </Collapsible>
    </div>
  );
}
