"use client";

import React, { useEffect, useRef, useState } from 'react';

type IndustrySolutionItem = {
    title?: string;
    challenges?: string;
    challenges_description?: string;
    solutions?: string;
    solutions_description?: string;
    results?: string;
    results_description?: string;
    theme?: "light" | "dark";
    svg?: string;
};

export type IndustrySolutionsData = {
    title?: string;
    description?: string;
    industries?: IndustrySolutionItem[];
};

const IndustrySolutions = ({ data }: { data?: IndustrySolutionsData }) => {
    const sectionRef = useRef<HTMLElement>(null);
    const [inView, setInView] = useState(false);

    useEffect(() => {
        const el = sectionRef.current;
        if (!el) return;
        const observer = new IntersectionObserver(
            (entries) => setInView(entries[0]?.isIntersecting ?? false),
            { threshold: 0.15 }
        );
        observer.observe(el);
        return () => observer.disconnect();
    }, []);

    const renderSvgIcon = (svg?: string, Fallback?: React.ComponentType) => {
        if (svg) {
            return <span className="w-full h-full [&>svg]:w-full [&>svg]:h-full [&>svg]:block" dangerouslySetInnerHTML={{ __html: svg }} />;
        }
        if (Fallback) {
            return <Fallback />;
        }
        return null;
    };

    const industriesToRender = (data?.industries ?? []).map((item, index) => ({
        title: item.title ?? "",
        theme: index % 2 === 0 ? "light" : "dark",
        challenges: item.challenges ?? "",
        challenges_description: item.challenges_description ?? "",
        solutions: item.solutions ?? "",
        solutions_description: item.solutions_description ?? "",
        results: item.results ?? "",
        results_description: item.results_description ?? "",
        iconNode: renderSvgIcon(item.svg),
    }));

    return (
        <section ref={sectionRef} className={`bg-transparent font-outfit my-[50px] sm:my-12 md:my-14 lg:my-16 xl:my-[70px] ${inView ? "industry-solutions-in" : ""}`}>
            <style dangerouslySetInnerHTML={{ __html: `
                .industry-solutions-step { opacity: 0; }
                .industry-solutions-in .industry-solutions-step {
                    animation: industry-solutions-fade-up 0.6s ease-out forwards;
                }
                @keyframes industry-solutions-fade-up {
                    from { opacity: 0; transform: translateY(24px); }
                    to { opacity: 1; transform: translateY(0); }
                }
            `}} />
            <div className="w-full px-4 sm:px-6 md:px-8 xl:max-w-[1440px] 2xl:max-w-[1920px] mx-auto">

                <div className="text-center mb-[30px]">
                    <h2 className="text-black font-extralight mb-[10px] font-lexend">
                        {(() => {
                            const title = (data?.title ?? "").trim();
                            const words = title ? title.split(/\s+/) : [];
                            return (
                                <>
                                    {words[0] ?? ""}
                                    {words.length > 1 ? <span className="font-medium"> {" "}{words.slice(1).join(" ")}</span> : null}
                                </>
                            );
                        })()}
                    </h2>
                    <p className="text-[#424242] font-light font-outfit">
                        {data?.description ?? ""}
                    </p>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6 lg:gap-8">
                    {industriesToRender.map((industry, index) => (
                        <div
                            key={index}
                            className="industry-solutions-step flex flex-col rounded-[12px] sm:rounded-[16px] md:rounded-[20px] overflow-hidden border border-[#E6E6E6] shadow-lg bg-white h-full hover:shadow-xl transition-all"
                            style={{ animationDelay: `${index * 0.12}s` }}
                        >
                            <div
                                className={`
                  rounded-t-[12px] sm:rounded-t-[16px] md:rounded-t-[20px] p-4 sm:p-5 md:p-6 flex items-center gap-3 sm:gap-4
                  ${industry.theme === 'dark'
                                        ? 'bg-[#053F31] text-white'
                                        : 'bg-[#D9E5DB] text-[#053F31]'
                                    }
                `}
                            >
                                <div className="w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 flex-shrink-0 [&>svg]:w-full [&>svg]:h-full">
                                    {industry.iconNode}
                                </div>
                                <h3 className="font-bold text-base sm:text-lg md:text-xl">
                                    {industry.title}
                                </h3>
                            </div>

                            <div className="p-5 sm:p-[12px] md:p-[15px] lg:p-[20px] flex-1 flex flex-col gap-[5px] sm:gap-[10px]">

                                <div>
                                    <h4 className="font-outfit font-semibold text-[#000000] text-sm sm:text-base md:text-lg mb-1">{industry.challenges}</h4>
                                    <p className="text-[#757575] font-outfit font-light text-xs sm:text-sm md:text-base leading-relaxed">
                                        {industry.challenges_description}
                                    </p>
                                </div>

                                <div className="border-gray-100">
                                    <h4 className="font-outfit font-semibold text-[#000000] text-sm sm:text-base md:text-lg mb-1">{industry.solutions}</h4>
                                    <p className="text-[#757575] font-outfit font-light text-xs sm:text-sm md:text-base leading-relaxed">
                                        {industry.solutions_description}
                                    </p>
                                </div>
                                <div className="pt-2 border-t border-gray-100 mt-auto">
                                    <h4 className="font-outfit font-semibold text-[#000000] text-sm sm:text-base md:text-lg mb-1">{industry.results}</h4>
                                    <p className="text-[#757575] font-outfit font-light text-xs sm:text-sm md:text-base leading-relaxed">
                                        {industry.results_description}
                                    </p>
                                </div>

                            </div>
                        </div>
                    ))}
                </div>

            </div>
        </section>
    );
};

export default IndustrySolutions;