'use client';

import { useState } from 'react';
import { AuthProvider } from '@/components/layout/auth-provider';
import { Sidebar } from '@/components/layout/sidebar';
import { Header } from '@/components/layout/header';
import { ToastProvider } from '@/components/ui/toast';
import { MustChangePasswordGuard } from '@/components/layout/must-change-password-guard';
import { SupportModal } from '@/components/modals/support-modal';

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [showSupport, setShowSupport] = useState(false);

  return (
    <AuthProvider>
      <ToastProvider>
        <div className="flex h-screen bg-surface-50 dark:bg-surface-900 overflow-hidden">
          <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:px-4 focus:py-2 focus:bg-primary-600 focus:text-white focus:rounded-md focus:m-2">
            Skip to main content
          </a>
          <Sidebar />
          <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
            <Header onSupportOpen={() => setShowSupport(true)} />
            <main id="main-content" role="main" className="flex-1 overflow-y-auto px-6 py-5 bg-surface-50 dark:bg-surface-900">
              <MustChangePasswordGuard>
                {children}
              </MustChangePasswordGuard>
            </main>
          </div>
          <SupportModal open={showSupport} onClose={() => setShowSupport(false)} />
        </div>
      </ToastProvider>
    </AuthProvider>
  );
}
