import React, { useState } from "react";
import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Link from "next/link";

/**
 * Splits an HTML string into:
 *  - the first `count` <p>…</p> blocks
 *  - everything that comes after them
 */
function splitAfterParagraphs(html = "", count = 2) {
  if (!html) return { preview: "", rest: "" };

  // Match each <p …>…</p> block (handles multiline content)
  const regex = /<p[\s\S]*?<\/p>/gi;
  const matches = [];
  let match;

  while ((match = regex.exec(html)) !== null) {
    matches.push({ start: match.index, end: match.index + match[0].length });
  }

  if (matches.length <= count) {
    // Not enough paragraphs to hide anything
    return { preview: html, rest: "" };
  }

  const splitIndex = matches[count - 1].end;
  return {
    preview: html.slice(0, splitIndex),
    rest: html.slice(splitIndex),
  };
}

const AboutInfo = ({ productData }) => {
  const [expanded, setExpanded] = useState(false);

  const { preview, rest } = splitAfterParagraphs(productData?.description, 2);
  const hasMore = rest.trim().length > 0;

  return (
    <>
      <section className="about-section about-info-section pb-0">
        <div className="custom_container container">
          <Row className="text-center justify-content-center">
            <Col md={8}>
              <Heading el="h2" heading={productData?.title || ""} isHtml />

              {/* Always-visible first 2 paragraphs */}
              <div
                className="mb-0 gray-text"
                dangerouslySetInnerHTML={{ __html: preview }}
              />

              {/* Hidden/shown extra content */}
              {hasMore && (
                <>
                  <div className={`expandable-content ${expanded ? "expanded" : ""}`}>
                    <div className="inner-content">
                      <div
                        className="mb-0 gray-text"
                        dangerouslySetInnerHTML={{ __html: rest }}
                      />
                    </div>
                  </div>

                  <Link
                    href="#!"
                    onClick={(e) => {
                      e.preventDefault();
                      setExpanded((prev) => !prev);
                    }}
                    className="btn4 mt-3"
                  >
                    {expanded ? "Read Less" : "Read More"} <i className="fa-solid fa-arrow-right"></i>
                  </Link>
                </>
              )}
            </Col>
          </Row>
        </div>
      </section>
      <style jsx>{`
        .expandable-content {
          display: grid;
          grid-template-rows: 0fr;
          transition: grid-template-rows 0.4s ease-in-out;
        }
        .expandable-content .inner-content {
          overflow: hidden;
        }
        .expandable-content.expanded {
          grid-template-rows: 1fr;
        }
      `}</style>
    </>
  );
};

export default AboutInfo;