<template>
	<div class="judges-container flex flex-col align-center">
		<div class="title" ref="judgesTitleRef">{{ $t('AwardsPage.panelOfJudges') }}</div>
		<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
		<div class="sub-title" ref="judgesSubTitleRef">{{ $t('AwardsPage.expertise') }}</div>
		<div class="judgement-list" ref="judgementListRef">
			<div
				class="judgement-item flex flex-col align-center"
				v-for="item in judgements"
				:key="item.name"
			>
				<img :src="item.picture" class="picture" />
				<div class="name">{{ $t(item.name) }}</div>
				<div class="desc">{{ $t(item.desc) }}</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, nextTick, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { gsap } from 'gsap'
import jae from '@/assets/images/award/jae.png'
import diego from '@/assets/images/award/diego.png'
import gregory from '@/assets/images/award/gregory.png'
import vincenzo from '@/assets/images/award/vincenzo.png'
import tim from '@/assets/images/award/tim.png'
import desmond from '@/assets/images/award/desmond.png'

const { t } = useI18n()

const judgements = [
	{
		picture: jae,
		name: 'Jae Hyuk Lim',
		desc: 'AwardsPage.judgesHat.jae'
	},
	{
		picture: diego,
		name: 'Diego Dultzin Lacoste',
		desc: 'AwardsPage.judgesHat.diego'
	},
	{
		picture: gregory,
		name: 'Gregory de la Hogue Moran',
		desc: 'AwardsPage.judgesHat.gregory'
	},
	{
		picture: vincenzo,
		name: 'Vincenzo La Torre',
		desc: 'AwardsPage.judgesHat.vincenzo'
	},
	{
		picture: tim,
		name: 'Tim Lim',
		desc: 'AwardsPage.judgesHat.tim'
	},
	{
		picture: desmond,
		name: 'Desmond Lim',
		desc: 'AwardsPage.judgesHat.desmond'
	}
]

const judgesTitleRef = ref<HTMLElement | null>(null)
const judgesSubTitleRef = ref<HTMLElement | null>(null)
const judgementListRef = ref<HTMLElement | null>(null)
const hasPlayedJudgementAnim = ref(false)
let judgementObserver: IntersectionObserver | null = null

const setupJudgementInitialState = () => {
	const titleEls = [judgesTitleRef.value, judgesSubTitleRef.value].filter(
		Boolean
	) as HTMLElement[]
	if (titleEls.length) {
		gsap.set(titleEls, {
			opacity: 0,
			scale: 0,
			transformOrigin: '50% 50%'
		})
	}
	const items =
		judgementListRef.value?.querySelectorAll<HTMLElement>('.judgement-item')
	if (items?.length) {
		gsap.set(items, {
			opacity: 0,
			clipPath: 'inset(0 0 100% 0)'
		})
	}
}

const playJudgementAnimation = () => {
	if (hasPlayedJudgementAnim.value) return
	const titleEls = [judgesTitleRef.value, judgesSubTitleRef.value].filter(
		Boolean
	) as HTMLElement[]
	const listEl = judgementListRef.value
	if (!titleEls.length || !listEl) return

	const items = Array.from(
		listEl.querySelectorAll<HTMLElement>('.judgement-item')
	)
	const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })

	tl.to(titleEls, {
		opacity: 1,
		scale: 1,
		duration: 0.4,
		ease: 'back.out(1.6)',
		stagger: 0.1
	})
	if (items.length) {
		const firstRow = items.slice(0, 3)
		const secondRow = items.slice(3)

		if (firstRow.length) {
			tl.to(
				firstRow,
				{
					opacity: 1,
					clipPath: 'inset(0% 0% 0% 0%)',
					duration: 0.45,
					stagger: 0.05
				},
				'-=0.2'
			)
		}

		if (secondRow.length) {
			tl.to(
				secondRow,
				{
					opacity: 1,
					clipPath: 'inset(0% 0% 0% 0%)',
					duration: 0.45,
					stagger: 0.05
				},
				'+=0.1'
			)
		}
	}

	hasPlayedJudgementAnim.value = true
	judgementObserver?.disconnect()
}

onMounted(() => {
	nextTick(() => {
		setupJudgementInitialState()
		if ('IntersectionObserver' in window) {
			judgementObserver = new IntersectionObserver(
				(entries) => {
					entries.forEach((entry) => {
						if (entry.isIntersecting) {
							playJudgementAnimation()
						}
					})
				},
				{ threshold: 0.3 }
			)
			if (judgementListRef.value) {
				judgementObserver.observe(judgementListRef.value)
			}
		} else {
			// Fallback: play immediately if IntersectionObserver unsupported
			playJudgementAnimation()
		}
	})
})

onBeforeUnmount(() => {
	judgementObserver?.disconnect()
})
</script>

<style scoped lang="less">
.judges-container {
	height: 147.4rem;
	background: url('@/assets/images/award/judges_bg.png') no-repeat;
	background-size: 100% 100%;
	padding-top: 12.8rem;
	.title {
		color: #232323;
		font-family: 'PoppinsBold';
		font-weight: 600;
		font-size: 4rem;
		margin-bottom: 2.4rem;
	}
	.logo {
		margin: 2.4rem 0 2.2rem;
	}
	.sub-title {
		color: #b10000;
		font-family: 'Arial';
		font-weight: 400;
		font-size: 3rem;
		margin-bottom: 12rem;
	}
	.judgement-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 23.22rem;
		row-gap: 8rem;
		padding: 0 25rem 0 26.6rem;
		div{
			text-align: center;
		}
		.judgement-item {
			overflow: hidden;
			.picture {
				width: 20.2rem;
				height: 26rem;
				border-radius: 0.8rem;
			}
			.name {
				margin: 3rem 0 2.4rem;
				color: #232323;
				font-family: 'PoppinsBold';
				font-weight: 600;
				font-size: 2.4rem;
			}
			.desc {
				color: #585858;
				font-family: 'Arial';
				font-weight: 400;
				font-size: 2rem;
				white-space: pre-line;
				text-align: center;
			}
		}
	}
}
</style>
