# BarberFlow SaaS - Project Context

Este documento serve como a fonte da verdade para a arquitetura, estrutura e regras de negócio do BarberFlow, um sistema SaaS Multi-Tenant para barbearias construído com Expo (React Native).

## 🚀 Tech Stack Principal
- **Framework:** Expo / React Native (Foco em Web/Mobile First)
- **Roteamento:** Expo Router (File-based routing)
- **Animações & UI:** `react-native-reanimated` (UI/UX Pro Max)
- **Armazenamento:** `@react-native-async-storage/async-storage` (Persistência local temporária/mock)
- **Ícones:** `lucide-react-native`
- **Mídia:** `expo-image-picker` (Imagens convertidas em Base64 para armazenamento)

## 📁 Estrutura de Diretórios (`app/`)
O projeto utiliza um roteamento baseado no file-system do Expo Router, rigidamente dividido em duas áreas principais após a seleção global de idioma e fluxos de autenticação.

- `app/index.tsx`: **Raiz Absoluta**. A primeira tela do app. Redireciona para `/landing`.
- `app/landing.tsx`: Landing page comercial do SaaS. Contém botões para acessar "Painel do Dono", "Área do Barbeiro" ou "Ver Demonstração" (Área do Cliente).
- `app/admin/`: **Área Administrativa (O Painel do Dono e do Barbeiro)**
  - `_layout.tsx`: Define o Stack protegido do Admin.
  - `login.tsx`: Tela de autenticação para o dono da barbearia.
  - `barber-login.tsx`: Tela de autenticação separada para funcionários (barbeiros).
  - `register.tsx`: Tela de criação de conta (BarberFlow Pro).
  - `forgot-password.tsx`: Tela de recuperação de senha.
  - `dashboard.tsx`: Visão geral de agendamentos pendentes e confirmados. Permite aceitar, recusar ou cancelar. (A visão é filtrada com base em quem está logado).
  - `agenda.tsx`: Tabela visual (Daily Schedule) mostrando os horários de todos os barbeiros e seus status (Livre, Pendente, Confirmado, Bloqueado).
  - `finance.tsx`: Tela de gestão financeira, exibindo faturamento bruto e o cálculo de comissão exato para cada barbeiro.
  - `config.tsx`: **Wizard de 6 Passos** para configurar a barbearia (Identidade, Localização, Serviços, Barbeiros, Formas de Pagamento, Link Final).
- `app/[slug]/`: **Área do Cliente (Multi-Tenant)**
  - `_layout.tsx`: Provedor de contexto específico do tenant (barbearia).
  - `index.tsx`: Tela inicial de redirecionamento do tenant para o fluxo de idioma/auth.
  - `(auth)/`: **Autenticação e Pré-requisitos do Cliente**
    - `language-selection.tsx`: O cliente escolhe o idioma (PT/ES) e a moeda (R$/GS) que prefere ser atendido.
    - `login.tsx`: Tela de login do cliente. Redireciona para o agendamento após sucesso.
    - `register.tsx`: Tela de cadastro do cliente.
    - `forgot-password.tsx`: Tela de recuperação de senha.
  - `(tabs)/`: **Área Interna do Cliente**
    - `_layout.tsx`: Tab bar com as opções principais.
    - `agendar.tsx`: O core do lado do cliente. Fluxo de 3 passos: Escolher Serviço/Barbeiro -> Escolher Data/Hora -> Pagamento & Confirmação.
    - `profile.tsx`: Perfil do cliente com histórico.

## 🧠 Gerenciamento de Estado (Contextos)

### 1. `BarbeariaContext.tsx`
O "banco de dados" do sistema. Gerencia os dados da barbearia atual (Tenant).
- **Resiliência do Slug:** Se o usuário acessa um `slug` e ele bate com o do AsyncStorage, os dados carregam.
- **Role-Based Access Control (RBAC):** Armazena a variável `activeBarberId`. Se for `null`, o sistema entende que é o dono e libera tudo. Se tiver um ID de funcionário logado, restringe as views.
- **Estruturas Principais:**
  - `services`: Contém nomes, preços bilíngues e duração (`nomePt`, `nomeEs`, `precoPt`, `precoEs`, `duracao`).
  - `barbers`: Lista de profissionais contendo `nome`, `foto`, `commission`, `email`, `password` e `permissions` (`canViewFinance`, `canEditConfig`).
  - `paymentMethods`: Array de strings (ex: `['pix', 'card', 'money', 'alias']`).
  - `appointments`: Lista de agendamentos com status e valor total do serviço.

### 2. `LanguageContext.tsx`
Coração do sistema i18n e regras de moeda.
- **Tradução:** A função `t(key)` é robusta contra chaves não encontradas ou parâmetros `undefined`.
- **Preços (`formatPrice`):** Recebe dois valores e formata com base no idioma atual (Real R$ ou Guarani GS).

## ⚖️ Regras de Negócio Críticas

1. **Separação Dono vs Funcionário vs Cliente:**
   - **Dono:** Acessa via `/admin/login`. Visualiza e edita todas as configurações, visualiza a agenda de todos e acessa o balanço financeiro geral.
   - **Barbeiro (Funcionário):** Acessa via `/admin/barber-login`. Ao logar, vai para o Dashboard onde **só visualiza os seus próprios agendamentos**. Na agenda, não consegue clicar/bloquear a agenda de colegas. O acesso a configurações e financeiro depende de flags explícitas de permissão no cadastro dele.
   - **Cliente:** Acessa via `/[slug]`, faz autenticação e visualiza os horários disponíveis (área em `(tabs)`).

2. **Fluxo de Agendamento e Edição (Admin):**
   - Na tela `config.tsx`, o admin consegue criar e agora também **editar** informações de barbeiros e serviços sem precisar deletá-los.
   - A agenda do admin e do barbeiro permite selecionar múltiplos horários em massa (multi-select) e aplicar a ação "Bloquear" ou "Liberar".

3. **Sistema Financeiro e Comissionamento:**
   - O sistema rastreia o valor gerado nos agendamentos `accepted` e calcula de forma individual o repasse do barbeiro com base na porcentagem (`%`) cadastrada no seu perfil.
   - Se um barbeiro com permissão de ver as finanças acessar a tela, ele **só enxergará o valor do próprio caixa e o valor que ele vai receber**, enquanto o dono enxerga a somatória bruta de todos.

4. **Lógica de Formas de Pagamento Dinâmicas:**
   - O admin marca os métodos aceitos na aba de configurações. A lista sofre filtro dinâmico de moeda (O cliente que escolheu idioma Espanhol não vê PIX, e o cliente do Português não vê Alias).

5. **Tratamento de Imagens:**
   - O upload de logos e avatares converte o binário para `Base64` injetando diretamente no estado e no AsyncStorage.

## 🎨 Padrão de UI/UX (Pro Max)
Todas as telas seguem o manual de referências UI/UX.
- **Animações:** `FadeInUp`, `FadeInDown`, e `FadeInRight` usando `react-native-reanimated` para navegação suave.
- **Feedback Tátil:** `expo-haptics` acionados ao confirmar botões de bloqueio e salvar perfis.
- **Design Responsivo:** Uso do `useWindowDimensions()` nas telas web para garantir que, no iPhone ou Android, os painéis colapsem na vertical (flex-col) de ponta a ponta com segurança visual (`paddingHorizontal: 16`).