//App.js

import React, { useState } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import ProductDetail from "./components/ProductDetail.js";
import AddProduct from "./components/AddProduct.js";
import ProductList from "./components/ProductList.js";
import Cart from "./components/Cart.js";
import CheckoutForm from "./components/CheckoutForm.js";
import Login from "./components/Login";
import SignUp from "./components/SignUp.js";
import UserAccount from "./components/UserAccount.js";
import Home from "./components/Home.js";

const App = () => {
    const [cart, setCart] = useState([]);
    return (
        <Router>
            <Routes>
                <Route path="/product/:id" element={<ProductDetail />} />
                <Route path="/add" element={<AddProduct />} />
                <Route
                    path="/product"
                    element={<ProductList setCart={setCart} cart={cart} />}
                />
                <Route path="/cart" element={<Cart cart={cart} setCart={setCart} />} />
                <Route path="/checkout" element={<CheckoutForm />} />
                <Route path="/login" element={<Login />} />
                <Route path="/register" element={<SignUp />} />
                <Route path="/account" element={<UserAccount />} />
                <Route path="/" element={<Home />} />
            </Routes>
        </Router>
    );
};

export default App;

//ProductList.js

import React, { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import axios from "axios";
import "./ProductList.css"; // Import the CSS file

const ProductList = ({ cart, setCart }) => {
    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [nameFilter, setNameFilter] = useState("");
    const [priceRange, setPriceRange] = useState("");
    const navigate = useNavigate();

    useEffect(() => {
        const fetchProducts = async () => {
            try {
                const { data } = await axios.get("http://localhost:5000/api/products");
                setProducts(data);
                setLoading(false);
            } catch (err) {
                setError(err.message);
                setLoading(false);
            }
        };

        fetchProducts();
    }, []);

    const addToCart = (product) => {
        setCart((prevCart) => [...prevCart, product]);
    };

    const goToCart = () => {
        navigate("/cart");
    };

    const handleNameFilterChange = (e) => {
        setNameFilter(e.target.value);
    };

    const handlePriceRangeChange = (e) => {
        setPriceRange(e.target.value);
    };

    const filteredProducts = products.filter((product) => {
        const matchesName = product.name
            .toLowerCase()
            .includes(nameFilter.toLowerCase());
        const matchesPrice =
            priceRange === "" ||
            (priceRange === "0-50" && product.price <= 50) ||
            (priceRange === "50-100" && product.price > 50 && product.price <= 100) ||
            (priceRange === "100+" && product.price > 100);
        return matchesName && matchesPrice;
    });

    return (
        <div className="product-list-container">
            <div className="header">
                <button className="go-to-cart" onClick={goToCart}>
                    Go to Cart
                </button>
                <input
                    type="text"
                    placeholder="Search by name"
                    value={nameFilter}
                    onChange={handleNameFilterChange}
                    className="name-filter"
                />
                <h2>Product List</h2>
            </div>
            <div className="filters">
                <select onChange={handlePriceRangeChange} value={priceRange}>
                    <option value="">All Prices</option>
                    <option value="0-50">0 - 50</option>
                    <option value="50-100">50 - 100</option>
                    <option value="100+">100+</option>
                </select>
            </div>
            {loading ? (
                <h3>Loading...</h3>
            ) : error ? (
                <h3>{error}</h3>
            ) : (
                <div className="product-list">
                    {filteredProducts.map((product) => (
                        <div key={product._id} className="product-card">
                            <Link to={`/product/${product._id}`}>
                                <img src={product.imageUrl} alt={product.name} />
                                <h3>{product.name}</h3>
                                <p>${product.price}</p>
                            </Link>
                            <button onClick={() => addToCart(product)}>Add To Cart</button>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
};

export default ProductList;