import { useParams } from "@remix-run/react";
import { FC } from "react";
import { ApiKeyWithEnvDto } from "~/browser-client";
import { ApiKeysTable } from "~/components/dialogs/ApiKeys/ApiKeysTable";
import { useAppLayoutData } from "~/hooks/useAppLayoutData";
import { ProviderApiKeys } from "~/pages/apiKeys/ProviderApiKeys";
import { PageLayout } from "~/pages/layouts/PageLayout";
import { LayoutBreadcrumb } from "~/pages/layouts/types";
import { Routes } from "~/routes";

export const ApiKeysPage: FC<{ sortedEnvironments: ApiKeyWithEnvDto[] }> = ({ sortedEnvironments }) => {
  const params = useParams();
  const appLayoutData = useAppLayoutData();

  const initialOpenAIKey = appLayoutData?.project?.openaiApiKey;
  const initialCohereKey = appLayoutData?.project?.cohereApiKey;

  const breadcrumbs: LayoutBreadcrumb[] = [
    {
      label: "API Keys",
    },
  ];

  return (
    <PageLayout breadcrumbs={breadcrumbs}>
      <div className={"flex flex-col gap-4"}>
        <ApiKeysTable sortedEnvironments={sortedEnvironments} projectId={params.projectId!} />
        <ProviderApiKeys
          provider={"openai"}
          title={"OpenAI"}
          subtitle={"Your OpenAI API key will only be used for Fine-Tuning."}
          link={"https://platform.openai.com/api-keys"}
          initialKey={initialOpenAIKey}
          route={Routes.actions.project.setOpenAIKey(params.projectId!)}
        />
        <ProviderApiKeys
          provider={"cohere"}
          title={"Cohere"}
          subtitle={"Your Cohere API key will only be used for Fine-Tuning."}
          link={"https://dashboard.cohere.com/api-keys"}
          initialKey={initialCohereKey}
          route={Routes.actions.project.setCohereKey(params.projectId!)}
        />
      </div>
    </PageLayout>
  );
};
