import React, { useState, useEffect, useRef } from 'react';
import OffplanCard, { OffplanData } from './OffplanCard.tsx';
//import OffplanFilter from './OffplanFilter';
import PropertyForm from '../home/PropertyForm.tsx';
import NoPropertyListings from './NoPropertyListings.tsx';
import { Helmet } from 'react-helmet';
import PropertyCardLoading from './PropertyCardLoading.tsx';

// 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: OffplanData[];
    };
}

interface PropertyListProps {
    apiUrl: string;
}

interface OffPlanListFormData {
    sectorType: string;
    listingType: string;
    propertyType: string;
    community: string;
    developer: string;
    year: string;
    minPrice: number;
    maxPrice: number;
    bedrooms: string;
}
const OffPlanListings: React.FC<PropertyListProps> = ({ apiUrl }) => {
     
    const [loading, setLoading] = useState<boolean>(false);
    const [fetchedProperties, setFetchedProperties] = useState<OffplanData[]>([]);
    const [error, setError] = useState<string | null>(null);
    const params = new URLSearchParams(window.location.search); 
    const [formData, setFormData] = useState<OffPlanListFormData>({
        sectorType:  'offplan',
        propertyType: params.get('propertyType') || '',
        listingType: params.get('listingType') || '',
        community: params.get('community') || '',
        developer: params.get('developer') || '',
        year: params.get('year') || '',
        minPrice: Number(params.get('minPrice')) || 0,
        maxPrice: Number(params.get('maxPrice')) || 0,
        bedrooms: params.get('bedrooms') || '',  
    });
    const [currentPage, setCurrentPage] = useState<number>(1);
    const previousPageRef1 = useRef<number>(0);
    const [totalPages, setTotalPages] = useState<number>(1);
    const [title, setTitle] = useState<string>('Properties');
    const [propertyCount, setPropertyCount] = useState<number>(0);

    const formDataRef = useRef(formData);
    const previousFormDataRef = useRef<OffPlanListFormData>(formData);
    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,
                    minPrice: formData.minPrice.toString(),
                    maxPrice: formData.maxPrice.toString(),
                    bedrooms: formData.bedrooms,
                    community: formData.community,
                    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 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);
            }
        };
        
       
        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">
                <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">
                                    <PropertyForm origin="list"
                                        setFormData={setFormData}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {error && <p>{error}</p>}
            <Helmet>
                <title>{title}</title> {/* Dynamically set the title */}
            </Helmet>
            <div id="blog" className="blog list-project pt25 new-offplan-lst">
                <div className="container">
                 
                    
                        {loading ? (
                            <>
                            <div className="row">
                                <div className="col col-sm-12 p-my mb10">
                                    <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>
                            </div>
                            <div className="row gy-4 posts-list grid">
                                <PropertyCardLoading />
                                <PropertyCardLoading />
                                <PropertyCardLoading />
                                <PropertyCardLoading />
                            </div>
                              
                            </>
                        ) : (
                            <>
                                <div className="row">
                                    <div className="col col-sm-12 p-my mb10">
                                        <>
                                            {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 gy-4 posts-list grid">
                                    {fetchedProperties.length > 0 ? (
                                        fetchedProperties.map((property, index) => (
                                            <OffplanCard key={`${property.id}-${index}`} property={property} />
                                        ))
                                    ) : (
                                        <NoPropertyListings />
                                    )}
                                </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;

    const maxButtons = 5;
    let startPage = currentPage - Math.floor(maxButtons / 2);
    let endPage = currentPage + Math.floor(maxButtons / 2);

    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 OffPlanListings;
