"use client";

import React, { 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 RegulationsAccordion({ data }: { data?: { title?: string, description?: string, items?: any[] } }) {
  const items = data?.items ?? [];
  const [openId, setOpenId] = useState<string | null>(items.length > 0 ? items[0].id : null);

  const displayTitle = data?.title ?? "";
  const displayDescription = data?.description ?? "";

  return (
    <section className="font-outfit w-full xl:max-w-[1100px] 2xl:max-w-[1420px] mx-auto mb-[50px] sm:mb-12 md:mb-14 lg:mb-16 xl:mb-[70px]">
      <h2 className="font-extralight text-[#000000] mb-5 font-lexend text-center">
        {(() => {
          const words = displayTitle.trim().split(/\s+/);
          return (
            <>
              {words.slice(0, 2).join(" ")}{" "}
              {words.length > 2 ? (
                <span className="font-lexend font-medium">{words.slice(2).join(" ")}</span>
              ) : null}
            </>
          );
        })()}
      </h2>
      <p className="font-outfit text-[20px]! text-[#424242] font-light mb-[40px] text-center max-w-[1000px] mx-auto">
        {displayDescription}
      </p>

      <div className="space-y-5">
        {items.map((item) => {
          const isOpen = openId === item.id;
          const hasContent = item.content !== null;

          return (
            <div
              key={item.id}
              className={`rounded-[10px] ${isOpen ? " shadow-[0px_0px_14px_rgba(0,0,0,0.10)] bg-white border-[#D9D9D9]/50" : ""} border border-[#D9D9D9] p-5 overflow-hidden`}
            >
              <button
                type="button"
                onClick={() => setOpenId(isOpen ? null : item.id)}
                className="w-full flex items-center justify-between  text-left"
              >
                <span className={`text-[18px]! font-medium ${isOpen ? "font-semibold" : ""} text-[#000000] flex-1`}>
                  {item.title}
                </span>
                <span className="w-9 h-9 rounded-[8px] bg-[#053F31] text-white flex items-center justify-center shrink-0">
                  {isOpen ? <IconMinus /> : <IconPlus />}
                </span>
              </button>

              {hasContent && item.content && isOpen && (
                <div className=" pt-[10px] ">
                  {item.content.richtext ? (
                    <div 
                      className="text-[18px]! block text-[#757575] font-normal leading-[150%] rich-text-container"
                      dangerouslySetInnerHTML={{ __html: item.content.richtext }}
                    />
                  ) : (
                    <>
                      <div className="md:ps-[6px] md:pe-[70px] mb-[10px]">
                        <a
                          href={"seeLegalTextHref" in item.content ? item.content.seeLegalTextHref : "#"}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-[18px]!  text-[#000000] font-normal mb-[10px] block hover:underline"
                        >
                          {item.content.seeLegalText}
                        </a>
                        <div 
                          className="text-[18px]! block text-[#757575] font-normal leading-[150%] rich-text-container"
                          dangerouslySetInnerHTML={{ __html: String(item.content.intro).replace(/\\n/g, '<br/>') }}
                        />
                      </div>

                      <div className="ps-[30px] md:pe-[46px] ">
                        <span className="text-[18px]! font-normal ">
                          {item.content.keyAspectsTitle}
                        </span>
                        <ol className="list-decimal list-inside space-y-[10px] mb-[10px] pt-[20px] ">
                          {item.content.aspects.map((aspect: any, idx: number) => (
                            <li key={idx} className="text-[18px]! font-semibold  leading-[150%]">
                              <span className="font-semibold">{aspect.title}</span>{" "}
                              <span className="font-light">{aspect.desc}</span>
                            </li>
                          ))}
                        </ol>
                      </div>

                      <div 
                        className="text-[18px]! md:ps-[6px] md:pe-[70px] block text-[#757575] font-normal leading-[150%] rich-text-container"
                        dangerouslySetInnerHTML={{ __html: String(item.content.closing).replace(/\\n/g, '<br/>') }}
                      />
                    </>
                  )}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </section>
  );
}