import './bootstrap';
import Alpine from 'alpinejs';
import AOS from 'aos';
import 'aos/dist/aos.css';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import {
	Blocks,
	BriefcaseBusiness,
	Building2,
	GraduationCap,
	HeartPulse,
	Mail,
	Megaphone,
	MonitorSmartphone,
	PenTool,
	Phone,
	Rocket,
	ShoppingBag,
	Smartphone,
	Sparkles,
	createIcons,
} from 'lucide';

window.Alpine = Alpine;

const lucideIcons = {
	blocks: Blocks,
	'briefcase-business': BriefcaseBusiness,
	'building-2': Building2,
	'graduation-cap': GraduationCap,
	'heart-pulse': HeartPulse,
	mail: Mail,
	megaphone: Megaphone,
	'monitor-smartphone': MonitorSmartphone,
	'pen-tool': PenTool,
	phone: Phone,
	rocket: Rocket,
	'shopping-bag': ShoppingBag,
	smartphone: Smartphone,
	sparkles: Sparkles,
};

gsap.registerPlugin(ScrollTrigger);

const savedTheme = localStorage.getItem('nivex-theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const initialTheme = savedTheme || (prefersDark ? 'dark' : 'light');

document.documentElement.classList.toggle('dark', initialTheme === 'dark');

Alpine.store('theme', {
	value: initialTheme,
	toggle() {
		this.value = this.value === 'dark' ? 'light' : 'dark';
		document.documentElement.classList.toggle('dark', this.value === 'dark');
		localStorage.setItem('nivex-theme', this.value);
	},
});

Alpine.data('testimonialSlider', (items = []) => ({
	active: 0,
	items,
	next() {
		this.active = (this.active + 1) % this.items.length;
	},
	prev() {
		this.active = this.active === 0 ? this.items.length - 1 : this.active - 1;
	},
}));

Alpine.data('contactForm', () => ({
	loading: false,
	submit() {
		this.loading = true;
		this.$el.submit();
	},
}));

Alpine.start();

window.addEventListener('DOMContentLoaded', () => {
	AOS.init({
		once: true,
		duration: 800,
		easing: 'ease-out-cubic',
		offset: 80,
	});

	createIcons({ icons: lucideIcons });

	document.querySelectorAll('[data-hero-orb]').forEach((orb, index) => {
		gsap.to(orb, {
			y: index % 2 === 0 ? 40 : -30,
			x: index % 2 === 0 ? -20 : 20,
			duration: 5 + index,
			repeat: -1,
			yoyo: true,
			ease: 'sine.inOut',
		});
	});

	document.querySelectorAll('[data-reveal-line]').forEach((element) => {
		gsap.fromTo(
			element,
			{ scaleX: 0, transformOrigin: 'left center' },
			{
				scaleX: 1,
				duration: 1.2,
				ease: 'power3.out',
				scrollTrigger: {
					trigger: element,
					start: 'top 85%',
				},
			},
		);
	});

	document.querySelectorAll('[data-horizontal-track]').forEach((track) => {
		const parent = track.parentElement;

		if (!parent) {
			return;
		}

		gsap.to(track, {
			x: () => -(track.scrollWidth - parent.clientWidth),
			ease: 'none',
			scrollTrigger: {
				trigger: parent,
				start: 'top center',
				end: () => `+=${track.scrollWidth}`,
				scrub: true,
			},
		});
	});

	document.querySelectorAll('[data-stack-card]').forEach((card, index) => {
		gsap.from(card, {
			opacity: 0,
			y: 50,
			rotate: index % 2 === 0 ? -2 : 2,
			duration: 0.9,
			ease: 'power3.out',
			scrollTrigger: {
				trigger: card,
				start: 'top 88%',
			},
		});
	});
});
