<script lang="ts">
  import {
    editorState,
    getCurrentSlide,
    nextSlide,
    prevSlide,
    stopPresenting,
  } from "$lib/state.svelte";

  let elapsed = $state("00:00");
  let interval: ReturnType<typeof setInterval>;
  let isDragging = $state(false);
  let dragStartY = 0;
  let dragStartHeight = 0;

  const MIN_HEIGHT = 60;
  const MAX_HEIGHT = 400;

  $effect(() => {
    if (editorState.isPresenting && editorState.presentationStartTime) {
      interval = setInterval(() => {
        const diff = Date.now() - editorState.presentationStartTime!;
        const mins = Math.floor(diff / 60000);
        const secs = Math.floor((diff % 60000) / 1000);
        elapsed = `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
      }, 1000);

      return () => clearInterval(interval);
    }
  });

  const handleKeydown = (e: KeyboardEvent) => {
    if (!editorState.isPresenting) return;

    switch (e.key) {
      case "ArrowRight":
      case " ":
      case "Enter":
        nextSlide();
        break;
      case "ArrowLeft":
        prevSlide();
        break;
      case "Escape":
        stopPresenting();
        break;
    }
  };

  const handleDragStart = (e: MouseEvent | TouchEvent) => {
    isDragging = true;
    dragStartY = "touches" in e ? e.touches[0].clientY : e.clientY;
    dragStartHeight = editorState.presenterPanelHeight;
    e.preventDefault();
  };

  const handleDragMove = (e: MouseEvent | TouchEvent) => {
    if (!isDragging) return;
    const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
    const delta = dragStartY - clientY;
    const newHeight = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, dragStartHeight + delta));
    editorState.presenterPanelHeight = newHeight;
  };

  const handleDragEnd = () => {
    isDragging = false;
  };
</script>

<svelte:window
  onkeydown={handleKeydown}
  onmousemove={handleDragMove}
  onmouseup={handleDragEnd}
  ontouchmove={handleDragMove}
  ontouchend={handleDragEnd}
/>

{#if editorState.isPresenting}
  <div
    class="presenter-overlay"
    class:dragging={isDragging}
    style="height: {editorState.presenterPanelHeight}px;"
  >
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <div
      class="drag-handle"
      onmousedown={handleDragStart}
      ontouchstart={handleDragStart}
    >
      <div class="drag-indicator"></div>
    </div>

    <div class="controls">
      <button onclick={prevSlide}>←</button>
      <span class="slide-counter">
        {editorState.currentSlideIndex + 1} / {editorState.deck?.slides.length}
      </span>
      <button onclick={nextSlide}>→</button>
      <span class="timer">{elapsed}</span>
      <button onclick={stopPresenting}>exit</button>
    </div>

    {#if editorState.showNotes}
      <div class="notes">
        {#if getCurrentSlide()?.notes}
          <p>{getCurrentSlide()?.notes}</p>
        {:else}
          <p class="no-notes">no notes for this slide</p>
        {/if}
      </div>
    {/if}

    <button
      class="notes-toggle"
      onclick={() => (editorState.showNotes = !editorState.showNotes)}
    >
      {editorState.showNotes ? "hide notes" : "show notes"}
    </button>
  </div>
{/if}

<style>
  .presenter-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    min-height: 60px;
  }

  .presenter-overlay.dragging {
    user-select: none;
  }

  .drag-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .drag-handle:hover .drag-indicator,
  .dragging .drag-indicator {
    background: #666;
  }

  .drag-indicator {
    width: 40px;
    height: 4px;
    background: #444;
    border-radius: 2px;
    transition: background 0.15s ease;
  }

  .controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 20px 8px;
  }

  .controls button {
    padding: 8px 16px;
    background: #333;
    border: 1px solid #555;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
  }

  .controls button:hover {
    background: #444;
  }

  .slide-counter {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    min-width: 60px;
    text-align: center;
  }

  .timer {
    font-family: monospace;
    font-size: 18px;
    color: #3b82f6;
  }

  .notes {
    flex: 1;
    margin: 8px 20px 12px;
    padding: 12px;
    background: #1a1a1a;
    border-radius: 4px;
    color: #ccc;
    overflow-y: auto;
    min-height: 0;
  }

  .notes p {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.5;
  }

  .notes .no-notes {
    color: #666;
    font-style: italic;
  }

  .notes-toggle {
    position: absolute;
    right: 20px;
    top: 16px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid #555;
    color: #888;
    cursor: pointer;
    font-size: 12px;
    border-radius: 4px;
  }

  .notes-toggle:hover {
    border-color: #777;
    color: #ccc;
  }
</style>
