import { Link, NavLink, Outlet, useNavigate } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth';

/**
 * Top utility strip (ink) + main nav (canvas).
 * Mirrors DESIGN.md utility-strip + nav-bar-top pattern, scaled to internal app.
 */
export function Layout(): JSX.Element {
  const { user, isAdmin, logout } = useAuth();
  const navigate = useNavigate();

  const handleLogout = async () => {
    await logout();
    navigate('/login', { replace: true });
  };

  return (
    <div className="min-h-full flex flex-col bg-canvas">
      {/* utility-strip — ink slab, fine print */}
      <div className="bg-ink text-ink-on text-[14px] h-9 flex items-center">
        <div className="mx-auto w-full max-w-page px-xl flex items-center justify-between">
          <span className="font-medium tracking-[0.5px] uppercase">Mimic · Purple Team BAS</span>
          {user ? (
            <div className="flex items-center gap-md">
              <span className="text-[12px] uppercase tracking-[0.5px] text-steel">
                {user.role}
              </span>
              <span className="text-[14px]">{user.username}</span>
              <button
                type="button"
                onClick={handleLogout}
                className="text-[14px] underline-offset-2 hover:underline"
              >
                Sign out
              </button>
            </div>
          ) : null}
        </div>
      </div>

      {/* nav-bar-top — canvas with hairline */}
      <header className="bg-canvas border-b border-hairline">
        <div className="mx-auto w-full max-w-page px-xl h-16 flex items-center justify-between">
          <Link to="/engagements" className="flex items-center gap-sm" aria-label="Mimic home">
            <span className="inline-block h-6 w-6 rotate-12 bg-primary" aria-hidden />
            <span className="text-[20px] font-medium tracking-tight">Mimic</span>
          </Link>

          <nav className="flex items-center gap-md">
            <NavLink
              to="/engagements"
              className={({ isActive }) =>
                `text-[16px] py-2 px-md ${
                  isActive ? 'text-ink border-b-2 border-primary -mb-[1px]' : 'text-charcoal'
                }`
              }
            >
              Engagements
            </NavLink>
            {isAdmin ? (
              <NavLink
                to="/admin/users"
                className={({ isActive }) =>
                  `text-[16px] py-2 px-md ${
                    isActive ? 'text-ink border-b-2 border-primary -mb-[1px]' : 'text-charcoal'
                  }`
                }
              >
                Users
              </NavLink>
            ) : null}
          </nav>
        </div>
      </header>

      {/* page body */}
      <main className="flex-1 bg-canvas">
        <div className="mx-auto w-full max-w-page px-xl py-xxl">
          <Outlet />
        </div>
      </main>

      {/* footer — ink slab close */}
      <footer className="bg-ink text-ink-on">
        <div className="mx-auto w-full max-w-page px-xl py-xl text-[12px] text-steel">
          Mimic — Internal Purple Team tooling. Authorized engagements only.
        </div>
      </footer>
    </div>
  );
}
