'use client';

import localFont from "next/font/local";
import Image from "next/image";
import { useState } from "react";

const figtree = localFont({
    src: [
        {
            path: '../../../public/Fonts/figtree/figtree.ttf',
        },
    ],
})

interface Property {
    id: number;
    image: string;
    city: string;
    price: number;
    title: string;
    rating: number;
}

// Sample property data - replace with actual API data
const allProperties: Property[] = Array.from({ length: 120 }, (_, i) => ({
    id: i + 1,
    image: "/hotel-banner.png",
    city: ["ISLAMABAD, PAKISTAN", "KARACHI, PAKISTAN", "LAHORE, PAKISTAN"][i % 3],
    price: Math.floor(Math.random() * 10000) + 8000,
    title: [
        "Luxury hotel with modern amenities",
        "Cozy apartment in city center",
        "Spacious villa with garden view",
        "Modern suite near landmark",
        "Beachfront property with pool",
        "Heritage hotel with traditional charm",
        "Contemporary loft in downtown",
        "Family-friendly resort"
    ][i % 8],
    rating: Number((4.5 + Math.random() * 0.5).toFixed(1))
}));

const PROPERTIES_PER_PAGE = 40; // 10 rows × 4 columns

function Results() {
    const [currentPage, setCurrentPage] = useState(1);
    
    const totalPages = Math.ceil(allProperties.length / PROPERTIES_PER_PAGE);
    const startIndex = (currentPage - 1) * PROPERTIES_PER_PAGE;
    const endIndex = startIndex + PROPERTIES_PER_PAGE;
    const currentProperties = allProperties.slice(startIndex, endIndex);

    const goToPage = (page: number) => {
        setCurrentPage(page);
        window.scrollTo({ top: 0, behavior: 'smooth' });
    };

    const goToPreviousPage = () => {
        if (currentPage > 1) {
            goToPage(currentPage - 1);
        }
    };

    const goToNextPage = () => {
        if (currentPage < totalPages) {
            goToPage(currentPage + 1);
        }
    };

    // Generate page numbers to display
    const getPageNumbers = () => {
        const pages = [];
        const maxPagesToShow = 5;
        
        if (totalPages <= maxPagesToShow) {
            for (let i = 1; i <= totalPages; i++) {
                pages.push(i);
            }
        } else {
            if (currentPage <= 3) {
                for (let i = 1; i <= 4; i++) {
                    pages.push(i);
                }
                pages.push('...');
                pages.push(totalPages);
            } else if (currentPage >= totalPages - 2) {
                pages.push(1);
                pages.push('...');
                for (let i = totalPages - 3; i <= totalPages; i++) {
                    pages.push(i);
                }
            } else {
                pages.push(1);
                pages.push('...');
                pages.push(currentPage - 1);
                pages.push(currentPage);
                pages.push(currentPage + 1);
                pages.push('...');
                pages.push(totalPages);
            }
        }
        
        return pages;
    };

    return (
        <div className="w-full py-16 px-8 bg-white">
            <div className="max-w-[95%] mx-auto">

                {/* Property Cards Grid */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
                    {currentProperties.map((property) => (
                        <div
                            key={property.id}
                            className="group cursor-pointer border border-black border-2 overflow-hidden"
                        >
                            {/* Image Container */}
                            <div className="relative aspect-[16/14] overflow-hidden">
                                <Image
                                    src={property.image}
                                    alt={property.title}
                                    fill
                                    className="object-cover group-hover:scale-105 transition-transform duration-300"
                                />
                            </div>

                            {/* Property Details */}
                            <div className="space-y-1 p-4">
                                {/* Location */}
                                <div className="flex items-center justify-between">
                                    <p className={`${figtree.className} text-xs font-semibold text-gray-700 tracking-wider`}>
                                        {property.city}
                                    </p>
                                    <div className="flex items-center gap-1">
                                        <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                        </svg>
                                        <span className={`${figtree.className} text-sm font-medium`}>
                                            {property.rating}
                                        </span>
                                    </div>
                                </div>

                                {/* Title */}
                                <h3 className={`${figtree.className} text-base font-normal text-gray-900`}>
                                    {property.title}
                                </h3>

                                {/* Price */}
                                <p className={`${figtree.className} text-base`}>
                                    <span className="font-semibold">₨{property.price.toLocaleString()}</span>
                                    <span className="text-gray-600"> night</span>
                                </p>
                            </div>
                        </div>
                    ))}
                </div>

                {/* Pagination Controls */}
                <div className="flex flex-col items-center gap-6">
                    {/* Page Numbers */}
                    <div className="flex items-center gap-2">
                        {/* Previous Button */}
                        <button
                            onClick={goToPreviousPage}
                            disabled={currentPage === 1}
                            className={`${figtree.className} px-4 py-2 border-2 border-black transition-all duration-300 ${
                                currentPage === 1
                                    ? 'bg-gray-200 text-gray-400 cursor-not-allowed'
                                    : 'bg-white text-black hover:bg-[#E7FE78]'
                            }`}
                        >
                            Previous
                        </button>

                        {/* Page Numbers */}
                        {getPageNumbers().map((page, index) => (
                            typeof page === 'number' ? (
                                <button
                                    key={index}
                                    onClick={() => goToPage(page)}
                                    className={`${figtree.className} w-10 h-10 border-2 border-black transition-all duration-300 ${
                                        currentPage === page
                                            ? 'bg-[#E7FE78] text-black font-bold'
                                            : 'bg-white text-black hover:bg-[#E7FE78]'
                                    }`}
                                >
                                    {page}
                                </button>
                            ) : (
                                <span key={index} className={`${figtree.className} px-2 text-gray-500`}>
                                    {page}
                                </span>
                            )
                        ))}

                        {/* Next Button */}
                        <button
                            onClick={goToNextPage}
                            disabled={currentPage === totalPages}
                            className={`${figtree.className} px-4 py-2 border-2 border-black transition-all duration-300 ${
                                currentPage === totalPages
                                    ? 'bg-gray-200 text-gray-400 cursor-not-allowed'
                                    : 'bg-white text-black hover:bg-[#E7FE78]'
                            }`}
                        >
                            Next
                        </button>
                    </div>

                    {/* Page Info */}
                    <p className={`${figtree.className} text-sm text-gray-600`}>
                        Page {currentPage} of {totalPages}
                    </p>
                </div>
            </div>
        </div>
    )
}   

export default Results;
