import { Globe2, Languages, Sparkles, Truck } from "lucide-react";
import { NavLink, Outlet } from "react-router-dom";

import { useAuth } from "@/auth/AuthProvider";
import { Button } from "@/components/ui/button";
import { inTheme } from "@/theme";
import { inThemeVars } from "@/theme-vars";

const navItems = [
  { to: "/", label: "Overview", icon: Globe2 },
  { to: "/fulfillment", label: "Fulfillment", icon: Languages },
  { to: "/shipping", label: "Shipping", icon: Truck },
];

export function InShell() {
  const { logout, user } = useAuth();

  return (
    <div
      className="min-h-screen bg-[var(--in-shell-bg)] text-[var(--in-text)]"
      style={inThemeVars(inTheme)}
    >
      <header className="border-b border-[var(--in-border)] bg-[var(--in-panel-bg)]">
        <div className="mx-auto flex max-w-7xl flex-wrap items-center gap-4 px-6 py-5">
          <div>
            <div className="text-xs font-black uppercase tracking-[0.24em] text-[var(--in-accent)]">IN</div>
            <div className="mt-1 text-xl font-black tracking-[-0.04em]">Operations Relay Workspace</div>
          </div>

          <nav className="flex items-center gap-2 md:ml-8">
            {navItems.map((item) => {
              const Icon = item.icon;
              return (
                <NavLink
                  key={item.to}
                  to={item.to}
                  end={item.to === "/"}
                  className={({ isActive }) =>
                    [
                      "inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition-colors",
                      isActive
                        ? "bg-[var(--in-accent-soft)] text-[var(--in-accent)]"
                        : "text-[var(--in-muted)] hover:bg-white",
                    ].join(" ")
                  }
                >
                  <Icon className="h-4 w-4" />
                  {item.label}
                </NavLink>
              );
            })}
          </nav>

          <div className="ml-auto flex flex-wrap items-center gap-3">
            <div className="inline-flex items-center gap-2 rounded-full bg-[var(--in-accent-soft)] px-3 py-2 text-sm font-semibold text-[var(--in-accent)]">
              <Sparkles className="h-4 w-4" />
              Multilingual relay active
            </div>
            <div className="rounded-full border border-[var(--in-border)] bg-white px-4 py-2 text-sm font-semibold text-[var(--in-text)]">
              {user?.name ?? user?.email}
            </div>
            <Button variant="outline" onClick={logout}>
              Log out
            </Button>
          </div>
        </div>
      </header>

      <main className="mx-auto max-w-7xl px-6 py-8">
        <Outlet />
      </main>
    </div>
  );
}
