import { FineTuneJobWithDatasetDto } from "@montelo/browser-client";
import { Link, useParams } from "@remix-run/react";
import dayjs from "dayjs";
import { ExternalLink } from "lucide-react";
import { FineTuningJob } from "openai/resources/fine-tuning/jobs";
import { FC } from "react";
import { Badge } from "~/components/ui/badge";
import { TableCell, TableRow } from "~/components/ui/table";
import { idShortener } from "~/pages/traces/utils";
import { Routes } from "~/routes";

export const FineTuneCell: FC<{ finetune: FineTuneJobWithDatasetDto }> = ({ finetune }) => {
  const params = useParams();
  const metadata = finetune.metadata as FineTuningJob;

  const { variant } = idShortener(finetune.id);

  const to = `https://platform.openai.com/finetune/${metadata.id}`;

  return (
    <TableRow key={finetune.id}>
      <TableCell className={"max-w-36"}>
        {metadata?.fine_tuned_model ? <Badge variant={variant}>{metadata?.fine_tuned_model}</Badge> : "—"}
      </TableCell>
      <TableCell>
        <Link
          to={Routes.app.project.env.datasetsId({
            projectId: params.projectId!,
            envId: params.envId!,
            datasetId: finetune.dataset.id,
          })}
          className={"flex gap-1"}
        >
          <ExternalLink className={"h-4 w-4"} />
          <p>{finetune.dataset.name}</p>
        </Link>
      </TableCell>
      <TableCell>{finetune.provider}</TableCell>
      <TableCell>{finetune.model}</TableCell>
      <TableCell>{finetune.status}</TableCell>
      <TableCell>{metadata.created_at ? dayjs(metadata.created_at * 1000).format("h:mma D/M/YY") : "—"}</TableCell>
      <TableCell>{metadata.finished_at ? dayjs(metadata.finished_at * 1000).format("h:mma D/M/YY") : "—"}</TableCell>
      <TableCell>
        <Link to={to} target={"_blank"} rel={"noopener noreferrer"}>
          <ExternalLink className={"h-4 w-4"} />
        </Link>
      </TableCell>
    </TableRow>
  );
};
