@php
    function js_safe($str) {
        $str = (string)$str;
        $str = str_replace(["\r", "\n"], ' ', $str);
        $str = str_replace("'", "\\'", $str);
        $str = str_replace('"', '\\"', $str);
        $str = preg_replace('/\s+/', ' ', $str);
        return trim($str);
    }
@endphp

<div
	x-data="{
		index: 0,
		slides: [
			@foreach($slides as $index => $slide)
				{
					type: '{{ js_safe($slide->type) }}',
					src: '{{ js_safe($slide->src) }}',
					alt: '{{ $index }}',
			
					@isset($slide->subtitle)
							subtitle: '{{ js_safe($slide->subtitle) }}',
					@endisset
			
					@isset($slide->title)
							title: '{{ js_safe($slide->title) }}',
					@endisset
			
					@isset($slide->text)
							text: '{{ js_safe($slide->text) }}',
					@endisset
			
					@if(isset($slide->button_label) && isset($slide->button_url))
							buttonLabel: '{{ js_safe($slide->button_label) }}',
							buttonUrl: '{{ js_safe($slide->button_url) }}',
					@endif
			},
			@endforeach
		],
		direction: 1,
		startX: 0,
		currentX: 0,
		isDragging: false,
		transitionEnabled: true,

		// Auto-advance state
		timerId: null,
		_currentVideo: null,
		_onEndedRef: null,
		subtitleVisible: false,
		titleVisible: false,
		textVisible: false,
		buttonVisible: false,
		textAnimDir: 'right',

		next() {
			this.textAnimDir = 'right'
			this.hideText()
			setTimeout(() => {
				this.direction = 1
				this.index = (this.index + 1) % this.slides.length
				this.textAnimDir = 'right'
				this.showText()
				this.setupAutoAdvance()
			}, 300)
		},
		prev() {
			this.textAnimDir = 'left'
			this.hideText()
			setTimeout(() => {
				this.direction = -1
				this.index = (this.index - 1 + this.slides.length) % this.slides.length
				this.textAnimDir = 'left'
				this.showText()
				this.setupAutoAdvance()
			}, 300)
		},
		goTo(i) {
			if (i === this.index) return
			this.textAnimDir = i > this.index ? 'right' : 'left'
			this.hideText()
			setTimeout(() => {
				this.direction = i > this.index ? 1 : -1
				this.index = i
				this.textAnimDir = i > this.index ? 'right' : 'left'
				this.showText()
				this.setupAutoAdvance()
			}, 300)
		},
		showText() {
			this.subtitleVisible = false
			this.titleVisible = false
			this.textVisible = false
			this.buttonVisible = false
			setTimeout(() => { this.subtitleVisible = true }, 200)
			setTimeout(() => { this.titleVisible = true }, 600)
			setTimeout(() => { this.textVisible = true }, 1000)
			setTimeout(() => { this.buttonVisible = true }, 1400)
		},
		hideText() {
			this.subtitleVisible = false
			this.titleVisible = false
			this.textVisible = false
			this.buttonVisible = false
		},

		onTouchStart(e) {
			this.startX = (e.touches ? e.touches[0].clientX : e.clientX) || 0
			this.currentX = this.startX
			this.isDragging = true
			this.transitionEnabled = false
			this.clearAuto()
		},
		onTouchMove(e) {
			if (!this.isDragging) return
			this.currentX = (e.touches ? e.touches[0].clientX : e.clientX) || this.currentX
		},
		onTouchEnd() {
			if (!this.isDragging) return
			const delta = this.currentX - this.startX
			this.isDragging = false
			this.transitionEnabled = true
			if (Math.abs(delta) > 50) {
				delta < 0 ? this.next() : this.prev()
			}
			this.startX = 0
			this.currentX = 0
			this.setupAutoAdvance()
		},

		get offset() {
			if (!this.isDragging) return -this.index * 100
			const delta = this.currentX - this.startX
			const w = this.$root.clientWidth || 1
			return -this.index * 100 + (delta / w) * 100
		},
		get trackStyle() {
			return {
				transform: `translateX(${this.offset}%)`,
				transition: this.transitionEnabled ? 'transform 400ms ease' : 'none'
			}
		},

		clearAuto() {
			if (this.timerId) {
				clearTimeout(this.timerId)
				this.timerId = null
			}
			if (this._currentVideo && this._onEndedRef) {
				this._currentVideo.removeEventListener('ended', this._onEndedRef)
			}
			this._currentVideo = null
			this._onEndedRef = null
		},
		setupAutoAdvance() {
			this.clearAuto()

			// Pause all videos
			Array.from(this.$root.querySelectorAll('video')).forEach(v => {
				try { v.pause() } catch (_) {}
			})

			const slideEls = this.$root.querySelectorAll('[data-slide-index]')
			const activeEl = slideEls[this.index]
			if (!activeEl) return

			const v = activeEl.querySelector('video')
			if (v) {
				v.loop = false
				v.muted = true
				try { v.currentTime = 0 } catch (_) {}
				v.play().catch(() => {})
				this._onEndedRef = () => { this.next() }
				v.addEventListener('ended', this._onEndedRef, { once: true })
				this._currentVideo = v
			} else {
				this.timerId = setTimeout(() => this.next(), 5000)
			}
		},
		init() {
			this.$nextTick(() => {
				this.showText()
				this.setupAutoAdvance()
				this.$watch('index', () => this.setupAutoAdvance())
			})
		}
	}"
	x-init="init()"
	class="relative overflow-hidden group"
	style="position: relative;"
>
	<div
		class="relative h-[80vh] min-h-[500px] md:h-[calc(100dvh-170px)] md:max-h-[655px] md:min-h-0 select-none"
		x-on:touchstart.passive="onTouchStart($event)"
		x-on:touchmove.passive="onTouchMove($event)"
		x-on:touchend="onTouchEnd()"
		x-on:mousedown="onTouchStart($event)"
		x-on:mousemove="onTouchMove($event)"
		x-on:mouseup="onTouchEnd()"
		x-on:mouseleave="onTouchEnd()"
	>
		<div class="flex h-full w-full" x-bind:style="trackStyle">
			<template x-for="(slide, i) in slides" :key="i">
				<div class="min-w-full h-full relative" x-bind:data-slide-index="i">
					<template x-if="i === index && slide.type === 'video'">
						<video
							x-bind:src="slide.src"
							preload="auto"
							autoplay
							:poster="slide.poster || ''"
							muted
							playsinline
							disablepictureinpicture
							disableRemotePlayback
							class="w-full h-full object-cover"
							x-ref="videoEl"
						></video>
					</template>
					<template x-if="slide.type === 'image'">
						<img
							x-bind:src="slide.src"
							x-bind:alt="slide.alt || ''"
							class="w-full h-full object-cover"
						/>
					</template>
				</div>
			</template>
		</div>

		<div class="hidden md:block absolute inset-y-0 left-0 w-32 lg:w-1/3 bg-gradient-to-r from-black to-transparent z-10 pointer-events-none"></div>
		<div class="hidden md:block absolute inset-y-0 right-0 w-32 lg:w-1/3 bg-gradient-to-l from-black to-transparent z-10 pointer-events-none"></div>

		<div class="md:hidden absolute bottom-0 left-0 right-0 h-full bg-gradient-to-t from-black to-transparent z-10 pointer-events-none"></div>

		
		<div 
			class="absolute inset-0 z-10 flex items-center transition-all duration-300"
			:class="{
				'opacity-100 translate-x-0': subtitleVisible || titleVisible || textVisible || buttonVisible,
				'opacity-0 translate-x-8': textAnimDir === 'right' && !subtitleVisible && !titleVisible && !textVisible && !buttonVisible,
				'opacity-0 -translate-x-8': textAnimDir === 'left' && !subtitleVisible && !titleVisible && !textVisible && !buttonVisible
			}"
		>
			<div class="w-full max-w-3xl px-6 md:ps-40">
				<template x-if="slides[index].subtitle">
					<p 
						class="text-sm md:text-2xl text-brand tracking-wider uppercase transition-all duration-300"
						:class="subtitleVisible ? 'opacity-100 translate-x-0' : 'opacity-0'"
						x-text="slides[index].subtitle"
					></p>
				</template>
				<template x-if="slides[index].title">
					<h2 
						class="text-3xl md:text-5xl uppercase tracking-wider mt-2 transition-all duration-300 leading-tight"
						:class="titleVisible ? 'opacity-100 translate-x-0' : 'opacity-0'"
						x-text="slides[index].title"
					></h2>
				</template>
				<template x-if="slides[index].text">
					<p 
						class="text-sm md:text-xl mt-4 md:mt-5 font-open-sans transition-all duration-300 line-clamp-4 md:line-clamp-none text-gray-200 md:text-white"
						:class="textVisible ? 'opacity-100 translate-x-0' : 'opacity-0'"
						x-text="slides[index].text"
					></p>
				</template>
				<template x-if="slides[index].buttonLabel && slides[index].buttonUrl">
					<div 
						class="transition-all duration-300"
						:class="buttonVisible ? 'opacity-100 translate-x-0' : 'opacity-0'"
					>
						@include('partials.button-brand', [
							'class' => 'mt-6 md:mt-10 text-sm md:text-base',
							'alpineContent' => 'slides[index].buttonLabel',
							'attrs' => ['x-bind:href' => 'slides[index].buttonUrl'],
							'icon' => 'arrow-top-right',
						])
					</div>
				</template>
			</div>
		</div>

		<button
			type="button"
			aria-label="Précédent"
			class="absolute left-0 top-0 bottom-0 z-20 px-10 cursor-pointer hidden md:block opacity-0 group-hover:opacity-100 transition-opacity duration-300"
			x-on:click="prev()"
		>
			@include('icons.naked-arrow-left', ['classes' => 'h-7'])
		</button>
		<button
			type="button"
			aria-label="Suivant"
			class="absolute right-0 top-0 bottom-0 z-20 px-10 cursor-pointer hidden md:block opacity-0 group-hover:opacity-100 transition-opacity duration-300"
			x-on:click="next()"
		>
			@include('icons.naked-arrow-right', ['classes' => 'h-7'])
		</button>

		<div class="absolute bottom-6 left-1/2 -translate-x-1/2 z-20 flex items-center gap-2 md:gap-2">
			<template x-for="(s, i) in slides" :key="'p'+i">
				<button
					type="button"
					class="transition-all duration-300 cursor-pointer rounded-full md:rounded-none"
					:class="i === index 
						? 'bg-brand w-6 h-1.5 md:w-15 md:h-1.5' 
						: 'bg-white/30 w-1.5 h-1.5 md:w-15 md:h-1.5 hover:bg-white/50'"
					x-on:click="goTo(i)"
					aria-label="Aller au slide"
				></button>
			</template>
		</div>
	</div>
</div>