import { NavLink, Outlet } from "react-router-dom";
import { useAuth } from "../auth/AuthContext";

const navItems = [
  { to: "/dashboard", label: "Dashboard", end: true },
  { to: "/dashboard/bookings", label: "Bookings" },
  { to: "/dashboard/listings", label: "Listings" },
  { to: "/dashboard/analytics", label: "Analytics" },
  { to: "/dashboard/settings", label: "Settings" },
];

export function AdminLayout() {
  const { user, signOut } = useAuth();
  const business = user?.vendor_profile?.business_name ?? "Vendor";
  const initial = (user?.first_name?.[0] || user?.email?.[0] || "V").toUpperCase();

  return (
    <div className="admin-shell">
      <aside className="admin-sidebar" aria-label="Vendor navigation">
        <div className="admin-sidebar-brand">
          <span className="admin-sidebar-logo" aria-hidden />
          <div>
            <div className="admin-sidebar-title">WaterTrekk Admin</div>
            <div className="admin-sidebar-sub">Vendor console</div>
          </div>
        </div>
        <nav className="admin-sidebar-nav">
          {navItems.map(({ to, label, end }) => (
            <NavLink
              key={to}
              to={to}
              end={end}
              className={({ isActive }) =>
                `admin-nav-item${isActive ? " admin-nav-item--active" : ""}`
              }
            >
              {label}
            </NavLink>
          ))}
        </nav>
        <div className="admin-sidebar-footer">
          <NavLink to="/" className="admin-back-link">
            ← Back to site
          </NavLink>
        </div>
      </aside>
      <div className="admin-main-wrap">
        <header className="admin-topbar">
          <div className="admin-topbar-search-wrap">
            <label className="visually-hidden" htmlFor="admin-search">
              Search
            </label>
            <input
              id="admin-search"
              type="search"
              className="admin-topbar-search"
              placeholder="Search bookings, guests…"
            />
          </div>
          <div className="admin-topbar-actions">
            <button type="button" className="admin-icon-btn" aria-label="Notifications">
              <span className="admin-bell" aria-hidden />
            </button>
            <div className="admin-user-chip">
              <span className="admin-user-avatar" aria-hidden>
                {initial}
              </span>
              <div className="admin-user-meta">
                <span className="admin-user-name">{business}</span>
                <span className="admin-user-role">{user?.email}</span>
              </div>
            </div>
            <button type="button" className="admin-btn admin-btn--ghost admin-sign-out" onClick={() => signOut()}>
              Sign out
            </button>
          </div>
        </header>
        <main className="admin-content">
          <Outlet />
        </main>
      </div>
    </div>
  );
}