import {
  buildServicePageModel,
  type ServicePageHealthInput,
} from '@lucid-agents/http';
import { createFileRoute } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';

import { ServiceStorefront } from '@/components/service-storefront';
import serviceUi from '../../service-ui.config';

const loadPublicService = createServerFn({ method: 'GET' }).handler(
  async () => {
    const { handlers } = await import('@/lib/agent');
    const baseUrl = '/api/agent';
    const [manifestResponse, healthResponse] = await Promise.all([
      handlers.manifest({
        request: new Request(
          `http://agent.local${baseUrl}/.well-known/agent-card.json`
        ),
      }),
      handlers.health({
        request: new Request(`http://agent.local${baseUrl}/health`),
      }),
    ]);
    if (!manifestResponse.ok) throw new Error('Agent Card unavailable');
    const manifest = await manifestResponse.json();
    const health = healthResponse.ok ? await healthResponse.json() : null;
    return JSON.stringify(
      buildServicePageModel(
        manifest as Parameters<typeof buildServicePageModel>[0],
        {
          baseUrl,
          health: health as ServicePageHealthInput,
        }
      )
    );
  }
);

export const Route = createFileRoute('/')({
  loader: async () =>
    JSON.parse(await loadPublicService()) as ReturnType<
      typeof buildServicePageModel
    >,
  component: AgentServicePage,
});

function AgentServicePage() {
  const service = Route.useLoaderData();
  return <ServiceStorefront service={service} serviceUi={serviceUi} />;
}