"use client";

import { useState, useRef, useEffect } from "react";
import { faqs } from "@/data/designshare";
import { Reveal } from "../common/Reveal";
import { SmileyIcon } from "../common/SmileyIcon";

function FAQItem({
  q,
  a,
  open,
  onToggle,
}: {
  q: string;
  a: string;
  open: boolean;
  onToggle: () => void;
}) {
  const bodyRef = useRef<HTMLDivElement>(null);
  const [height, setHeight] = useState<number | undefined>(undefined);

  useEffect(() => {
    if (open && bodyRef.current) {
      setHeight(bodyRef.current.scrollHeight);
    }
  }, [open]);

  const renderAnswer = (text: string) => {
    const parts = text.split("Elegant IT Limited");
    if (parts.length === 1) return text;

    return parts.reduce((acc: React.ReactNode[], part, index) => {
      if (index === 0) {
        return [part];
      }
      return [
        ...acc,
        <a
          key={index}
          href="https://eleganttechbd.com"
          target="_blank"
          rel="noopener noreferrer"
          className="underline font-bold text-[#1E5EFF] hover:text-[#0F3DBD] transition-colors"
        >
          Elegant IT Limited
        </a>,
        part,
      ];
    }, []);
  };

  return (
    <div className={`ds-faq-item${open ? " open" : ""}`}>
      <button className="ds-faq-q" aria-expanded={open} onClick={onToggle}>
        <span className="ds-faq-qt">{q}</span>
        <span className="ds-faq-ic" aria-hidden="true">
          <svg viewBox="0 0 14 14" fill="none">
            <path
              d="M7 1v12M1 7h12"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
            />
          </svg>
        </span>
      </button>
      <div
        className="ds-faq-a"
        ref={bodyRef}
        style={{
          maxHeight: open ? `${height || 1000}px` : "0",
        }}
      >
        <div className="ds-faq-a-inner">{renderAnswer(a)}</div>
      </div>
    </div>
  );
}

export function FAQ() {
  const [openIndex, setOpenIndex] = useState<number>(0);

  return (
    <section className="ds-sec" id="faq" style={{ background: "#F4EFE1" }}>
      <div className="ds-container">
        <Reveal className="ds-sec-head">
          <span className="ds-eyebrow">
            <SmileyIcon faceColor="#FFFFFF" featColor="#0F0F10" size={14} />
            FAQ
          </span>
          <h2 className="ds-h-2">
            Everything you <span className="ds-italic">need to know.</span>
          </h2>
        </Reveal>

        <Reveal className="ds-faq-wrap">
          {faqs.map((item, i) => (
            <FAQItem
              key={i}
              q={item.q}
              a={item.a}
              open={openIndex === i}
              onToggle={() => setOpenIndex((prev) => (prev === i ? -1 : i))}
            />
          ))}
        </Reveal>
      </div>
    </section>
  );
}