Tool call

'use client';

import * as React from 'react';
import { ToolCall, type ToolCallStatus } from './tool-call';

type Call = {
  status: ToolCallStatus;
  input: Record<string, string>;
  output?: Record<string, string>;
  duration?: number;
};

const INPUT = { from: 'Jakarta (CGK)', to: 'Singapore (SIN)', date: '2 Nov 2026', passengers: '2' };
const OUTPUT = { flights: '12 found', cheapest: '$84, leaves at 07:15' };
const HOTEL_INPUT = { city: 'Singapore', nights: '3', guests: '2' };

const FLIGHT_DONE: Call = { status: 'done', input: INPUT, output: OUTPUT, duration: 1400 };
const HOTEL_FAILED: Call = { status: 'error', input: HOTEL_INPUT };

export default function ToolCallDemo({ replay = 0 }: { replay?: number }) {
  const [flight, setFlight] = React.useState<Call>(FLIGHT_DONE);
  const [hotel, setHotel] = React.useState<Call>(HOTEL_FAILED);
  const timers = React.useRef<number[]>([]);
  const later = (ms: number, run: () => void) => timers.current.push(window.setTimeout(run, ms));
  const clear = () => {
    for (const id of timers.current) window.clearTimeout(id);
    timers.current = [];
  };
  // biome-ignore lint/correctness/useExhaustiveDependencies: clears the timers once, on unmount
  React.useEffect(() => clear, []);

  const runHotel = (delay: number) => {
    setHotel({ status: 'preparing', input: {} });
    later(delay + 300, () => setHotel({ status: 'preparing', input: { city: 'Singapore' } }));
    later(delay + 700, () => setHotel({ status: 'running', input: HOTEL_INPUT }));
    later(delay + 2300, () => setHotel(HOTEL_FAILED));
  };

  const replayRef = React.useRef(() => {});
  replayRef.current = () => {
    clear();
    const entries = Object.entries(INPUT);
    setFlight({ status: 'preparing', input: {} });
    for (let i = 0; i < entries.length; i++)
      later(250 + i * 280, () =>
        setFlight({ status: 'preparing', input: Object.fromEntries(entries.slice(0, i + 1)) }),
      );
    later(1500, () => setFlight({ status: 'running', input: INPUT }));
    later(2900, () => setFlight(FLIGHT_DONE));
    runHotel(600);
  };

  React.useEffect(() => {
    if (replay > 0) replayRef.current();
  }, [replay]);

  return (
    <div className="flex w-full max-w-[480px] flex-col gap-lg">
      <ToolCall
        name="search_flights"
        title="Search flights"
        status={flight.status}
        input={flight.input}
        output={flight.output}
        duration={flight.duration}
        defaultOpen
      />
      <ToolCall
        name="book_hotel"
        title="Book a hotel"
        status={hotel.status}
        input={hotel.input}
        errorText="The hotel service did not respond."
        defaultOpen
        onRetry={() => {
          clear();
          runHotel(0);
        }}
      />
    </div>
  );
}