import { NavLink, Outlet } from "react-router-dom";

import { useAuth } from "../auth/AuthProvider";
import { ThemeToggle } from "./ThemeToggle";

const links = [
  { to: "/", label: "Overview" },
  { to: "/settings/company", label: "Company Settings" },
  { to: "/crm/customers", label: "Customers" },
  { to: "/crm/vendors", label: "Vendors" },
  { to: "/planning/gantt", label: "Gantt" },
];

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

  return (
    <div className="min-h-screen px-4 py-6 md:px-8">
      <div className="mx-auto flex max-w-7xl gap-6">
        <aside className="hidden w-72 shrink-0 flex-col rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel backdrop-blur md:flex">
          <div>
            <div className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">MRP Codex</div>
            <h1 className="mt-3 text-2xl font-extrabold text-text">Manufacturing foundation</h1>
            <p className="mt-2 text-sm text-muted">Single-tenant platform shell with branding, auth, file storage, and planning foundations.</p>
          </div>
          <nav className="mt-8 space-y-2">
            {links.map((link) => (
              <NavLink
                key={link.to}
                to={link.to}
                className={({ isActive }) =>
                  `block rounded-2xl px-4 py-3 text-sm font-semibold transition ${
                    isActive ? "bg-brand text-white" : "text-text hover:bg-page"
                  }`
                }
              >
                {link.label}
              </NavLink>
            ))}
          </nav>
          <div className="mt-auto rounded-2xl border border-line/70 bg-page/70 p-4">
            <p className="text-sm font-semibold text-text">{user?.firstName} {user?.lastName}</p>
            <p className="text-xs text-muted">{user?.email}</p>
            <button
              type="button"
              onClick={logout}
              className="mt-4 rounded-xl bg-text px-4 py-2 text-sm font-semibold text-page"
            >
              Sign out
            </button>
          </div>
        </aside>
        <main className="min-w-0 flex-1">
          <div className="mb-6 flex items-center justify-between rounded-[28px] border border-line/70 bg-surface/90 px-6 py-5 shadow-panel backdrop-blur">
            <div>
              <p className="text-xs font-semibold uppercase tracking-[0.22em] text-muted">Operations Command</p>
              <h2 className="text-2xl font-bold text-text">Foundation Console</h2>
            </div>
            <ThemeToggle />
          </div>
          <nav className="mb-6 flex gap-3 overflow-x-auto rounded-[24px] border border-line/70 bg-surface/85 p-3 shadow-panel backdrop-blur md:hidden">
            {links.map((link) => (
              <NavLink
                key={link.to}
                to={link.to}
                className={({ isActive }) =>
                  `whitespace-nowrap rounded-2xl px-4 py-2 text-sm font-semibold transition ${
                    isActive ? "bg-brand text-white" : "bg-page/70 text-text"
                  }`
                }
              >
                {link.label}
              </NavLink>
            ))}
          </nav>
          <Outlet />
        </main>
      </div>
    </div>
  );
}