import { ExperimentStatsDto, ExperimentWithDatapointRunsDto } from "@montelo/browser-client";
import { ExternalLinkIcon } from "@radix-ui/react-icons";
import { Link, useParams } from "@remix-run/react";
import dayjs from "dayjs";
import { Play, Target } from "lucide-react";
import numbro from "numbro";
import { FC } from "react";
import { Button } from "~/components/ui/button";
import { DatapointRunsTable } from "~/pages/experiments/ExperimentId/DatapointRunsTable";
import { TopCard } from "~/pages/experiments/ExperimentId/TopCard";
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";

type ExperimentsPageProps = {
  experiment: ExperimentWithDatapointRunsDto;
  totalDatapointRuns: number;
  currentPage: number;
  totalPages: number;
  stats: ExperimentStatsDto;
};

export const ExperimentIdPage: FC<ExperimentsPageProps> = ({
  experiment,
  totalDatapointRuns,
  currentPage,
  totalPages,
  stats,
}) => {
  const params = useParams();

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

  const subtitle = () => {
    return (
      <PageSubtitle>
        Run experiments from your codebase to validate your system.{" "}
        <PageDocLink to={Routes.external.docs.experiments}>Experiments Docs.</PageDocLink>
      </PageSubtitle>
    );
  };

  const action = () => {
    const to = Routes.app.project.env.experimentIdEvals({
      projectId: params.projectId!,
      envId: params.envId!,
      experimentId: experiment.id,
    });
    return (
      <Link to={to} prefetch={"intent"}>
        <Button>View Evals</Button>
      </Link>
    );
  };

  return (
    <PageLayout breadcrumbs={breadcrumbs} subtitle={subtitle} action={action}>
      <div className={"flex flex-col gap-2"}>
        <div className={"flex flex-row items-center gap-1"}>
          <Target size={20} />
          <p className={"text-xl font-semibold"}>Overview</p>
        </div>
        <div className="mb-2 grid grid-cols-3 gap-8">
          <TopCard
            title={"Experiment"}
            content={() => (
              <div>
                <p>{experiment.description}</p>
                <p>Started on {dayjs(experiment.createdAt).format("MMMM D, h:mm a")}</p>
              </div>
            )}
          />
          <TopCard
            title={"Dataset"}
            content={() => (
              <div>
                <p className={"flex items-center"}>
                  {experiment.dataset.name}
                  <Link
                    className={"hover:text-accent-foreground pl-1"}
                    to={Routes.app.project.env.datasetsId({
                      projectId: params.projectId!,
                      envId: params.envId!,
                      datasetId: experiment.dataset.id,
                    })}
                    prefetch={"intent"}
                  >
                    <ExternalLinkIcon />
                  </Link>
                </p>
                <p>{experiment.dataset.description}</p>
                <p>{totalDatapointRuns} datapoints ran</p>
              </div>
            )}
          />
          <TopCard
            title={"Stats"}
            content={() => (
              <div>
                <p>${stats.totalCost ? numbro(stats.totalCost).format({ thousandSeparated: true }) : "—"} total cost</p>
                <p>{stats.avgDuration ? numbro(stats.avgDuration).format({ mantissa: 2 }) : "—"}s avg latency</p>
              </div>
            )}
          />
        </div>
      </div>

      {/* datapoint runs*/}
      <div>
        <div className={"flex flex-row items-center gap-1"}>
          <Play size={20} />
          <p className={"text-xl font-semibold"}>Runs</p>
        </div>
        <p className={"text-muted-foreground mb-4"}>
          Each run is a datapoint from the dataset that was executed in this experiment.{" "}
          <PageDocLink to={Routes.external.docs.runs}>Run Docs.</PageDocLink>
        </p>
        <DatapointRunsTable
          datapointRuns={experiment.datapointRuns}
          currentPage={currentPage}
          totalPages={totalPages}
        />
      </div>
    </PageLayout>
  );
};
