'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 Banners4: 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 lg:h-[340px] h-auto'>
            {/* بنر 1 (Order 4) - بزرگ سمت راست - 34% عرض */}
            <div className='lg:w-[34%] w-full lg:h-full h-auto'>
                <div className='bg-pink-300 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'>بنر 1 (Order 4) - بزرگ راست</span>
                </div>
            </div>

            {/* دو بنر کوچک عمودی - 12% عرض */}
            <div className='flex flex-col gap-4 lg:w-[12%] w-full lg:h-full h-auto'>
                <div className='bg-gray-400 rounded-lg flex items-center justify-center w-full lg:flex-1 h-auto min-h-[100px]'>
                    <span className='text-white text-sm font-bold'>بنر 2 (Order 5)</span>
                </div>
                <div className='bg-green-400 rounded-lg flex items-center justify-center w-full lg:flex-1 h-auto min-h-[100px]'>
                    <span className='text-white text-sm font-bold'>بنر 3 (Order 6)</span>
                </div>
            </div>

            {/* بنر 4 (Order 7) - عریض سمت چپ - 54% عرض */}
            <div className='lg:w-[54%] w-full lg:h-full h-auto'>
                <div className='bg-teal-300 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'>بنر 4 (Order 7) - عریض چپ</span>
                </div>
            </div>
        </div>
    )

    const renderLayout = (banners: IBanner[]) => {
        const firstBanner = banners.find((banner) => banner.order === 4)
        const secondBanner = banners.find((banner) => banner.order === 5)
        const thirdBanner = banners.find((banner) => banner.order === 6)
        const fourthBanner = banners.find((banner) => banner.order === 7)

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

        return (
            <div className='flex lg:flex-row flex-col gap-4 lg:h-[340px] h-auto'>
                {/* بنر 1 (Order 4) - بزرگ سمت راست - 34% عرض */}
                <div className='lg:w-[34%] w-full lg:h-full h-auto'>
                    <Link href={firstBanner.linkUrl || '#'} className='block lg:h-full h-auto'>
                        <Image
                            src={firstBanner.imageUrl}
                            height={340}
                            width={340}
                            className='w-full lg:h-full h-auto rounded-lg object-cover'
                            alt={firstBanner.altText}
                        />
                    </Link>
                </div>

                {/* دو بنر کوچک عمودی - 12% عرض */}
                <div className='flex flex-col gap-4 lg:w-[12%] w-full lg:h-full h-auto'>
                    <Link href={secondBanner.linkUrl || '#'} className='block lg:flex-1 h-auto min-h-0'>
                        <Image
                            src={secondBanner.imageUrl}
                            height={160}
                            width={160}
                            className='w-full lg:h-full h-auto rounded-lg object-cover'
                            alt={secondBanner.altText}
                        />
                    </Link>
                    <Link href={thirdBanner.linkUrl || '#'} className='block lg:flex-1 h-auto min-h-0'>
                        <Image
                            src={thirdBanner.imageUrl}
                            height={160}
                            width={160}
                            className='w-full lg:h-full h-auto rounded-lg object-cover'
                            alt={thirdBanner.altText}
                        />
                    </Link>
                </div>

                {/* بنر 4 (Order 7) - عریض سمت چپ - 54% عرض */}
                <div className='lg:w-[54%] w-full lg:h-full h-auto'>
                    <Link href={fourthBanner.linkUrl || '#'} className='block lg:h-full h-auto'>
                        <Image
                            src={fourthBanner.imageUrl}
                            height={340}
                            width={800}
                            className='w-full lg:h-full h-auto rounded-lg object-cover'
                            alt={fourthBanner.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 Banners4