import React, { useEffect } from 'react';
import Sidebar from './Sidebar';
import Topbar from './Topbar';
import { SidebarProvider } from "@/components/ui/sidebar"

import { OverloadAlert, NotActiveAlert, BlockedAlert } from './components/StatusAlerts';

import type { DashboardData } from './types';

interface MainLayoutProps {
  data: DashboardData;
  children: React.ReactNode;
}

interface DashboardWindow {
  wawpDashboardData?: { domainStatus?: string; currentSection?: string };
  ajaxurl?: string;
  WAWPAutoCheck?: { nonce: string };
  awpIgnoreDirtyCheck?: boolean;
}

const MainLayout: React.FC<MainLayoutProps> = ({ data, children }) => {
  const domainStatus = data?.domainStatus || (window as unknown as DashboardWindow).wawpDashboardData?.domainStatus;


  // Update body class for responsive behavior
  useEffect(() => {
    if (!data) return;
    const doAutoCheck = async (isManualClick = false) => {
      if (!data) return;
      const fd = new FormData();
      const ajaxUrl = data.global?.ajaxUrl || (window as unknown as DashboardWindow).ajaxurl;
      const nonce = (window as unknown as DashboardWindow).WAWPAutoCheck?.nonce || data.nonce || data.global?.nonce;
      
      if (!ajaxUrl || ajaxUrl === 'undefined') return;

      fd.append('action', 'wawp_auto_check_status');
      fd.append('security', nonce || '');
      fd.append('_ts', new Date().getTime().toString());

      try {
        const res = await fetch(ajaxUrl, { method: 'POST', body: fd });
        const json = await res.json();
        
        if (isManualClick) {
          (window as unknown as DashboardWindow).awpIgnoreDirtyCheck = true;
          window.location.reload();
          return;
        }

        if (json.success && json.data?.html) {
          const statusArea = document.getElementById('mrsb-status-area');
          if (statusArea) {
            statusArea.innerHTML = json.data.html;
          }
        }
      } catch {
        // Silently fail for background checks
      }
    };

    // Initial check after 3s
    const initialCheck = setTimeout(() => doAutoCheck(false), 3000);
    // Interval check every 30 mins
    const intervalCheck = setInterval(() => doAutoCheck(false), 1800000);

    // Global listener for legacy refresh button if it exists
    const handleLegacyRefresh = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      if (target.closest('#mrsb-refresh-button')) {
        e.preventDefault();
        doAutoCheck(true);
      }
    };

    document.addEventListener('click', handleLegacyRefresh);

    return () => {
      clearTimeout(initialCheck);
      clearInterval(intervalCheck);
      document.removeEventListener('click', handleLegacyRefresh);
    };
  }, [data]);

  if (!data) return null;

  return (
    <SidebarProvider defaultOpen={true}>
      <div className="wawp-wrapper flex w-full h-screen bg-[#f0f0f1] overflow-hidden selection:bg-emerald-100 italic-none">
        <Sidebar data={data} />
        
        <div className="wawp_main-container flex-1 min-w-0 flex flex-col bg-[#f0f0f1]">
          <Topbar data={data} />
          <main className="flex-1 overflow-y-auto overflow-x-hidden custom-scrollbar scroll-smooth relative">
            {/* Critical Alerts Container */}
            <div className="max-w-7xl mx-auto px-3 md:px-6 pt-3 md:pt-6">
              {domainStatus === 'overload' && <OverloadAlert i18n={data?.i18n as Record<string, string>} />}
              {domainStatus === 'not active' && <NotActiveAlert i18n={data?.i18n as Record<string, string>} />}
              {domainStatus === 'blocked' && <BlockedAlert i18n={data?.i18n as Record<string, string>} />}
            </div>

            {/* Page Content - Full Width to support Sticky Footer */}
            <div className="w-full animate-in fade-in duration-500">
              {children}
            </div>
          </main>
        </div>
      </div>
    </SidebarProvider>
  );
};

export default MainLayout;