import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { createRoot } from '@wordpress/element';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { NotificationProvider } from '../../contexts/NotificationContext';
import { SettingsProvider } from '../../contexts/SettingsContext';
import ProrankHeader from '../../components/ProrankHeader';
import ProrankDivider from '../../components/ProrankDivider';
import ModuleNav from '../../components/ModuleNav';
import { Alert } from '../../components/ui';
import headerBadges from '../../utils/headerBadges';

// Import global styles for ModuleNav and utility-driven page layout.
import '../../styles/main.css';

// Import tabs
import DocumentationTab from './tabs/DocumentationTab';
import FeedbackTab from './tabs/FeedbackTab';
import AdvancedSettingsTab from './tabs/AdvancedSettingsTab';
import VersionManagementTab from './tabs/VersionManagementTab';

// Create a QueryClient instance for React Query (used by AdvancedSettingsTab)
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 minutes
      gcTime: 10 * 60 * 1000, // 10 minutes
      retry: 1,
      refetchOnWindowFocus: false,
    },
  },
});

const SupportPage = () => {
  const [activeTab, setActiveTab] = useState('documentation');
  const [notices, setNotices] = useState([]);

  const tabs = [
    { id: 'version', label: __('Updates & Backup', 'prorank-seo'), component: VersionManagementTab },
    { id: 'documentation', label: __('Documentation', 'prorank-seo'), component: DocumentationTab },
    { id: 'feedback', label: __('Feedback', 'prorank-seo'), component: FeedbackTab },
    { id: 'advanced', label: __('Advanced Settings', 'prorank-seo'), component: AdvancedSettingsTab },
  ];

  const ActiveTabComponent = tabs.find(tab => tab.id === activeTab)?.component;

  const addNotice = (status, message) => {
    const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
    setNotices((prev) => [...prev, { id, status, message }]);

    window.setTimeout(() => {
      setNotices((prev) => prev.filter((notice) => notice.id !== id));
    }, 5000);
  };

  const removeNotice = (id) => {
    setNotices((prev) => prev.filter((notice) => notice.id !== id));
  };

  return (
    <QueryClientProvider client={queryClient}>
      <div className="prorank-seo-admin-page prorank-page prorank-admin-page pr:min-h-screen pr:bg-slate-50">
        {/* Page Header */}
        <ProrankHeader
          title={__('Support', 'prorank-seo')}
          subtitle={__('Access update guidance, backup tools, documentation, and plugin diagnostics', 'prorank-seo')}
          badges={headerBadges.support}
        />

        {/* Main Content */}
        <div className="pr:p-8">
          {/* Unified ModuleNav Component */}
          <ModuleNav
            modules={tabs.map((tab) => ({
              id: tab.id,
              label: tab.label,
            }))}
            activeModule={activeTab}
            onModuleChange={setActiveTab}
          />

          <ProrankDivider />

          {notices.length > 0 && (
            <div className="pr:mt-6 pr:flex pr:flex-col pr:gap-3">
              {notices.map((notice) => (
                <Alert
                  key={notice.id}
                  variant={notice.status}
                  dismissible
                  onDismiss={() => removeNotice(notice.id)}
                >
                  {notice.message}
                </Alert>
              ))}
            </div>
          )}

          {/* Tab Content */}
          <div className="pr:mt-6">
            {ActiveTabComponent && <ActiveTabComponent addNotice={addNotice} />}
          </div>
        </div>
      </div>
    </QueryClientProvider>
  );
};

// Render the Support page
const rootElement = document.getElementById('prorank-admin-root');

if (rootElement && rootElement.dataset.page === 'support' && !rootElement._reactRoot) {
  const root = createRoot(rootElement);
  rootElement._reactRoot = root;
  root.render(
    <QueryClientProvider client={queryClient}>
      <SettingsProvider>
        <NotificationProvider>
          <SupportPage />
        </NotificationProvider>
      </SettingsProvider>
    </QueryClientProvider>
  );
}

// Export for admin App.jsx
export default SupportPage;