<script lang="ts">
  import Grid from "$lib/grid";
  import GraphInterface from "$lib/graph-interface";
  import * as templates from "$lib/graph-templates";
  import type { Graph, NodeInstance } from "@nodarium/types";
  import Viewer from "$lib/result-viewer/Viewer.svelte";
  import {
    appSettings,
    AppSettingTypes,
  } from "$lib/settings/app-settings.svelte";
  import Keymap from "$lib/sidebar/panels/Keymap.svelte";
  import Sidebar from "$lib/sidebar/Sidebar.svelte";
  import { createKeyMap } from "$lib/helpers/createKeyMap";
  import NodeStore from "$lib/node-store/NodeStore.svelte";
  import ActiveNodeSettings from "$lib/sidebar/panels/ActiveNodeSettings.svelte";
  import PerformanceViewer from "$lib/performance/PerformanceViewer.svelte";
  import Panel from "$lib/sidebar/Panel.svelte";
  import NestedSettings from "$lib/settings/NestedSettings.svelte";
  import type { Group } from "three";
  import ExportSettings from "$lib/sidebar/panels/ExportSettings.svelte";
  import {
    MemoryRuntimeCache,
    WorkerRuntimeExecutor,
    MemoryRuntimeExecutor,
  } from "$lib/runtime";
  import { IndexDBCache, RemoteNodeRegistry } from "@nodarium/registry";
  import { createPerformanceStore } from "@nodarium/utils";
  import BenchmarkPanel from "$lib/sidebar/panels/BenchmarkPanel.svelte";
  import { debounceAsyncFunction } from "$lib/helpers";
  import GraphSource from "$lib/sidebar/panels/GraphSource.svelte";
  import { ProjectManager } from "$lib/project-manager/project-manager.svelte";
  import ProjectManagerEl from "$lib/project-manager/ProjectManager.svelte";

  let performanceStore = createPerformanceStore();

  const registryCache = new IndexDBCache("node-registry");
  const nodeRegistry = new RemoteNodeRegistry("", registryCache);
  const workerRuntime = new WorkerRuntimeExecutor();
  const runtimeCache = new MemoryRuntimeCache();
  const memoryRuntime = new MemoryRuntimeExecutor(nodeRegistry, runtimeCache);
  memoryRuntime.perf = performanceStore;
  const pm = new ProjectManager();

  const runtime = $derived(
    appSettings.value.debug.useWorker ? workerRuntime : memoryRuntime,
  );

  $effect(() => {
    workerRuntime.useRegistryCache =
      appSettings.value.debug.cache.useRuntimeCache;
    workerRuntime.useRuntimeCache =
      appSettings.value.debug.cache.useRegistryCache;

    if (appSettings.value.debug.cache.useRegistryCache) {
      nodeRegistry.cache = registryCache;
    } else {
      nodeRegistry.cache = undefined;
    }

    if (appSettings.value.debug.cache.useRuntimeCache) {
      memoryRuntime.cache = runtimeCache;
    } else {
      memoryRuntime.cache = undefined;
    }
  });

  let activeNode = $state<NodeInstance | undefined>(undefined);
  let scene = $state<Group>(null!);

  let graphInterface = $state<ReturnType<typeof GraphInterface>>(null!);
  let viewerComponent = $state<ReturnType<typeof Viewer>>();
  const manager = $derived(graphInterface?.manager);

  async function randomGenerate() {
    if (!manager) return;
    const g = manager.serialize();
    const s = { ...graphSettings, randomSeed: true };
    await handleUpdate(g, s);
  }

  let applicationKeymap = createKeyMap([
    {
      key: "r",
      description: "Regenerate the plant model",
      callback: () => randomGenerate(),
    },
  ]);

  let graphSettings = $state<Record<string, any>>({});
  let graphSettingTypes = $state({
    randomSeed: { type: "boolean", value: false },
  });

  async function update(
    g: Graph,
    s: Record<string, any> = $state.snapshot(graphSettings),
  ) {
    performanceStore.startRun();
    try {
      let a = performance.now();
      const graphResult = await runtime.execute(g, s);
      let b = performance.now();

      if (appSettings.value.debug.useWorker) {
        let perfData = await runtime.getPerformanceData();
        let lastRun = perfData?.at(-1);
        if (lastRun?.total) {
          lastRun.runtime = lastRun.total;
          delete lastRun.total;
          performanceStore.mergeData(lastRun);
          performanceStore.addPoint(
            "worker-transfer",
            b - a - lastRun.runtime[0],
          );
        }
      }
      viewerComponent?.update(graphResult);
    } catch (error) {
      console.log("errors", error);
    } finally {
      performanceStore.stopRun();
    }
  }

  const handleUpdate = debounceAsyncFunction(update);

  $effect(() => {
    //@ts-ignore
    AppSettingTypes.debug.stressTest.loadGrid.callback = () => {
      manager.load(
        templates.grid(
          appSettings.value.debug.stressTest.amount,
          appSettings.value.debug.stressTest.amount,
        ),
      );
    };
    //@ts-ignore
    AppSettingTypes.debug.stressTest.loadTree.callback = () => {
      manager.load(templates.tree(appSettings.value.debug.stressTest.amount));
    };
    //@ts-ignore
    AppSettingTypes.debug.stressTest.lottaFaces.callback = () => {
      manager.load(templates.lottaFaces as unknown as Graph);
    };
    //@ts-ignore
    AppSettingTypes.debug.stressTest.lottaNodes.callback = () => {
      manager.load(templates.lottaNodes as unknown as Graph);
    };
    //@ts-ignore
    AppSettingTypes.debug.stressTest.lottaNodesAndFaces.callback = () => {
      manager.load(templates.lottaNodesAndFaces as unknown as Graph);
    };
  });
</script>

<svelte:document onkeydown={applicationKeymap.handleKeyboardEvent} />

<div class="wrapper manager-{manager?.status}">
  <header></header>
  <Grid.Row>
    <Grid.Cell>
      <Viewer
        bind:scene
        bind:this={viewerComponent}
        perf={performanceStore}
        centerCamera={appSettings.value.centerCamera}
      />
    </Grid.Cell>
    <Grid.Cell>
      {#if pm.graph}
        <GraphInterface
          graph={pm.graph}
          bind:this={graphInterface}
          registry={nodeRegistry}
          showGrid={appSettings.value.nodeInterface.showNodeGrid}
          snapToGrid={appSettings.value.nodeInterface.snapToGrid}
          bind:activeNode
          bind:showHelp={appSettings.value.nodeInterface.showHelp}
          bind:settings={graphSettings}
          bind:settingTypes={graphSettingTypes}
          onsave={(g) => pm.saveGraph(g)}
          onresult={(result) => handleUpdate(result)}
        />
      {/if}
      <Sidebar>
        <Panel id="general" title="General" icon="i-[tabler--settings]">
          <NestedSettings
            id="general"
            bind:value={appSettings.value}
            type={AppSettingTypes}
          />
        </Panel>
        <Panel
          id="shortcuts"
          title="Keyboard Shortcuts"
          icon="i-[tabler--keyboard]"
        >
          <Keymap
            keymaps={[
              { keymap: applicationKeymap, title: "Application" },
              { keymap: graphInterface?.keymap, title: "Node-Editor" },
            ]}
          />
        </Panel>
        <Panel id="exports" title="Exporter" icon="i-[tabler--package-export]">
          <ExportSettings {scene} />
        </Panel>
        <Panel
          id="node-store"
          title="Node Store"
          icon="i-[tabler--database] bg-green-400"
        >
          <NodeStore registry={nodeRegistry} />
        </Panel>
        <Panel
          id="performance"
          title="Performance"
          hidden={!appSettings.value.debug.showPerformancePanel}
          icon="i-[tabler--brand-speedtest] bg-red-400"
        >
          {#if $performanceStore}
            <PerformanceViewer data={$performanceStore} />
          {/if}
        </Panel>
        <Panel id="projects" icon="i-[tabler--folder-open]">
          <ProjectManagerEl projectManager={pm} />
        </Panel>
        <Panel
          id="graph-source"
          title="Graph Source"
          hidden={!appSettings.value.debug.showGraphJson}
          icon="i-[tabler--code]"
        >
          <GraphSource graph={pm.graph ?? manager?.serialize()} />
        </Panel>
        <Panel
          id="benchmark"
          title="Benchmark"
          hidden={!appSettings.value.debug.showBenchmarkPanel}
          icon="i-[tabler--graph] bg-red-400"
        >
          <BenchmarkPanel run={randomGenerate} />
        </Panel>
        <Panel
          id="graph-settings"
          title="Graph Settings"
          icon="i-[custom--graph] bg-blue-400"
        >
          <NestedSettings
            id="graph-settings"
            type={graphSettingTypes}
            bind:value={graphSettings}
          />
        </Panel>
        <Panel
          id="active-node"
          title="Node Settings"
          icon="i-[tabler--adjustments] bg-blue-400"
        >
          <ActiveNodeSettings {manager} bind:node={activeNode} />
        </Panel>
      </Sidebar>
    </Grid.Cell>
  </Grid.Row>
</div>

<style>
  header {
    background-color: var(--layer-1);
  }

  .wrapper {
    height: 100vh;
    width: 100vw;
    color: white;
    display: grid;
    grid-template-rows: 0px 1fr;
  }

  .wrapper :global(canvas) {
    transition: opacity 0.3s ease;
    opacity: 1;
  }

  .manager-loading :global(.graph-wrapper),
  .manager-loading :global(canvas) {
    opacity: 0.2;
    pointer-events: none;
  }

  :global(html) {
    background: rgb(13, 19, 32);
    background: linear-gradient(
      180deg,
      rgba(13, 19, 32, 1) 0%,
      rgba(8, 12, 21, 1) 100%
    );
  }

  :global(body) {
    margin: 0;
    position: relative;
  }
</style>
