import React, { useCallback, useEffect, useState } from "react";
import Particles from "react-particles";
import { loadSlim } from "tsparticles-slim";
import type { Engine } from "tsparticles-engine";
import { serviceApi } from "~/api";
import { IService } from "~/api/real/service.api";

const mainRed = "#e31e24";

export default function ServicesPage() {
    const [services, setServices] = useState<IService[]>([]);

    useEffect(() => {
        const fetchServices = async () => {
            try {
                const data = await serviceApi.getAllServices();
                console.log("Services data:", data); // Debug log
                // Adaptar el formato de la API al formato esperado por el componente
                setServices(data.map((s) => ({
                    serviceID: s.serviceID || s.id || 0,
                    title: s.title || '',
                    description: s.description || '',
                    icon: s.icon || '',
                })));
            } catch (error) {
                console.error("Error fetching services:", error);
            }
        };
        fetchServices();
    }, []);

    const particlesInit = useCallback(async (engine: Engine) => {
        await loadSlim(engine);
    }, []);

    const particlesConfig: any = {
        particles: {
            number: {
                value: 25,
                density: {
                    enable: true,
                    value_area: 800,
                },
            },
            color: {
                value: mainRed,
            },
            shape: {
                type: "circle",
            },
            opacity: {
                value: 0.6,
                random: true,
                anim: {
                    enable: true,
                    speed: 1,
                    opacity_min: 0.1,
                    sync: false,
                },
            },
            size: {
                value: 12,
                random: true,
                anim: {
                    enable: true,
                    speed: 2,
                    size_min: 5,
                    sync: false,
                },
            },
            line_linked: {
                enable: false,
            },
            move: {
                enable: true,
                speed: 1.5,
                direction: "top",
                random: true,
                straight: false,
                out_mode: "out",
                bounce: false,
                attract: {
                    enable: false,
                },
            },
        },
        interactivity: {
            detect_on: "canvas",
            events: {
                onhover: {
                    enable: false,
                },
                onclick: {
                    enable: false,
                },
                resize: true,
            },
        },
        retina_detect: true,
    };

    const DynamicIcon = ({ iconName }: { iconName?: string }) => {
        if (!iconName) return null;

        return <i className={`${iconName} me-2`} aria-hidden="true"></i>;
    };

    return (
        <div className="services-page py-5" style={{ marginTop: "24px" }}>
            <div className="container">
                {/* Título con efecto de burbujas */}
                <div className="services-title text-center mb-5">
                    <div className="services-title__container">
                        <div className="services-title__text-wrapper">
                            <h1 className="services-title__text">
                                NUESTROS <span className="services-title__highlight">SERVICIOS</span>
                            </h1>
                            <div className="services-title__bubble services-title__bubble--1" />
                            <div className="services-title__bubble services-title__bubble--2" />
                            <div className="services-title__bubble services-title__bubble--3" />
                        </div>
                    </div>
                    <div className="services-title__underline"></div>
                </div>

                {/* Grid de Servicios */}
                {services.length === 0 ? (
                    <div className="text-center py-5">
                        <p>Cargando servicios...</p>
                    </div>
                ) : (
                    <div className="row g-4 justify-content-center px-md-5">
                        {services.map((service) => (
                            <div key={service.serviceID} className="col-12 col-md-6 col-lg-6 mb-4">
                                <div className="service-card">
                                    <div className="service-card__icon">
                                        <DynamicIcon iconName={service.icon} />
                                    </div>
                                    <h3 className="service-card__title">{service.title}</h3>
                                    <p className="service-card__description">{service.description}</p>
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>

            <style jsx>{`
                .services-page {
                    background: #fff;
                    min-height: 80vh;
                }

                @media (max-width: 767px) {
                    /* En telefono: volver al margen original, sin el ajuste de desktop */
                    .services-page {
                        margin-top: -20px !important;
                    }
                }

                .services-title {
                    margin-bottom: 3rem;
                }

                .services-title__container {
                    width: 100%;
                }

                .services-title__text-wrapper {
                    position: relative;
                    display: inline-block;
                }

                .services-title__bubble {
                    position: absolute;
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background: ${mainRed};
                    pointer-events: none;
                    animation: services-bubble-rise 4s ease-out infinite;
                }

                .services-title__bubble--1 {
                    left: 15%;
                    animation-delay: 0s;
                }

                .services-title__bubble--2 {
                    left: 50%;
                    animation-delay: 1.3s;
                }

                .services-title__bubble--3 {
                    left: 85%;
                    animation-delay: 2.6s;
                }

                @keyframes services-bubble-rise {
                    0% {
                        bottom: 0;
                        opacity: 0.45;
                        transform: scale(1);
                    }
                    70% {
                        opacity: 0.15;
                    }
                    100% {
                        bottom: 100%;
                        opacity: 0;
                        transform: scale(0.8);
                    }
                }

                .services-title__text {
                    font-size: 2.5rem;
                    font-weight: 700;
                    color: #000;
                    text-transform: uppercase;
                    letter-spacing: 2px;
                    margin-bottom: 0.5rem;
                    position: relative;
                    z-index: 1;
                }

                .services-title__highlight {
                    color: ${mainRed};
                }

                .services-title__underline {
                    width: 100px;
                    height: 4px;
                    background: ${mainRed};
                    margin: 0rem auto 0;
                }

                .service-card {
                    border: 1px solid #e0e0e0;
                    border-radius: 8px;
                    padding: 2.5rem 2rem;
                    text-align: center;
                    height: 100%;
                    background: #fff;
                    transition: all 0.3s ease;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }

                .service-card:hover {
                    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
                    transform: translateY(-5px);
                }

                .service-card__icon {
                    width: 80px;
                    height: 80px;
                    border: 2px solid ${mainRed};
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 1.5rem;
                    color: ${mainRed};
                    font-size: 2rem;
                    transition: all 0.3s ease;
                }

                .service-card:hover .service-card__icon {
                    background: ${mainRed};
                    color: #fff;
                }

                .service-card__title {
                    font-size: 1.25rem;
                    font-weight: 700;
                    color: #000;
                    text-transform: uppercase;
                    margin-bottom: 1rem;
                    letter-spacing: 1px;
                }

                .service-card__description {
                    color: #666;
                    font-size: 0.95rem;
                    line-height: 1.7;
                    margin: 0;
                    flex-grow: 1;
                }

                /* Responsive */
                @media (max-width: 768px) {
                    .services-title__text {
                        font-size: 1.8rem;
                    }

                    .service-card {
                        padding: 2rem 1.5rem;
                    }

                    .service-card__icon {
                        width: 70px;
                        height: 70px;
                        font-size: 1.75rem;
                    }

                    .service-card__title {
                        font-size: 1.1rem;
                    }

                    .service-card__description {
                        font-size: 0.9rem;
                    }
                }

                @media (max-width: 576px) {
                    .services-title__text {
                        font-size: 1.5rem;
                    }

                    .service-card {
                        padding: 1.5rem 1rem;
                    }

                    .service-card__icon {
                        width: 60px;
                        height: 60px;
                        font-size: 1.5rem;
                    }
                }
            `}</style>
        </div>
    );
}