context/AuthContext.js

import { createContext, useContext, useState, useEffect } from 'react';
import { useRouter } from 'next/router';

const AuthContext = createContext({});

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [credits, setCredits] = useState(0);
  const router = useRouter();

  useEffect(() => {
    // Check for existing session
    const storedUser = localStorage.getItem('ai_studio_user');
    if (storedUser) {
      setUser(JSON.parse(storedUser));
      // Mock fetching credits
      setCredits(15); 
    }
    setLoading(false);
  }, []);

  const login = async (email, password) => {
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 800));
    const mockUser = { email, name: email.split('@')[0], id: '123' };
    setUser(mockUser);
    localStorage.setItem('ai_studio_user', JSON.stringify(mockUser));
    setCredits(5); // Welcome bonus
    router.push('/');
  };

  const logout = () => {
    setUser(null);
    localStorage.removeItem('ai_studio_user');
    router.push('/');
  };

  const purchaseCredits = (amount) => {
    setCredits(prev => prev + amount);
  };

  const useCredit = () => {
    if (credits > 0) {
      setCredits(prev => prev - 1);
      return true;
    }
    return false;
  };

  return (
    <AuthContext.Provider value={{ user, loading, login, logout, credits, purchaseCredits, useCredit }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);