"use client";

import { useEffect, useRef, useState } from "react";
import staticCopy from "@/i18n/staticCopy.json";
import {
  DEFAULT_LOCALE,
  getStoredLocale,
  LOCALE_CHANGE_EVENT,
  type LocaleCode,
} from "@/i18n/localeSwitcher";

function IconSearch() {
  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.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z" fill="#053F31" />
      <circle cx="17.3849" cy="16.5939" r="6.38493" stroke="white" strokeWidth="2" />
      <line x1="1" y1="-1" x2="5.55179" y2="-1" transform="matrix(0.691329 0.72254 -0.691329 0.72254 21.4688 22.0586)" stroke="white" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

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>
  );
}

function IconChevronDown() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="m6 9 6 6 6-6" />
    </svg>
  );
}

function IconChevronUp() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="m18 15-6-6-6 6" />
    </svg>
  );
}

export default function FindYourWaste({ data, title, searchPlaceholder }: { data?: any[], title?: string, searchPlaceholder?: string }) {
  const [searchQuery, setSearchQuery] = useState("");
  const [openTopId, setOpenTopId] = useState<string | null>(null);
  const [openNestedId, setOpenNestedId] = useState<string | null>(null);
  const sectionRef = useRef<HTMLElement>(null);
  const [inView, setInView] = useState(false);
  const [uiLocale, setUiLocale] = useState<LocaleCode>(DEFAULT_LOCALE);

  useEffect(() => {
    const syncLocale = () => setUiLocale(getStoredLocale());
    syncLocale();
    window.addEventListener("storage", syncLocale);
    window.addEventListener(LOCALE_CHANGE_EVENT, syncLocale);
    return () => {
      window.removeEventListener("storage", syncLocale);
      window.removeEventListener(LOCALE_CHANGE_EVENT, syncLocale);
    };
  }, []);

  const defaultSearchPlaceholder = staticCopy.findYourWaste[uiLocale].searchPlaceholder;

  const categories = data?.map((item: any, index: number) => ({
    id: String(index + 1).padStart(2, '0'),
    title: item.section_title || "",
    nested: item.cat?.items && Array.isArray(item.cat.items) ? item.cat.items.map((nestedItem: any, nIdx: number) => ({
      id: String(nIdx + 1).padStart(2, '0'),
      title: nestedItem.title || "",
      content: nestedItem.content || ""
    })) : []
  })) || [];

  const filteredCategories = categories.filter(cat =>
    cat.title.toLowerCase().includes(searchQuery.toLowerCase())
  );

  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 || data.length === 0) return null;

  return (
    <section
      ref={sectionRef}
      className={`w-full max-w-[1100px] 2xl:max-w-[1420px] mx-auto mb-[70px] md:mb-[130px] font-outfit ${inView ? "find-waste-in" : ""}`}
    >
      <style dangerouslySetInnerHTML={{
        __html: `
        .find-waste-step { opacity: 0; }
        .find-waste-in .find-waste-step {
          animation: find-waste-up 0.55s ease-out forwards;
        }
        @keyframes find-waste-up {
          from { opacity: 0; transform: translateY(22px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .rich-text-container ul {
          list-style-type: disc !important;
          padding-left: 1.5rem !important;
          margin-top: 0.5rem !important;
          margin-bottom: 0.5rem !important;
        }
        .rich-text-container li {
          margin-bottom: 0.4rem !important;
          padding-left: 0.2rem !important;
        }
        .rich-text-container li::marker {
          color: #053F31;
          font-size: 1.2em;
        }
      `}} />
      <h2 className="find-waste-step text-center text-[28px] md:text-[34px] font-light text-[#1a1a1a] mb-5 border-b border-[#053F31]/20 pb-5" style={{ animationDelay: "0s" }}>
        {title ? (
          (() => {
            const words = String(title).trim().split(/\s+/);
            return (
              <>
                {words.slice(0, 2).join(" ")}{" "}
                {words.length > 2 ? (
                  <span className="font-medium">{words.slice(2).join(" ")}</span>
                ) : null}
              </>
            );
          })()
        ) : null}
      </h2>

      <div className="find-waste-step flex rounded-full border border-[#E8E8E8] bg-[#DAE6DC]/10 overflow-hidden w-full max-w-[478px] xl:max-w-[918px] mx-auto h-[50px] mb-[50px] p-[7px_7px_7px_15px]" style={{ animationDelay: "0.1s" }}>
        <input
          type="text"
          placeholder={searchPlaceholder?.trim() || defaultSearchPlaceholder}
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="flex-1 h-full min-w-0 rounded-l-full border-0  text-[16px] text-[#424242] placeholder:text-[#999999] placeholder:font-semibold font-light focus:outline-none focus:ring-0"
        />
        <button
          type="button"
          className="flex items-center justify-center shrink-0 hover:opacity-90 transition-opacity"
          aria-label="Search"
        >
          <IconSearch />
        </button>
      </div>

      <div className="space-y-[20px]">
        {filteredCategories.map((cat: any, catIndex: number) => {
          const isTopOpen = openTopId === cat.id;
          const hasNested = "nested" in cat && cat.nested && cat.nested.length > 0;

          return (
            <div
              key={cat.id}
              className={`find-waste-step rounded-[10px] overflow-hidden ${isTopOpen ? "bg-[#F7FAF8] border border-[#053F31]/30 shadow-[0_2px_12px_rgba(0,0,0,0.08)]" : "border border-[#D9D9D9] "}`}
              style={{ animationDelay: `${0.2 + catIndex * 0.08}s` }}
            >
              <div className="flex items-start justify-between md:items-center gap-9 p-5">
                <div className="flex items-start gap-2 flex-1">
                  <span className="text-[20px] font-semibold text-[#000000]">
                    {cat.title}
                  </span>
                </div>

                <button
                  type="button"
                  onClick={() => setOpenTopId(isTopOpen ? null : cat.id)}
                  className="w-9 h-9 rounded-[8px] bg-[#053F31] text-white flex items-center justify-center shrink-0 hover:opacity-90 transition-opacity"
                  aria-expanded={isTopOpen}
                >
                  {isTopOpen ? <IconMinus /> : <IconPlus />}
                </button>
              </div>

              {hasNested && isTopOpen && (
                <div className="bg-[#FBFBFA]/50 px-5 pb-5 ">
                  {cat.nested!.map((nested: any, nestedIndex: number) => {
                    const nestedKey = `${cat.id}-${nested.id}`;
                    const isNestedOpen = openNestedId === nestedKey;
                    const isLastNested = nestedIndex === cat.nested!.length - 1;

                    return (
                      <div
                        key={nestedKey}
                        className="w-full overflow-hidden"
                      >
                        <button
                          type="button"
                          onClick={() => setOpenNestedId(isNestedOpen ? null : nestedKey)}
                          className={`w-full flex items-center justify-between gap-3 p-[10px_0px] text-left ${isLastNested ? "" : "border-b border-[#DDDDDD]"}`}
                        >
                          <div className="flex items-start gap-2 flex-1">
                            <span className="font-outfit text-[18px] leading-[150%] text-[#000000] shrink-0">
                              {Number(nested.id)}.
                            </span>
                            <span className="font-outfit text-[18px] leading-[150%] text-[#000000]">
                              {nested.title}
                            </span>
                          </div>
                          <span className="text-[#053F31] shrink-0">
                            {isNestedOpen ? <IconChevronUp /> : <IconChevronDown />}
                          </span>
                        </button>
                        {nested.content && isNestedOpen && (
                          <div className="px-5 pb-4 pt-2">
                            <div
                              className="text-[18px] text-[#757575] font-regular leading-[150%] rich-text-container"
                              dangerouslySetInnerHTML={{ __html: String(nested.content).replace(/\\n/g, '<br/>') }}
                            />
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </section>
  );
}