"use client";
import React from "react";
import Image from "next/image";
import Link from "next/link";
import { useState, useEffect, useRef } from "react";
import { allProducts, tfLoopItems } from "@/data/products";
import { Menu } from "@/services/Api";
import RenderTree from "./RenderTree";
import { filtermobile } from "@/services/Api";
import { debounce } from "@/helpers/debounce";
import { Allproducts } from "@/services/Api";

import { useRouter } from "next/navigation";

export default function SearchModal() {
	const inputRef = useRef(null);


	const router = useRouter();

	const handleSearchSubmit = (e) => {
	    e.preventDefault(); // აჩერებს გვერდის გადატვირთვას
	    const searchValue = inputRef?.current?.value;
	    
	    if (searchValue && searchValue.trim() !== "") {
	        // გადაიყვანს მომხმარებელს სასურველ ლინკზე
	        router.push(`/product-filter-all/${searchValue}`);
	    }
	};


	const [dropdata, setDropdata] = useState(false);
	const [nodata, setNodata] = useState(false);
	const [keywords, setKeywords] = useState([]);
	const [brands, setBrands] = useState([]);
	const [categories, setCategories] = useState([]);

	const [menu, setMenu] = useState([]);
	const [rproducts, setrProducts] = useState([]);
	const [randomProducts, setRandomProducts] = useState([]);

	function getRandomItems(array, count) {
		const shuffled = [...array].sort(() => 0.5 - Math.random());
		return [...shuffled].slice(0, count);
	}
	useEffect(() => {
		// Function to fetch data from the URL

		const fetchData = async () => {
			try {
				const result = await Menu();
				setMenu(result);

				const productData = await Allproducts(1);

				//setrProducts(productData);
				// Select 3 random products
				const random = getRandomItems(productData, 3);
				setRandomProducts(random);
			} catch (error) {
				console.error("Failed to fetch menu:", error);
			} finally {
			}
		};

		fetchData(); // Call the fetch function
	}, []);

	const fetchDataSearch = async (keyword) => {
		try {
			const products = await filtermobile(keyword);

			if (products) {
				const uniqueKeywords = [...new Set(products.keywords)];
                setKeywords(uniqueKeywords);
				setBrands(products.brands || []);
				setCategories(products.categories);
				setDropdata(true);
				setNodata(false);
			} else {
				setDropdata(false);
				setNodata(true);
			}
		} catch (error) {
			setDropdata(false);
			console.error("Failed to fetch products:", error);
		} finally {
			// Ensure loading is set to false in all cases
		}
	};

	const onSearch = debounce(({ target }) => {
		if (target.value.length > 0) {
			//setLoading(true);
			const timer = setTimeout(() => {
				fetchDataSearch(target.value);
			}, 500);
			return () => {
				clearTimeout(timer);
			};
		} else {
			setDropdata(false);
			setNodata(false);

			// if (state.filter) {
			// 	dispatch({
			// 		type: CLEAR_FILTER,
			// 	});
			// }
		}
	});

	//   const getLeafProducts = (node) => {
	//     const results = [];

	//     const recurse = (item) => {
	//         const children = item.children;

	//         if (!children || Object.keys(children).length === 0) {
	//             results.push({
	//                 id: item.id,
	//                 catalog: item.catalog,
	//                 title: item.title,
	//             });
	//         } else {
	//             Object.values(children).forEach(recurse);
	//         }
	//     };

	//     Object.values(menu).forEach(recurse);

	//     return results;
	// };

	// console.log(getLeafProducts(menu));

	return (
		<div className="offcanvas offcanvas-end canvas-search" id="canvasSearch">
			<div className="canvas-wrapper">
				<header className="tf-search-head">
					<div className="title fw-5 d-flex">
						<div className="close justify-content-end">
							<span
								className="icon-close icon-close-popup"
								data-bs-dismiss="offcanvas"
								aria-label="Close"
							/>
						</div>
					</div>
					<div className="tf-search-sticky">

    <form
        onSubmit={handleSearchSubmit} /* წინა ნაბიჯზე შექმნილი ფუნქცია */
        className="tf-mini-search-frm"
        style={{ position: 'relative', width: '100%' }} /* კონტეინერს ვადებთ relative-ს */
    >
        <fieldset className="text" style={{ marginBottom: 0, width: '100%' }}>
            <input
                autoComplete="off"
                className="form-control search-content-mobile-input mainfont"
                type="text"
                id="q1"
                name="searchTerm"
                ref={inputRef}
                onKeyUp={onSearch}
                placeholder="ძებნა"
                style={{ 
                    width: '100%', 
                    paddingRight: '50px', /* აუცილებელია, რომ ტექსტი ლუპის ქვეშ არ შევიდეს ბეჭდვისას */
                    paddingLeft: '15px'   /* მარცხნიდან ცოტა სივრცე, რადგან იქიდან ლუპა წავა */
                }}
            />
        </fieldset>
        
        {/* ახალი, კლიკებადი და იდეალურად გაცენტრილი ლუპა მარჯვნივ */}
        <button 
            type="submit" 
            style={{
                position: 'absolute',
                right: '15px',       /* მარჯვენა კიდიდან დაშორება */
                top: '25%',          /* ჩამოგვყავს შუაში */
                transform: 'translateY(-50%)', /* იდეალური ვერტიკალური ცენტრირება */
                width: '40px',
                height: '40px',
                left: 'auto',
                background: 'none',
                border: 'none',
                padding: '5px',
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                zIndex: 15          /* რომ ინპუტმა აიფონზეც ვერ გადაფაროს */
            }}
        >
            <i className="icon-search" style={{ fontSize: '20px', color: '#000' }} />
        </button>
    </form>

					</div>
				</header>
				<div className="canvas-body p-0">
					<div className="tf-search-content">
						<div className="tf-cart-hide-has-results">
							<div className="tf-col-quicklink">
								{!dropdata && (
									<div className="tf-search-content-title fw-5 mainfont mb-1">
										სწრაფი ბმულები
									</div>
								)}
								<div
									style={{
										display: "flex",
										flexWrap: "wrap",
										fontSize: "12px",
									}}
									className="mainfont"
								>
									{dropdata &&
										keywords?.map((item, index) => (
											<div
												key={index}
												style={{
													width: "50%",
													boxSizing: "border-box",
													padding: "3px",
												}}
											>
												<div
													style={{
														backgroundColor: "#f1f1f5",
														borderRadius: "10px",
														padding: "3px",
														textAlign: "center",
														whiteSpace: "nowrap", // 🚫 No line break
														overflow: "hidden", // Optional: hide overflow
														textOverflow: "ellipsis", // Optional: add "..." for long text
													}}
												>
													<Link href={`/product-filter-all/${item}`}>
														{item}
													</Link>
												</div>
											</div>
										))}
								</div>
								<ul className="tf-quicklink-list mt-1 mb-2">
									{!dropdata ? (
										<RenderTree data={menu} />
									) : (
										<>
											{categories?.map((item, index) => (
												<li
													key={index}
													className="tf-quicklink-item mainfont pt-1 pb-1"
												>
													<Link href={`/product-catalog/${item.id}`}>
														{item.title}
													</Link>
												</li>
											))}

											{brands?.map((item, index) => (
												<li
													key={index}
													className="tf-quicklink-item mainfont pt-1 pb-1"
												>
													<Link href={`/product-brand/${item.id}`}>
														{item.title}
													</Link>
												</li>
											  ))}
										
												<li
													className="tf-quicklink-item mainfont pt-1 pb-1"
												>
													<Link href={`/product-filter-all/${inputRef?.current?.value}`}>
														<div style={{ fontWeight: 'bold' }}>ყველა</div>
													</Link>
												</li>
												</>
									        )}

									{/* {getLeafProducts(menu).map((item) => (
                              <li key={item.id} className="tf-quicklink-item mainfont">
                                <a href={`/product-catalog/${item.catalog}`}>{item.title}</a>
                              </li>
                            ))} */}
								</ul>
							</div>
							<div className="tf-col-content">
								<div className="tf-search-content-title fw-5 mainfont">
									გჭირდებათ ინსპირაცია?
								</div>
								<div className="tf-search-hidden-inner">
									{randomProducts.map((product, index) => (
										<div className="tf-loop-item" key={index}>
											<div className="image">
												<Link href={`/product-detail/${product.id}`}>
													<img
														alt="mainimige"
														src={`https://backend.canshop.ge/${product?.mainimage1}`}
														width={720}
														height={1005}
													/>
												</Link>
											</div>
											<div className="content">
												<Link href={`/product-detail/${product?.id}`}>
													{product?.title}
												</Link>
												<div className="tf-product-info-price">
													<>
														<div className="compare-at-price">
															${product?.price}
														</div>
														<div className="price-on-sale fw-6">
															${product?.saleprice}
														</div>
													</>
												</div>
											</div>
										</div>
									))}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	);
}