import { useState, type ReactNode } from "react";
import { Brain, ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";

interface ReasoningProps {
  children: ReactNode;
  defaultOpen?: boolean;
  summary?: string;
}

export function Reasoning({ children, defaultOpen = false, summary }: ReasoningProps) {
  const [isOpen, setIsOpen] = useState(defaultOpen);

  return (
    <div className="my-2 overflow-hidden rounded-lg border border-border bg-card">
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors hover:bg-muted/50"
      >
        <Brain className="size-4 shrink-0 text-violet-500" />
        <span className="flex-1 font-medium text-foreground">
          {summary || "Thinking process"}
        </span>
        <ChevronDown
          className={cn(
            "size-4 shrink-0 text-muted-foreground transition-transform",
            isOpen && "rotate-180"
          )}
        />
      </button>
      {isOpen && (
        <div className="border-t border-border px-3 py-2 text-sm text-muted-foreground">
          {children}
        </div>
      )}
    </div>
  );
}

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

export function ThinkingBlock({ content, isStreaming }: ThinkingBlockProps) {
  return (
    <Reasoning summary="Thinking...">
      <div className="whitespace-pre-wrap break-words text-xs leading-relaxed">
        {content}
        {isStreaming && (
          <span className="ml-0.5 inline-block size-1.5 animate-pulse rounded-full bg-violet-500 align-middle" />
        )}
      </div>
    </Reasoning>
  );
}
