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

import { OverloadAlert, NotActiveAlert, BlockedAlert } from './components/StatusAlerts';
import { Shield } from 'lucide-react';

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;
  const currentSection = data?.global?.section || (window as unknown as DashboardWindow).wawpDashboardData?.currentSection;
  const isRestricted = domainStatus && domainStatus !== 'active';

  // 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} />
          <NoticeBar data={data} />
          
          <main className="flex-1 overflow-y-auto overflow-x-hidden p-6 custom-scrollbar scroll-smooth">
            {(!isRestricted || currentSection === 'connector') ? (
              <div className="max-w-[1600px] mx-auto animate-in fade-in duration-500">
                {children}
              </div>
            ) : (
              <div className="max-w-7xl mx-auto">
                {domainStatus === 'overload' && <OverloadAlert i18n={data?.i18n} />}
                {domainStatus === 'not active' && <NotActiveAlert i18n={data?.i18n} />}
                {domainStatus === 'blocked' && <BlockedAlert i18n={data?.i18n} />}
                
                <div className="mt-8 flex flex-col items-center justify-center py-24 text-center opacity-40 grayscale selection:bg-none pointer-events-none bg-white/50 rounded-2xl border border-dashed border-slate-300">
                   <Shield className="w-16 h-16 text-slate-300 mb-4" />
                   <h2 className="text-xl font-black text-slate-500 uppercase tracking-tight">Feature Access Restricted</h2>
                   <p className="text-sm text-slate-400 max-w-sm mt-2">Please resolve the account status to regain access to this page's features.</p>
                </div>
              </div>
            )}
          </main>
        </div>
      </div>
    </SidebarProvider>
  );
};

export default MainLayout;