'use client';
import React, { useState } from 'react';
import Link from 'next/link';
import routes from '@/app/routes';
import ContactSupportSection from '@/components/shared/ContactSupportSection';
import { PRIVACY_SECTIONS, type PrivacyParagraph } from './privacyContent';

const paragraphClass = 'text-[15px] md:text-[16px] leading-[1.6] text-[#686262] font-medium';

// Renders a plain-text paragraph, or one made of text + link segments.
const renderParagraph = (para: PrivacyParagraph) => {
  if (typeof para === 'string') return para;

  return para.map((segment, idx) =>
    typeof segment === 'string' ? (
      <React.Fragment key={idx}>{segment}</React.Fragment>
    ) : (
      <Link key={idx} href={segment.href} className="text-[#1657D9] underline hover:text-[#134BB8]">
        {segment.text}
      </Link>
    )
  );
};

const PrivacyPage = () => {
  const [activeSection, setActiveSection] = useState(PRIVACY_SECTIONS[0].id);

  const scrollToSection = (id: string) => {
    setActiveSection(id);
    const element = document.getElementById(id);
    if (element) {
      const yOffset = -100; // Offset for fixed headers if any
      const y = element.getBoundingClientRect().top + window.scrollY + yOffset;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  };

  React.useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        // Find the topmost visible section
        const visibleEntries = entries.filter(entry => entry.isIntersecting);
        if (visibleEntries.length > 0) {
          // Sort by top position to find the one closest to the top
          visibleEntries.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
          setActiveSection(visibleEntries[0].target.id);
        }
      },
      {
        rootMargin: '-100px 0px -60% 0px',
        threshold: 0
      }
    );

    PRIVACY_SECTIONS.forEach((sec) => {
      const element = document.getElementById(sec.id);
      if (element) observer.observe(element);
    });

    return () => observer.disconnect();
  }, []);

  return (
    <main className="min-h-screen bg-white">
      <section className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        {/* Breadcrumbs */}
        <nav className="text-[14px] text-[#686262] font-medium mb-6">
          <Link href={routes.home} className="hover:text-black transition-colors">Home</Link>
          <span className="mx-2">&gt;</span>
          <span className="text-black">Privacy Policy</span>
        </nav>

        {/* Title */}
        <h1 className="text-[28px] md:text-[36px] font-bold text-[#000000] mb-8 md:mb-12">Privacy Policy</h1>

        <div className="flex flex-col md:flex-row gap-0 border-t border-[#F0EFEF]">
          {/* Sidebar - Table of Contents (desktop only, same as Terms & Conditions) */}
          <div className="hidden md:block md:w-[280px] pt-8 pr-8 md:sticky md:top-24 self-start md:max-h-[calc(100vh-7rem)] md:overflow-y-auto">
            <h3 className="text-[14px] font-medium text-[#686262] mb-4">Table of Contents</h3>
            <div className="space-y-3">
              {PRIVACY_SECTIONS.map((sec) => (
                <button
                  key={sec.id}
                  onClick={() => scrollToSection(sec.id)}
                  className={`block text-left text-[15px] leading-snug transition-colors ${activeSection === sec.id
                    ? 'font-bold text-[#000000]'
                    : 'font-medium text-[#686262] hover:text-[#000000]'
                    }`}
                >
                  {sec.title}
                </button>
              ))}
            </div>
          </div>

          {/* Vertical Divider */}
          <div className="hidden md:block w-[1px] bg-[#F0EFEF] h-auto"></div>

          {/* Content Area */}
          <div className="flex-1 md:pl-12 pt-8 pb-12">
            {PRIVACY_SECTIONS.map((sec) => (
              <div key={sec.id} id={sec.id} className="mb-12 last:mb-0">
                <h2 className="text-[20px] md:text-[24px] font-bold text-[#000000] mb-4 md:mb-6">{sec.title}</h2>
                <div className="space-y-4">
                  {sec.paragraphs.map((para, idx) => (
                    <p key={idx} className={paragraphClass}>
                      {renderParagraph(para)}
                    </p>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Reusable Contact Support Section */}
      <ContactSupportSection />
    </main>
  );
};

export default PrivacyPage;