"use client";

import React, { useState } from "react";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Instagram, Facebook, Linkedin } from "lucide-react";

const propertiesData = [
    {
        id: "1",        category: "Villa",        name: "Luxury Beachfront Villa",        price: "$1,500/night",        rating: 5,
        reviewCount: "87 reviews",        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination6.webp",        imageAlt: "Beachfront Villa"},
    {
        id: "2",        category: "Chalet",        name: "Swiss Mountain Chalet",        price: "$1,200/night",        rating: 4,
        reviewCount: "62 reviews",        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination5.webp",        imageAlt: "Mountain Chalet"},
    {
        id: "3",        category: "Lodge",        name: "Serengeti Safari Lodge",        price: "$1,800/night",        rating: 5,
        reviewCount: "95 reviews",        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination1.webp",        imageAlt: "Safari Lodge"},
    {
        id: "4",        category: "Estate",        name: "Amalfi Coast Estate",        price: "$2,000/night",        rating: 5,
        reviewCount: "78 reviews",        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination4.webp",        imageAlt: "Amalfi Estate"},
    {
        id: "5",        category: "Ryokan",        name: "Kyoto Traditional Ryokan",        price: "$900/night",        rating: 4,
        reviewCount: "41 reviews",        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination3.webp",        imageAlt: "Kyoto Ryokan"},
    {
        id: "6",        category: "Lodge",        name: "Patagonia Wilderness Lodge",        price: "$1,100/night",        rating: 4,
        reviewCount: "53 reviews",        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination2.webp",        imageAlt: "Patagonia Lodge"},
];

export default function PropertiesPage() {
    const [search, setSearch] = useState("");
    const [locationFilter, setLocationFilter] = useState("All");
    const [typeFilter, setTypeFilter] = useState("All");
    const [priceFilter, setPriceFilter] = useState("All");

    const filteredProperties = propertiesData.filter(property => {
        const matchesSearch = property.name.toLowerCase().includes(search.toLowerCase());
        const matchesLocation = locationFilter === "All" || property.imageAlt?.includes(locationFilter);
        const matchesType = typeFilter === "All" || property.category === typeFilter;
        const matchesPrice = priceFilter === "All" || (function() {
            const price = parseFloat(property.price.replace(/[^0-9.-]+/g,""));
            if (priceFilter === "$500-1000") return price >= 500 && price < 1000;
            if (priceFilter === "$1000-1500") return price >= 1000 && price < 1500;
            if (priceFilter === "$1500-2000") return price >= 1500 && price < 2000;
            if (priceFilter === "2000+") return price >= 2000;
            return true;
        })();
        return matchesSearch && matchesLocation && matchesType && matchesPrice;
    });

    const filters = [
        { label: "Location", options: ["All", "Maldives", "Switzerland", "Tanzania", "Amalfi Coast", "Kyoto", "Patagonia"], selected: locationFilter, onChange: setLocationFilter },
        { label: "Property Type", options: ["All", "Villa", "Chalet", "Lodge", "Estate", "Ryokan"], selected: typeFilter, onChange: setTypeFilter },
        { label: "Price Range", options: ["All", "$500-1000", "$1000-1500", "$1500-2000", "2000+"], selected: priceFilter, onChange: setPriceFilter },
    ];

    return (
        <ThemeProvider
            defaultButtonVariant="icon-arrow"
            defaultTextAnimation="entrance-slide"
            borderRadius="rounded"
            contentWidth="medium"
            sizing="medium"
            background="none"
            cardStyle="solid"
            primaryButtonStyle="shadow"
            secondaryButtonStyle="solid"
            headingFontWeight="medium"
        >
            <ReactLenis root>
                <NavbarLayoutFloatingInline
                    navItems={[
                        { name: "About", id: "about" },
                        { name: "Services", id: "services" },
                        { name: "Destinations", id: "destinations" },
                        { name: "Reviews", id: "reviews" },
                        { name: "Contact", id: "contact" },
                        { name: "Properties", href: "/properties" },
                        { name: "Booking", href: "/booking" }
                    ]}
                    brandName="Luxuria"
                    button={{ text: "Plan Your Trip", href: "/booking" }}
                />
                <div className="min-h-screen py-32 lg:py-40">
                    <ProductCatalog
                        layout="page"
                        products={filteredProperties}
                        searchValue={search}
                        onSearchChange={setSearch}
                        searchPlaceholder="Search properties..."
                        filters={filters}
                        emptyMessage="No properties match your criteria."
                        className="pt-12"
                    />
                </div>
                <FooterCard
                    logoText="Luxuria"
                    copyrightText="© 2025 Luxuria Travel | Luxury Journeys Worldwide"
                    socialLinks={[
                        { icon: Instagram, href: "#", ariaLabel: "Instagram" },
                        { icon: Facebook, href: "#", ariaLabel: "Facebook" },
                        { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
                    ]}
                />
            </ReactLenis>
        </ThemeProvider>
    );
}