"use client";

import Link from "next/link";
import { useEffect } from "react";
import { usePathname, useRouter } from "next/navigation";

export function Nav() {
  const pathname = usePathname();
  const router = useRouter();

  async function logout() {
    await fetch("/api/v1/auth/logout", { method: "POST", credentials: "include" });
    router.push("/");
  }

  const links = [
    { href: "/dashboard", label: "Dashboard" },
    { href: "/nodes", label: "Nodes" },
    { href: "/movies", label: "Movies" },
    { href: "/series", label: "Series" },
    { href: "/streams", label: "Streams" },
    { href: "/settings", label: "Instellingen" },
  ];

  return (
    <nav className="topnav">
      <Link href="/dashboard" className="brand">
        <span className="brand-mark">MC</span>
        <span className="brand-text">
          Media Cluster
          <small>ops console</small>
        </span>
      </Link>
      <div className="topnav-links">
        {links.map((l) => (
          <Link key={l.href} href={l.href} className={pathname === l.href ? "active" : ""}>
            {l.label}
          </Link>
        ))}
      </div>
      <button type="button" className="btn-logout" onClick={logout}>
        Uitloggen
      </button>
    </nav>
  );
}

export function useAuth() {
  const router = useRouter();
  useEffect(() => {
    fetch("/api/v1/auth/me", { credentials: "include" })
      .then((r) => {
        if (!r.ok) router.push("/");
      })
      .catch(() => router.push("/"));
  }, [router]);
}