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

import type { CSSProperties, ReactNode } from "react";
import Script from "next/script";
import { Links, Meta, Outlet, Scripts } from "react-router";
import type { LinksFunction } from "react-router";
import { ThemeProvider } from "next-themes";
// plane imports
import { SITE_DESCRIPTION, SITE_NAME } from "@plane/constants";
import { cn } from "@plane/utils";
// types
// assets
import favicon16 from "@/app/assets/favicon/favicon-16x16.png?url";
import favicon32 from "@/app/assets/favicon/favicon-32x32.png?url";
import faviconIco from "@/app/assets/favicon/favicon.ico?url";
import icon180 from "@/app/assets/icons/icon-180x180.png?url";
import icon512 from "@/app/assets/icons/icon-512x512.png?url";
import ogImage from "@/app/assets/og-image.png?url";
import globalStyles from "@/styles/globals.css?url";
import type { Route } from "./+types/root";
import designConfig from "../design.config.json";
// components
import { NodeDCSessionSync } from "@/components/auth-screens/nodedc-session-sync";
// local
import { CustomErrorComponent } from "./error";
import { AppProvider } from "./provider";
// fonts
import "@fontsource-variable/inter";
import interVariableWoff2 from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url";
import "@fontsource/material-symbols-rounded";
import "@fontsource/ibm-plex-mono";

const APP_TITLE = "NODE.DC | Self-hosted task management workspace.";

const DARK_TEXT_RGB = [11, 17, 23] as const;
const LIGHT_TEXT_RGB = [245, 247, 251] as const;

const formatRgbTuple = (rgb: readonly number[]) => rgb.join(" ");
const formatCssRgb = (rgb: readonly number[]) => `rgb(${rgb.join(" ")})`;

const blendRgb = (rgb: readonly number[], target: number, ratio: number) =>
  rgb.map((channel) => Math.round(channel * (1 - ratio) + target * ratio)) as [number, number, number];

const toRelativeLuminance = (rgb: readonly number[]) => {
  const [r, g, b] = rgb.map((channel) => {
    const normalized = channel / 255;
    return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
  });

  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
};

const getReadableTextRgb = (rgb: readonly number[]) =>
  toRelativeLuminance(rgb) > 0.52 ? DARK_TEXT_RGB : LIGHT_TEXT_RGB;

const accentRgb = designConfig.nodedc.accent_rgb as [number, number, number];
const activeCardRgb = designConfig.nodedc.active_card_rgb as [number, number, number];
const passiveCardRgb = designConfig.nodedc.passive_card_rgb as [number, number, number];
const accentHoverRgb = blendRgb(accentRgb, 255, 0.18);
const accentActiveRgb = blendRgb(accentRgb, 0, 0.1);
const onAccentRgb = getReadableTextRgb(accentRgb);
const onActiveCardRgb = getReadableTextRgb(activeCardRgb);
const onPassiveCardRgb = getReadableTextRgb(passiveCardRgb);

const designConfigStyle = {
  "--nodedc-accent-rgb": formatRgbTuple(accentRgb),
  "--nodedc-card-passive-rgb": formatRgbTuple(passiveCardRgb),
  "--nodedc-card-passive-surface-rgb": formatRgbTuple(passiveCardRgb),
  "--nodedc-presence-dot-border-rgb": formatRgbTuple(passiveCardRgb),
  "--nodedc-card-active-rgb": formatRgbTuple(activeCardRgb),
  "--nodedc-on-accent-rgb": formatRgbTuple(onAccentRgb),
  "--nodedc-on-card-active-rgb": formatRgbTuple(onActiveCardRgb),
  "--nodedc-on-card-passive-rgb": formatRgbTuple(onPassiveCardRgb),
  "--nodedc-on-card-passive-surface-rgb": formatRgbTuple(onPassiveCardRgb),
  "--brand-default": formatCssRgb(accentRgb),
  "--brand-300": formatCssRgb(blendRgb(accentRgb, 255, 0.35)),
  "--brand-700": formatCssRgb(blendRgb(accentRgb, 0, 0.25)),
  "--bg-accent-primary": formatCssRgb(accentRgb),
  "--bg-accent-primary-hover": formatCssRgb(accentHoverRgb),
  "--bg-accent-primary-active": formatCssRgb(accentActiveRgb),
  "--txt-accent-primary": formatCssRgb(accentRgb),
  "--txt-accent-secondary": formatCssRgb(blendRgb(accentRgb, 0, 0.25)),
  "--txt-icon-accent-primary": formatCssRgb(accentRgb),
  "--text-color-accent-primary": formatCssRgb(accentRgb),
  "--text-color-accent-secondary": formatCssRgb(blendRgb(accentRgb, 0, 0.25)),
  "--text-color-icon-accent-primary": formatCssRgb(accentRgb),
  "--stroke-accent-primary": formatCssRgb(accentRgb),
  "--fill-accent-primary": formatCssRgb(accentRgb),
  "--txt-on-color": formatCssRgb(onAccentRgb),
  "--txt-icon-on-color": formatCssRgb(onAccentRgb),
} as CSSProperties;

export const links: LinksFunction = () => [
  { rel: "icon", type: "image/png", sizes: "32x32", href: favicon32 },
  { rel: "icon", type: "image/png", sizes: "16x16", href: favicon16 },
  { rel: "shortcut icon", href: faviconIco },
  { rel: "manifest", href: "/site.webmanifest.json" },
  { rel: "apple-touch-icon", href: icon512 },
  { rel: "apple-touch-icon", sizes: "180x180", href: icon180 },
  { rel: "apple-touch-icon", sizes: "512x512", href: icon512 },
  { rel: "manifest", href: "/manifest.json" },
  { rel: "stylesheet", href: globalStyles },
  {
    rel: "preload",
    href: interVariableWoff2,
    as: "font",
    type: "font/woff2",
    crossOrigin: "anonymous",
  },
];

export function Layout({ children }: { children: ReactNode }) {
  const isSessionRecorderEnabled = parseInt(process.env.VITE_ENABLE_SESSION_RECORDER || "0");

  return (
    <html lang="en" suppressHydrationWarning style={designConfigStyle}>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#fff" />
        {/* Meta info for PWA */}
        <meta name="application-name" content="NODE.DC" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <meta name="apple-mobile-web-app-title" content={SITE_NAME} />
        <meta name="format-detection" content="telephone=no" />
        <meta name="mobile-web-app-capable" content="yes" />
        <Meta />
        <Links />
      </head>
      <body suppressHydrationWarning>
        <div id="context-menu-portal" />
        <div id="editor-portal" />
        <ThemeProvider themes={["light", "dark", "light-contrast", "dark-contrast", "custom"]} defaultTheme="system">
          {children}
        </ThemeProvider>
        <Scripts />
        {!!isSessionRecorderEnabled && process.env.VITE_SESSION_RECORDER_KEY && (
          <Script id="clarity-tracking">
            {`(function(c,l,a,r,i,t,y){
              c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
              t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
              y=l.getElementsByTagName(r)[0];if(y){y.parentNode.insertBefore(t,y);}
          })(window, document, "clarity", "script", "${process.env.VITE_SESSION_RECORDER_KEY}");`}
          </Script>
        )}
      </body>
    </html>
  );
}

export const meta: Route.MetaFunction = () => [
  { title: APP_TITLE },
  { name: "description", content: SITE_DESCRIPTION },
  { property: "og:title", content: APP_TITLE },
  {
    property: "og:description",
    content: "Self-hosted task management workspace for projects, work items, and internal operational flows.",
  },
  { property: "og:url", content: "https://app.plane.so/" },
  { property: "og:image", content: ogImage },
  { property: "og:image:width", content: "1200" },
  { property: "og:image:height", content: "630" },
  { property: "og:image:alt", content: "NODE.DC - Self-hosted task management workspace" },
  {
    name: "keywords",
    content:
      "software development, plan, ship, software, accelerate, code management, release management, project management, work item tracking, agile, scrum, kanban, collaboration",
  },
  { name: "twitter:site", content: "@nodedc" },
  { name: "twitter:card", content: "summary_large_image" },
  { name: "twitter:image", content: ogImage },
  { name: "twitter:image:width", content: "1200" },
  { name: "twitter:image:height", content: "630" },
  { name: "twitter:image:alt", content: "NODE.DC - Self-hosted task management workspace" },
];

export default function Root() {
  return (
    <AppProvider>
      <NodeDCSessionSync />
      <div className={cn("relative flex h-screen w-full flex-col overflow-hidden bg-canvas", "desktop-app-container")}>
        <main className="relative h-full w-full overflow-hidden">
          <Outlet />
        </main>
      </div>
    </AppProvider>
  );
}

export function HydrateFallback() {
  return null;
}

export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
  return <CustomErrorComponent error={error} />;
}