"use client";

/**
 * Declarative Generative UI — A2UI Fixed Schema demo.
 *
 * In the fixed-schema flavor of A2UI, the component tree (schema) lives on
 * the frontend and the agent only streams *data* into the data model. The
 * flight card is ASSEMBLED from small sub-components in the inlined schema
 * (`src/lib/factory/a2ui-fixed-schema-factory.ts`), reusing the same shape
 * as `langgraph-python`'s `a2ui_schemas/flight_schema.json`.
 *
 * - Definitions (zod schemas): `./a2ui/definitions.ts`
 * - Renderers (React): `./a2ui/renderers.tsx`
 * - Catalog wiring: `./a2ui/catalog.ts` (includes the basic catalog)
 * - Agent: `src/lib/factory/a2ui-fixed-schema-factory.ts` (the
 *   `display_flight` tool emits an `a2ui_operations` container directly)
 *
 * Reference:
 * https://docs.copilotkit.ai/integrations/langgraph/generative-ui/a2ui/fixed-schema
 */

import React from "react";
import {
  CopilotKit,
  CopilotChat,
  useConfigureSuggestions,
} from "@copilotkit/react-core/v2";

import { fixedCatalog } from "./a2ui/catalog";

export default function A2UIFixedSchemaDemo() {
  return (
    // `a2ui.catalog` wires the fixed catalog into the A2UI activity renderer.
    <CopilotKit
      runtimeUrl="/api/copilotkit-a2ui-fixed-schema"
      agent="default"
      a2ui={{ catalog: fixedCatalog }}
    >
      <div className="flex justify-center items-center h-screen w-full">
        <div className="h-full w-full max-w-4xl">
          <Chat />
        </div>
      </div>
    </CopilotKit>
  );
}

function Chat() {
  useConfigureSuggestions({
    suggestions: [
      {
        title: "Find SFO → JFK",
        message: "Find me a flight from SFO to JFK on United for $289.",
      },
    ],
    available: "always",
  });

  return <CopilotChat agentId="default" className="h-full rounded-2xl" />;
}
