"use client";

import { Session } from "@supabase/supabase-js";
import React, { createContext, useContext, useEffect, useState } from "react";
import supabase from "../../utils/supabase/client";

interface TokenContextType {
  token: string | null;
  loading: boolean;
}

const TokenContext = createContext<TokenContextType>({
  token: null,
  loading: true,
});

export function TokenProvider({ children }: { children: React.ReactNode }) {
  const [token, setToken] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let userId: string | null = null;
    supabase.auth.getSession().then(({ data }) => {
      const session: Session | null = data.session;
      userId = session?.user.id ?? null;
      if (!userId) {
        setToken(null);
        setLoading(false);
        return;
      }
      supabase
        .from("user_auth_tokens")
        .select("api_token")
        .eq("user_id", userId)
        .single()
        .then(({ data, error }) => {
          if (error || !data) {
            setToken(null);
            setLoading(false);
            return;
          }
          setToken(data.api_token);
          setLoading(false);
          console.log("Fetched Suno API token:", data.api_token);
        });
    });
  }, []);

  if (loading) return null; // or a loading spinner if you prefer

  return (
    <TokenContext.Provider value={{ token, loading }}>
      {children}
    </TokenContext.Provider>
  );
}

export function useToken() {
  return useContext(TokenContext);
}