import { TraceWithLogsDto } from "@montelo/browser-client";
import { useParams } from "@remix-run/react";
import { PageDocLink } from "~/pages/layouts/PageDocLink";
import { PageLayout } from "~/pages/layouts/PageLayout";
import { PageSubtitle } from "~/pages/layouts/PageSubtitle";
import { LayoutBreadcrumb } from "~/pages/layouts/types";
import { TraceIdContent } from "~/pages/traces/TraceIdContent";
import { AddToDatasetDialog } from "~/pages/traces/components/AddToDatasetDialog";
import { Routes } from "~/routes";

type TraceIdProps = {
  trace: TraceWithLogsDto;
};

export const TraceIdPage = ({ trace }: TraceIdProps) => {
  const params = useParams();

  const breadcrumbs: LayoutBreadcrumb[] = [
    {
      label: "Traces",
      to: Routes.app.project.env.traces({
        projectId: params.projectId!,
        envId: trace.envId,
      }),
    },
    {
      label: trace.name || "—",
    },
  ];

  const subtitle = () => {
    return (
      <PageSubtitle>
        A trace can group LLM calls, vector database calls, and anything else.{" "}
        <PageDocLink to={Routes.external.docs.traces}>Trace Docs.</PageDocLink>
      </PageSubtitle>
    );
  };

  const action = () => {
    return <AddToDatasetDialog trace={trace} />;
  };

  return (
    <PageLayout breadcrumbs={breadcrumbs} subtitle={subtitle} action={action}>
      <TraceIdContent trace={trace} />
    </PageLayout>
  );
};
