"use client";

import React, { useMemo, memo } from "react";
import DOMPurify from "isomorphic-dompurify";
import { StructuredData } from "@/types/product";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Separator } from "@/components/ui/separator";

/**
 * ⚡ Optimization: ProductDetailsAccordion
 * - Wrapped in React.memo to prevent unnecessary re-renders when props (description, manufacturerInfo, structuredData) are stable.
 * - Memoized HTML sanitization and HTML detection to skip expensive DOMPurify calls on re-renders where description remains unchanged.
 */
const ProductDetailsAccordion = memo(({
  description,
  manufacturerInfo,
  structuredData,
}: {
  description: string;
  manufacturerInfo: string;
  structuredData: StructuredData[];
}) => {
  // SECURITY: Sanitize HTML content to prevent XSS.
  // Using isomorphic-dompurify ensures sanitization works both on the server (SSR) and the client.
  // ⚡ Optimization: Wrapped in useMemo to avoid redundant sanitization of static or unchanged descriptions.
  const sanitizedDescription = useMemo(() => DOMPurify.sanitize(description), [description]);

  // ⚡ Optimization: Memoize the check for HTML content.
  const isHtml = useMemo(() => description.includes("<") && description.includes(">"), [description]);

  return (
    <div className="">
      <Accordion type="single" collapsible className="p-4">
        <AccordionItem value="item-1">
          <AccordionTrigger className="text-lg font-bold px-4 hover:no-underline">
            Produktbeschreibung und Produktdaten
          </AccordionTrigger>
          <AccordionContent>
            <div className="flex justify-end mx-4 mt-2">
              <div className="w-1/3 mx-4">
                {Array.isArray(structuredData) &&
                  structuredData.map((data, index) => (
                    <div key={index}>
                      {Object.entries(data).map(([key, value]) => (
                        <div key={key} className="">
                          <p className="mt-2.5 text-[14px] text-gray-500">
                            {key}
                          </p>
                          <p className="m-2 text-[16px]">{value}</p>
                          <Separator />
                        </div>
                      ))}
                    </div>
                  ))}
              </div>
              <div className="text-align-left w-2/3 m-4 text-base">
                {isHtml ? (
                  <div dangerouslySetInnerHTML={{ __html: sanitizedDescription }} />
                ) : (
                  <p>{description}</p>
                )}
              </div>
            </div>
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="item-3">
          <AccordionTrigger className="text-lg font-semibold  px-4 hover:no-underline">
            Herstellerinformationen
          </AccordionTrigger>
          <AccordionContent className="mx-4 mt-2">
            {manufacturerInfo}
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-4">
          <AccordionTrigger className="text-lg font-semibold  px-4 hover:no-underline">
            Produktsicherheit
          </AccordionTrigger>
          <AccordionContent className="mx-4 mt-2">
            Verantwortlich für dieses Produkt innerhalb der EU ist: {manufacturerInfo}. 
            Dieses Produkt entspricht allen geltenden Sicherheitsanforderungen der Europäischen Union.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
});

ProductDetailsAccordion.displayName = "ProductDetailsAccordion";

export default ProductDetailsAccordion;