import { Link, useNavigate, useLocation } from 'react-router-dom';
import { useEffect } from 'react';

const AdminLayout = ({ children }) => {
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    const token = localStorage.getItem('admin_token');
    if (!token) {
      navigate('/admin/login');
    }
  }, [navigate]);

  const handleLogout = () => {
    localStorage.removeItem('admin_token');
    navigate('/admin/login');
  };

  const isActive = (path) => location.pathname === path;

  return (
    <div className="min-h-screen bg-gray-100">
      {/* Sidebar */}
      <aside className="fixed left-0 top-0 h-screen w-64 bg-gray-900 text-white p-6 overflow-y-auto">
        <div className="mb-8">
          <img src="/assets/img/logo1.png" alt="Logo" className="h-12 mb-2" />
          <h2 className="text-xl font-bold">RH Elektronik</h2>
          <p className="text-sm text-gray-400">Admin Panel</p>
        </div>

        <nav className="space-y-2">
          <Link 
            to="/admin/dashboard"
            className={`block px-4 py-3 rounded-lg transition ${
              isActive('/admin/dashboard') 
                ? 'bg-blue-600 text-white' 
                : 'text-gray-300 hover:bg-gray-800'
            }`}
            data-testid="nav-dashboard"
          >
            📊 Dashboard
          </Link>
          
          <Link 
            to="/admin/blogs"
            className={`block px-4 py-3 rounded-lg transition ${
              location.pathname.startsWith('/admin/blogs') 
                ? 'bg-blue-600 text-white' 
                : 'text-gray-300 hover:bg-gray-800'
            }`}
            data-testid="nav-blogs"
          >
            📝 Blog Posts
          </Link>
          
          <Link 
            to="/admin/products"
            className={`block px-4 py-3 rounded-lg transition ${
              location.pathname.startsWith('/admin/products') 
                ? 'bg-blue-600 text-white' 
                : 'text-gray-300 hover:bg-gray-800'
            }`}
          >
            🛍️ Products
          </Link>
          
          <Link 
            to="/admin/services"
            className={`block px-4 py-3 rounded-lg transition ${
              isActive('/admin/services') 
                ? 'bg-blue-600 text-white' 
                : 'text-gray-300 hover:bg-gray-800'
            }`}
          >
            🔧 Layanan
          </Link>
          
          <Link 
            to="/admin/brands"
            className={`block px-4 py-3 rounded-lg transition ${
              isActive('/admin/brands') 
                ? 'bg-blue-600 text-white' 
                : 'text-gray-300 hover:bg-gray-800'
            }`}
          >
            🏭 Brand Partners
          </Link>
          
          <Link 
            to="/admin/about"
            className={`block px-4 py-3 rounded-lg transition ${
              isActive('/admin/about') 
                ? 'bg-blue-600 text-white' 
                : 'text-gray-300 hover:bg-gray-800'
            }`}
          >
            💬 Tentang Kami
          </Link>
          
          <Link 
            to="/admin/areas"
            className={`block px-4 py-3 rounded-lg transition ${
              isActive('/admin/areas') 
                ? 'bg-blue-600 text-white' 
                : 'text-gray-300 hover:bg-gray-800'
            }`}
          >
            📍 Area Layanan
          </Link>
          
          <Link 
            to="/admin/contact"
            className={`block px-4 py-3 rounded-lg transition ${
              isActive('/admin/contact') 
                ? 'bg-blue-600 text-white' 
                : 'text-gray-300 hover:bg-gray-800'
            }`}
          >
            📞 Kontak Info
          </Link>

          <hr className="my-4 border-gray-700" />

          <Link 
            to="/"
            className="block px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-800 transition"
          >
            🏠 View Website
          </Link>

          <button 
            onClick={handleLogout}
            className="w-full text-left px-4 py-3 rounded-lg text-gray-300 hover:bg-red-600 transition"
            data-testid="logout-button"
          >
            🚪 Logout
          </button>
        </nav>
      </aside>

      {/* Main Content */}
      <div className="ml-64 p-8">
        {children}
      </div>
    </div>
  );
};

export default AdminLayout;
