'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/stores/auth-store';
import { useThemeStore } from '@/stores/theme-store';
import { themes } from '@/themes';
import { Sidebar } from '@/components/layouts/sidebar';
import { TopNav } from '@/components/layouts/topnav';
import { SidebarCompact } from '@/components/layouts/sidebar-compact';
import { SidebarFloating } from '@/components/layouts/sidebar-floating';
import { cn } from '@/lib/utils';

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const router = useRouter();
  const { isAuthenticated } = useAuthStore();
  const { theme } = useThemeStore();

  const currentTheme = themes[theme];
  const layout = currentTheme.layout;

  useEffect(() => {
    if (!isAuthenticated) {
      router.push('/login');
    }
  }, [isAuthenticated, router]);

  if (!isAuthenticated) {
    return null;
  }

  // Render layout based on theme
  const renderNavigation = () => {
    switch (layout) {
      case 'topnav':
        return <TopNav />;
      case 'sidebar-compact':
        return <SidebarCompact />;
      case 'sidebar-floating':
        return <SidebarFloating />;
      case 'sidebar-standard':
      default:
        return <Sidebar />;
    }
  };

  const getContentClasses = () => {
    switch (layout) {
      case 'topnav':
        return 'pt-16'; // Top padding for fixed top nav
      case 'sidebar-compact':
        return 'pl-16'; // Small left padding for compact sidebar
      case 'sidebar-floating':
        return 'pl-72 pr-4 py-4'; // Padding for floating sidebar
      case 'sidebar-standard':
      default:
        return 'pl-64'; // Standard sidebar width
    }
  };

  return (
    <div className={cn(
      'min-h-screen bg-background',
      layout === 'sidebar-floating' && 'bg-gradient-to-br from-background via-background to-muted/20'
    )}>
      {renderNavigation()}
      <div className={getContentClasses()}>
        {children}
      </div>
    </div>
  );
}