"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";

export default function AuthNav() {
  const [user, setUser] = useState(null);
  const [ready, setReady] = useState(false);
  const router = useRouter();

  useEffect(() => {
    fetch("/api/me")
      .then((r) => r.json())
      .then((d) => { setUser(d.user); setReady(true); })
      .catch(() => setReady(true));
  }, []);

  async function logout() {
    await fetch("/api/logout", { method: "POST" });
    setUser(null);
    router.refresh();
  }

  if (!ready) return null;

  if (user) {
    return (
      <div className="auth-nav">
        <span className="auth-hi">Hola, {user.name || user.email}</span>
        <button className="theme-toggle" onClick={logout}>Salir</button>
      </div>
    );
  }

  return (
    <div className="auth-nav">
      <Link href="/login" className="auth-link">Ingresar</Link>
      <Link href="/register" className="btn-mini">Crear cuenta</Link>
    </div>
  );
}