/*
 * =============================================================================
 *  VibeQuant (vquant) — AI-Powered Financial Intelligence Platform
 * -----------------------------------------------------------------------------
 *  File:      client/src/components/chat/thinking-widget.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, useEffect } from "react";
import { Brain, ChevronDown } from "lucide-react";

interface ThinkingWidgetProps {
  content: string;
  isStreaming?: boolean;
}

export function ThinkingWidget({ content, isStreaming = false }: ThinkingWidgetProps) {
  const [open, setOpen] = useState(false);

  // Auto-expand while the model is thinking, collapse once done.
  useEffect(() => {
    setOpen(isStreaming);
  }, [isStreaming]);

  if (!content) return null;

  return (
    <div
      className="mb-4 rounded-xl border border-border bg-muted/30 overflow-hidden"
      data-testid="thinking-widget"
    >
      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        className="w-full flex items-center gap-2 px-4 py-2.5 text-left hover:bg-muted/50 transition-colors"
      >
        <Brain
          className={`w-4 h-4 text-violet-500 flex-shrink-0 ${isStreaming ? "animate-pulse" : ""}`}
        />
        <span className="text-sm font-medium text-foreground">
          {isStreaming ? "Reflexion en cours..." : "Raisonnement"}
        </span>
        <ChevronDown
          className={`w-4 h-4 ml-auto text-muted-foreground transition-transform ${open ? "rotate-180" : ""}`}
        />
      </button>
      {open && (
        <div className="px-4 pb-3 pt-1 border-t border-border">
          <pre className="whitespace-pre-wrap break-words text-xs text-muted-foreground font-sans leading-relaxed">
            {content}
          </pre>
        </div>
      )}
    </div>
  );
}