'use client';

import { useEffect, useState, useRef } from 'react';

const links = [
  { id: 'basic-info', label: 'Basic Information' },
  { id: 'contact-info', label: 'Contact Information' },
  { id: 'professional-types', label: 'Professional Types' },
  { id: 'upload-documents', label: 'Upload Documents' },
  { id: 'licensing-areas', label: 'Licensing & Areas' },
  { id: 'biography', label: 'Biography' },
  { id: 'expertise', label: 'Expertise' },
  { id: 'years-business', label: 'Years In Business' },
  { id: 'areas-expertise-years', label: 'Areas in expertise & Years' },
  { id: 'contracts-closed', label: 'Contracts Closed' },
  { id: 'price-point', label: 'Price Point' },
  { id: 'specialization', label: 'Specialization' },
  { id: 'hobbies', label: 'Hobbies' },
  { id: 'certifications', label: 'Certifications' },
  { id: 'availability', label: 'Availability' },
];

interface QuickLinksProps {
  scrollContainerRef: React.RefObject<HTMLDivElement | null>;
}

export function QuickLinks({ scrollContainerRef }: QuickLinksProps) {
  const [activeLink, setActiveLink] = useState('basic-info');
  const isClickScrolling = useRef(false);

  useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    const handleScroll = () => {
      if (isClickScrolling.current) return;

      const containerRect = container.getBoundingClientRect();
      const containerTop = containerRect.top;

      let currentSection = 'basic-info';

      for (const link of links) {
        const element = document.getElementById(link.id);
        if (element) {
          const rect = element.getBoundingClientRect();
          // Check if the section is near the top of the container
          if (rect.top <= containerTop + 100) {
            currentSection = link.id;
          }
        }
      }

      setActiveLink(currentSection);
    };

    container.addEventListener('scroll', handleScroll);
    return () => container.removeEventListener('scroll', handleScroll);
  }, [scrollContainerRef]);

  const scrollToSection = (id: string) => {
    const container = scrollContainerRef.current;
    const element = document.getElementById(id);

    if (element && container) {
      isClickScrolling.current = true;
      setActiveLink(id);

      const containerRect = container.getBoundingClientRect();
      const elementRect = element.getBoundingClientRect();
      const scrollTop = container.scrollTop + (elementRect.top - containerRect.top) - 20;

      container.scrollTo({
        top: scrollTop,
        behavior: 'smooth'
      });

      // Reset the flag after scroll animation completes
      setTimeout(() => {
        isClickScrolling.current = false;
      }, 500);
    }
  };

  return (
    <div className="bg-white rounded-[20px] p-6">
      <h3 className="text-[16px] font-bold text-[#00293D] font-fractul mb-4">Quick Links</h3>
      <nav className="space-y-1">
        {links.map((link) => (
          <button
            key={link.id}
            onClick={() => scrollToSection(link.id)}
            className={`block w-full text-left px-3 py-2 rounded-lg text-[14px] font-serif transition-colors ${
              activeLink === link.id
                ? 'text-[#E58625] font-semibold bg-[#E58625]/5'
                : 'text-[#00293D] hover:bg-gray-50'
            }`}
          >
            {link.label}
          </button>
        ))}
      </nav>
    </div>
  );
}
