'use client'
import Image from 'next/image'
import Link from 'next/link'
import { FC, useMemo } from 'react'

import { IBanner } from '@/types/landing.types'
import { useGetLanding } from '@/app/home/hooks/useHomeData'

const USE_PLACEHOLDER = false

const Banners3: FC = () => {

    const { data } = useGetLanding()

    const { desktopBanners, mobileBanners } = useMemo(() => {
        const allBanners = data?.results?.banners ?? []

        const groupByDisplayLocation = (displayLocation: IBanner['displayLocation']) =>
            allBanners.filter((banner) => banner.displayLocation === displayLocation)

        return {
            desktopBanners: groupByDisplayLocation('desktop'),
            mobileBanners: groupByDisplayLocation('mobile'),
        }
    }, [data?.results?.banners])

    const renderPlaceholder = () => (
        <div className='flex lg:flex-row flex-col gap-4'>
            {/* دو بنر کوچک - سمت راست (60% عرض در RTL) */}
            <div className='flex flex-col gap-4 lg:w-[60%] w-full'>
                <div
                    className='bg-gray-400 rounded-lg flex items-center justify-center w-full lg:flex-1 h-auto min-h-[200px]'
                >
                    <span className='text-white text-lg font-bold'>بنر 1</span>
                </div>
                <div
                    className='bg-blue-400 rounded-lg flex items-center justify-center w-full lg:flex-1 h-auto min-h-[200px]'
                >
                    <span className='text-white text-lg font-bold'>بنر 2</span>
                </div>
            </div>
            {/* بنر بزرگ - سمت چپ (40% عرض در RTL) */}
            <div className='lg:w-[40%] w-full lg:[aspect-ratio:1/1] h-auto'>
                <div
                    className='bg-purple-600 rounded-lg flex items-center justify-center w-full lg:h-full h-auto min-h-[200px]'
                >
                    <span className='text-white text-lg font-bold'>بنر 3 - بزرگ</span>
                </div>
            </div>
        </div>
    )

    const renderLayout = (banners: IBanner[]) => {
        const firstBanner = banners.find((banner) => banner.order === 1)
        const secondBanner = banners.find((banner) => banner.order === 2)
        const thirdBanner = banners.find((banner) => banner.order === 3)

        if (!firstBanner?.imageUrl || !secondBanner?.imageUrl || !thirdBanner?.imageUrl) return null

        return (
            <div className='flex lg:flex-row flex-col gap-4'>
                {/* دو بنر کوچک - سمت راست (60% عرض در RTL) */}
                <div className='flex flex-col gap-4 lg:w-[60%] w-full'>
                    <Link href={firstBanner.linkUrl || '#'} className='block lg:flex-1 h-auto'>
                        <Image
                            src={firstBanner.imageUrl}
                            height={400}
                            width={1000}
                            className='w-full lg:h-full h-auto rounded-lg object-cover'
                            alt={firstBanner.altText}
                        />
                    </Link>
                    <Link href={secondBanner.linkUrl || '#'} className='block lg:flex-1 h-auto'>
                        <Image
                            src={secondBanner.imageUrl}
                            height={400}
                            width={1000}
                            className='w-full lg:h-full h-auto rounded-lg object-cover'
                            alt={secondBanner.altText}
                        />
                    </Link>
                </div>
                {/* بنر بزرگ - سمت چپ (40% عرض در RTL) */}
                <div className='lg:w-[40%] w-full lg:[aspect-ratio:1/1] h-auto'>
                    <Link href={thirdBanner.linkUrl || '#'} className='block lg:h-full h-auto'>
                        <Image
                            src={thirdBanner.imageUrl}
                            height={1000}
                            width={1000}
                            className='w-full lg:h-full h-auto rounded-lg object-cover'
                            alt={thirdBanner.altText}
                        />
                    </Link>
                </div>
            </div>
        )
    }

    if (USE_PLACEHOLDER) {
        return (
            <>
                <div className='hidden lg:block'>{renderPlaceholder()}</div>
                <div className='lg:hidden'>{renderPlaceholder()}</div>
            </>
        )
    }

    return (
        <>
            {desktopBanners.length > 0 && (
                <div className='hidden lg:block'>{renderLayout(desktopBanners)}</div>
            )}
            {mobileBanners.length > 0 && (
                <div className='lg:hidden'>{renderLayout(mobileBanners)}</div>
            )}
        </>
    )
}

export default Banners3