// 1️⃣ IMPORTS - O que precisamos do React
import { createContext, useContext, ReactNode } from 'react';
// createContext: função para criar um contexto
// useContext: hook para consumir um contexto
// ReactNode: tipo TypeScript que representa qualquer coisa renderizável no React

// 2️⃣ CRIAR O CONTEXT - É como criar uma "caixa" vazia
const AuthContext = createContext(undefined);
// createContext(undefined) = cria um contexto sem valor inicial
// AuthContext agora é um objeto que pode compartilhar dados

// 3️⃣ CRIAR O PROVIDER - Componente que vai "fornecer" os dados
export const AuthProvider = ({ children }: { children: ReactNode }) => {
  // children = todos os componentes que vão ficar dentro do Provider
  
  // 4️⃣ DADOS QUE QUEREMOS COMPARTILHAR
  const authState = {
    user: null,      // usuário logado (null = ninguém logado)
    loading: false,  // está carregando? (false = não)
    error: null      // algum erro? (null = nenhum erro)
  };
  
  // 5️⃣ RETORNAR O PROVIDER COM OS DADOS
  return (
    <AuthContext.Provider value={authState}>
      {/* value={authState} = coloca os dados dentro da "caixa" */}
      {children}
      {/* children = renderiza todos os componentes filhos */}
    </AuthContext.Provider>
  );
};

// 6️⃣ CRIAR O HOOK CUSTOMIZADO - Facilita o uso do contexto
export const useAuth = () => {
  // 7️⃣ PEGAR O VALOR DO CONTEXTO
  const context = useContext(AuthContext);
  // useContext(AuthContext) = abre a "caixa" e pega o que tem dentro
  
  // 8️⃣ VERIFICAÇÃO DE SEGURANÇA
  if (!context) {
    // Se context for undefined, significa que useAuth foi chamado
    // fora do AuthProvider (erro de uso)
    throw new Error('useAuth deve ser usado dentro de um <AuthProvider>');
  }
  
  // 9️⃣ RETORNAR OS DADOS
  return context;
  // Retorna o authState que foi colocado no value do Provider
};

/* 
FLUXO COMPLETO:
1. AuthProvider envolve a aplicação
2. AuthProvider coloca authState no contexto
3. Componentes filhos chamam useAuth()
4. useAuth() pega os dados do contexto
5. Componentes recebem os dados e podem usar

EXEMPLO:
<AuthProvider>                     // authState disponível aqui ↓
  <App>                           // pode usar useAuth() ✓
    <Header />                    // pode usar useAuth() ✓
    <Main>                        // pode usar useAuth() ✓
      <LoginButton />             // pode usar useAuth() ✓
    </Main>
  </App>
</AuthProvider>
<OutroComponente />               // NÃO pode usar useAuth() ✗
*/