import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useTheme } from '../hooks/useTheme';

const MainLayout = ({ children }) => {
  const { theme, toggleTheme } = useTheme();
  const location = useLocation();

  const navigation = [
    { name: 'Home', path: '/' },
    { name: 'News', path: '/news' },
    { name: 'Datasets', path: '/datasets' },
    { name: 'Directory', path: '/directory' },
    { name: 'Matchmaking', path: '/matchmaking' }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 via-blue-50 to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 transition-colors duration-300">
      <header className="bg-gradient-to-r from-bio-green via-bio-blue to-bio-purple text-white py-6 px-4 shadow-xl dark:from-gray-800 dark:via-gray-900 dark:to-gray-800 transition-colors duration-300">
        <div className="container mx-auto flex justify-between items-center">
          <div>
            <Link to="/" className="text-3xl md:text-4xl font-bold hover:opacity-90 transition drop-shadow-lg">
              <span className="bg-gradient-to-r from-yellow-300 via-green-300 to-blue-300 bg-clip-text text-transparent">
                GXS BioNexus Hub
              </span>
            </Link>
            <p className="text-lg mt-1 drop-shadow">
              <span className="bg-gradient-to-r from-green-200 to-blue-200 bg-clip-text text-transparent">
                Bioeconomy Innovation & FLW Nexus
              </span>
            </p>
          </div>
          <div className="flex items-center space-x-4">
            <nav className="hidden md:block">
              <ul className="flex space-x-6">
                {navigation.map((item) => (
                  <li key={item.path}>
                    <Link 
                      to={item.path} 
                      className={`hover:text-green-200 transition font-medium drop-shadow ${
                        location.pathname === item.path 
                          ? 'font-bold underline underline-offset-4 decoration-2 bg-gradient-to-r from-yellow-300 to-green-300 bg-clip-text text-transparent' 
                          : 'bg-gradient-to-r from-white to-gray-200 bg-clip-text text-transparent dark:from-gray-100 dark:to-gray-300'
                      }`}
                    >
                      {item.name}
                    </Link>
                  </li>
                ))}
              </ul>
            </nav>
            <button 
              onClick={toggleTheme}
              className="p-2 rounded-full bg-white/20 hover:bg-white/30 transition drop-shadow"
              aria-label="Toggle dark mode"
            >
              {theme === 'light' ? (
                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 drop-shadow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                </svg>
              ) : (
                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 drop-shadow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                </svg>
              )}
            </button>
            <button className="md:hidden text-white">
              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 drop-shadow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
          </div>
        </div>
      </header>
      
      <main>
        {children}
      </main>
      
      <footer className="bg-gradient-to-r from-gray-800 via-gray-900 to-gray-800 text-white py-12 dark:from-gray-900 dark:via-black dark:to-gray-900 transition-colors duration-300">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <h3 className="text-xl font-bold mb-4 drop-shadow">
                <span className="bg-gradient-to-r from-green-300 to-blue-300 bg-clip-text text-transparent">
                  GXS BioNexus Hub
                </span>
              </h3>
              <p className="text-gray-400 drop-shadow">Accelerating bioeconomy solutions that reduce food loss & waste.</p>
            </div>
            <div>
              <h4 className="font-bold mb-4 drop-shadow">
                <span className="bg-gradient-to-r from-green-300 to-blue-300 bg-clip-text text-transparent">
                  Platform
                </span>
              </h4>
              <ul className="space-y-2 text-gray-400">
                <li><Link to="/" className="hover:text-white transition drop-shadow">Home</Link></li>
                <li><Link to="/news" className="hover:text-white transition drop-shadow">News Hub</Link></li>
                <li><Link to="/datasets" className="hover:text-white transition drop-shadow">Datasets</Link></li>
                <li><Link to="/directory" className="hover:text-white transition drop-shadow">Directory</Link></li>
                <li><Link to="/matchmaking" className="hover:text-white transition drop-shadow">Matchmaking</Link></li>
              </ul>
            </div>
            <div>
              <h4 className="font-bold mb-4 drop-shadow">
                <span className="bg-gradient-to-r from-green-300 to-blue-300 bg-clip-text text-transparent">
                  Resources
                </span>
              </h4>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-white transition drop-shadow">Documentation</a></li>
                <li><a href="#" className="hover:text-white transition drop-shadow">API</a></li>
                <li><a href="#" className="hover:text-white transition drop-shadow">Community</a></li>
                <li><a href="#" className="hover:text-white transition drop-shadow">Blog</a></li>
              </ul>
            </div>
            <div>
              <h4 className="font-bold mb-4 drop-shadow">
                <span className="bg-gradient-to-r from-green-300 to-blue-300 bg-clip-text text-transparent">
                  Connect
                </span>
              </h4>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-white transition drop-shadow">Twitter</a></li>
                <li><a href="#" className="hover:text-white transition drop-shadow">LinkedIn</a></li>
                <li><a href="#" className="hover:text-white transition drop-shadow">GitHub</a></li>
                <li><a href="#" className="hover:text-white transition drop-shadow">Contact</a></li>
              </ul>
            </div>
          </div>
          <div className="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 drop-shadow">
            <p>&copy; 2025 GXS BioNexus Hub. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default MainLayout;