"use client";

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

import type { ReactNode } from "react";
import { useTranslation } from "@plane/i18n";
import { InboxIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import { useNodeDCBrandLinkUrl } from "@/hooks/use-nodedc-brand-link-url";
import { UserMenuRoot } from "@/components/workspace/sidebar/user-menu-root";

type TNodeDCStandaloneShellProps = {
  children: ReactNode;
  notificationsCount?: number;
  onOpenNotifications?: () => void;
  showUserControls?: boolean;
};

export const NodeDCStandaloneShell = (props: TNodeDCStandaloneShellProps) => {
  const { children, notificationsCount = 0, onOpenNotifications, showUserControls = false } = props;
  const { t } = useTranslation();
  const logoLinkUrl = useNodeDCBrandLinkUrl();

  return (
    <div className="relative flex min-h-screen w-full overflow-hidden bg-[#050507] text-primary">
      <div className="pointer-events-none absolute inset-0 opacity-80">
        <div className="absolute top-[-18rem] left-[-12rem] h-[34rem] w-[34rem] rounded-full bg-[rgb(var(--nodedc-accent-rgb))]/10 blur-[120px]" />
        <div className="absolute right-[-14rem] bottom-[-18rem] h-[38rem] w-[38rem] rounded-full bg-white/7 blur-[140px]" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_10%,rgba(255,255,255,0.06),transparent_38%),linear-gradient(180deg,rgba(255,255,255,0.035),rgba(255,255,255,0))]" />
      </div>

      <header className="nodedc-expanded-toolbar-shell absolute inset-x-0 top-0 z-[2]">
        <div className="nodedc-expanded-toolbar-top">
          <div className="nodedc-expanded-toolbar-left">
            <a href={logoLinkUrl} className="nodedc-expanded-brand-link" aria-label="NODE.DC">
              <img src="/nodedc-logo.svg" alt="NODE DC" className="nodedc-expanded-brand-logo" />
            </a>
          </div>
          <div className="nodedc-expanded-toolbar-center" />
          <div className="nodedc-expanded-toolbar-right">
            {showUserControls && (
              <div className="nodedc-expanded-user-group">
                {onOpenNotifications && (
                  <Tooltip tooltipContent={t("notification.label")} position="bottom">
                    <button
                      type="button"
                      className="nodedc-toolbar-icon-button nodedc-expanded-notification-button relative flex items-center justify-center"
                      data-active={false}
                      aria-label={t("notification.label")}
                      onClick={onOpenNotifications}
                    >
                      <span className="nodedc-toolbar-icon-active-dot">
                        <InboxIcon className="size-5" />
                      </span>
                      {notificationsCount > 0 && (
                        <span className="nodedc-toolbar-notification-dot absolute top-1.5 right-1.5 size-2 rounded-full bg-danger-primary" />
                      )}
                    </button>
                  </Tooltip>
                )}
                <UserMenuRoot variant="expanded-toolbar" />
              </div>
            )}
          </div>
        </div>
      </header>

      <main className="relative z-[1] flex min-h-screen w-full items-center justify-center px-5 py-10 pt-[calc(var(--nodedc-shell-height)+2.25rem)]">
        {children}
      </main>
    </div>
  );
};
