disclosure-bureau/web/components/auth-bar.tsx

"use client";

import { useEffect, useState } from "react";
import { createClient, isSupabaseConfigured } from "@/lib/supabase/client";
import Link from "next/link";
import type { User } from "@supabase/supabase-js";

interface Profile {
  display_name?: string | null;
  total_cost_usd?: number;
  budget_cap_usd?: number;
  daily_used?: number;
  daily_quota?: number;
}

const COPY = {
  "pt-br": {
    sign_in: "Entrar",
    sign_out: "Sair",
    auth_disabled: "auth: desativada (dev)",
    msgs_today: "mensagens hoje",
  },
  en: {
    sign_in: "Sign in",
    sign_out: "Sign out",
    auth_disabled: "auth: disabled (dev)",
    msgs_today: "msgs today",
  },
} as const;

export function AuthBar({ locale = "pt-br" }: { locale?: "pt-br" | "en" }) {
  const [user, setUser] = useState<User | null>(null);
  const [profile, setProfile] = useState<Profile | null>(null);
  const [loaded, setLoaded] = useState(false);
  const t = COPY[locale];

  useEffect(() => {
    if (!isSupabaseConfigured()) {
      setLoaded(true);
      return;
    }
    const supabase = createClient();
    supabase.auth.getUser().then(({ data }) => {
      setUser(data.user);
      setLoaded(true);
      if (data.user) {
        fetch("/api/me")
          .then((r) => (r.ok ? r.json() : null))
          .then((d) => setProfile(d?.profile ?? null))
          .catch(() => {});
      }
    });
    const { data: sub } = supabase.auth.onAuthStateChange((_e, session) => {
      setUser(session?.user ?? null);
    });
    return () => sub.subscription.unsubscribe();
  }, []);

  if (!loaded) return null;

  if (!isSupabaseConfigured()) {
    return (
      <div className="font-mono text-[10px] text-[#5a6678] uppercase tracking-widest">
        {t.auth_disabled}
      </div>
    );
  }

  if (!user) {
    return (
      <Link
        href="/auth/signin"
        className="font-mono text-[12px] px-3 py-1 border border-[rgba(224,192,128,0.35)]
                   text-[#e0c080] hover:bg-[rgba(224,192,128,0.08)] rounded-full transition-colors"
      >
        {t.sign_in}
      </Link>
    );
  }

  return (
    <div className="flex items-center gap-3">
      {profile && (
        <div className="font-mono text-[9px] text-[#5a6678] uppercase tracking-widest text-right">
          <div>{profile.display_name ?? user.email}</div>
          <div>
            ${(profile.total_cost_usd ?? 0).toFixed(2)} / ${(profile.budget_cap_usd ?? 0).toFixed(2)} ·{" "}
            {profile.daily_used ?? 0}/{profile.daily_quota ?? 0} {t.msgs_today}
          </div>
        </div>
      )}
      <form action="/auth/signout" method="POST">
        <button
          type="submit"
          className="font-mono text-[11px] px-2.5 py-1 text-[#9aa6b8] hover:text-[#ff3344]
                     border border-transparent hover:border-[#ff3344] rounded-full transition-colors"
        >
          {t.sign_out}
        </button>
      </form>
    </div>
  );
}