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 }>({});

  // Update activeTab when tabs change (e.g., product type changes)
  useEffect(() => {
    if (tabs.length > 0 && !tabs.find(t => t.id === activeTab)) {
      setActiveTab(tabs[0].id);
    }
  }, [tabs, activeTab]);

  // 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('space-y-4', className)}>
      {/* Mobile: Horizontal Tabs */}
      <div className="lg:hidden">
        <div className="flex gap-2 overflow-x-auto pb-2">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              type="button"
              onClick={() => scrollToSection(tab.id)}
              className={cn(
                'flex-shrink-0 px-4 py-2 rounded-md text-sm font-medium transition-colors',
                'flex items-center gap-2',
                activeTab === tab.id
                  ? 'bg-primary text-primary-foreground'
                  : 'bg-muted text-muted-foreground'
              )}
            >
              {tab.icon && <span className="w-4 h-4">{tab.icon}</span>}
              {tab.label}
            </button>
          ))}
        </div>
      </div>

      {/* Desktop: Vertical Layout */}
      <div className="hidden lg:flex gap-6">
        {/* Vertical Tabs Sidebar */}
        <div className="w-56 flex-shrink-0">
          <div className="sticky top-4 space-y-1">
            {tabs.map((tab) => (
              <button
                key={tab.id}
                type="button"
                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 - Desktop */}
        <div
          ref={contentRef}
          className="flex-1 overflow-y-auto pr-2"
        >
          {React.Children.map(children, (child) => {
            if (React.isValidElement(child) && child.props.id) {
              const sectionId = child.props.id as string;
              const isActive = sectionId === activeTab;
              const originalClassName = child.props.className || '';
              return React.cloneElement(child as React.ReactElement<any>, {
                ref: (el: HTMLElement) => registerSection(sectionId, el),
                className: isActive ? originalClassName : `${originalClassName} hidden`.trim(),
              });
            }
            return child;
          })}
        </div>
      </div>

      {/* Mobile: Content Area */}
      <div className="lg:hidden">
        {React.Children.map(children, (child) => {
          if (React.isValidElement(child) && child.props.id) {
            const sectionId = child.props.id as string;
            const isActive = sectionId === activeTab;
            const originalClassName = child.props.className || '';
            return React.cloneElement(child as React.ReactElement<any>, {
              className: isActive ? originalClassName : `${originalClassName} hidden`.trim(),
            });
          }
          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';
