'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 { MobileNav } from '@/components/layouts/mobile-nav';
import { SubscriptionBanner } from '@/components/subscription-banner';
import { cn } from '@horux/shared-ui';

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

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

  useEffect(() => {
    // Solo verificar autenticación después de que el store se rehidrate
    if (_hasHydrated && !isAuthenticated) {
      router.push('/login');
    }
  }, [isAuthenticated, _hasHydrated, router]);

  // Mostrar loading mientras se rehidrata el store
  if (!_hasHydrated) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-background">
        <div className="animate-pulse text-muted-foreground">Cargando...</div>
      </div>
    );
  }

  if (!isAuthenticated) {
    return null;
  }

  // Render layout based on theme
  const renderDesktopNavigation = () => {
    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 px-4 md:px-6'; // Top padding for fixed top nav
      case 'sidebar-compact':
        return 'md:pl-16 px-4 md:px-0'; // Small left padding for compact sidebar on desktop
      case 'sidebar-floating':
        return 'px-4 py-4 md:pl-72 md:pr-4 md:py-4'; // Padding for floating sidebar on desktop
      case 'sidebar-standard':
      default:
        return 'px-4 md:pl-64 md:px-0'; // Standard sidebar width on desktop
    }
  };

  return (
    <div className={cn(
      'min-h-screen bg-background',
      layout === 'sidebar-floating' && 'bg-gradient-to-br from-background via-background to-muted/20'
    )}>
      {/* Mobile header with hamburger menu */}
      <header className="md:hidden fixed top-0 left-0 right-0 z-40 h-14 border-b bg-card px-4 flex items-center justify-between">
        <MobileNav />
        <span className="font-bold text-lg">Horux</span>
        <div className="w-10" />
      </header>

      {/* Desktop navigation - hidden on mobile */}
      <div className="hidden md:block">
        {renderDesktopNavigation()}
      </div>

      {/* Main content */}
      <div className={cn('pt-14 md:pt-0', getContentClasses())}>
        <SubscriptionBanner />
        {children}
      </div>
    </div>
  );
}