import { useState, useEffect } from "react";
import ProductCard from "../../components/ProductCard";
import Navbar from "../../components/Navbar";
import {
    getAllProducts,
    getProductsByCategory,
    getMediaUrl,
    getCategories,
} from "../../api/api";
import type { Product, Category } from "../../api/api";
import "./UserAccueil.css";

function getTextColor(hex: string): string {
    const h = hex.replace("#", "");
    const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
    const r = parseInt(full.slice(0, 2), 16);
    const g = parseInt(full.slice(2, 4), 16);
    const b = parseInt(full.slice(4, 6), 16);
    return (r * 299 + g * 587 + b * 114) / 1000 > 128 ? "#000000" : "#ffffff";
}

function UserAccueil() {
    const [selectedCategory, setSelectedCategory] = useState<string>("tous");
    const [categories, setCategories] = useState<Category[]>([]);
    const [products, setProducts] = useState<Product[]>([]);
    const [loading, setLoading] = useState<boolean>(true);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        getCategories().then((cats) => {
            const sorted = [...cats].sort((a, b) => {
                if (a.is_coming_soon === b.is_coming_soon) return 0;
                return a.is_coming_soon ? 1 : -1;
            });
            setCategories(sorted);
        });
    }, []);

    useEffect(() => {
        const catObj = categories.find((c) => c.name === selectedCategory);
        if (catObj?.is_coming_soon) {
            setLoading(false);
            setProducts([]);
            return;
        }
        loadProducts();
    }, [selectedCategory, categories]); // eslint-disable-line react-hooks/exhaustive-deps

    const loadProducts = async () => {
        setLoading(true);
        setError(null);

        try {
            let response;

            if (selectedCategory === "tous") {
                response = await getAllProducts();
            } else {
                response = await getProductsByCategory(selectedCategory);
            }

            if (response.success && response.data) {
                setProducts(response.data);
            } else {
                setProducts([]);
            }
        } catch (err: unknown) {
            setError(err instanceof Error ? err.message : "Erreur lors du chargement des produits");
        } finally {
            setLoading(false);
        }
    };

    const handleCategoryChange = (category: string) => {
        setSelectedCategory(category);
    };

    const getProductPrice = (product: Product): number => {
        const activePrices = product.prices?.filter(p => p.active_price !== false);
        if (!activePrices || activePrices.length === 0) return 0;
        return activePrices[0].price;
    };
    const hasProductVideo = (product: Product): boolean => {
        if (!product.media || product.media.length === 0) {
            return false;
        }

        return product.media.some(
            (mediaItem) => mediaItem && mediaItem.type === "video",
        );
    };
    const getProductVideoUrl = (product: Product): string | undefined => {
        if (!product.media || product.media.length === 0) {
            return undefined;
        }

        const videoMedia = product.media.find(
            (mediaItem) => mediaItem && mediaItem.type === "video",
        );

        return videoMedia?.url ? getMediaUrl(videoMedia.url) : undefined;
    };
    const getProductImage = (product: Product): string => {
        // Pas de media ? Image placeholder
        if (!product.media || product.media.length === 0) {
            return "https://via.placeholder.com/400x400/1a1a1a/ffffff?text=No+Image";
        }

        // Parcourir le tableau media pour trouver la première image
        for (let i = 0; i < product.media.length; i++) {
            const mediaItem = product.media[i];

            // Vérifier si c'est un objet avec type "image" et url
            if (mediaItem && mediaItem.type === "image" && mediaItem.url) {
                return getMediaUrl(mediaItem.url);
            }
        }

        // Si aucune image trouvée, fallback
        return "https://via.placeholder.com/400x400/1a1a1a/ffffff?text=No+Image";
    };

    const selectedCategoryObj = categories.find(
        (c) => c.name === selectedCategory,
    );
    const isSelectedComingSoon = selectedCategoryObj?.is_coming_soon ?? false;

    <div className="category-header">
        <h2 className="category-title">
            {selectedCategory === "tous"
                ? "Tous les produits"
                : selectedCategory}
        </h2>
    </div>;
    return (
        <>
            <Navbar />
            <div className="user-page-container">
                <div className="category-header">
                    <h2 className="category-title">
                        {selectedCategory === "tous"
                            ? "Tous les produits"
                            : selectedCategory}
                    </h2>
                </div>
                <div className="category-filter">
                    <button
                        className={`category-button ${selectedCategory === "tous" ? "active" : ""}`}
                        data-category="tous"
                        onClick={() => handleCategoryChange("tous")}
                    >
                        Tous
                    </button>

                    {categories.map((category) => {
                        const isActive = selectedCategory === category.name;
                        const catColor = category.color || "#7c3aed";
                        return (
                            <button
                                key={category.id}
                                className={`category-button ${isActive ? "active" : ""}`}
                                style={
                                    isActive
                                        ? {
                                              backgroundColor: catColor,
                                              borderColor: catColor,
                                              color: getTextColor(catColor),
                                          }
                                        : { borderColor: `${catColor}66` }
                                }
                                onClick={() =>
                                    handleCategoryChange(category.name)
                                }
                            >
                                {category.name}
                            </button>
                        );
                    })}
                </div>

                {isSelectedComingSoon ? (
                    <div className="coming-soon-overlay">
                        <span className="coming-soon-text">Prochainement</span>
                        <p className="coming-soon-desc">
                            Les produits de cette catégorie arrivent bientôt !
                        </p>
                    </div>
                ) : loading ? (
                    <div className="loading-container">
                        <p>Chargement des produits...</p>
                    </div>
                ) : error ? (
                    <div className="error-container">
                        <p className="error-message">{error}</p>
                        <button onClick={loadProducts}>Réessayer</button>
                    </div>
                ) : products.length === 0 ? (
                    <div className="empty-container">
                        <p>
                            Il n'y a pas de produit disponible pour l'instant.
                        </p>
                    </div>
                ) : (
                    <div className="products-grid">
                        {products.map((product) => (
                            <div
                                key={product.id}
                                data-category={product.category}
                            >
                                <ProductCard
                                    id={product.id}
                                    name={product.name}
                                    price={getProductPrice(product)}
                                    unit={product.unit || "g"}
                                    image={getProductImage(product)}
                                    stock={product.stock}
                                    category={product.category}
                                    prices={product.prices?.filter(p => p.active_price !== false)}
                                    hasVideo={hasProductVideo(product)}
                                    videoUrl={getProductVideoUrl(product)}
                                    categoryColor={
                                        categories.find(
                                            (c) =>
                                                c.name.toLowerCase() ===
                                                product.category?.toLowerCase(),
                                        )?.color
                                    }
                                    coming_soon={product.coming_soon}
                                />
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </>
    );
}

export default UserAccueil;