import { type ExperimentAnalyticsChartDto, ExperimentDto } from "@montelo/browser-client";
import { useParams } from "@remix-run/react";
import { FC } from "react";
import { ExperimentAnalyticsChart } from "~/pages/experiments/ExperimentId/analytics/ExperimentAnalyticsChart";
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 { Routes } from "~/routes";

export const ExperimentIdEvalsPage: FC<{
  experiment: ExperimentDto;
  charts: Array<ExperimentAnalyticsChartDto>;
}> = ({ experiment, charts }) => {
  const params = useParams();

  const breadcrumbs: LayoutBreadcrumb[] = [
    {
      label: "Experiments",
      to: Routes.app.project.env.experiments({
        envId: params.envId!,
        projectId: params.projectId!,
      }),
    },
    {
      label: experiment.name || "—",
      to: Routes.app.project.env.experimentsId({
        envId: params.envId!,
        projectId: params.projectId!,
        experimentId: params.experimentId!,
      }),
    },
    {
      label: "Evals",
    },
  ];

  return (
    <PageLayout breadcrumbs={breadcrumbs}>
      <div className={"grid grid-cols-3 gap-4"}>
        {charts.map((chart, index) => (
          <ExperimentAnalyticsChart key={index} chart={chart} />
        ))}
      </div>
    </PageLayout>
  );
};
