# 🏗️ Architecture du système de Chat - OwaHub

## 📁 Structure des fichiers

```
app/[locale]/chat/
│
├── layout.tsx                    # Layout principal avec sidebar
├── page.tsx                      # Page de chat
│
├── hooks/                        # Hooks personnalisés React
│   ├── index.ts                 # Export centralisé
│   ├── useConversations.ts      # Hook pour gérer les conversations
│   └── useMessages.ts           # Hook pour gérer les messages
│
├── mock-data/                    # Données mockées et APIs simulées
│   ├── index.ts                 # Export centralisé
│   ├── types.ts                 # Types TypeScript
│   ├── users.ts                 # API des utilisateurs
│   ├── conversations.ts         # API des conversations
│   ├── messages.ts              # API des messages
│   ├── README.md                # Documentation du mock data
│   └── USAGE_EXAMPLES.md        # Exemples d'utilisation
│
└── ARCHITECTURE.md              # Ce fichier

app/contexts/
└── ChatContext.tsx              # Context React pour l'état global du chat
```

## 🔄 Flux de données

```
┌─────────────────────────────────────────────────────────────┐
│                        ChatProvider                          │
│              (Fournit l'état global du chat)                │
│  - selectedChat                                              │
│  - showMobileChat                                            │
│  - setSelectedChat()                                         │
│  - setShowMobileChat()                                       │
└────────────────────────┬────────────────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────────────────┐
│                    ChatLayout (layout.tsx)                   │
│                                                              │
│  ┌──────────────────┐          ┌─────────────────────────┐ │
│  │    Sidebar       │          │   Chat Area (children)  │ │
│  │                  │          │                         │ │
│  │ useConversations │          │    ChatPage (page.tsx)  │ │
│  │       ↓          │          │                         │ │
│  │ Conversations    │          │     useMessages()       │ │
│  │     List         │          │          ↓              │ │
│  │                  │          │      Messages           │ │
│  │  onClick() →     │          │        List             │ │
│  │  setSelectedChat │          │          +              │ │
│  └──────────────────┘          │    Message Input        │ │
│                                 └─────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────────────────┐
│                    Mock Data Layer                           │
│                                                              │
│  users.ts ←→ conversations.ts ←→ messages.ts                │
│     ↓               ↓                  ↓                     │
│  7 users      6 conversations      22 messages              │
└─────────────────────────────────────────────────────────────┘
```

## 🎯 Composants principaux

### 1. ChatContext (`app/contexts/ChatContext.tsx`)
**Responsabilité** : Gérer l'état global du chat
- État de la conversation sélectionnée
- Affichage mobile/desktop
- Partagé entre tous les composants enfants

### 2. ChatLayout (`app/[locale]/chat/layout.tsx`)
**Responsabilité** : Structure principale de l'interface chat
- Sidebar avec liste des conversations
- Zone de contenu pour le chat actif
- Gestion responsive mobile/desktop
- Intégration avec ChatContext

### 3. ChatPage (`app/[locale]/chat/page.tsx`)
**Responsabilité** : Interface de chat pour une conversation
- Header de la conversation
- Liste des messages
- Input pour envoyer des messages
- Utilise `useMessages()` hook

### 4. useConversations (`app/[locale]/chat/hooks/useConversations.ts`)
**Responsabilité** : Gérer les conversations
- Charger les conversations
- Rechercher dans les conversations
- Gérer les états loading/error
- Rafraîchir les données

### 5. useMessages (`app/[locale]/chat/hooks/useMessages.ts`)
**Responsabilité** : Gérer les messages d'une conversation
- Charger les messages
- Envoyer de nouveaux messages
- Marquer comme lus automatiquement
- Gérer les états loading/sending

## 🔌 Couche Mock Data

### Types (`types.ts`)
Définit tous les types TypeScript :
- `User` : Utilisateur
- `Message` : Message
- `Conversation` : Conversation
- `ConversationDetails` : Détails étendus
- `Attachment` : Pièce jointe

### APIs simulées
Chaque fichier expose des fonctions async qui simulent des appels API :

**users.ts**
```typescript
- getUserById(userId)
- getUsersByIds(userIds)
- searchUsers(query)
```

**conversations.ts**
```typescript
- getConversations()
- getConversationById(conversationId)
- searchConversations(query)
- createConversation(name, participants, isGroup)
- updateConversation(conversationId, updates)
```

**messages.ts**
```typescript
- getMessagesByConversationId(conversationId)
- sendMessage(conversationId, senderId, text)
- markMessagesAsRead(conversationId, userId)
- deleteMessage(conversationId, messageId)
- editMessage(conversationId, messageId, newText)
```

## 🎨 Patterns utilisés

### 1. **Context Pattern**
Utilisation de React Context pour partager l'état global du chat sans prop drilling.

### 2. **Custom Hooks Pattern**
Encapsulation de la logique métier dans des hooks réutilisables (`useConversations`, `useMessages`).

### 3. **Separation of Concerns**
- UI Components : Gèrent uniquement l'affichage
- Hooks : Gèrent la logique métier
- Mock Data : Simule la couche de données
- Context : Gère l'état global

### 4. **API Abstraction**
Les composants n'appellent jamais directement les mock data, ils passent par les hooks.

### 5. **Loading States**
Tous les hooks retournent `loading`, `error` pour une bonne UX.

## 📱 Gestion Responsive

### Desktop (lg et plus)
- Sidebar et chat visibles simultanément
- Sidebar : 33% (lg) à 25% (xl)
- Chat : reste de l'espace

### Mobile (< lg)
- Affichage conditionnel via `showMobileChat`
- `false` : Affiche la liste des conversations
- `true` : Affiche le chat actif
- Bouton retour pour revenir à la liste

## 🔄 Cycle de vie d'une conversation

1. **Chargement initial**
   ```
   ChatLayout mount → useConversations() → getConversations()
   ```

2. **Sélection d'une conversation**
   ```
   User clicks → setSelectedChat(id) → setShowMobileChat(true)
   ```

3. **Chargement des messages**
   ```
   ChatPage mount → useMessages(selectedChat) → getMessagesByConversationId()
   ```

4. **Envoi d'un message**
   ```
   User types → sendMessage(text) → API → Update local state
   ```

5. **Retour mobile**
   ```
   Back button → setShowMobileChat(false) → Show sidebar
   ```

## 🚀 Évolutivité

### Ajout de fonctionnalités

1. **Nouveaux types de messages** (images, fichiers)
   - Ajouter le type dans `types.ts`
   - Étendre les APIs dans `messages.ts`
   - Aucun changement dans les hooks

2. **Notifications temps réel**
   - Ajouter WebSocket dans `mock-data/`
   - Modifier `useMessages` pour écouter les événements
   - Les composants restent inchangés

3. **Recherche avancée**
   - Ajouter fonction dans `conversations.ts`
   - Étendre `useConversations` hook
   - Utiliser dans les composants

### Migration vers backend réel

```typescript
// Étape 1 : Créer services/api.ts
export const api = {
  conversations: {
    getAll: () => fetch('/api/conversations').then(r => r.json()),
    // ...
  }
};

// Étape 2 : Modifier mock-data/conversations.ts
export const getConversations = async () => {
  return api.conversations.getAll();
};

// Étape 3 : Aucun changement ailleurs !
```

## 🎯 Best Practices implémentées

✅ **TypeScript strict** : Tous les types sont définis
✅ **Error Handling** : Tous les hooks gèrent les erreurs
✅ **Loading States** : UX optimale pendant les chargements
✅ **Responsive Design** : Mobile-first avec breakpoints
✅ **Code Splitting** : Chaque module a sa responsabilité
✅ **Testabilité** : Logique séparée de l'UI
✅ **Documentation** : README et exemples complets
✅ **Extensibilité** : Facile d'ajouter des features

## 📊 Données actuelles

- **Utilisateurs** : 7 (dont "Vous" = ID 1)
- **Conversations** : 6 (3 groupes, 3 privées)
- **Messages** : 22 répartis dans les conversations
- **Messages non lus** : Simulés pour tester les badges

## 🔧 Configuration

Aucune configuration nécessaire, tout fonctionne out-of-the-box !

Les délais API sont configurables dans chaque fonction mock :
```typescript
await new Promise(resolve => setTimeout(resolve, 300)); // 300ms delay
```

## 📖 Documentation complète

- `mock-data/README.md` : Documentation de la couche de données
- `mock-data/USAGE_EXAMPLES.md` : Exemples pratiques d'utilisation
- `ARCHITECTURE.md` : Ce fichier (vue d'ensemble)