/*
 * =============================================================================
 *  VibeQuant (vquant) — AI-Powered Financial Intelligence Platform
 * -----------------------------------------------------------------------------
 *  File:      client/src/components/chat/search-bar.tsx
 *
 *  Author:    Simon-Pierre Boucher
 *  Contact:   contact@spboucher.ai
 *  Website:   https://www.spboucher.ai
 *  Demo:      https://www.vquant.ai
 *  License:   MIT (see LICENSE)
 *
 *  Copyright © 2026 Simon-Pierre Boucher. All rights reserved.
 * =============================================================================
 */

import { useState, FormEvent } from "react";
import { Send, Loader2 } from "lucide-react";
import type { ClaudeModel } from "@/hooks/useChatSession";

interface SearchBarProps {
  onSearch: (query: string, imageData?: string, imageMimeType?: string) => void;
  isLoading?: boolean;
  placeholder?: string;
  selectedModel?: ClaudeModel;
  onModelChange?: (model: ClaudeModel) => void;
}

export function SearchBar({ onSearch, isLoading = false, placeholder = "Ask anything..." }: SearchBarProps) {
  const [query, setQuery] = useState("");
  const [isFocused, setIsFocused] = useState(false);

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    if (query.trim() && !isLoading) {
      onSearch(query.trim());
      setQuery("");
    }
  };

  const canSubmit = Boolean(query.trim()) && !isLoading;

  return (
    <div className="w-full" data-testid="search-bar-container">
      <form onSubmit={handleSubmit} className="relative" data-testid="form-search">
        <div
          className={`relative flex items-center gap-3 px-4 py-3 bg-card border rounded-xl transition-colors ${
            isFocused
              ? "border-primary ring-2 ring-primary/10"
              : "border-border hover:border-primary/40"
          }`}
          data-testid="search-input-wrapper"
        >
          <input
            type="text"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            onFocus={() => setIsFocused(true)}
            onBlur={() => setIsFocused(false)}
            placeholder={placeholder}
            disabled={isLoading}
            data-testid="input-search-query"
            className="flex-1 min-w-0 bg-transparent border-none outline-none text-base font-normal text-foreground placeholder:text-muted-foreground disabled:opacity-50 disabled:cursor-not-allowed"
          />

          <button
            type="submit"
            disabled={!canSubmit}
            className={`flex-shrink-0 p-2.5 rounded-lg transition-colors ${
              canSubmit
                ? "bg-primary text-primary-foreground hover:bg-primary/90"
                : "bg-muted text-muted-foreground cursor-not-allowed"
            }`}
          >
            {isLoading ? (
              <Loader2 className="w-4 h-4 animate-spin" data-testid="icon-search-loading" />
            ) : (
              <Send className="w-4 h-4" />
            )}
          </button>
        </div>
      </form>
    </div>
  );
}