<script setup lang="ts">
import Panzoom from "@panzoom/panzoom";
import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
import CrmCalendarLabYearRect from "./CrmCalendarLabYearRect.vue";
import CrmCalendarLabMonthRect from "./CrmCalendarLabMonthRect.vue";
import CrmCalendarLabWeekRect from "./CrmCalendarLabWeekRect.vue";
import CrmCalendarLabDayRect from "./CrmCalendarLabDayRect.vue";

/* ------------------------------------------------------------------ */
/*  Constants                                                          */
/* ------------------------------------------------------------------ */

type Level = "year" | "month" | "week" | "day";
type Direction = "in" | "out";

const LEVELS: Level[] = ["year", "month", "week", "day"];
const LEVEL_LABELS: Record<Level, string> = {
  year: "Year",
  month: "Month",
  week: "Week",
  day: "Day",
};

const MONTH_LABELS = [
  "Jan", "Feb", "Mar", "Apr",
  "May", "Jun", "Jul", "Aug",
  "Sep", "Oct", "Nov", "Dec",
];

const ZOOM_PRIME_STEPS = 2;
const ZOOM_ANIMATION_MS = 800;
const CONTENT_FADE_MS = 180;
const VIEWPORT_PADDING = 20;

/* ------------------------------------------------------------------ */
/*  Refs                                                               */
/* ------------------------------------------------------------------ */

const outlineViewportRef = ref<HTMLDivElement | null>(null);
const outlineSceneRef = ref<HTMLDivElement | null>(null);
const panzoomRef = ref<ReturnType<typeof Panzoom> | null>(null);
const resizeObserver = ref<ResizeObserver | null>(null);

const currentLevel = ref<Level>("year");
const isAnimating = ref(false);
const contentVisible = ref(true);

const selectedMonth = ref(0);
const selectedWeek = ref(0);
const selectedDay = ref(0);

const hoveredMonth = ref(0);
const hoveredWeek = ref(0);
const hoveredDay = ref(0);

const primeFocusId = ref("");
const wheelPrimeDirection = ref<"" | Direction>("");
const wheelPrimeTicks = ref(0);

let primeTimer: ReturnType<typeof setTimeout> | null = null;
let animationFrameId: number | null = null;
let animationToken = 0;

/* ------------------------------------------------------------------ */
/*  Computed                                                           */
/* ------------------------------------------------------------------ */

const currentLevelIndex = computed(() => LEVELS.indexOf(currentLevel.value));
const canZoomIn = computed(() => currentLevelIndex.value < LEVELS.length - 1);

/* ------------------------------------------------------------------ */
/*  Outline geometry — positions for each level's child outlines       */
/* ------------------------------------------------------------------ */

const SCENE_W = 1400;
const SCENE_H = 900;

/** Outline rects are absolutely positioned inside the scene. */
function yearOutlines() {
  const cols = 4;
  const gap = 10;
  const pad = 14;
  const areaW = SCENE_W - 160 - pad * 2;
  const areaH = SCENE_H - 100 - pad * 2;
  const cardW = (areaW - gap * (cols - 1)) / cols;
  const cardH = (areaH - gap * 2) / 3;
  const startX = 80 + pad;
  const startY = 50 + pad;

  return Array.from({ length: 12 }, (_, i) => {
    const col = i % cols;
    const row = Math.floor(i / cols);
    return {
      id: `outline-month-${i}`,
      x: startX + col * (cardW + gap),
      y: startY + row * (cardH + gap),
      w: cardW,
      h: cardH,
    };
  });
}

function monthOutlines() {
  const rows = 6;
  const gap = 8;
  const pad = 14;
  const areaW = SCENE_W - 160 - pad * 2;
  const areaH = SCENE_H - 100 - pad * 2;
  const rowH = (areaH - gap * (rows - 1)) / rows;
  const startX = 80 + pad;
  const startY = 50 + pad;

  return Array.from({ length: rows }, (_, i) => ({
    id: `outline-week-${i}`,
    x: startX,
    y: startY + i * (rowH + gap),
    w: areaW,
    h: rowH,
  }));
}

function weekOutlines() {
  const cols = 7;
  const gap = 6;
  const pad = 14;
  const areaW = SCENE_W - 160 - pad * 2;
  const areaH = SCENE_H - 100 - pad * 2;
  const colW = (areaW - gap * (cols - 1)) / cols;
  const startX = 80 + pad;
  const startY = 50 + pad;

  return Array.from({ length: cols }, (_, i) => ({
    id: `outline-day-${i}`,
    x: startX + i * (colW + gap),
    y: startY,
    w: colW,
    h: areaH,
  }));
}

function dayOutlines() {
  const rows = 12;
  const gap = 5;
  const pad = 14;
  const areaW = SCENE_W - 160 - pad * 2;
  const areaH = SCENE_H - 100 - pad * 2;
  const rowH = (areaH - gap * (rows - 1)) / rows;
  const startX = 80 + pad;
  const startY = 50 + pad;

  return Array.from({ length: rows }, (_, i) => ({
    id: `outline-slot-${i}`,
    x: startX,
    y: startY + i * (rowH + gap),
    w: areaW,
    h: rowH,
  }));
}

const outlineRects = computed(() => {
  switch (currentLevel.value) {
    case "year": return yearOutlines();
    case "month": return monthOutlines();
    case "week": return weekOutlines();
    case "day": return dayOutlines();
    default: return [];
  }
});

/* ------------------------------------------------------------------ */
/*  Camera helpers (reused from CrmCalendarZoomLab)                    */
/* ------------------------------------------------------------------ */

function easing(t: number) {
  return 1 - (1 - t) ** 3;
}

function stopCameraAnimation() {
  animationToken += 1;
  if (animationFrameId !== null) {
    cancelAnimationFrame(animationFrameId);
    animationFrameId = null;
  }
}

function applyTransform(transform: { x: number; y: number; scale: number }) {
  const panzoom = panzoomRef.value;
  if (!panzoom) return;
  panzoom.zoom(transform.scale, { animate: false, force: true });
  panzoom.pan(transform.x, transform.y, { animate: false, force: true });
}

function computeTransformForRect(rect: { x: number; y: number; w: number; h: number }) {
  const viewport = outlineViewportRef.value;
  if (!viewport) return null;

  const vw = Math.max(1, viewport.clientWidth);
  const vh = Math.max(1, viewport.clientHeight);
  const safeW = Math.max(1, vw - VIEWPORT_PADDING * 2);
  const safeH = Math.max(1, vh - VIEWPORT_PADDING * 2);
  const scale = Math.min(safeW / rect.w, safeH / rect.h);

  const x = VIEWPORT_PADDING + (safeW - rect.w * scale) / 2 - rect.x * scale;
  const y = VIEWPORT_PADDING + (safeH - rect.h * scale) / 2 - rect.y * scale;

  return { x, y, scale };
}

function computeTransformForLevel() {
  const viewport = outlineViewportRef.value;
  if (!viewport) return null;

  // Fit the whole scene container
  const vw = Math.max(1, viewport.clientWidth);
  const vh = Math.max(1, viewport.clientHeight);
  const safeW = Math.max(1, vw - VIEWPORT_PADDING * 2);
  const safeH = Math.max(1, vh - VIEWPORT_PADDING * 2);

  // Scene area: the year article area
  const areaX = 80;
  const areaY = 50;
  const areaW = SCENE_W - 160;
  const areaH = SCENE_H - 100;

  const scale = Math.min(safeW / areaW, safeH / areaH);
  const x = VIEWPORT_PADDING + (safeW - areaW * scale) / 2 - areaX * scale;
  const y = VIEWPORT_PADDING + (safeH - areaH * scale) / 2 - areaY * scale;

  return { x, y, scale };
}

async function animateCamera(
  target: { x: number; y: number; scale: number },
  duration: number,
): Promise<void> {
  const panzoom = panzoomRef.value;
  if (!panzoom) return;

  if (duration <= 0) {
    applyTransform(target);
    return;
  }

  stopCameraAnimation();
  const localToken = animationToken;
  const startPan = panzoom.getPan();
  const startScale = panzoom.getScale();
  const startAt = performance.now();

  await new Promise<void>((resolve) => {
    const step = (now: number) => {
      if (localToken !== animationToken) {
        resolve();
        return;
      }

      const elapsed = now - startAt;
      const t = Math.max(0, Math.min(1, elapsed / duration));
      const k = easing(t);

      applyTransform({
        x: startPan.x + (target.x - startPan.x) * k,
        y: startPan.y + (target.y - startPan.y) * k,
        scale: startScale + (target.scale - startScale) * k,
      });

      if (t < 1) {
        animationFrameId = requestAnimationFrame(step);
        return;
      }

      animationFrameId = null;
      resolve();
    };

    animationFrameId = requestAnimationFrame(step);
  });
}

function fitLevelImmediate() {
  const transform = computeTransformForLevel();
  if (transform) applyTransform(transform);
}

/* ------------------------------------------------------------------ */
/*  Content fade helpers                                               */
/* ------------------------------------------------------------------ */

function fadeOutContent(): Promise<void> {
  contentVisible.value = false;
  return new Promise((r) => setTimeout(r, CONTENT_FADE_MS));
}

function fadeInContent(): Promise<void> {
  contentVisible.value = true;
  return new Promise((r) => setTimeout(r, CONTENT_FADE_MS));
}

/* ------------------------------------------------------------------ */
/*  Zoom logic                                                         */
/* ------------------------------------------------------------------ */

function resetWheelPrime() {
  wheelPrimeDirection.value = "";
  wheelPrimeTicks.value = 0;
}

function startPrime(focusId: string) {
  if (primeTimer) {
    clearTimeout(primeTimer);
    primeTimer = null;
  }
  primeFocusId.value = focusId;
  primeTimer = setTimeout(() => {
    primeFocusId.value = "";
  }, 170);
}

function getHoveredIndex(): number {
  switch (currentLevel.value) {
    case "year": return hoveredMonth.value;
    case "month": return hoveredWeek.value;
    case "week": return hoveredDay.value;
    default: return 0;
  }
}

async function zoomIn() {
  if (isAnimating.value) return;
  if (currentLevelIndex.value >= LEVELS.length - 1) return;

  const hovIdx = getHoveredIndex();
  isAnimating.value = true;

  // 1. Fade out content
  await fadeOutContent();

  // 2. Animate outline layer to target rect
  const rects = outlineRects.value;
  const targetRect = rects[hovIdx];
  if (targetRect) {
    const transform = computeTransformForRect(targetRect);
    if (transform) {
      await animateCamera(transform, ZOOM_ANIMATION_MS);
    }
  }

  // 3. Update selection and switch level
  switch (currentLevel.value) {
    case "year":
      selectedMonth.value = hovIdx;
      selectedWeek.value = 0;
      selectedDay.value = 0;
      break;
    case "month":
      selectedWeek.value = hovIdx;
      selectedDay.value = 0;
      break;
    case "week":
      selectedDay.value = hovIdx;
      break;
  }

  const nextIdx = currentLevelIndex.value + 1;
  currentLevel.value = LEVELS[nextIdx]!;

  // 4. Reset panzoom to fit new level (instant, no animation)
  await nextTick();
  fitLevelImmediate();

  // 5. Fade in content
  await fadeInContent();

  isAnimating.value = false;
}

async function zoomOut() {
  if (isAnimating.value) return;
  if (currentLevelIndex.value <= 0) return;

  isAnimating.value = true;

  // 1. Fade out content
  await fadeOutContent();

  // 2. Switch to parent level
  const prevIdx = currentLevelIndex.value - 1;
  currentLevel.value = LEVELS[prevIdx]!;

  // 3. Reset panzoom to fit — but start zoomed into the child position
  await nextTick();

  // Figure out which child we came from to start the camera there
  const rects = outlineRects.value;
  let fromIdx = 0;
  switch (currentLevel.value) {
    case "year": fromIdx = selectedMonth.value; break;
    case "month": fromIdx = selectedWeek.value; break;
    case "week": fromIdx = selectedDay.value; break;
  }

  const fromRect = rects[fromIdx];
  if (fromRect) {
    const zoomedTransform = computeTransformForRect(fromRect);
    if (zoomedTransform) applyTransform(zoomedTransform);
  }

  // 4. Animate out to fit the whole level
  const fitTransform = computeTransformForLevel();
  if (fitTransform) {
    await animateCamera(fitTransform, ZOOM_ANIMATION_MS);
  }

  // 5. Fade in content
  await fadeInContent();

  isAnimating.value = false;
}

async function resetToYear() {
  if (isAnimating.value) return;
  if (currentLevel.value === "year") return;

  isAnimating.value = true;
  await fadeOutContent();

  currentLevel.value = "year";
  await nextTick();
  fitLevelImmediate();

  await fadeInContent();
  isAnimating.value = false;
}

function onWheel(event: WheelEvent) {
  event.preventDefault();
  if (isAnimating.value) return;

  const direction: Direction = event.deltaY < 0 ? "in" : "out";

  if (direction === "in" && !canZoomIn.value) return;
  if (direction === "out" && currentLevelIndex.value <= 0) return;

  if (wheelPrimeDirection.value !== direction) {
    wheelPrimeDirection.value = direction;
    wheelPrimeTicks.value = 0;
  }

  if (wheelPrimeTicks.value < ZOOM_PRIME_STEPS) {
    wheelPrimeTicks.value += 1;

    // Visual hint on the hovered outline
    if (direction === "in") {
      const idx = getHoveredIndex();
      const rects = outlineRects.value;
      if (rects[idx]) {
        startPrime(rects[idx].id);
      }
    }
    return;
  }

  resetWheelPrime();

  if (direction === "in") {
    void zoomIn();
  } else {
    void zoomOut();
  }
}

function onDoubleClick() {
  resetWheelPrime();
  void resetToYear();
}

function isPrime(id: string) {
  return primeFocusId.value === id;
}

/* ------------------------------------------------------------------ */
/*  Lifecycle                                                          */
/* ------------------------------------------------------------------ */

onMounted(async () => {
  await nextTick();

  if (outlineSceneRef.value) {
    panzoomRef.value = Panzoom(outlineSceneRef.value, {
      animate: false,
      maxScale: 24,
      minScale: 0.08,
      disablePan: true,
      origin: "0 0",
    });
  }

  fitLevelImmediate();

  resizeObserver.value = new ResizeObserver(() => {
    if (!isAnimating.value) fitLevelImmediate();
  });

  if (outlineViewportRef.value) {
    resizeObserver.value.observe(outlineViewportRef.value);
  }
});

onBeforeUnmount(() => {
  if (primeTimer) clearTimeout(primeTimer);
  stopCameraAnimation();
  resizeObserver.value?.disconnect();
  panzoomRef.value?.destroy();
  panzoomRef.value = null;
});
</script>

<template>
  <section class="canvas-lab-root">
    <header class="canvas-lab-toolbar">
      <p class="canvas-lab-level-text">
        {{ LEVEL_LABELS[currentLevel] }}
      </p>
    </header>

    <div
      ref="outlineViewportRef"
      class="canvas-lab-viewport"
      :class="canZoomIn ? 'cursor-zoom-in' : 'cursor-zoom-out'"
      @wheel.prevent="onWheel"
      @dblclick="onDoubleClick"
    >
      <!-- Layer 1: Outline rectangles (panzoom-controlled, can blur — they're just borders) -->
      <div ref="outlineSceneRef" class="canvas-lab-scene">
        <div
          v-for="(rect, idx) in outlineRects"
          :key="rect.id"
          class="canvas-outline-rect"
          :class="[
            isPrime(rect.id) ? 'canvas-outline-prime' : '',
          ]"
          :style="{
            left: `${rect.x}px`,
            top: `${rect.y}px`,
            width: `${rect.w}px`,
            height: `${rect.h}px`,
          }"
          @mouseenter="
            currentLevel === 'year' ? (hoveredMonth = idx) :
            currentLevel === 'month' ? (hoveredWeek = idx) :
            currentLevel === 'week' ? (hoveredDay = idx) :
            undefined
          "
        />
      </div>

      <!-- Layer 2: Content overlay (always 1:1 scale, no blur) -->
      <div
        class="canvas-content-layer"
        :class="contentVisible ? 'canvas-content-visible' : ''"
      >
        <CrmCalendarLabYearRect
          v-if="currentLevel === 'year'"
          :is-active="true"
          :is-loading="false"
          :is-loaded="true"
          :show-content="true"
          :pulse-scale="1"
        />
        <CrmCalendarLabMonthRect
          v-if="currentLevel === 'month'"
          :is-active="true"
          :is-loading="false"
          :is-loaded="true"
          :show-content="true"
          :pulse-scale="1"
        />
        <CrmCalendarLabWeekRect
          v-if="currentLevel === 'week'"
          :is-active="true"
          :is-loading="false"
          :is-loaded="true"
          :show-content="true"
          :pulse-scale="1"
        />
        <CrmCalendarLabDayRect
          v-if="currentLevel === 'day'"
          :is-active="true"
          :is-loading="false"
          :is-loaded="true"
          :show-content="true"
          :pulse-scale="1"
        />
      </div>
    </div>
  </section>
</template>

<style scoped>
.canvas-lab-root {
  height: calc(100dvh - 2.5rem);
  min-height: 620px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.canvas-lab-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.canvas-lab-level-text {
  font-size: 0.78rem;
  color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
}

.canvas-lab-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 18%, transparent);
  background:
    radial-gradient(circle at 15% 15%, color-mix(in oklab, var(--color-base-content) 6%, transparent), transparent 40%),
    color-mix(in oklab, var(--color-base-100) 94%, transparent);
  overflow: hidden;
}

.canvas-lab-scene {
  position: absolute;
  width: 1400px;
  height: 900px;
  will-change: transform;
}

/* Outline rects — just borders, no content */
.canvas-outline-rect {
  position: absolute;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 22%, transparent);
  background: color-mix(in oklab, var(--color-base-200) 40%, transparent);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.canvas-outline-rect:hover {
  border-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 24%, transparent) inset;
}

.canvas-outline-prime {
  transform: scale(1.04);
  border-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 40%, transparent) inset;
}

/* Content overlay — always native scale */
.canvas-content-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.canvas-content-visible {
  opacity: 1;
  pointer-events: auto;
}
</style>
