/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { useCallback, useEffect, useState } from "react";
import { observer } from "mobx-react";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { CheckCircleFilledIcon, ChevronDownIcon, ChevronUpIcon, CloseCircleFilledIcon, LinkIcon, NewTabIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { TExternalContourRequest, TNameDescriptionLoader } from "@plane/types";
import { EInboxIssueCurrentTab } from "@plane/types";
import { ControlLink, Header, Row } from "@plane/ui";
import { copyUrlToClipboard, generateWorkItemLink } from "@plane/utils";
import { NameDescriptionUpdateStatus } from "@/components/issues/issue-update-status";
import { useProject } from "@/hooks/store/use-project";
import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
import { useAppRouter } from "@/hooks/use-app-router";
import { ExternalContourStatePill } from "./state-pill";
import { ExternalContourDeclineModal } from "./decline-modal";

type Props = {
  workspaceSlug: string;
  sourceProjectId: string;
  contourRequest: TExternalContourRequest;
  hasDirectTargetAccess: boolean;
  isSubmitting: TNameDescriptionLoader;
};

export const ExternalContoursIssueActionsHeader = observer(function ExternalContoursIssueActionsHeader(props: Props) {
  const {
    workspaceSlug,
    sourceProjectId,
    contourRequest,
    hasDirectTargetAccess,
    isSubmitting,
  } = props;
  const { t } = useTranslation();
  const router = useAppRouter();
  const [isDeclineModalOpen, setIsDeclineModalOpen] = useState(false);
  const { currentTab, decideRequest, filteredRequestIds, handleCurrentTab, loader } = useProjectExternalContours();
  const { getProjectById } = useProject();

  const issue = contourRequest.issue;
  const currentRequestId = contourRequest.id;
  const hasRelativeNavigation = !!currentRequestId && filteredRequestIds.includes(currentRequestId);
  const canReviewClosedRequest =
    contourRequest.capabilities?.can_source_decide ??
    (contourRequest.status === "closed" && contourRequest.source_decision !== "accepted");
  const isSourceAccepted = contourRequest.source_decision === "accepted";

  const redirectToRelativeIssue = useCallback(
    (direction: "next" | "prev") => {
      if (!filteredRequestIds || !currentRequestId || !hasRelativeNavigation || filteredRequestIds.length <= 1) return;
      const currentIssueIndex = filteredRequestIds.findIndex((requestId) => requestId === currentRequestId);
      if (currentIssueIndex === -1) return;
      const nextIssueIndex =
        direction === "next"
          ? (currentIssueIndex + 1) % filteredRequestIds.length
          : (currentIssueIndex - 1 + filteredRequestIds.length) % filteredRequestIds.length;
      const nextIssueId = filteredRequestIds[nextIssueIndex];
      if (!nextIssueId) return;
      router.push(`/${workspaceSlug}/projects/${sourceProjectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${nextIssueId}`);
    },
    [currentRequestId, currentTab, filteredRequestIds, hasRelativeNavigation, router, sourceProjectId, workspaceSlug]
  );

  useEffect(() => {
    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key === "ArrowUp") redirectToRelativeIssue("prev");
      if (event.key === "ArrowDown") redirectToRelativeIssue("next");
    };

    document.addEventListener("keydown", onKeyDown);
    return () => document.removeEventListener("keydown", onKeyDown);
  }, [redirectToRelativeIssue]);

  const targetProjectIdentifier = issue.project_detail?.identifier || getProjectById(issue.project_id || "")?.identifier;
  const workItemLink = generateWorkItemLink({
    workspaceSlug: workspaceSlug?.toString(),
    projectId: issue.project_id,
    issueId: issue.id,
    projectIdentifier: targetProjectIdentifier,
    sequenceId: issue.sequence_id,
  });

  const handleCopyLink = () =>
    copyUrlToClipboard(workItemLink).then(() =>
      setToast({
        type: TOAST_TYPE.SUCCESS,
        title: t("common.link_copied"),
        message: t("common.copied_to_clipboard"),
      })
    );

  const handleDecision = async (action: "accept" | "decline", comment?: string) => {
    try {
      await decideRequest(workspaceSlug, sourceProjectId, contourRequest.id, action, comment);
      if (action === "decline") {
        setIsDeclineModalOpen(false);
        await handleCurrentTab(workspaceSlug, sourceProjectId, EInboxIssueCurrentTab.OPEN);
        router.push(
          `/${workspaceSlug}/projects/${sourceProjectId}/external-contours?currentTab=${EInboxIssueCurrentTab.OPEN}&inboxIssueId=${contourRequest.id}`
        );
      }
      setToast({
        type: TOAST_TYPE.SUCCESS,
        title: t("success"),
        message: t(
          action === "accept"
            ? "external_contours_page.actions.accept_success"
            : "external_contours_page.actions.decline_success"
        ),
      });
    } catch (error: any) {
      setToast({
        type: TOAST_TYPE.ERROR,
        title: t("error"),
        message: error?.error || t("external_contours_page.actions.decision_error"),
      });
    }
  };

  return (
    <>
      <ExternalContourDeclineModal
        isOpen={isDeclineModalOpen}
        isSubmitting={loader === "mutation-loading"}
        onClose={() => setIsDeclineModalOpen(false)}
        onSubmit={(comment) => handleDecision("decline", comment)}
      />

      <Row className="relative z-15 hidden h-full w-full items-center justify-between gap-2 px-4 lg:flex">
        <div className="flex items-center gap-4">
          {issue?.project_id && issue.sequence_id && (
            <h3 className="flex-shrink-0 text-14 font-medium text-tertiary">
              {targetProjectIdentifier}-{issue.sequence_id}
            </h3>
          )}
          <ExternalContourStatePill request={contourRequest} />
          <div className="flex w-full items-center justify-end">
            <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
          </div>
        </div>

        <div className="nodedc-external-detail-toolbar">
          <div className="nodedc-external-toolbar-cluster">
            <button
              type="button"
              aria-label="Previous request"
              onClick={() => redirectToRelativeIssue("prev")}
              disabled={!hasRelativeNavigation || filteredRequestIds.length <= 1}
              className="nodedc-external-icon-button"
            >
              <ChevronUpIcon className="size-3.5" />
            </button>
            <button
              type="button"
              aria-label="Next request"
              onClick={() => redirectToRelativeIssue("next")}
              disabled={!hasRelativeNavigation || filteredRequestIds.length <= 1}
              className="nodedc-external-icon-button"
            >
              <ChevronDownIcon className="size-3.5" />
            </button>
          </div>

          <div className="flex flex-wrap items-center gap-2">
            {canReviewClosedRequest && (
              <>
                <Button variant="primary" size="lg" onClick={() => handleDecision("accept")} className="nodedc-external-primary-button">
                  <CheckCircleFilledIcon className="size-4 shrink-0 text-success-secondary" />
                  {t("external_contours_page.actions.accept")}
                </Button>
                <Button variant="secondary" size="lg" onClick={() => setIsDeclineModalOpen(true)} className="nodedc-external-action-button">
                  <CloseCircleFilledIcon className="size-4 shrink-0 text-danger-secondary" />
                  {t("external_contours_page.actions.decline")}
                </Button>
              </>
            )}

            {isSourceAccepted && (
              <div className="nodedc-external-readonly-value min-h-[2.75rem] w-auto px-4 text-13 font-medium">
                {t("external_contours_page.traceability.source_decision_accepted")}
              </div>
            )}

            <Button
              variant="secondary"
              size="lg"
              prependIcon={<LinkIcon className="h-2.5 w-2.5" />}
              onClick={handleCopyLink}
              className="nodedc-external-action-button"
            >
              {t("external_contours_page.actions.copy")}
            </Button>
            {hasDirectTargetAccess && (
              <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
                <Button variant="secondary" size="lg" prependIcon={<NewTabIcon className="h-2.5 w-2.5" />} className="nodedc-external-action-button">
                  {t("external_contours_page.actions.open")}
                </Button>
              </ControlLink>
            )}
          </div>
        </div>
      </Row>

      <Header className="justify-start lg:hidden">
        <div className="flex w-full items-center gap-2">
          <ExternalContourStatePill request={contourRequest} />
          <div className="ml-auto flex items-center gap-2">
            {canReviewClosedRequest && (
              <>
                <Button variant="primary" size="sm" onClick={() => handleDecision("accept")} className="nodedc-external-primary-button">
                  {t("external_contours_page.actions.accept")}
                </Button>
                <Button variant="secondary" size="sm" onClick={() => setIsDeclineModalOpen(true)} className="nodedc-external-action-button">
                  {t("external_contours_page.actions.decline")}
                </Button>
              </>
            )}
            {isSourceAccepted && (
              <div className="nodedc-external-readonly-value min-h-10 w-auto px-4 text-13 font-medium">
                {t("external_contours_page.traceability.source_decision_accepted")}
              </div>
            )}
            {hasDirectTargetAccess && (
              <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
                <Button variant="secondary" size="sm" className="nodedc-external-action-button">
                  {t("external_contours_page.actions.open")}
                </Button>
              </ControlLink>
            )}
          </div>
        </div>
      </Header>
    </>
  );
});