import { useState, useEffect } from 'react';

export function useUrlTabs(defaultTab: string, paramName: string = 'tab') {
  const [activeTab, setActiveTab] = useState(() => {
    const params = new URLSearchParams(window.location.search);
    return params.get(paramName) || defaultTab;
  });

  // Sync state when URL changes externally (via popstate or custom wawp-navigate event)
  useEffect(() => {
    const handleUrlChange = () => {
      // Use Promise.resolve().then to wait for other synchronous route handlers to update history
      Promise.resolve().then(() => {
        const params = new URLSearchParams(window.location.search);
        const urlTab = params.get(paramName) || defaultTab;
        setActiveTab(urlTab);
      });
    };

    window.addEventListener('popstate', handleUrlChange);
    window.addEventListener('wawp-navigate', handleUrlChange);

    return () => {
      window.removeEventListener('popstate', handleUrlChange);
      window.removeEventListener('wawp-navigate', handleUrlChange);
    };
  }, [defaultTab, paramName]);

  // Sync URL when activeTab changes internally
  useEffect(() => {
    const url = new URL(window.location.href);
    const currentUrlTab = url.searchParams.get(paramName) || defaultTab;
    if (activeTab !== currentUrlTab) {
      if (activeTab === defaultTab) {
        url.searchParams.delete(paramName);
      } else {
        url.searchParams.set(paramName, activeTab);
      }
      window.history.replaceState({}, '', url.toString());
    }
  }, [activeTab, defaultTab, paramName]);

  return [activeTab, setActiveTab] as const;
}