import React, { useState, useEffect, useRef, useMemo } from 'react';
import PropertyCard2, { PropertyData } from './PropertyCard2.tsx';
import NoPropertyListings from './NoPropertyListings.tsx';
/*import PropertyFilter from './PropertyFilter';*/
import PropertyFormNew from '../home/PropertyFormNew.tsx';
import { Helmet } from 'react-helmet';
import PropertyCardLoading from './PropertyCardLoading.tsx';
import { useLocation } from "react-router-dom";

// Types for API response and props
interface ApiResponse {
    data: {
        count: string;
        title: string;
        total_pages: number;
        current_page: number;
        next_page: number | null;
        prev_page: number | null;
        records: PropertyData[];
    };
}

interface PropertyListProps {
    apiUrl: string;
}

interface PropertyListFormData {
    sectorType: string;
    listingType: string;
    propertyType: string;
    community: string;
    developer: string;
    year: string;
    minPrice: number;
    maxPrice: number;
    bedrooms: string;
}

const PropertyList: React.FC<PropertyListProps> = ({ apiUrl }) => {
    const location = useLocation();
    const path = window.location.pathname;
    const [loading, setLoading] = useState<boolean>(false);
    const [sectorType, setSectorType] = useState<string>('');
    const [fetchedProperties, setFetchedProperties] = useState<PropertyData[]>([]);
    const [error, setError] = useState<string | null>(null);
    // const params = new URLSearchParams(window.location.search);
    const segments = useMemo(() => {
        const paths = location.pathname.split("/").filter(Boolean); // remove empty
        const params: Record<string, string> = {};

        paths.forEach((segment) => {
        const [key, ...valueParts] = segment.split("-");
        if (key && valueParts.length > 0) {
            params[key] = valueParts.join("-");
        }
        });

        return params;
    }, [location.pathname]);
    const [formData, setFormData] = useState<PropertyListFormData>({
        sectorType: path.startsWith('/for-rent') ? 'rent' : 'sale',
        propertyType: segments.propertyType || '',
        listingType: segments.listingType || '',  
        community: segments.community || '', 
        developer: segments.developer || '', 
        year: segments.year || '', 
        minPrice: Number(segments.minPrice) || 0,  
        maxPrice: Number(segments.maxPrice) || 0,  
        bedrooms: segments.bedrooms || '',  
        
    });
    //console.log(sectorType)
    const previousPageRef1 = useRef<number>(0);
    const [currentPage, setCurrentPage] = useState<number>(1);
    
    const [totalPages, setTotalPages] = useState<number>(1);
    const [title, setTitle] = useState<string>('Properties'); // Default title
    const [propertyCount, setPropertyCount] = useState<number>(0); // Track property count
    const formDataRef = useRef(formData);
    const previousFormDataRef = useRef<PropertyListFormData>(formData);
    
    useEffect(() => {
        
        if (path.startsWith('/for-sale')) {
            setSectorType('for-sale');
        } else if (path.startsWith('/for-rent')) {
            setSectorType('for-rent');
        }
    }, []);
 useEffect(() => {
        formDataRef.current = formData;
    }, [formData]);

    useEffect(() => {
            if (
                formData.sectorType !== previousFormDataRef.current.sectorType ||
                formData.propertyType !== previousFormDataRef.current.propertyType ||
                formData.listingType !== previousFormDataRef.current.listingType ||
                formData.minPrice !== previousFormDataRef.current.minPrice  ||
                formData.maxPrice !== previousFormDataRef.current.maxPrice  ||
                formData.community !== previousFormDataRef.current.community  ||
                formData.developer !== previousFormDataRef.current.developer  ||
                formData.year !== previousFormDataRef.current.year  ||
                formData.bedrooms !== previousFormDataRef.current.bedrooms 
            ) {
                fetchProperties();
                previousFormDataRef.current = formData;
            }
        }, [formData, currentPage]);

    
    const fetchProperties = async () => {
        
        setLoading(true);
        setError(null);

        try {
            const params = new URLSearchParams({
                sectorType: formData.sectorType,
                propertyType: formData.propertyType,
                listingType: formData.listingType,
                community: formData.community,
                minPrice: formData.minPrice.toString(),
                maxPrice: formData.maxPrice.toString(),                
                bedrooms: formData.bedrooms,
                developer: formData.developer,
                year: formData.year,
                page: currentPage.toString(),
            });
            const url = `${apiUrl}?${params.toString()}`;
            const response = await fetch(url);
            if (!response.ok) throw new Error('Failed to fetch properties');
            const data: ApiResponse = await response.json();

            setFetchedProperties(data.data.records || []);
            setTotalPages(data.data.total_pages);
            setTitle(data.data.title || 'Properties');
            setPropertyCount(Number(data.data.count) || 0); 
        } catch (error) {
            console.error('Error fetching properties:', error);
            setError('Failed to load properties. Please try again later.');
        } finally {
            setLoading(false);
        }
    };
    /*
    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
        
        const { name, value } = event.target;
        setFormData((prevData) => {
            const updatedFormData = {
                ...prevData,
                [name]: name === 'minPrice' || name === 'maxPrice' ? Number(value) : value,
            };
            console.log(updatedFormData.listingType)
            const params = new URLSearchParams({
                listingType: updatedFormData.listingType,
                propertyType: updatedFormData.propertyType,
                minPrice: updatedFormData.minPrice.toString(),
                maxPrice: updatedFormData.maxPrice.toString(),
                bedrooms: updatedFormData.bedrooms,
                page: '1', // Reset to page 1 when filters change
            });

            const basePath = (updatedFormData.sectorType ==  'for-sale') ? '/for-sale' : '/for-rent';
            const newUrl = `${basePath}?${params.toString()}`;

            window.history.pushState({}, '', newUrl);
           
            setCurrentPage((currentPage == 0) ? 1 : 0);
            return updatedFormData;
        });
    };
    */

    const handlePageChange = (page: number) => {
        
        if (page !== currentPage) {

            window.scrollTo({ top: 0, behavior: 'smooth' });
            const params = new URLSearchParams(window.location.search);
            params.set('page', page.toString());
            const newUrl = `${window.location.pathname}?${params.toString()}`;
            window.history.pushState({}, '', newUrl);
            console.log(page + 'currentPage' + currentPage)

            setCurrentPage(page);
        }
    };
    /*
    const handleButtonclick = (event: React.FormEvent<HTMLFormElement>) => {
        console.log(formData);
        event.preventDefault();
        //fetchProperties();
    };
    
    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        fetchProperties();
    };
    */
   
    useEffect(() => {
            if (currentPage !== previousPageRef1.current) {
                previousPageRef1.current = currentPage; // Update ref to track the current page
                fetchProperties(); // Trigger fetch if page has changed
            }
        }, [currentPage]);


    return (
         <div>
            <div className="section-dark page-banner list-banner-home for-listing-page only-property" id={sectorType} >
                <div className="full-block page-banner-image"></div>
                <div className="full-block overlay"></div>
                <div className="container">
                    <div className="row disp-table">
                        <div className="col-sm-12">
                            <div className="page-banner-content">
                                <div className="property-search property-search-full">
                                    {/*
                                    <PropertyFilter
                                        formData={formData}
                                        handleInputChange={handleInputChange}
                                        handleSubmit={handleSubmit}
                                        setFormData={setFormData} 
                                    />
                                     */}
                                    <PropertyFormNew origin="list" 
                                    setFormData={setFormData} 
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {error && <p>{error}</p>}
            <Helmet>
                <title>{title}</title> {/* Dynamically set the title */}
            </Helmet>
            <div className="section page-section listing-page-m pt20">
                <div className="container">
                    <div className="row">
                        <div className="col col-sm-9 p-my">
                           
                            <>
                                {fetchedProperties.length > 0 ? (
                                    <div className="fancy-title-hold text-left clearfix">
                                        <h2 className="site-h2 mb-0">{title}</h2>
                                        <p>{propertyCount} properties found</p>

                                    </div>
                                ) : (
                                     <div></div>
                                )}
                            </>
                          
                        </div>
                    </div>
                    <div className="row">
                        {loading ? (
                            <>
                            <div className="fancy-title-hold text-left clearfix">
                                    <div className="col-sm-9 ml5">
                                        <h2 className="site-h2 mb-0 skeleton-item" style={{ 'width': '150px', 'marginBottom': '15px', 'height': '30px' }}>&nbsp;</h2>
                                        <div className="m5"></div>
                                        <div className="skeleton-item" style={{ 'width': '100px', 'marginBottom': '15px','height':'15px' }}>&nbsp;</div>
                                    </div>

                                    </div>
                                    <div className="row">
                                        <PropertyCardLoading />
                                        <PropertyCardLoading />
                                        <PropertyCardLoading />
                                        <PropertyCardLoading />
                                    </div>
                            </>
                            
                        ) : (
                               
                        <>
                        <div className="parent-div" >
                            {fetchedProperties.length > 0 ? (
                                fetchedProperties.map((property, index) => (
                                    <div className="col-sm-3" >
                                    <PropertyCard2 key={`${property.id}-${index}`} property={property} />
                                    </div>
                                ))
                            ) : (
                                <NoPropertyListings  />
                            )}
                        </div>
                        </>
                        
                    )}
                    </div>
                </div>
            </div>
            <div className="clearfix"></div> 

            <Pagination
                currentPage={currentPage}
                totalPages={totalPages}
                onPageChange={handlePageChange}
            />
            <div className="clearfix"></div> 
        </div>
        
    );
};

interface PaginationProps {
    currentPage: number;
    totalPages: number;
    onPageChange: (page: number) => void;
}

const Pagination: React.FC<PaginationProps> = ({ currentPage, totalPages, onPageChange }) => {
    if (totalPages <= 1) return null;

    // Define maximum number of page buttons to show
    const maxButtons = 5;
    let startPage = currentPage - Math.floor(maxButtons / 2);
    let endPage = currentPage + Math.floor(maxButtons / 2);

    // Ensure that the range doesn't go out of bounds
    if (startPage < 1) {
        startPage = 1;
        endPage = Math.min(maxButtons, totalPages);
    } else if (endPage > totalPages) {
        endPage = totalPages;
        startPage = Math.max(1, totalPages - maxButtons + 1);
    }

    const pageNumbers = Array.from({ length: endPage - startPage + 1 }, (_, index) => startPage + index);

    return (
        <div className="custom-pagination">
            {currentPage > 1 && (
                <button onClick={() => onPageChange(currentPage - 1)}>&laquo;</button>
            )}

            {pageNumbers.map((page) => (
                <button
                    key={page}
                    className={page === currentPage ? 'active' : ''}
                    onClick={() => onPageChange(page)}
                >
                    {page}
                </button>
            ))}

            {currentPage < totalPages && (
                <button onClick={() => onPageChange(currentPage + 1)}>&raquo;</button>
            )}
        </div>
    );
};

export default PropertyList;