"use client";

import { useEffect, useRef, useState } from "react";

function IconArrowCircle() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
      <path d="M0 18C0 8.05887 8.05887 0 18 0V0C27.9411 0 36 8.05887 36 18V18C36 27.9411 27.9411 36 18 36V36C8.05887 36 0 27.9411 0 18V18Z" fill="#F7FAF8" />
      <path d="M10 18H25.5M25.5 18L19.5 12M25.5 18L19.5 24.5" stroke="#053F31" strokeWidth="2" />
    </svg>
  );
}

export default function DocsInfoSection({ data }: { data?: { title?: string, description?: string | React.ReactNode, features?: any[] } }) {
  const sectionRef = useRef<HTMLElement>(null);
  const [inView, setInView] = useState(false);

  const displayTitle = data?.title ?? "";
  const displayDescription = data?.description ?? "";
  const displayFeatures = data?.features ?? [];

  useEffect(() => {
    const el = sectionRef.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([entry]) => setInView(!!entry.isIntersecting),
      { threshold: 0.12, rootMargin: "0px" }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  if (!data) return null;

  return (
    <section
      ref={sectionRef}
      className={`w-full px-0 md:px-4 lg:px-6 xl:px-8 ${inView ? "docs-info-in" : ""}`}
    >
      <style dangerouslySetInnerHTML={{ __html: `
        .docs-info-left { opacity: 0; }
        .docs-info-feature { opacity: 0; }
        .docs-info-in .docs-info-left {
          animation: docs-info-reveal 0.6s ease-out forwards;
        }
        .docs-info-in .docs-info-feature {
          animation: docs-info-slide-right 0.55s ease-out forwards;
        }
        @keyframes docs-info-reveal {
          from { opacity: 0; transform: translateY(16px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes docs-info-slide-right {
          from { opacity: 0; transform: translateX(20px); }
          to { opacity: 1; transform: translateX(0); }
        }
      `}} />
      <div className="mx-auto xl:max-w-[1260px] 2xl:max-w-[1740px] gap-0">
        <div className="flex flex-col justify-between gap-[40px] xl:gap-[80px] lg:flex-row lg:items-start">
          <div className="docs-info-left xl:max-w-[430px] 2xl:max-w-[779px] shrink-0">
            <h2 className="mb-[30px] font-extralight font-lexend text-center md:text-left">
              {(() => {
                if (typeof displayTitle !== "string") return displayTitle;
                const words = displayTitle.trim().split(/\s+/);
                const brIdx = displayTitle.indexOf('\n');
                if (brIdx !== -1) {
                  return (
                    <>
                      {displayTitle.split('\n')[0]}
                      <br />
                      <span className="font-medium">{displayTitle.split('\n')[1] || ""}</span>
                    </>
                  );
                }
                if (words.length > 2) {
                    return (
                        <>
                            {words.slice(0, -2).join(" ")}{" "}
                            <span className="font-medium">{words.slice(-2).join(" ")}</span>
                        </>
                    );
                }
                return displayTitle;
              })()}
            </h2>
            <div className=" mb-[30px] text-center xl:text-left 2xl:max-w-[734px] font-light text-[#424242] font-outfit space-y-[20px] !text-[18px]">
              {typeof displayDescription === "string" ? (
                <div dangerouslySetInnerHTML={{ __html: displayDescription.replace(/\\n/g, '<br/>') }} className="rich-text-container" />
              ) : (
                displayDescription
              )}
            </div>
            <div className="flex justify-center md:justify-start">
              <button className="flex items-center font-outfit justify-center gap-2 border-2 border-[#0F3F32] bg-[#0F3F32] text-white p-[7px_7px_7px_15px] rounded-full font-semibold hover:border-2 hover:border-[#0F3F32] hover:bg-[#ffffff] hover:text-[#0F3F32] transition cursor-pointer">
                Request Quote
                <IconArrowCircle />
              </button>
            </div>
          </div>
          <div className="w-full xl:max-w-[700px] 2xl:max-w-[870px]">
            <div className="space-y-0 xl:max-w-[700px] 2xl:max-w-[870px]">
              {displayFeatures.map((feature: any, index: number) => {
                const IconComponent = feature.icon;
                const isSvg = typeof IconComponent === 'string';
                return (
                  <div key={feature.id}>
                    <div className={`
                        border-[#E0E0E0]
                        ${index === 0 ? "border-b" : ""}
                        border-b
                      `} />
                    <div className="group docs-info-feature flex gap-[30px] pt-[30px] mb-[30px]" style={{ animationDelay: `${0.08 + index * 0.1}s` }}>
                      <div className="flex h-[70px] w-[70px] shrink-0 items-center justify-center rounded-[10px] bg-[#F7FAF8] border border-[#053F31]/20 transition-transform duration-300 ease-in-out hover:scale-x-[-1] group-hover:scale-x-[-1]">
                        {isSvg ? (
                          <div
                            className="w-[50px] h-[50px] flex items-center justify-center"
                            dangerouslySetInnerHTML={{ __html: IconComponent }}
                          />
                        ) : (
                          <IconComponent />
                        )}
                      </div>

                      <div className="flex-1 min-w-[220px]">
                        <h4 className="md:mb-[10px] text-left !text-[20px] font-semibold text-[#000000] font-outfit ">
                          {feature.title}
                        </h4>
                        <div 
                          className="text-left leading-[150%] font-light text-[#757575] font-outfit rich-text-container"
                          dangerouslySetInnerHTML={{ __html: String(feature.description).replace(/\\n/g, '<br/>') }}
                        />
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}