WooNooW/admin-spa/src/components/VerticalTabForm.tsx

import React, { useState, useEffect, useRef } from 'react';
import { cn } from '@/lib/utils';

export interface VerticalTab {
  id: string;
  label: string;
  icon?: React.ReactNode;
}

interface VerticalTabFormProps {
  tabs: VerticalTab[];
  children: React.ReactNode;
  className?: string;
}

export function VerticalTabForm({ tabs, children, className }: VerticalTabFormProps) {
  const [activeTab, setActiveTab] = useState(tabs[0]?.id || '');
  const contentRef = useRef<HTMLDivElement>(null);
  const sectionRefs = useRef<{ [key: string]: HTMLElement }>({});

  // Scroll spy - update active tab based on scroll position
  useEffect(() => {
    const handleScroll = () => {
      if (!contentRef.current) return;

      const scrollPosition = contentRef.current.scrollTop + 100; // Offset for better UX

      // Find which section is currently in view
      for (const tab of tabs) {
        const section = sectionRefs.current[tab.id];
        if (section) {
          const { offsetTop, offsetHeight } = section;
          if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
            setActiveTab(tab.id);
            break;
          }
        }
      }
    };

    const content = contentRef.current;
    if (content) {
      content.addEventListener('scroll', handleScroll);
      return () => content.removeEventListener('scroll', handleScroll);
    }
  }, [tabs]);

  // Register section refs
  const registerSection = (id: string, element: HTMLElement | null) => {
    if (element) {
      sectionRefs.current[id] = element;
    }
  };

  // Scroll to section
  const scrollToSection = (id: string) => {
    const section = sectionRefs.current[id];
    if (section && contentRef.current) {
      const offsetTop = section.offsetTop - 20; // Small offset from top
      contentRef.current.scrollTo({
        top: offsetTop,
        behavior: 'smooth',
      });
      setActiveTab(id);
    }
  };

  return (
    <div className={cn('flex gap-6', className)}>
      {/* Vertical Tabs Sidebar */}
      <div className="hidden lg:block w-56 flex-shrink-0">
        <div className="sticky top-4 space-y-1">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => scrollToSection(tab.id)}
              className={cn(
                'w-full text-left px-4 py-2.5 rounded-md text-sm font-medium transition-colors',
                'flex items-center gap-3',
                activeTab === tab.id
                  ? 'bg-primary text-primary-foreground'
                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
              )}
            >
              {tab.icon && <span className="w-4 h-4">{tab.icon}</span>}
              {tab.label}
            </button>
          ))}
        </div>
      </div>

      {/* Content Area */}
      <div
        ref={contentRef}
        className="flex-1 overflow-y-auto pr-2"
      >
        {React.Children.map(children, (child) => {
          if (React.isValidElement(child) && child.props['data-section-id']) {
            const sectionId = child.props['data-section-id'];
            const isActive = sectionId === activeTab;
            return React.cloneElement(child as React.ReactElement<any>, {
              ref: (el: HTMLElement) => registerSection(sectionId, el),
              className: isActive ? '' : 'hidden',
            });
          }
          return child;
        })}
      </div>
    </div>
  );
}

// Section wrapper component for easier usage
interface SectionProps {
  id: string;
  children: React.ReactNode;
  className?: string;
}

export const FormSection = React.forwardRef<HTMLDivElement, SectionProps>(
  ({ id, children, className }, ref) => {
    return (
      <div
        ref={ref}
        data-section-id={id}
        className={cn('mb-6 scroll-mt-4', className)}
      >
        {children}
      </div>
    );
  }
);

FormSection.displayName = 'FormSection';