import { FullDatapointRunDto } from "@montelo/browser-client";
import { useNavigate, useParams } from "@remix-run/react";
import { Eye } from "lucide-react";
import { FC } from "react";
import { PrettyJson } from "~/components/PrettyJson";
import { SquareArrowUpRight } from "~/components/icons/SquareArrowUpRight";
import { Badge } from "~/components/ui/badge";
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "~/components/ui/sheet";
import { TableCell, TableRow } from "~/components/ui/table";
import { idShortener } from "~/pages/traces/utils";
import { Routes } from "~/routes";

export const DatapointRunCell: FC<{ datapointRun: FullDatapointRunDto }> = ({ datapointRun }) => {
  const navigate = useNavigate();
  const params = useParams();

  const { short, variant } = idShortener(datapointRun.id);

  const onCellClick = (datapointRun: FullDatapointRunDto) => {
    navigate(
      Routes.app.project.env.datapointRunId({
        projectId: params.projectId!,
        envId: params.envId!,
        experimentId: params.experimentId!,
        datapointRunId: datapointRun.id,
      }),
    );
  };

  const WrappedCell = ({ children }: { children: React.ReactNode }) => (
    <TableCell
      className={"w-2/12"}
      onClick={(e) => {
        e.preventDefault();
        e.stopPropagation();
      }}
    >
      {children}
    </TableCell>
  );

  return (
    <TableRow key={datapointRun.id}>
      <TableCell className={"w-1/12"}>
        <Badge
          variant={variant}
          className={"cursor-pointer"}
          onClick={() => {
            onCellClick(datapointRun);
          }}
        >
          <SquareArrowUpRight />
          &nbsp;{short}
        </Badge>
      </TableCell>
      <TableCell className={"w-1/12"}>{datapointRun.createdAt}</TableCell>
      <WrappedCell>
        <PrettyJson data={datapointRun.datapoint.input} />
      </WrappedCell>
      <WrappedCell>
        <PrettyJson data={datapointRun.datapoint.expectedOutput} />
      </WrappedCell>
      <WrappedCell>
        <PrettyJson data={datapointRun.output} />
      </WrappedCell>
      <WrappedCell>
        <PrettyJson data={datapointRun.evaluation} />
      </WrappedCell>
      <TableCell className={"w-1/12"}>
        <Sheet>
          <SheetTrigger>
            <Eye size={20} className={"text-muted-foreground hover:text-primary-foreground cursor-pointer"} />
          </SheetTrigger>
          <SheetContent>
            <SheetHeader>
              <SheetTitle>Run Overview</SheetTitle>
              <SheetDescription>
                <div className={"flex flex-col gap-8"}>
                  <div className={"flex flex-col gap-2"}>
                    <h1>Input</h1>
                    <PrettyJson data={datapointRun.datapoint.input} shouldTruncate={false} />
                  </div>
                  <div className={"flex flex-col gap-2"}>
                    <h1>Expected Output</h1>
                    <PrettyJson data={datapointRun.datapoint.expectedOutput} shouldTruncate={false} />
                  </div>
                  <div className={"flex flex-col gap-2"}>
                    <h1>Actual Output</h1>
                    <PrettyJson data={datapointRun.output} shouldTruncate={false} />
                  </div>
                  <div className={"flex flex-col gap-2"}>
                    <h1>Evaluation</h1>
                    <PrettyJson data={datapointRun.evaluation} shouldTruncate={false} />
                  </div>
                </div>
              </SheetDescription>
            </SheetHeader>
          </SheetContent>
        </Sheet>
      </TableCell>
    </TableRow>
  );
};
