import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '../hooks/useTheme.ts';
import { useAuth } from '../hooks/index.ts';
import { logoutAndNotify } from '../utils/index.ts';
import ThemeToggle from '../components/common/ThemeToggle.tsx';
import Navigation from '../components/navigation/Navigation.tsx';
import logo from '../../logo.png';

type MainLayoutProps = {
  children?: any;
};

const MainLayout = ({ children }: MainLayoutProps) => {
  const { theme } = useTheme();
  const { isAuthenticated } = useAuth();
  const navigate = useNavigate();

  const handleLogout = () => {
    logoutAndNotify();
    navigate('/');
  };

  useEffect(() => {
    // Ensure theme is applied on mount
    const root = document.documentElement;
    if (theme === 'dark') {
      root.classList.add('dark');
    } else {
      root.classList.remove('dark');
    }
  }, [theme]);

  return (
    <div className="min-h-screen bg-white dark:bg-black transition-colors duration-200 relative">
      {/* Top bar */}
      <header className="fixed top-0 left-0 right-0 z-50">
        <div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between gap-4">
          {/* Logo + title */}
          <div className="flex items-left gap-3">
            <img
              src={logo}
              alt="NLP Project Debater"
              className="h-9 w-auto rounded-md shadow-lg"
            />
          </div>

          {/* Center navigation */}
          <div className="flex-1 flex justify-center">
            <Navigation />
          </div>

          {/* Right controls */}
          <div className="flex items-center gap-2">
            {isAuthenticated && (
              <button
                onClick={handleLogout}
                className="px-3 py-2 text-sm font-medium rounded-lg bg-red-500 hover:bg-red-600 text-white transition-all duration-200 hover:scale-105"
              >
                Logout
              </button>
            )}
            <ThemeToggle />
          </div>
        </div>
      </header>

      {/* Push content below fixed header */}
      <main className="pt-20">
        {children}
      </main>
    </div>
  );
};

export default MainLayout;