import { clsx } from 'clsx';
import { Search, X } from 'lucide-react';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import Button from './Button';
import Input from './Input';

export interface SearchBarProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onSubmit'> {
  value: string;
  onChange: (value: string) => void;
  onClear?: () => void;
  onSubmit?: (value: string) => void;
  placeholder?: string;
  showClearButton?: boolean;
  className?: string;
  containerClassName?: string;
  navigateOnEnter?: boolean;
}

/**
 * Search bar component with clear button
 */
export const SearchBar = React.forwardRef<HTMLInputElement, SearchBarProps>(
  (
    {
      value,
      onChange,
      onClear,
      onSubmit,
      placeholder = 'Search...',
      showClearButton = true,
      className,
      containerClassName,
      navigateOnEnter = false,
      ...props
    },
    ref
  ) => {
    const navigate = useNavigate();

    const handleClear = () => {
      onChange('');
      onClear?.();
    };

    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
      if (e.key === 'Enter') {
        e.preventDefault();
        if (onSubmit) {
          onSubmit(value);
        } else if (navigateOnEnter && value.trim()) {
          navigate(`/search?q=${encodeURIComponent(value.trim())}`);
        }
      }
      props.onKeyDown?.(e);
    };

    return (
      <div className={clsx('relative', containerClassName || className)}>
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
        <Input
          ref={ref}
          type="search"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder={placeholder}
          className={clsx('pl-9', showClearButton && value && 'pr-9', !containerClassName && className)}
          {...props}
        />
        {showClearButton && value && (
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={handleClear}
            className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 p-0"
            aria-label="Clear search"
          >
            <X className="h-4 w-4" />
          </Button>
        )}
      </div>
    );
  }
);
SearchBar.displayName = 'SearchBar';

// Default export for backward compatibility
export default SearchBar;