"use client";

import { useState } from "react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import InnerBanner from "@/components/InnerBanner";
import PropertyFilters, { FilterState } from "@/components/PropertyFilters";
import PropertyCard from "@/components/PropertyCard";
import { properties } from "@/data/properties";

export default function PropertiesClient() {
    const [filteredProperties, setFilteredProperties] = useState(properties);

    const handleFilterChange = (filters: FilterState) => {
        let filtered = [...properties];

        // Search filter
        if (filters.search) {
            filtered = filtered.filter(p =>
                p.title.toLowerCase().includes(filters.search.toLowerCase()) ||
                p.location.toLowerCase().includes(filters.search.toLowerCase())
            );
        }

        // Type filter
        if (filters.type !== "all") {
            filtered = filtered.filter(p => p.category === filters.type);
        }

        // BHK filter
        if (filters.bhk !== "all") {
            filtered = filtered.filter(p => p.overview.bhk.includes(filters.bhk));
        }

        // Budget filter
        if (filters.budgetMin || filters.budgetMax) {
            filtered = filtered.filter(p => {
                const priceStr = p.price.replace(/[^0-9.]/g, "");
                const price = parseFloat(priceStr);
                const min = filters.budgetMin ? parseFloat(filters.budgetMin) : 0;
                const max = filters.budgetMax ? parseFloat(filters.budgetMax) : Infinity;
                return price >= min && price <= max;
            });
        }

        // Sort
        if (filters.sortBy === "price-low") {
            filtered.sort((a, b) => {
                const priceA = parseFloat(a.price.replace(/[^0-9.]/g, ""));
                const priceB = parseFloat(b.price.replace(/[^0-9.]/g, ""));
                return priceA - priceB;
            });
        } else if (filters.sortBy === "price-high") {
            filtered.sort((a, b) => {
                const priceA = parseFloat(a.price.replace(/[^0-9.]/g, ""));
                const priceB = parseFloat(b.price.replace(/[^0-9.]/g, ""));
                return priceB - priceA;
            });
        }

        setFilteredProperties(filtered);
    };

    return (
        <div className="min-h-screen bg-gray-50 dark:bg-black">
            <Header />

            <InnerBanner
                title="Our Properties"
                subtitle="Discover your dream home from our exclusive collection of premium properties"
                breadcrumbs={[
                    { label: "Home", href: "/" },
                    { label: "Properties" }
                ]}
                backgroundImage="/assets/images/projects/projects-banner.webp"
            />

            <div>
                <PropertyFilters onFilterChange={handleFilterChange} />

                <div className="max-w-7xl mx-auto px-6 py-12">
                    <h2 className="text-3xl font-bold text-foreground mb-8">Browse Our Properties</h2>

                    {/* Property Grid */}
                    {filteredProperties.length > 0 ? (
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            {filteredProperties.map((property) => (
                                <PropertyCard key={property.id} property={property} />
                            ))}
                        </div>
                    ) : (
                        <div className="text-center py-20">
                            <svg className="w-20 h-20 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                            </svg>
                            <h3 className="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">No properties found</h3>
                            <p className="text-gray-500 dark:text-gray-400">Try adjusting your filters to see more results</p>
                        </div>
                    )}
                </div>
            </div>

            <Footer />
        </div >
    );
}
