---
import { Image } from 'astro:assets';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { Button } from './ui/button';

// Import all images
import dashboardDesktop from '../../public/assets/dashboard.png';
import dashboardMobile from '../../public/assets/dashboard_mobile.png';
import organisationDesktop from '../../public/assets/organisation.png';
import organisationMobile from '../../public/assets/organisation_mobile.png';
import repositoriesDesktop from '../../public/assets/repositories.png';
import repositoriesMobile from '../../public/assets/repositories_mobile.png';
import configurationDesktop from '../../public/assets/configuration.png';
import configurationMobile from '../../public/assets/configuration_mobile.png';
import activityDesktop from '../../public/assets/activity.png';
import activityMobile from '../../public/assets/activity_mobile.png';

const screenshots = [
  {
    title: "Dashboard Overview",
    description: "Monitor all your mirrored repositories in one place",
    desktop: dashboardDesktop,
    mobile: dashboardMobile
  },
  {
    title: "Organization Management",
    description: "Easily manage and sync entire GitHub organizations",
    desktop: organisationDesktop,
    mobile: organisationMobile
  },
  {
    title: "Repository Control",
    description: "Fine-grained control over individual repository mirrors",
    desktop: repositoriesDesktop,
    mobile: repositoriesMobile
  },
  {
    title: "Configuration",
    description: "Simple and intuitive configuration interface",
    desktop: configurationDesktop,
    mobile: configurationMobile
  },
  {
    title: "Activity Monitoring",
    description: "Track sync progress and view detailed logs",
    desktop: activityDesktop,
    mobile: activityMobile
  }
];
---

<section id="screenshots" class="py-16 sm:py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-muted/30 via-primary/5 to-muted/30">
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-8 sm:mb-16">
      <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight">
        See It In Action
      </h2>
      <p class="mt-4 text-base sm:text-lg text-muted-foreground max-w-2xl mx-auto px-4">
        A clean, intuitive interface designed for efficiency and ease of use
      </p>
    </div>

    <div class="relative max-w-5xl mx-auto">
      <!-- Screenshot viewer -->
      <div id="screenshot-container" class="relative group">
        <div class="aspect-[9/16] sm:aspect-[16/10] overflow-hidden rounded-lg sm:rounded-2xl bg-card border shadow-lg">
          {screenshots.map((screenshot, index) => (
            <picture data-index={index} class={index === 0 ? 'block' : 'hidden'}>
              <source media="(max-width: 640px)" srcset={screenshot.mobile.src} />
              <Image
                src={screenshot.desktop}
                alt={screenshot.title}
                class="w-full h-full object-cover object-top"
                draggable={false}
                loading={index === 0 ? 'eager' : 'lazy'}
              />
            </picture>
          ))}
        </div>

        <!-- Navigation buttons -->
        <Button
          variant="outline"
          size="icon"
          className="screenshot-nav-prev absolute left-2 sm:left-4 top-1/2 -translate-y-1/2 opacity-0 sm:opacity-100 group-hover:opacity-100 transition-opacity hidden sm:flex"
          aria-label="Previous screenshot"
        >
          <ChevronLeft className="h-4 w-4" />
        </Button>
        <Button
          variant="outline"
          size="icon"
          className="screenshot-nav-next absolute right-2 sm:right-4 top-1/2 -translate-y-1/2 opacity-0 sm:opacity-100 group-hover:opacity-100 transition-opacity hidden sm:flex"
          aria-label="Next screenshot"
        >
          <ChevronRight className="h-4 w-4" />
        </Button>
      </div>

      <!-- Screenshot info -->
      <div class="mt-6 sm:mt-8 text-center">
        <h3 id="screenshot-title" class="text-lg sm:text-xl font-semibold">{screenshots[0].title}</h3>
        <p id="screenshot-description" class="mt-2 text-sm sm:text-base text-muted-foreground">{screenshots[0].description}</p>
      </div>

      <!-- Dots indicator -->
      <div class="mt-6 sm:mt-8 flex justify-center gap-2">
        {screenshots.map((_, index) => (
          <button
            data-index={index}
            class={`screenshot-dot transition-all duration-300 ${
              index === 0 
                ? 'w-8 h-2 bg-primary rounded-full' 
                : 'w-2 h-2 bg-muted-foreground/30 hover:bg-muted-foreground/50 rounded-full'
            }`}
            aria-label={`Go to screenshot ${index + 1}`}
          />
        ))}
      </div>

      <!-- Mobile swipe hint -->
      <p class="mt-4 text-xs text-muted-foreground text-center sm:hidden">
        Swipe left or right to navigate
      </p>
    </div>

    <!-- Thumbnail grid -->
    <div class="hidden lg:grid grid-cols-5 gap-4 mt-12 px-8">
      {screenshots.map((screenshot, index) => (
        <button
          data-index={index}
          class={`screenshot-thumb relative overflow-hidden rounded-lg transition-all duration-300 ${
            index === 0 
              ? 'ring-2 ring-primary shadow-lg scale-105' 
              : 'opacity-60 hover:opacity-100'
          }`}
        >
          <Image
            src={screenshot.desktop}
            alt={screenshot.title}
            class="w-full h-full object-cover"
            loading="lazy"
          />
        </button>
      ))}
    </div>
  </div>
</section>

<script define:vars={{ screenshots }}>
  let currentIndex = 0;
  let touchStart = 0;
  let touchEnd = 0;
  const minSwipeDistance = 50;

  const container = document.getElementById('screenshot-container');
  const pictures = container.querySelectorAll('picture');
  const dots = document.querySelectorAll('.screenshot-dot');
  const thumbs = document.querySelectorAll('.screenshot-thumb');
  const titleEl = document.getElementById('screenshot-title');
  const descriptionEl = document.getElementById('screenshot-description');
  const prevBtn = container.querySelector('.screenshot-nav-prev');
  const nextBtn = container.querySelector('.screenshot-nav-next');

  function updateView(newIndex) {
    // Hide current, show new
    pictures[currentIndex].classList.add('hidden');
    pictures[newIndex].classList.remove('hidden');

    // Update dots
    dots[currentIndex].classList.remove('w-8', 'h-2', 'bg-primary');
    dots[currentIndex].classList.add('w-2', 'h-2', 'bg-muted-foreground/30');
    dots[newIndex].classList.remove('w-2', 'h-2', 'bg-muted-foreground/30');
    dots[newIndex].classList.add('w-8', 'h-2', 'bg-primary');

    // Update thumbnails
    if (thumbs.length > 0) {
      thumbs[currentIndex].classList.remove('ring-2', 'ring-primary', 'shadow-lg', 'scale-105');
      thumbs[currentIndex].classList.add('opacity-60');
      thumbs[newIndex].classList.remove('opacity-60');
      thumbs[newIndex].classList.add('ring-2', 'ring-primary', 'shadow-lg', 'scale-105');
    }

    // Update text
    titleEl.textContent = screenshots[newIndex].title;
    descriptionEl.textContent = screenshots[newIndex].description;

    currentIndex = newIndex;
  }

  function goToPrevious() {
    const newIndex = currentIndex === 0 ? screenshots.length - 1 : currentIndex - 1;
    updateView(newIndex);
  }

  function goToNext() {
    const newIndex = (currentIndex + 1) % screenshots.length;
    updateView(newIndex);
  }

  // Touch handling
  container.addEventListener('touchstart', (e) => {
    touchEnd = 0;
    touchStart = e.targetTouches[0].clientX;
  });

  container.addEventListener('touchmove', (e) => {
    touchEnd = e.targetTouches[0].clientX;
  });

  container.addEventListener('touchend', () => {
    if (!touchStart || !touchEnd) return;
    
    const distance = touchStart - touchEnd;
    const isLeftSwipe = distance > minSwipeDistance;
    const isRightSwipe = distance < -minSwipeDistance;

    if (isLeftSwipe && currentIndex < screenshots.length - 1) {
      goToNext();
    }
    if (isRightSwipe && currentIndex > 0) {
      goToPrevious();
    }
  });

  // Button navigation
  prevBtn?.addEventListener('click', goToPrevious);
  nextBtn?.addEventListener('click', goToNext);

  // Dot navigation
  dots.forEach((dot, index) => {
    dot.addEventListener('click', () => updateView(index));
  });

  // Thumbnail navigation
  thumbs.forEach((thumb, index) => {
    thumb.addEventListener('click', () => updateView(index));
  });

  // Keyboard navigation
  window.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowLeft') goToPrevious();
    if (e.key === 'ArrowRight') goToNext();
  });
</script>