import { useState } from 'react';
import { ChevronRight } from 'lucide-react';
import { ToolCallLine, runStatus, type ToolRun } from './ToolCallLine';

interface Props {
  // All runs must share the same tool name. Caller (MessageList grouping
  // pass) enforces that invariant.
  runs: ToolRun[];
}

export function ToolCallGroup({ runs }: Props) {
  const [open, setOpen] = useState(false);
  if (runs.length === 0) return null;
  const toolName = runs[0]!.call.name;
  const count = runs.length;

  // Group-level status: pending if any are still running, error if any
  // finished with an error, otherwise success. Matches the visual the user
  // gets when scanning a long run of greps / view_files.
  let pending = 0;
  let errored = 0;
  for (const r of runs) {
    const s = runStatus(r);
    if (s === 'pending') pending += 1;
    else if (s === 'error') errored += 1;
  }
  const summaryParts: string[] = [];
  if (pending > 0) summaryParts.push(`${pending} running`);
  if (errored > 0) summaryParts.push(`${errored} failed`);
  const summary = summaryParts.length > 0 ? ` (${summaryParts.join(', ')})` : '';

  return (
    <div className="rounded border border-border/60 bg-muted/20 text-xs">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className="w-full flex items-center gap-1.5 px-2 py-1 hover:bg-muted/40 text-left"
      >
        <ChevronRight
          className={`size-3 text-muted-foreground/60 shrink-0 transition-transform ${open ? 'rotate-90' : ''}`}
        />
        <span className="text-muted-foreground/60 select-none shrink-0">⊞</span>
        <span className="font-mono text-foreground/90">
          {count} {toolName} call{count === 1 ? '' : 's'}
        </span>
        {summary && (
          <span className="text-muted-foreground truncate">{summary}</span>
        )}
        <span className="ml-auto text-muted-foreground/60 shrink-0">tap</span>
      </button>
      {open && (
        <div className="border-t border-border/40 px-2 py-1 space-y-0.5">
          {runs.map((run, i) => (
            <ToolCallLine
              key={`${run.call.id}-${i}`}
              run={run}
              insideGroup
            />
          ))}
        </div>
      )}
    </div>
  );
}