import type { ReactNode } from "react";
import { Link, useLocation } from "wouter";
import Navigation from "@/components/landing/Navigation";
import Footer from "@/components/landing/Footer";

const navItems = [
  { href: "/admin", label: "Overview" },
  { href: "/admin/users", label: "Users" },
  { href: "/admin/runs", label: "Runs" },
  { href: "/admin/support-tickets", label: "Support" },
  { href: "/admin/invariants", label: "Invariants" },
];

export default function AdminLayout({ children }: { children: ReactNode }) {
  const [location] = useLocation();

  return (
    <div className="min-h-screen text-foreground">
      <Navigation />
      <main className="pt-24 pb-24">
        <div className="max-w-6xl mx-auto px-6">
          <div className="flex flex-col gap-6 lg:flex-row">
            <aside className="lg:w-60">
              <div className="rounded-2xl border border-border/60 bg-card/70 p-4 shadow-sm">
                <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
                  Admin Control Plane
                </p>
                <nav className="mt-4 flex flex-col gap-2 text-sm">
                  {navItems.map((item) => {
                    const active = location === item.href;
                    return (
                      <Link key={item.href} href={item.href}>
                        <a
                          className={`rounded-lg px-3 py-2 transition ${
                            active
                              ? "bg-primary text-primary-foreground"
                              : "text-muted-foreground hover:text-foreground hover:bg-muted/40"
                          }`}
                        >
                          {item.label}
                        </a>
                      </Link>
                    );
                  })}
                </nav>
              </div>
            </aside>
            <section className="flex-1">{children}</section>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}
