"use client";

import { useRef, useEffect } from "react";
import { Input } from "@/components/ui/input";
import { Search, X, Loader2 } from "lucide-react";

interface BoardSearchBarProps {
  searchQuery: string;
  onSearchChange: (query: string) => void;
  isCreatingSpec: boolean;
  creatingSpecProjectPath?: string;
  currentProjectPath?: string;
}

export function BoardSearchBar({
  searchQuery,
  onSearchChange,
  isCreatingSpec,
  creatingSpecProjectPath,
  currentProjectPath,
}: BoardSearchBarProps) {
  const searchInputRef = useRef<HTMLInputElement>(null);

  // Focus search input when "/" is pressed
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // Only focus if not typing in an input/textarea
      if (
        e.key === "/" &&
        !(e.target instanceof HTMLInputElement) &&
        !(e.target instanceof HTMLTextAreaElement)
      ) {
        e.preventDefault();
        searchInputRef.current?.focus();
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, []);

  return (
    <div className="relative max-w-md flex-1 flex items-center gap-2">
      <div className="relative flex-1">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
        <Input
          ref={searchInputRef}
          type="text"
          placeholder="Search features by keyword..."
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
          className="pl-9 pr-12 border-border"
          data-testid="kanban-search-input"
        />
        {searchQuery ? (
          <button
            onClick={() => onSearchChange("")}
            className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-sm hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
            data-testid="kanban-search-clear"
            aria-label="Clear search"
          >
            <X className="w-4 h-4" />
          </button>
        ) : (
          <span
            className="absolute right-2 top-1/2 -translate-y-1/2 px-1.5 py-0.5 text-[10px] font-mono rounded bg-brand-500/10 border border-brand-500/30 text-brand-400/70"
            data-testid="kanban-search-hotkey"
          >
            /
          </span>
        )}
      </div>
      {/* Spec Creation Loading Badge */}
      {isCreatingSpec &&
        currentProjectPath === creatingSpecProjectPath && (
          <div
            className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-brand-500/10 border border-brand-500/20 shrink-0"
            title="Creating App Specification"
            data-testid="spec-creation-badge"
          >
            <Loader2 className="w-3 h-3 animate-spin text-brand-500 shrink-0" />
            <span className="text-xs font-medium text-brand-500 whitespace-nowrap">
              Creating spec
            </span>
          </div>
        )}
    </div>
  );
}