"use client";

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


function IconPlus() {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <line x1="12" y1="5" x2="12" y2="19" />
      <line x1="5" y1="12" x2="19" y2="12" />
    </svg>
  );
}

function IconMinus() {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <line x1="5" y1="12" x2="19" y2="12" />
    </svg>
  );
}

export default function DocsAccordion({ data, backgroundImage }: { data?: any[], backgroundImage?: string }) {
  const items = data ?? [];
  const [openId, setOpenId] = useState<string | null>(items.length > 0 ? items[0].id : null);
  const containerRef = useRef<HTMLDivElement>(null);
  const [inView, setInView] = useState(false);

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

  return (
    <div
      ref={containerRef}
      className={`w-full rounded-[20px] bg-cover bg-center bg-no-repeat relative overflow-hidden mt-[50px] sm:mt-12 md:mt-14 lg:mt-16 xl:mt-[70px] mb-[50px] sm:mb-12 md:mb-14 lg:mb-16 xl:mb-[70px] font-outfit ${inView ? "docs-accordion-in" : ""}`}
      style={{ backgroundImage: `url('${backgroundImage || "/docsbg.png"}')` }}
    >
      <style dangerouslySetInnerHTML={{ __html: `
        .docs-accordion-step { opacity: 0; }
        .docs-accordion-in .docs-accordion-step {
          animation: docs-accordion-up 0.55s ease-out forwards;
        }
        @keyframes docs-accordion-up {
          from { opacity: 0; transform: translateY(22px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}} />
      <div className="absolute inset-0" />

      <div className="relative z-10 p-6 md:p-10">
        <div className="max-w-[1000px] 2xl:max-w-[1384px] mx-auto space-y-4">
          {items.map((item: any, index: number) => {
            const isOpen = openId === item.id;
            const hasContent = item.content !== null;

            return (
              <div
                key={item.id}
                className={`docs-accordion-step rounded-[16px] transition-all duration-300 ${isOpen ? "bg-[#FFFFFF]/10 border-b-3 border-white/20" : "border border-white/20"}`}
                style={{ animationDelay: `${index * 0.1}s` }}
              >
                <div className="flex items-center justify-between px-5 py-5">
                  <p className="font-medium text-[#FEFEFE]">
                    {item.title}
                  </p>

                  <button
                    type="button"
                    onClick={() => setOpenId(isOpen ? null : item.id)}
                    className={`w-9 h-9 rounded-[8px] flex items-center justify-center transition bg-[#E6E6E6] text-[#053F31]`}
                  >
                    {isOpen ? <IconMinus /> : <IconPlus />}
                  </button>
                </div>

                {hasContent && isOpen && (
                  <div className="px-5 pb-5">
                    <div className="text-[#FFFFFF] mb-4 font-thin [&_strong]:font-semibold rich-text-container">
                      {typeof item.content.paragraph === 'string' ? (
                        <div dangerouslySetInnerHTML={{ __html: item.content.paragraph.replace(/\\n/g, '<br/>') }} />
                      ) : (
                        item.content.paragraph
                      )}
                    </div>

                    {item.content.links && item.content.links.length > 0 && (
                      <ol className="list-decimal list-inside space-y-[10px] mt-[10px] font-regular text-[#FFFFFF] text-[18px] leading-[150%] break-all">
                        {item.content.links.map((url: string, idx: number) => (
                          <li key={idx}>
                            <a
                              href={url}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="hover:underline"
                            >
                              {url}
                            </a>
                          </li>
                        ))}
                      </ol>
                    )}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}