<script lang="ts">
  import { onMount, onDestroy } from 'svelte';
  import { useLayoutStore } from '../store/layout';
  import { useEditorStore } from '../store/editor/Editor.store';
  import { edgeDetectionService } from '../services/layout/edgeDetection.service';
  import PaneContainer from '../components/layout/PaneContainer.component.svelte';
  import ElResizeHandle from '../components/primitives/layout/ElResizeHandle.svelte';
  import ElFloatingToggle from '../components/primitives/layout/ElFloatingToggle.svelte';
  import SettingsModal from '../components/shared/SettingsModal.component.svelte';
  import AudioBackendModal from '../components/shared/AudioBackendModal.component.svelte';
  import { setHydraBackground } from '../background-canvas';

  const { getters, actions } = useLayoutStore();
  const { getters: editorGetters } = useEditorStore();
  const { settings } = editorGetters;

  $effect(() => {
    setHydraBackground($settings.hydraBackground);
  });
  const {
    paneSetVisibility,
    paneVisibility,
    hoverStates,
    paneSizes,
    containerSizes,
    hideAppNavbar,
  } = getters;

  let resizeData = $state<any>(null);
  let showSettings = $state(false);
  let showAudioBackend = $state(false);

  onMount(() => {
    document.addEventListener('mousemove', handleGlobalMouseMove);
  });

  onDestroy(() => {
    document.removeEventListener('mousemove', handleGlobalMouseMove);
  });

  function startResize(event: MouseEvent, paneId: string, direction: 'horizontal' | 'vertical') {
    event.preventDefault();
    actions.startResize();

    const startPos = direction === 'horizontal' ? event.clientX : event.clientY;
    const startSize = $paneSizes[paneId as keyof typeof $paneSizes];

    resizeData = { paneId, direction, startPos, startSize };
    document.addEventListener('mousemove', handleResize);
    document.addEventListener('mouseup', endResize);
  }

  function startContainerResize(
    event: MouseEvent,
    containerId: string,
    direction: 'horizontal' | 'vertical'
  ) {
    event.preventDefault();
    actions.startResize();

    const startPos = direction === 'horizontal' ? event.clientX : event.clientY;
    const startSize = $containerSizes[containerId as keyof typeof $containerSizes];

    resizeData = { containerId, direction, startPos, startSize, isContainer: true };
    document.addEventListener('mousemove', handleResize);
    document.addEventListener('mouseup', endResize);
  }

  function handleResize(event: MouseEvent) {
    if (!resizeData) return;

    const currentPos = resizeData.direction === 'horizontal' ? event.clientX : event.clientY;
    let delta = currentPos - resizeData.startPos;

    // Invert delta for right/bottom
    if (resizeData.containerId === 'right-column' || resizeData.containerId === 'bottom-area') {
      delta = -delta;
    }

    const newSize = Math.max(100, resizeData.startSize + delta);

    if (resizeData.isContainer) {
      actions.updateContainerSize(resizeData.containerId, newSize);
    } else {
      actions.updatePaneSize(resizeData.paneId, newSize);
    }
  }

  function endResize() {
    actions.endResize();
    resizeData = null;
    document.removeEventListener('mousemove', handleResize);
    document.removeEventListener('mouseup', endResize);
  }

  function handleGlobalMouseMove(event: MouseEvent) {
    const edge = edgeDetectionService.detectEdge(
      event.clientX,
      event.clientY,
      $paneSetVisibility,
      $containerSizes
    );

    if (edge && getters.hasPanesVisible(edge)) {
      actions.setPaneSetHover(edge, true);
    } else {
      // Clear hover states
      ['left', 'right', 'bottom'].forEach((setName) => {
        const nearButton = edgeDetectionService.isNearButtonArea(
          setName as 'left' | 'right' | 'bottom',
          event.clientX,
          event.clientY,
          $paneSetVisibility,
          $containerSizes
        );
        if (!nearButton) {
          actions.setPaneSetHover(setName, false);
        }
      });
    }
  }
</script>

<div class="h-screen flex flex-col overflow-hidden bg-surface-100 dark:bg-surface-900">
  <!-- Top menu -->
  {#if $paneVisibility.get('top-menu')}
    <div class="h-16 flex-shrink-0">
      <PaneContainer position="top-menu" height={64} />
    </div>
  {/if}

  <!-- Main area -->
  <div class="flex flex-1 overflow-hidden">
    <!-- Left column -->
    {#if $paneSetVisibility.left}
      <div
        class="flex flex-col h-full"
        style="width: {$containerSizes['left-column']}px; min-width: 200px;"
      >
        {#if $paneVisibility.get('left-top')}
          {#if $paneVisibility.get('left-bottom')}
            <PaneContainer position="left-top" height={$paneSizes['left-top']} minHeight={100} />
          {:else if $paneVisibility.get('left-middle')}
            <PaneContainer position="left-top" height={$paneSizes['left-top']} minHeight={100} />
          {:else}
            <div class="flex-1 min-h-[100px]">
              <PaneContainer position="left-top" />
            </div>
          {/if}
          {#if $paneVisibility.get('left-middle') || $paneVisibility.get('left-bottom')}
            <ElResizeHandle
              direction="vertical"
              onresizestart={(e) => startResize(e, 'left-top', 'vertical')}
            />
          {/if}
        {/if}

        {#if $paneVisibility.get('left-middle')}
          {#if $paneVisibility.get('left-bottom')}
            <PaneContainer
              position="left-middle"
              height={$paneSizes['left-middle']}
              minHeight={100}
            />
          {:else}
            <div class="flex-1 min-h-[100px]">
              <PaneContainer position="left-middle" />
            </div>
          {/if}
          {#if $paneVisibility.get('left-bottom')}
            <ElResizeHandle
              direction="vertical"
              onresizestart={(e) => startResize(e, 'left-middle', 'vertical')}
            />
          {/if}
        {/if}

        {#if $paneVisibility.get('left-bottom')}
          <div class="flex-1 min-h-[100px]">
            <PaneContainer position="left-bottom" />
          </div>
        {/if}
      </div>

      <ElResizeHandle
        direction="horizontal"
        onresizestart={(e) => startContainerResize(e, 'left-column', 'horizontal')}
      />
    {/if}

    <!-- Center -->
    <div class="flex flex-col flex-1">
      <div class="flex-1">
        <PaneContainer position="center" />
      </div>

      <!-- Bottom area -->
      {#if $paneSetVisibility.bottom}
        <ElResizeHandle
          direction="vertical"
          onresizestart={(e) => startContainerResize(e, 'bottom-area', 'vertical')}
        />

        <div
          class="flex h-full"
          style="height: {$containerSizes['bottom-area']}px; min-height: 150px;"
        >
          {#if $paneVisibility.get('bottom-left')}
            {#if $paneVisibility.get('bottom-right')}
              <div style="width: {$paneSizes['bottom-left']}px; min-width: 200px;">
                <PaneContainer position="bottom-left" />
              </div>
              <ElResizeHandle
                direction="horizontal"
                onresizestart={(e) => startResize(e, 'bottom-left', 'horizontal')}
              />
            {:else}
              <div class="flex-1">
                <PaneContainer position="bottom-left" />
              </div>
            {/if}
          {/if}

          {#if $paneVisibility.get('bottom-right')}
            <div class="flex-1">
              <PaneContainer position="bottom-right" />
            </div>
          {/if}
        </div>
      {/if}
    </div>

    <!-- Right column -->
    {#if $paneSetVisibility.right}
      <ElResizeHandle
        direction="horizontal"
        onresizestart={(e) => startContainerResize(e, 'right-column', 'horizontal')}
      />

      <div
        class="flex flex-col h-full"
        style="width: {$containerSizes['right-column']}px; min-width: 200px;"
      >
        {#if $paneVisibility.get('right-top')}
          {#if $paneVisibility.get('right-bottom')}
            <PaneContainer position="right-top" height={$paneSizes['right-top']} minHeight={100} />
          {:else if $paneVisibility.get('right-middle')}
            <PaneContainer position="right-top" height={$paneSizes['right-top']} minHeight={100} />
          {:else}
            <div class="flex-1 min-h-[100px]">
              <PaneContainer position="right-top" />
            </div>
          {/if}
          {#if $paneVisibility.get('right-middle') || $paneVisibility.get('right-bottom')}
            <ElResizeHandle
              direction="vertical"
              onresizestart={(e) => startResize(e, 'right-top', 'vertical')}
            />
          {/if}
        {/if}

        {#if $paneVisibility.get('right-middle')}
          {#if $paneVisibility.get('right-bottom')}
            <PaneContainer
              position="right-middle"
              height={$paneSizes['right-middle']}
              minHeight={100}
            />
          {:else}
            <div class="flex-1 min-h-[100px]">
              <PaneContainer position="right-middle" />
            </div>
          {/if}
          {#if $paneVisibility.get('right-bottom')}
            <ElResizeHandle
              direction="vertical"
              onresizestart={(e) => startResize(e, 'right-middle', 'vertical')}
            />
          {/if}
        {/if}

        {#if $paneVisibility.get('right-bottom')}
          <div class="flex-1 min-h-[100px]">
            <PaneContainer position="right-bottom" />
          </div>
        {/if}
      </div>
    {/if}
  </div>

  <!-- Floating toggle buttons -->
  {#if $hoverStates.left && getters.hasPanesVisible('left')}
    <ElFloatingToggle
      position="left"
      offset={$paneSetVisibility.left ? $containerSizes['left-column'] : 0}
      onclick={() => actions.togglePaneSet('left')}
      onmouseenter={() => actions.setPaneSetHover('left', true)}
      onmouseleave={() => actions.setPaneSetHover('left', false)}
      title={$paneSetVisibility.left ? 'Hide left panes' : 'Show left panes'}
    >
      {#if $paneSetVisibility.left}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          class="w-8 h-8"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
        </svg>
      {:else}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          class="w-8 h-8"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
        </svg>
      {/if}
    </ElFloatingToggle>
  {/if}

  {#if $hoverStates.right && getters.hasPanesVisible('right')}
    <ElFloatingToggle
      position="right"
      offset={$paneSetVisibility.right ? $containerSizes['right-column'] : 0}
      onclick={() => actions.togglePaneSet('right')}
      onmouseenter={() => actions.setPaneSetHover('right', true)}
      onmouseleave={() => actions.setPaneSetHover('right', false)}
      title={$paneSetVisibility.right ? 'Hide right panes' : 'Show right panes'}
    >
      {#if $paneSetVisibility.right}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          class="w-8 h-8"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
        </svg>
      {:else}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          class="w-8 h-8"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
        </svg>
      {/if}
    </ElFloatingToggle>
  {/if}

  {#if $hoverStates.bottom && getters.hasPanesVisible('bottom')}
    <ElFloatingToggle
      position="bottom"
      offset={$paneSetVisibility.bottom ? $containerSizes['bottom-area'] : 0}
      onclick={() => actions.togglePaneSet('bottom')}
      onmouseenter={() => actions.setPaneSetHover('bottom', true)}
      onmouseleave={() => actions.setPaneSetHover('bottom', false)}
      title={$paneSetVisibility.bottom ? 'Hide bottom panes' : 'Show bottom panes'}
    >
      {#if $paneSetVisibility.bottom}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          class="w-8 h-8"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
        </svg>
      {:else}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          class="w-8 h-8"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
        </svg>
      {/if}
    </ElFloatingToggle>
  {/if}

  <!-- Floating button group (top-right) -->
  <div class="fixed top-4 right-4 z-50 flex gap-2">
    <!-- AudioBackend button -->
    <button
      class="btn btn-square variant-filled-primary shadow-lg"
      onclick={() => (showAudioBackend = true)}
      title="Audio Backend"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="currentColor"
        viewBox="0 0 24 24"
        class="w-6 h-6"
      >
        <path
          d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06zM18.584 5.106a.75.75 0 011.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 11-1.06-1.06 8.25 8.25 0 000-11.668.75.75 0 010-1.06z"
        />
        <path
          d="M15.932 7.757a.75.75 0 011.061 0 6 6 0 010 8.486.75.75 0 01-1.06-1.061 4.5 4.5 0 000-6.364.75.75 0 010-1.06z"
        />
      </svg>
    </button>

    <!-- Settings button -->
    <button
      class="btn btn-square variant-filled-primary shadow-lg"
      onclick={() => (showSettings = true)}
      title="Settings"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="2"
        stroke="currentColor"
        class="w-6 h-6"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
        />
        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
      </svg>
    </button>
  </div>

  <AudioBackendModal isOpen={showAudioBackend} onclose={() => (showAudioBackend = false)} />
  <SettingsModal isOpen={showSettings} onclose={() => (showSettings = false)} />
</div>
