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

import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { PanelLeft } from "lucide-react";
// plane imports
import { useTranslation } from "@plane/i18n";
import { IntakeIcon } from "@plane/propel/icons";
import { EInboxIssueCurrentTab } from "@plane/types";
import { cn } from "@plane/utils";
// components
import { InboxContentRoot } from "@/components/inbox/content";
import { InboxIssueAppliedFilters } from "@/components/inbox/inbox-filter/applied-filters/root";
import { InboxSidebar } from "@/components/inbox/sidebar";
import { InboxLayoutLoader } from "@/components/ui/loader/layouts/project-inbox/inbox-layout-loader";
// hooks
import { useProjectInbox } from "@/hooks/store/use-project-inbox";
import { InboxEmptyState } from "./empty-state";

type TInboxIssueRoot = {
  workspaceSlug: string;
  projectId: string;
  inboxIssueId: string | undefined;
  inboxAccessible: boolean;
  navigationTab?: EInboxIssueCurrentTab | undefined;
};

export const InboxIssueRoot = observer(function InboxIssueRoot(props: TInboxIssueRoot) {
  const { workspaceSlug, projectId, inboxIssueId, inboxAccessible, navigationTab } = props;
  // states
  const [isMobileSidebar, setIsMobileSidebar] = useState(true);
  // plane hooks
  const { t } = useTranslation();
  // hooks
  const { loader, error, currentTab, currentInboxProjectId, handleCurrentTab, fetchInboxIssues } = useProjectInbox();
  const intakeMainDescription = t("project_empty_state.intake_main.description");

  useEffect(() => {
    if (!inboxAccessible || !workspaceSlug || !projectId) return;
    // Check if project has changed
    const hasProjectChanged = currentInboxProjectId && currentInboxProjectId !== projectId;

    if (navigationTab && navigationTab !== currentTab) {
      handleCurrentTab(workspaceSlug, projectId, navigationTab);
    } else if (hasProjectChanged) {
      handleCurrentTab(workspaceSlug, projectId, EInboxIssueCurrentTab.OPEN);
    } else {
      fetchInboxIssues(
        workspaceSlug.toString(),
        projectId.toString(),
        undefined,
        navigationTab || EInboxIssueCurrentTab.OPEN
      );
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [inboxAccessible, workspaceSlug, projectId]);

  // loader
  if (loader === "init-loading")
    return (
      <div className="relative flex h-full w-full flex-col">
        <InboxLayoutLoader />
      </div>
    );

  // error
  if (error && error?.status === "init-error")
    return (
      <div className="relative flex h-full w-full flex-col items-center justify-center gap-3">
        <IntakeIcon className="size-[60px]" strokeWidth={1.5} />
        <div className="text-secondary">{error?.message}</div>
      </div>
    );

  return (
    <>
      {!inboxIssueId && (
        <div className="flex h-14 w-full items-center px-4 lg:hidden">
          <button
            type="button"
            onClick={() => setIsMobileSidebar(!isMobileSidebar)}
            className="nodedc-external-icon-button"
            aria-label="Toggle sidebar"
          >
            <PanelLeft className={cn("h-4 w-4", isMobileSidebar ? "text-accent-primary" : "text-secondary")} />
          </button>
        </div>
      )}
      <div className="flex h-full w-full min-h-0 flex-col overflow-hidden bg-transparent lg:px-4 lg:pb-4 lg:pt-3">
        <InboxIssueAppliedFilters className="px-0 pt-0 lg:pb-4" />
        <div className="flex min-h-0 flex-1 overflow-hidden lg:gap-4">
          <div
            className={cn(
              "absolute top-[56px] bottom-0 z-20 w-full flex-shrink-0 px-4 pb-4 transition-all lg:static lg:top-0 lg:z-0 lg:w-[28rem] lg:flex-none lg:px-0 lg:pb-0",
              isMobileSidebar ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
            )}
          >
            <InboxSidebar
              setIsMobileSidebar={setIsMobileSidebar}
              workspaceSlug={workspaceSlug.toString()}
              projectId={projectId.toString()}
              inboxIssueId={inboxIssueId}
            />
          </div>

          {inboxIssueId ? (
            <div className="flex min-h-0 flex-1 justify-end overflow-hidden">
              <div className="min-h-0 w-full">
                <InboxContentRoot
                  setIsMobileSidebar={setIsMobileSidebar}
                  isMobileSidebar={isMobileSidebar}
                  workspaceSlug={workspaceSlug.toString()}
                  projectId={projectId.toString()}
                  inboxIssueId={inboxIssueId.toString()}
                />
              </div>
            </div>
          ) : (
            <div className="hidden min-h-0 flex-1 justify-end lg:flex">
              <div className="min-h-0 w-full max-w-[720px]">
                <div className="flex h-full w-full items-center justify-center rounded-[28px] border border-subtle/70 bg-surface-1/80 px-8 py-8 shadow-[0px_8px_24px_rgba(0,0,0,0.14)] backdrop-blur-2xl">
                  <InboxEmptyState
                    kind="detail"
                    compact
                    title={t("project_empty_state.intake_main.title")}
                    description={
                      intakeMainDescription === "project_empty_state.intake_main.description"
                        ? undefined
                        : intakeMainDescription
                    }
                  />
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </>
  );
});
