/**
 * 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 } from "react";
import { observer } from "mobx-react";
import { PanelLeft } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { IconButton } from "@plane/propel/icon-button";
import { ChevronDownIcon, ChevronUpIcon, LinkIcon, NewTabIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { TExternalContourRequest, TNameDescriptionLoader } 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";

type Props = {
  workspaceSlug: string;
  sourceProjectId: string;
  contourRequest: TExternalContourRequest;
  isSubmitting: TNameDescriptionLoader;
  isMobileSidebar: boolean;
  setIsMobileSidebar: (value: boolean) => void;
};

export const ExternalContoursIssueActionsHeader = observer(function ExternalContoursIssueActionsHeader(props: Props) {
  const { workspaceSlug, sourceProjectId, contourRequest, isSubmitting, isMobileSidebar, setIsMobileSidebar } = props;
  const { t } = useTranslation();
  const router = useAppRouter();
  const { currentTab, filteredRequestIds } = useProjectExternalContours();
  const { getProjectById } = useProject();

  const issue = contourRequest.issue;
  const currentRequestId = contourRequest.id;

  const redirectToRelativeIssue = useCallback(
    (direction: "next" | "prev") => {
      if (!filteredRequestIds || !currentRequestId) return;
      const currentIssueIndex = filteredRequestIds.findIndex((requestId) => requestId === currentRequestId);
      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, 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"),
      })
    );

  return (
    <>
      <Row className="relative z-15 hidden h-full w-full items-center justify-between gap-2 border-b border-subtle bg-surface-1 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="flex items-center gap-2">
          <div className="flex items-center gap-x-2">
            <IconButton variant="secondary" size="lg" icon={ChevronUpIcon} aria-label="Previous request" onClick={() => redirectToRelativeIssue("prev")} />
            <IconButton variant="secondary" size="lg" icon={ChevronDownIcon} aria-label="Next request" onClick={() => redirectToRelativeIssue("next")} />
          </div>

          <div className="flex flex-wrap items-center gap-2">
            <Button variant="secondary" size="lg" prependIcon={<LinkIcon className="h-2.5 w-2.5" />} onClick={handleCopyLink}>
              {t("external_contours_page.actions.copy")}
            </Button>
            <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
              <Button variant="secondary" size="lg" prependIcon={<NewTabIcon className="h-2.5 w-2.5" />}>
                {t("external_contours_page.actions.open")}
              </Button>
            </ControlLink>
          </div>
        </div>
      </Row>

      <Header className="justify-start lg:hidden">
        <PanelLeft
          onClick={() => setIsMobileSidebar(!isMobileSidebar)}
          className={`my-auto mr-2 h-4 w-4 flex-shrink-0 ${isMobileSidebar ? "text-accent-primary" : "text-secondary"}`}
        />
        <div className="flex w-full items-center gap-2">
          <ExternalContourStatePill request={contourRequest} />
          <div className="ml-auto flex items-center gap-2">
            <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
              <Button variant="secondary" size="sm">
                {t("external_contours_page.actions.open")}
              </Button>
            </ControlLink>
          </div>
        </div>
      </Header>
    </>
  );
});