'use client'
import Input from '@/components/Input'
import { SearchNormal1 } from 'iconsax-react'
import { FC, useState } from 'react'
import { useProductSearch } from '@/app/products/hooks/useProductsData'
import { useRouter } from 'next/navigation'
import Image from 'next/image'

const MobileSearch: FC = () => {
    const [isSearchOpen, setIsSearchOpen] = useState(false)
    const [searchQuery, setSearchQuery] = useState('')
    const router = useRouter()

    const { data: searchResults, isLoading } = useProductSearch(searchQuery)

    const handleSearch = (value: string) => {
        setSearchQuery(value)
    }

    const handleClose = () => {
        setIsSearchOpen(false)
        setSearchQuery('')
    }

    const handleProductClick = (url: string) => {
        router.push(url)
        handleClose()
    }

    if (isSearchOpen) {
        return (
            <div className='fixed inset-0 bg-white z-50 flex flex-col'>
                <div className='flex items-center gap-2 px-4 py-4 border-b border-gray-200'>
                    <Input
                        className='w-full'
                        variant='search'
                        placeholder='جستجو'
                        autoFocus
                        value={searchQuery}
                        onChange={(e) => handleSearch(e.target.value)}
                    />
                    <button
                        onClick={handleClose}
                        className='text-sm text-gray-600 whitespace-nowrap px-2'
                    >
                        لغو
                    </button>
                </div>

                <div className='flex-1 overflow-y-auto'>
                    {searchQuery.length > 0 && (
                        <>
                            {isLoading ? (
                                <div className='p-4 text-center text-gray-500'>
                                    در حال جستجو...
                                </div>
                            ) : searchResults?.results?.products?.length ? (
                                <div className='py-2'>
                                    {searchResults.results.products.map((product) => (
                                        <div
                                            key={product._id}
                                            onClick={() => handleProductClick(product.url)}
                                            className='flex items-center gap-3 px-4 py-3 border-b border-gray-100 active:bg-gray-50'
                                        >
                                            <div className='w-[60px] h-[60px] flex-shrink-0'>
                                                <Image
                                                    src={product.imagesUrl.cover}
                                                    alt={product.title_fa}
                                                    width={60}
                                                    height={60}
                                                    className='rounded-lg object-cover w-full h-full'
                                                    unoptimized
                                                />
                                            </div>
                                            <div className='flex-1 min-w-0'>
                                                <h3 className='text-sm font-medium text-gray-900 line-clamp-2'>
                                                    {product.title_fa}
                                                </h3>
                                                <p className='text-xs text-gray-500 truncate mt-1'>
                                                    {product.model}
                                                </p>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            ) : (
                                <div className='p-4 text-center text-gray-500'>
                                    محصولی یافت نشد
                                </div>
                            )}
                        </>
                    )}
                </div>
            </div>
        )
    }

    return (
        <button
            onClick={() => setIsSearchOpen(true)}
            className='p-2 rounded-lg hover:bg-gray-50'
        >
            <SearchNormal1 size={24} color='#8C90A3' />
        </button>
    )
}

export default MobileSearch