import React from "react";
import { Link, useLocation } from "react-router-dom";
import { Building2, Users, BarChart3, Terminal, LayoutDashboard, LogOut } from "lucide-react";

const navigation = [
  { name: "Dashboard", href: "/admin-web/", icon: LayoutDashboard },
  { name: "User Management", href: "/admin-web/user-management", icon: Users },
  { name: "Analytics", href: "/admin-web/analytics", icon: BarChart3 },
  { name: "Logs Explorer", href: "/admin-web/logs", icon: Terminal },
];

export default function Layout({ children }) {
  const location = useLocation();

  return (
    <div className="flex h-screen bg-slate-50">
      {/* Sidebar */}
      <div className="hidden md:flex md:flex-shrink-0">
        <div className="flex flex-col w-64">
          {/* Sidebar header */}
          <div className="flex items-center h-16 flex-shrink-0 px-4 bg-white border-b border-slate-200">
            <div className="flex items-center space-x-3">
                <div className="w-8 h-8 rounded-lg flex items-center justify-center">
                    <img src="/logo.svg" alt="Krow Logo" className="h-full w-full" />
                </div>
                <div>
                    <h1 className="text-lg font-bold text-slate-800">KROW</h1>
                    <p className="text-xs text-slate-500">Admin Console</p>
                </div>
            </div>
            {import.meta.env.VITE_APP_ENV && (
              <span className={`ml-auto inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                import.meta.env.VITE_APP_ENV === 'staging' ? 'bg-amber-100 text-amber-800' : 'bg-blue-100 text-blue-800'
              }`}>
                {import.meta.env.VITE_APP_ENV === 'staging' ? 'Staging' : 'Dev'}
              </span>
            )}
          </div>
          {/* Sidebar content */}
          <div className="flex-1 flex flex-col overflow-y-auto bg-white">
            <nav className="flex-1 px-4 py-4">
              {navigation.map((item) => (
                <Link
                  key={item.name}
                  to={item.href}
                  className={`
                    ${
                      location.pathname === item.href
                        ? "bg-blue-50 text-blue-600"
                        : "text-slate-600 hover:bg-slate-100 hover:text-slate-900"
                    }
                    group flex items-center px-3 py-3 text-sm font-medium rounded-lg
                  `}
                >
                  <item.icon
                    className="mr-3 h-6 w-6"
                    aria-hidden="true"
                  />
                  {item.name}
                </Link>
              ))}
            </nav>
            <div className="px-4 py-4 border-t border-slate-200">
                <Link
                  to="#"
                  className="group flex items-center px-3 py-3 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-100 hover:text-slate-900"
                >
                  <LogOut className="mr-3 h-6 w-6" />
                  Logout
                </Link>
            </div>
          </div>
        </div>
      </div>

      {/* Main content */}
      <div className="flex flex-col w-0 flex-1 overflow-hidden">
        <main className="flex-1 relative z-0 overflow-y-auto focus:outline-none">
          <div className="py-8">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
              {children}
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}