import { Link, Outlet, useLocation } from "react-router-dom";
import { Github } from "lucide-react";
import { AuthButton } from "./AuthButton";
import { NotificationBell } from "./NotificationBell";

/** OpenVuln public repo; override at build time via VITE_GITHUB_REPO_URL. */
const OWN_REPO =
  (import.meta.env.VITE_GITHUB_REPO_URL as string | undefined) ||
  "https://github.com/Clouditera/OpenVuln";

export function Layout() {
  const { pathname } = useLocation();
  const isDeck = pathname === "/";
  return (
    <div className="flex min-h-screen flex-col">
      {!isDeck && <header className="app-shell-chrome sticky top-0 z-30 h-14 border-b border-line bg-surface/85 backdrop-blur">
        <div className="flex h-full items-center justify-between gap-4 px-5">
          <div className="flex items-center">
            <Link
              to="/"
              className="flex items-center gap-2.5 rounded-md focus-ring"
            >
              <img
                src="/logo.svg"
                alt=""
                className="h-7 w-7 shrink-0 rounded-lg"
                aria-hidden
              />
              <span className="font-display text-[15px] font-semibold tracking-tight text-ink">
                OpenVuln
              </span>
            </Link>
          </div>

          <div className="flex items-center gap-2">
            <NotificationBell />
            <AuthButton />
            <a
              href={OWN_REPO}
              target="_blank"
              rel="noreferrer"
              className="flex h-9 w-9 items-center justify-center rounded-full border border-line bg-surface-raised text-ink-secondary transition-colors hover:border-line-strong hover:bg-surface-sunken hover:text-ink focus-ring"
              title="OpenVuln on GitHub"
            >
              <Github size={15} />
            </a>
          </div>
        </div>
      </header>}

      <main className="flex-1">
        <Outlet />
      </main>

      {!isDeck && (
      <footer className="app-shell-chrome mt-auto border-t border-line">
        <div className="flex flex-col gap-2 px-5 py-6 text-[13px] text-ink-secondary sm:flex-row sm:items-center sm:justify-between">
          <p className="text-ink-tertiary">© 2026 OpenVuln · Powered by VulnHunter</p>
          <div className="flex flex-wrap gap-x-5 gap-y-1">
            <a href={OWN_REPO} target="_blank" rel="noreferrer" className="hover:text-ink">
              GitHub
            </a>
            <Link to="/about" className="hover:text-ink">
              About
            </Link>
          </div>
        </div>
      </footer>
      )}
    </div>
  );
}