import { FineTuneJobWithDatasetDto } from "@montelo/browser-client";
import { useRevalidator } from "@remix-run/react";
import { RefreshCw } from "lucide-react";
import { FC } from "react";
import { Button } from "~/components/ui/button";
import { FineTunesTable } from "~/pages/finetuning/FineTunesTable";
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 FineTuningPage: FC<{ fineTunes: FineTuneJobWithDatasetDto[] }> = ({ fineTunes }) => {
  const breadcrumbs: LayoutBreadcrumb[] = [
    {
      label: "Fine-Tuning",
    },
  ];

  const subtitle = () => {
    return (
      <PageSubtitle>
        Fine-tune models using your datasets.{" "}
        <PageDocLink to={Routes.external.docs.fineTuning}>Fine-Tuning Docs.</PageDocLink>
      </PageSubtitle>
    );
  };

  const action = () => {
    const { revalidate } = useRevalidator();
    return (
      <Button variant={"ghost"} size={"icon"} onClick={revalidate}>
        <RefreshCw className={"h-4 w-4"} />
      </Button>
    );
  };

  return (
    <PageLayout breadcrumbs={breadcrumbs} subtitle={subtitle} action={action}>
      <FineTunesTable fineTunes={fineTunes} />
    </PageLayout>
  );
};
