import { useTranslation } from "react-i18next";
import { I18nKey } from "#/i18n/declaration";
import { BrandButton } from "../settings/brand-button";
import { Loader } from "#/components/shared/loader";
import { useMicroagentManagementStore } from "#/state/microagent-management-store";

export function MicroagentManagementOpeningPr() {
  const { t } = useTranslation();

  const { selectedMicroagentItem } = useMicroagentManagementStore();

  const { conversation } = selectedMicroagentItem ?? {};

  const { conversation_id: conversationId } = conversation ?? {};

  if (!conversationId) {
    return null;
  }

  return (
    <div className="flex-1 flex flex-col h-full items-center justify-center">
      <div className="text-[#ffffff99] text-[22px] font-semibold pb-2">
        {t(I18nKey.COMMON$WORKING_ON_IT)}!
      </div>
      <div className="text-[#ffffff99] text-[18px] font-normal text-center max-w-[518px] pb-[22px]">
        {t(I18nKey.MICROAGENT_MANAGEMENT$WE_ARE_WORKING_ON_IT)}
      </div>
      <Loader size="small" className="pb-[22px]" />
      <a
        href={`/conversations/${conversationId}`}
        target="_blank"
        rel="noopener noreferrer"
      >
        <BrandButton
          type="button"
          variant="secondary"
          testId="view-conversation-button"
        >
          {t(I18nKey.MICROAGENT$VIEW_CONVERSATION)}
        </BrandButton>
      </a>
    </div>
  );
}
