import { useCallback, useEffect, useRef, useState } from 'react'

import { useTranslation } from 'react-i18next'

import appWallBg from '@/assets/images/home/app-wall-bg.png'
import nomoLogoIcon from '@/assets/images/home/nomo-logo-icon.svg'
import logoFacebook from '@/assets/images/home/brand-logos/logo-facebook.svg'
import logoInstagram from '@/assets/images/home/brand-logos/logo-instagram.svg'
import logoMax from '@/assets/images/home/brand-logos/logo-max.svg'
import logoNetflix from '@/assets/images/home/brand-logos/logo-netflix.svg'
import logoPrimeVideo from '@/assets/images/home/brand-logos/logo-prime-video.svg'
import logoSpotify from '@/assets/images/home/brand-logos/logo-spotify.svg'
import logoTiktok from '@/assets/images/home/brand-logos/logo-tiktok.svg'
import logoTwitch from '@/assets/images/home/brand-logos/logo-twitch.svg'
import logoYoutube from '@/assets/images/home/brand-logos/logo-youtube.svg'

import Wrapper from './Wrapper'

const BRAND_LOGOS = [
    { src: logoTiktok, alt: 'TikTok', className: 'h-[25px] lg:h-[92px]' },
    { src: logoFacebook, alt: 'Facebook', className: 'h-[25px] lg:h-[92px]' },
    { src: logoYoutube, alt: 'YouTube', className: 'h-[20px] lg:h-[75px]' },
    { src: logoInstagram, alt: 'Instagram', className: 'h-[25px] lg:h-[92px]' },
    { src: logoNetflix, alt: 'Netflix', className: 'h-[13px] lg:h-[50px]' },
    { src: logoPrimeVideo, alt: 'Prime Video', className: 'h-[19px] lg:h-[70px]' },
    { src: logoMax, alt: 'Max', className: 'h-[13px] lg:h-[50px]' },
    { src: logoSpotify, alt: 'Spotify', className: 'h-[19px] lg:h-[69px]' },
    { src: logoTwitch, alt: 'Twitch', className: 'h-[19px] lg:h-[70px]' },
] as const

const SCROLL_SPEED = 60

export function AppAccess() {
    const { t } = useTranslation()
    const trackRef = useRef<HTMLDivElement>(null)
    const [scrollStyle, setScrollStyle] = useState<React.CSSProperties>({})

    const measure = useCallback(() => {
        const track = trackRef.current
        if (!track) return
        const firstSet = track.children[0] as HTMLElement | undefined
        if (!firstSet) return
        const w = firstSet.offsetWidth
        if (w > 0) {
            setScrollStyle({
                '--scroll-distance': `-${w}px`,
                animationDuration: `${w / SCROLL_SPEED}s`,
            } as React.CSSProperties)
        }
    }, [])

    useEffect(() => {
        const track = trackRef.current
        if (!track) return
        measure()
        const ro = new ResizeObserver(measure)
        ro.observe(track)
        return () => ro.disconnect()
    }, [measure])

    return (
        <section className="w-full py-10 lg:py-16">
            <Wrapper className="flex flex-col items-center gap-6">
                {/* Title + Subtitle */}
                <div className="flex flex-col items-center gap-4 text-center px-5 lg:px-0">
                    <h2 className="text-2xl lg:text-[32px] font-semibold italic text-white leading-[1.667] lg:leading-[0.94] tracking-[-0.019em] lg:tracking-[-0.014em] font-[REM]">
                        {t('pages.home.appAccess.title')}
                    </h2>
                    <p className="text-sm lg:text-base font-normal text-white/60 leading-[1.5]">
                        {t('pages.home.appAccess.subtitle')}
                    </p>
                </div>

                {/* Background wall with NOMO branding */}
                <div className="relative w-full max-w-[1280px] h-[115px] lg:h-[420px] overflow-hidden">
                    <img
                        src={appWallBg}
                        alt=""
                        className="absolute inset-0 w-full h-[197px] lg:h-[720px] object-cover opacity-50"
                    />
                    <div className="absolute inset-0 bg-[radial-gradient(55%_55%_at_50%_50%,rgb(1_2_3/0)_0%,rgb(1_2_3/1)_100%)]" />
                    <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 lg:gap-6">
                        <img
                            src={nomoLogoIcon}
                            alt="NOMO"
                            className="w-[26px] h-[26px] lg:w-[96px] lg:h-[96px]"
                        />
                        <span className="text-lg lg:text-[72px] font-bold italic text-white leading-none font-[REM] tracking-[0.004em]">
                            NOMO VPN
                        </span>
                    </div>
                </div>

                {/* Scrolling brand logos */}
                <div className="relative w-full max-w-[1280px] overflow-hidden">
                    <div className="absolute inset-0 z-10 bg-[linear-gradient(90deg,rgb(1_2_3)_0%,transparent_50%,rgb(1_2_3)_100%)]" />
                    <div
                        ref={trackRef}
                        className="flex w-max animate-scroll-left"
                        style={scrollStyle}
                    >
                        {[0, 1].map((setIndex) => (
                            <div
                                key={setIndex}
                                className="flex items-center gap-4 lg:gap-[60px] py-3 lg:py-[46px] shrink-0 pe-4 lg:pe-[60px]"
                            >
                                {BRAND_LOGOS.map((logo) => (
                                    <img
                                        key={`${logo.alt}-${setIndex}`}
                                        src={logo.src}
                                        alt={logo.alt}
                                        className={`${logo.className} w-auto shrink-0 object-contain`}
                                    />
                                ))}
                            </div>
                        ))}
                    </div>
                </div>
            </Wrapper>
        </section>
    )
}
