import { useEffect } from "react";
import { NavLink, Outlet, useLocation } from "react-router-dom";
import { OnlineCounter } from "./OnlineCounter.js";
import { CookieConsent } from "./CookieConsent.js";
import { FeedbackWidget } from "./FeedbackWidget.js";
import { trackVisit } from "../lib/analytics.js";

const linkClass = ({ isActive }: { isActive: boolean }) =>
  `px-3 py-1.5 rounded text-sm ${isActive ? "bg-accent text-white" : "text-slate-300 hover:bg-white/5"}`;

export function Layout() {
  const location = useLocation();

  useEffect(() => {
    trackVisit(location.pathname);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [location.pathname]);

  return (
    <div className="h-[100dvh] flex flex-col">
      <header className="flex items-center gap-2 sm:gap-4 px-2 sm:px-4 py-2 border-b border-white/10 bg-panel overflow-x-auto">
        <h1 className="text-sm font-semibold tracking-wide text-white whitespace-nowrap">
          🫀 <span className="hidden sm:inline">Atlas 3D de Anatomia</span>
        </h1>
        <nav className="flex gap-1 shrink-0">
          <NavLink to="/" end className={linkClass}>
            Atlas
          </NavLink>
          <NavLink to="/planos-anatomicos" className={linkClass}>
            Planos e Eixos
          </NavLink>
          <NavLink to="/exame-fisico" className={linkClass}>
            Exame Físico
          </NavLink>
          <NavLink to="/divisao-celular" className={linkClass}>
            Mitose e Meiose
          </NavLink>
          <NavLink to="/quiz" className={linkClass}>
            Quiz
          </NavLink>
        </nav>
        <OnlineCounter />
        <a
          href="https://github.com/LluisV/Z-Anatomy-Sample"
          target="_blank"
          rel="noreferrer"
          className="ml-auto hidden md:inline-block text-[11px] text-slate-500 hover:text-slate-300 shrink-0"
        >
          Modelos 3D: projeto Z-Anatomy (CC BY-SA 4.0)
        </a>
      </header>
      <main className="flex-1 min-h-0">
        <Outlet />
      </main>
      <FeedbackWidget />
      <CookieConsent />
    </div>
  );
}