---
import { Icon } from 'astro-icon/components';

interface BreakpointSlides {
  base?: number;
  sm?: number;
  md?: number;
  lg?: number;
  xl?: number;
}

export interface Props {
  slidesPerView?: number | BreakpointSlides;
  gap?: string;
  snap?: 'start' | 'center' | 'none';
  loop?: boolean;
  autoPlay?: boolean;
  autoPlayInterval?: number;
  showControls?: boolean;
  class?: string;
  controlPrevLabel?: string;
  controlNextLabel?: string;
}

const {
  slidesPerView = {
    base: 1,
  } satisfies BreakpointSlides,
  gap = '1.5rem',
  snap = 'start',
  loop = false,
  autoPlay = false,
  autoPlayInterval = 5000,
  showControls = true,
  class: className = '',
  controlPrevLabel = 'Previous slide',
  controlNextLabel = 'Next slide',
} = Astro.props as Props;

const slidesConfig = typeof slidesPerView === 'number' ? { base: slidesPerView } : slidesPerView;
---

<div
  class={`carousel-root relative ${className}`}
  data-carousel-root
  data-carousel-initialized="false"
>
  <div class="carousel-viewport">
    <div
      class="carousel-track"
      data-carousel-track
      data-loop={loop ? "true" : undefined}
      data-autoplay={autoPlay ? "true" : undefined}
      data-autoplay-interval={autoPlay ? autoPlayInterval : undefined}
      data-slides-config={JSON.stringify(slidesConfig)}
      style={`gap: ${gap};`}
    >
      <slot />
    </div>
  </div>

  {
    showControls && (
      <div class="carousel-controls pointer-events-none absolute right-4 top-4 flex items-center justify-end">
        <div class="pointer-events-auto flex gap-2">
          <button
            type="button"
            class="carousel-control-btn group"
            data-carousel-prev
            aria-label={controlPrevLabel}
          >
            <span
              data-scheme="bg"
              class="shadow-2 inline-flex h-12 w-12 items-center justify-center rounded-full"
            >
              <Icon name="lucide:chevron-left" size={20} />
            </span>
          </button>
          <button
            type="button"
            class="carousel-control-btn group"
            data-carousel-next
            aria-label={controlNextLabel}
          >
            <span
              data-scheme="bg"
              class="shadow-2 inline-flex h-12 w-12 items-center justify-center rounded-full"
            >
              <Icon name="lucide:chevron-right" size={20} />
            </span>
          </button>
        </div>
      </div>
    )
  }
</div>

<style>
  @layer components {
  .carousel-root {
    width: 100%;
  }

  .carousel-viewport {
    overflow: hidden;
    position: relative;
  }

  .carousel-track {
    display: flex;
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  .carousel-track.no-transition {
    transition: none;
  }

  .carousel-item {
    flex-shrink: 0;
    min-width: 0;
  }

  .carousel-control-btn {
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .carousel-control-btn:hover:not(:disabled) {
    transform: translateY(1px) scale(0.99);
    opacity: 0.9;
  }

  .carousel-control-btn:active:not(:disabled) {
    transform: translateY(2px) scale(0.98);
    opacity: 0.8;
  }

  .carousel-control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
}
</style>

<script>
  const setupCarousel = (root) => {
    if (!(root instanceof HTMLElement)) return;
    if (root.dataset.carouselInitialized === "true") return;

    const track = root.querySelector("[data-carousel-track]");
    if (!(track instanceof HTMLElement)) return;

    const items = Array.from(track.querySelectorAll(".carousel-item"));
    if (items.length === 0) return;

    const parseSlidesConfig = () => {
      try {
        const raw = track.getAttribute("data-slides-config") || "{}";
        return JSON.parse(raw);
      } catch (error) {
        console.warn("Invalid slides config for carousel");
        return { base: 1 };
      }
    };

    const slidesConfig = parseSlidesConfig();
    const isLooping = track.getAttribute("data-loop") === "true";
    const autoPlay = track.getAttribute("data-autoplay") === "true";
    const autoPlayInterval = parseInt(track.getAttribute("data-autoplay-interval") || "5000", 10);

    let index = 0;
    let active = 0;
    let isPaused = false;
    let dragStartX = 0;
    let dragDeltaX = 0;
    let isDragging = false;

    const applySlidesPerView = () => {
      const breakpoints = [
        { key: "xl", minWidth: 1280 },
        { key: "lg", minWidth: 1024 },
        { key: "md", minWidth: 768 },
        { key: "sm", minWidth: 640 },
      ];

      let slidesToShow = slidesConfig.base ?? 1;

      for (const breakpoint of breakpoints) {
        if (
          window.innerWidth >= breakpoint.minWidth &&
          slidesConfig[breakpoint.key]
        ) {
          slidesToShow = slidesConfig[breakpoint.key];
          break;
        }
      }

      slidesToShow = Math.max(1, Number(slidesToShow) || 1);

      const widthPercent = 100 / slidesToShow;
      for (const item of items) {
        if (item instanceof HTMLElement) {
          item.style.flex = `0 0 ${widthPercent}%`;
          item.style.maxWidth = `${widthPercent}%`;
        }
      }
    };

    applySlidesPerView();
    window.addEventListener("resize", applySlidesPerView);

    // インデックスを循環させる
    const normalizeIndex = (i) => {
      const len = items.length;
      return ((i % len) + len) % len;
    };

    // スライドを更新
    const updateSlide = (withTransition = true) => {
      if (!withTransition) {
        track.classList.add("no-transition");
      }
      
      const offset = -active * 100 + (isDragging ? (dragDeltaX / track.offsetWidth) * 100 : 0);
      track.style.transform = `translateX(${offset}%)`;

      if (!withTransition) {
        requestAnimationFrame(() => {
          track.classList.remove("no-transition");
        });
      }
    };

    // インデックスを設定
    const setIndex = (newIndex) => {
      index = newIndex;
      active = normalizeIndex(index);
      updateSlide(true);
    };

    // 前へ
    const goPrev = () => {
      if (!isLooping && active === 0) return;
      setIndex(index - 1);
    };

    // 次へ
    const goNext = () => {
      if (!isLooping && active === items.length - 1) return;
      setIndex(index + 1);
    };

    // ボタン
    const prevBtn = root.querySelector("[data-carousel-prev]");
    const nextBtn = root.querySelector("[data-carousel-next]");

    prevBtn?.addEventListener("click", goPrev);
    nextBtn?.addEventListener("click", goNext);

    // ドラッグ/スワイプ
    const handlePointerDown = (e) => {
      isDragging = true;
      dragStartX = e.clientX || e.touches?.[0]?.clientX || 0;
      dragDeltaX = 0;
      track.style.cursor = "grabbing";
    };

    const handlePointerMove = (e) => {
      if (!isDragging) return;
      const currentX = e.clientX || e.touches?.[0]?.clientX || 0;
      dragDeltaX = currentX - dragStartX;
      
      // 最大±80pxに制限
      dragDeltaX = Math.max(-80, Math.min(80, dragDeltaX));
      
      updateSlide(false);
    };

    const handlePointerUp = () => {
      if (!isDragging) return;
      isDragging = false;
      track.style.cursor = "";

      const threshold = track.offsetWidth * 0.15;
      
      if (Math.abs(dragDeltaX) > threshold) {
        if (dragDeltaX > 0) {
          goPrev();
        } else {
          goNext();
        }
      } else {
        updateSlide(true);
      }
      
      dragDeltaX = 0;
    };

    track.addEventListener("pointerdown", handlePointerDown);
    track.addEventListener("pointermove", handlePointerMove);
    track.addEventListener("pointerup", handlePointerUp);
    track.addEventListener("pointercancel", handlePointerUp);
    track.addEventListener("touchstart", handlePointerDown, { passive: true });
    track.addEventListener("touchmove", handlePointerMove, { passive: true });
    track.addEventListener("touchend", handlePointerUp);

    // キーボード
    root.addEventListener("keydown", (e) => {
      if (e.key === "ArrowLeft") {
        e.preventDefault();
        goPrev();
      } else if (e.key === "ArrowRight") {
        e.preventDefault();
        goNext();
      }
    });

    // 自動再生
    let autoplayTimer = null;

    const startAutoplay = () => {
      if (!autoPlay || autoplayTimer) return;
      autoplayTimer = setInterval(() => {
        if (!isPaused) {
          goNext();
        }
      }, autoPlayInterval);
    };

    const stopAutoplay = () => {
      if (autoplayTimer) {
        clearInterval(autoplayTimer);
        autoplayTimer = null;
      }
    };

    if (autoPlay) {
      startAutoplay();
      root.addEventListener("mouseenter", () => { isPaused = true; });
      root.addEventListener("mouseleave", () => { isPaused = false; });
      root.addEventListener("focusin", () => { isPaused = true; });
      root.addEventListener("focusout", () => { isPaused = false; });
    }

    // 初期表示
    updateSlide(false);

    root.dataset.carouselInitialized = "true";
  };

  const init = () => {
    document
      .querySelectorAll("[data-carousel-root]")
      .forEach((root) => setupCarousel(root));
  };

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init, { once: true });
  } else {
    init();
  }
</script>