"use client";

import { useState, useEffect } from "react";
import { ChevronDown } from "lucide-react";
import AnimatedSection from "@/components/AnimatedSection";
import PageHeader from "@/components/ui/PageHeader";
import { decodeHtml } from "@/lib/commonFunctions";
import { useLanguage } from "@/src/hooks/LanguageContext";
import { getTranslation } from "@/src/hooks/useTranslation";
import { useBasic } from "../context/BasicContext";
import { getBasicDetails } from "@/lib/api/apis";

/* ─── Parse the backend HTML string into structured data ─── */
interface AccordionItem {
  header: string;
  content: string;
}

interface ParsedContent {
  title: string;
  subtitle: string;
  quote: string;
  items: AccordionItem[];
}

function parsePrivacyHtml(html: string): ParsedContent {
  if (typeof window === "undefined" || !html) {
    return { title: "", subtitle: "", quote: "", items: [] };
  }

  // Use DOMParser to safely parse without affecting the document
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, "text/html");

  const title = doc.querySelector(".header h1")?.textContent?.trim() ?? "";
  const subtitle = doc.querySelector(".header p")?.textContent?.trim() ?? "";
  const quote = doc.querySelector(".quote")?.textContent?.trim() ?? "";

  const items: AccordionItem[] = [];
  doc.querySelectorAll(".accordion-item").forEach((item) => {
    // Header text without the +/- icon span
    const iconSpan = item.querySelector(".accordion-header .icon");
    iconSpan?.remove();
    const header = item.querySelector(".accordion-header")?.textContent?.trim() ?? "";

    // Inner HTML of content so lists/paragraphs render properly
    const content = item.querySelector(".accordion-content")?.innerHTML?.trim() ?? "";

    if (header) items.push({ header, content });
  });

  return { title, subtitle, quote, items };
}

export default function PrivacyPolicy() {
  const basicCtx = useBasic();
  const { language } = useLanguage();
  const tp = getTranslation(language).privacyPage as any;
  const [openIndex, setOpenIndex] = useState<number | null>(null);
  // Fresh data fetched on every page visit
  const [freshPrivacy, setFreshPrivacy] = useState<any>(null);

  useEffect(() => {
    getBasicDetails().then((res) => {
      if (res?.data?.privacy_policy) setFreshPrivacy(res.data.privacy_policy);
    });
  }, []);

  // Prefer freshly fetched data; fall back to layout context while loading
  const privacy = freshPrivacy ?? basicCtx?.privacy_policy;

  const rawHtml =
    language === "hindi" ? privacy?.h_description : privacy?.description;

  const parsed = parsePrivacyHtml(decodeHtml(rawHtml) ?? "");

  // Fallback: if parsing yields nothing, render sanitised raw HTML
  const hasParsed = parsed.items.length > 0 || parsed.title;

  return (
    <div>
      <PageHeader title={tp.pageTitle} breadcrumb={tp.breadcrumb} />

      <div className="min-h-screen bg-gradient-to-br from-orange-50 to-white">
        <div className="container mx-auto px-4 py-12 max-w-4xl">
          <AnimatedSection>

            {/* Last updated */}
            {privacy?.modified_at && (
              <p className="text-center text-gray-400 text-sm mb-8">
                {tp.lastUpdated} {privacy.modified_at}
              </p>
            )}

            {hasParsed ? (
              <div className="space-y-6">

                {/* ── Header block ── */}
                {(parsed.title || parsed.subtitle) && (
                  <div className="bg-gradient-to-br from-[#FAA631] to-[#E6952B] rounded-2xl px-8 py-10 text-white text-center shadow-lg shadow-[#FAA631]/20">
                    {parsed.title && (
                      <h1 className="text-2xl md:text-3xl font-bold mb-3">
                        {parsed.title}
                      </h1>
                    )}
                    {parsed.subtitle && (
                      <p className="text-white/90 text-base md:text-lg max-w-2xl mx-auto leading-relaxed">
                        {parsed.subtitle}
                      </p>
                    )}
                  </div>
                )}

                {/* ── Quote block ── */}
                {parsed.quote && (
                  <div className="bg-[#FFF4E4] border border-[#FAA631]/30 rounded-2xl px-8 py-6 text-center">
                    <p className="text-[#FAA631] font-semibold text-lg md:text-xl italic">
                      &ldquo;{parsed.quote}&rdquo;
                    </p>
                  </div>
                )}

                {/* ── Accordion items ── */}
                {parsed.items.length > 0 && (
                  <div className="space-y-3">
                    {parsed.items.map((item, index) => {
                      const isOpen = openIndex === index;
                      return (
                        <div
                          key={index}
                          className={`rounded-xl border transition-all duration-200 overflow-hidden ${
                            isOpen
                              ? "border-[#FAA631]/40 shadow-sm shadow-[#FAA631]/10"
                              : "border-gray-200"
                          }`}
                        >
                          {/* Header button */}
                          <button
                            onClick={() =>
                              setOpenIndex(isOpen ? null : index)
                            }
                            className={`w-full flex items-center justify-between px-5 md:px-6 py-4 text-left font-semibold text-[15px] md:text-base transition-all duration-200 ${
                              isOpen
                                ? "bg-[#FAA631] text-white"
                                : "bg-white text-gray-900 hover:bg-orange-50"
                            }`}
                          >
                            <span>{item.header}</span>
                            <ChevronDown
                              className={`w-5 h-5 shrink-0 ml-3 transition-transform duration-300 ${
                                isOpen ? "rotate-180 text-white" : "text-gray-400"
                              }`}
                            />
                          </button>

                          {/* Content */}
                          {isOpen && (
                            <div
                              className="px-5 md:px-6 py-4 bg-white text-gray-600 text-sm md:text-base leading-relaxed
                                [&_p]:mb-3 [&_p:last-child]:mb-0
                                [&_ul]:pl-5 [&_ul]:space-y-1.5 [&_ul]:list-disc [&_ul]:mb-2
                                [&_ol]:pl-5 [&_ol]:space-y-1.5 [&_ol]:list-decimal [&_ol]:mb-2
                                [&_li]:text-gray-600
                                [&_strong]:text-gray-800 [&_strong]:font-semibold
                                [&_a]:text-[#FAA631] [&_a]:underline"
                              dangerouslySetInnerHTML={{ __html: item.content }}
                            />
                          )}
                        </div>
                      );
                    })}
                  </div>
                )}

              </div>
            ) : (
              /* Fallback if DOMParser couldn't extract structure */
              <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 md:p-10">
                {rawHtml ? (
                  <div
                    className="prose prose-orange max-w-none text-gray-600"
                    dangerouslySetInnerHTML={{
                      __html: decodeHtml(rawHtml) ?? "",
                    }}
                  />
                ) : (
                  <p className="text-center text-gray-400 py-12">
                    {tp.loading}
                  </p>
                )}
              </div>
            )}

          </AnimatedSection>
        </div>
      </div>
    </div>
  );
}