"use client";

/**
 * Declarative Generative UI — A2UI Fixed Schema demo (Spring AI port).
 *
 * In the fixed-schema flavor of A2UI, the component tree (schema) lives on
 * the BACKEND as a fixed Java literal, and the agent only streams *data*
 * into the data model. The flight card is assembled from small
 * sub-components (Card > Column > [Title, Row, …]). The Java side's
 * display_flight tool (see DisplayFlightTool.java) returns the fixed
 * schema plus a populated data model per turn.
 *
 * - Definitions (zod schemas): `./a2ui/definitions.ts`
 * - Renderers (React): `./a2ui/renderers.tsx`
 * - Catalog wiring: `./a2ui/catalog.ts` (includes the basic catalog)
 * - Spring controller: A2uiFixedSchemaController.java (at /a2ui-fixed-schema/run)
 */

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

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

export default function A2UIFixedSchemaDemo() {
  return (
    <CopilotKit
      runtimeUrl="/api/copilotkit-a2ui-fixed-schema"
      agent="a2ui-fixed-schema"
      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="a2ui-fixed-schema" className="h-full rounded-2xl" />
  );
}
