import * as React from 'react';
import { Sidebar } from './components/Sidebar';
import { NotificationPanel } from '@/components/shared';
import { cn } from '@/lib/utils';
import { isWordpressEmbed } from '@/lib/wp-integration';
import { useNotifications } from './hooks/useNotifications';
import { ProfileCompletenessBanner } from './components/ProfileCompletenessBanner';
import { LegalConsentBanner } from '@/features/legal/LegalConsentBanner';

interface DashboardLayoutProps {
  children: React.ReactNode;
  className?: string;
}

export function DashboardLayout({ children, className }: DashboardLayoutProps) {
  const [isPanelOpen, setIsPanelOpen] = React.useState(false);
  const [currentMessageTypeIndex, setCurrentMessageTypeIndex] = React.useState(0);

  const {
    notifications,
    unreadCount,
    highestUrgency,
    messageTypes,
    markRead,
    markAllRead,
  } = useNotifications();

  // Cycle through message types every 5 seconds
  React.useEffect(() => {
    if (messageTypes.length <= 1) return;

    const interval = setInterval(() => {
      setCurrentMessageTypeIndex((prev) => (prev + 1) % messageTypes.length);
    }, 5000);

    return () => clearInterval(interval);
  }, [messageTypes.length]);

  const currentMessageType = messageTypes[currentMessageTypeIndex];

  const handleNotificationClick = () => {
    setIsPanelOpen((prev) => !prev);
  };

  const handleMarkAsRead = (notificationId: string) => {
    markRead(notificationId);
  };

  const handleMarkAllRead = () => {
    markAllRead();
  };

  // In wp-admin the SPA mounts inside #root which has
  // `height: calc(100vh - 32px); overflow: hidden` (see admin-layout.css)
  // and admin-layout.css forces every #root descendant to `height: 100%`,
  // so we just take 100% here and let the cascade do the work. Standalone
  // CP has no such ancestor cap and needs its own h-screen.
  const isWp = isWordpressEmbed();

  return (
    <div
      className={cn(
        'flex bg-background overflow-hidden',
        isWp ? 'h-full' : 'h-screen',
      )}
    >
      <Sidebar
        unreadCount={unreadCount}
        highestUrgency={highestUrgency}
        messageType={currentMessageType}
        onNotificationClick={handleNotificationClick}
      />

      <main
        className={cn(
          // min-h-0 + min-w-0 are required so this flex child can shrink
          // below its content size — without them flex items default to
          // `min-height: auto`, content pushes the box taller than the
          // flex parent, and overflow-y-auto never engages.
          'flex-1 min-h-0 min-w-0 overflow-y-auto',
          className
        )}
      >
        <ProfileCompletenessBanner />
        <div className="px-4 pt-4 sm:px-6 lg:px-8">
          <LegalConsentBanner />
        </div>
        {children}
      </main>

      <NotificationPanel
        isOpen={isPanelOpen}
        onClose={() => setIsPanelOpen(false)}
        notifications={notifications}
        onMarkAsRead={handleMarkAsRead}
        onMarkAllRead={handleMarkAllRead}
      />
    </div>
  );
}