"use client";

import Link from "next/link";
import { useEffect, useState } from "react";

import { browserFetch } from "../lib/api";
import { logoutByNavigation } from "../lib/logout";

type MeResponse = {
  user: { id: string; email: string; role: string } | null;
  makerProfile: { id: string; slug: string; business_name: string | null; status: string } | null;
};

export default function AuthNav() {
  const [session, setSession] = useState<MeResponse | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let active = true;

    async function loadSession() {
      try {
        const response = await browserFetch<MeResponse>("/auth/me");
        if (active) {
          setSession(response);
        }
      } catch {
        if (active) {
          setSession({ user: null, makerProfile: null });
        }
      } finally {
        if (active) {
          setLoading(false);
        }
      }
    }

    void loadSession();

    return () => {
      active = false;
    };
  }, []);

  function logout() {
    logoutByNavigation();
  }

  const user = session?.user || null;
  const makerProfile = session?.makerProfile || null;
  const isAdmin = user?.role === "admin";
  const isMaker = Boolean(makerProfile && makerProfile.status !== "draft");

  return (
    <nav className="nav-links">
      <Link href="/" className="nav-link">Inicio</Link>
      <Link href="/discover" className="nav-link">Descubrir</Link>

      {loading ? <span className="nav-session-chip">Sesion...</span> : null}

      {!loading && !user ? (
        <Link href="/login" className="button button-primary">Entrar</Link>
      ) : null}

      {!loading && user && isAdmin ? (
        <>
          <a href="/app/backoffice" className="nav-link nav-link-admin">Backoffice</a>
        </>
      ) : null}

      {!loading && user && !isAdmin && isMaker ? (
        <>
          <Link href="/account" className="nav-link">Mi espacio maker</Link>
          <Link href="/account/inbox" className="nav-link">Consultas maker</Link>
        </>
      ) : null}

      {!loading && user && !isAdmin && !isMaker ? (
        <>
          <Link href="/messages" className="nav-link">Mensajes</Link>
          <Link href="/favorites" className="nav-link">Favoritos</Link>
        </>
      ) : null}

      {!loading && user ? (
        <button className="button button-secondary nav-logout-button" type="button" onClick={logout}>
          Cerrar sesion
        </button>
      ) : null}
    </nav>
  );
}