# 🚀 Quick Start - OwaHub Chat

## ⚡ Démarrage rapide en 3 étapes

### 1️⃣ Importer les hooks

```typescript
import { useConversations, useMessages } from '@/app/[locale]/chat/hooks';
import { useChatContext } from '@/app/contexts/ChatContext';
```

### 2️⃣ Utiliser dans un composant

```typescript
export default function MyChatComponent() {
  const { conversations, loading } = useConversations();
  const { selectedChat } = useChatContext();
  const { messages, sendMessage } = useMessages(selectedChat);
  
  // ... votre code
}
```

### 3️⃣ Afficher les données

```typescript
{conversations.map(conv => (
  <div key={conv.id}>{conv.name}</div>
))}

{messages.map(msg => (
  <div key={msg.id}>{msg.text}</div>
))}
```

## 📦 Ce qui est déjà fait

✅ **7 utilisateurs** mockés avec avatars et statuts
✅ **6 conversations** (3 groupes + 3 privées) avec messages non lus
✅ **22 messages** répartis dans les conversations
✅ **Hooks React** prêts à l'emploi (`useConversations`, `useMessages`)
✅ **Context global** pour gérer l'état du chat
✅ **APIs simulées** avec délais réalistes (300-500ms)
✅ **Types TypeScript** complets pour toutes les entités
✅ **Responsive** desktop et mobile déjà géré
✅ **Documentation** complète avec exemples

## 🎯 Fonctionnalités disponibles

| Feature | Status | Hook/API |
|---------|--------|----------|
| Liste des conversations | ✅ | `useConversations()` |
| Recherche conversations | ✅ | `useConversations().search()` |
| Afficher les messages | ✅ | `useMessages(conversationId)` |
| Envoyer un message | ✅ | `useMessages().sendMessage()` |
| Marquer comme lu | ✅ | Auto dans `useMessages()` |
| Infos utilisateurs | ✅ | `getUserById()`, `getUsersByIds()` |
| Créer conversation | ✅ | `createConversation()` |
| Modifier conversation | ✅ | `updateConversation()` |
| Supprimer message | ✅ | `deleteMessage()` |
| Éditer message | ✅ | `editMessage()` |

## 📂 Fichiers importants

```
📁 app/[locale]/chat/
├── 📄 layout.tsx              ← Layout avec sidebar
├── 📄 page.tsx                ← Page de chat
├── 📁 hooks/                  ← Vos hooks React
│   ├── useConversations.ts
│   └── useMessages.ts
├── 📁 mock-data/              ← Base de données simulée
│   ├── types.ts               ← Types TypeScript
│   ├── users.ts               ← 7 utilisateurs
│   ├── conversations.ts       ← 6 conversations
│   ├── messages.ts            ← 22 messages
│   └── README.md              ← Doc complète
└── 📄 ARCHITECTURE.md         ← Vue d'ensemble

📁 app/contexts/
└── 📄 ChatContext.tsx         ← État global du chat
```

## 🎨 Exemples rapides

### Afficher une liste de conversations

```typescript
'use client';
import { useConversations } from '@/app/[locale]/chat/hooks';

export default function ConvList() {
  const { conversations, loading } = useConversations();
  
  if (loading) return <p>Chargement...</p>;
  
  return (
    <div>
      {conversations.map(c => (
        <div key={c.id}>
          <span>{c.avatar}</span>
          <span>{c.name}</span>
          {c.unreadCount > 0 && <badge>{c.unreadCount}</badge>}
        </div>
      ))}
    </div>
  );
}
```

### Afficher les messages + envoyer

```typescript
'use client';
import { useState } from 'react';
import { useMessages } from '@/app/[locale]/chat/hooks';

export default function Chat({ conversationId }: { conversationId: number }) {
  const [text, setText] = useState('');
  const { messages, sendMessage, sending } = useMessages(conversationId);
  
  const handleSend = async () => {
    await sendMessage(text);
    setText('');
  };
  
  return (
    <>
      <div>
        {messages.map(m => (
          <div key={m.id}>
            <p>{m.text}</p>
            <small>{m.time}</small>
          </div>
        ))}
      </div>
      
      <input 
        value={text} 
        onChange={e => setText(e.target.value)}
        onKeyPress={e => e.key === 'Enter' && handleSend()}
      />
      <button onClick={handleSend} disabled={sending}>
        Envoyer
      </button>
    </>
  );
}
```

### Changer de conversation

```typescript
'use client';
import { useChatContext } from '@/app/contexts/ChatContext';

export default function ConvSelector({ conversationId }: { conversationId: number }) {
  const { setSelectedChat, setShowMobileChat } = useChatContext();
  
  const handleSelect = () => {
    setSelectedChat(conversationId);
    setShowMobileChat(true); // Pour mobile
  };
  
  return <button onClick={handleSelect}>Sélectionner</button>;
}
```

## 🔍 Rechercher des conversations

```typescript
const { search } = useConversations();

// Dans votre input
<input onChange={(e) => search(e.target.value)} />
```

## 🆕 Créer une nouvelle conversation

```typescript
import { createConversation } from '@/app/[locale]/chat/mock-data';

const newConv = await createConversation(
  "Nouvelle discussion",
  [1, 2, 3], // IDs des participants
  true       // isGroup
);
```

## 📱 Gestion mobile automatique

Le contexte `ChatContext` gère automatiquement :
- `showMobileChat: false` → Affiche la liste
- `showMobileChat: true` → Affiche le chat

Utilisez `setShowMobileChat()` pour basculer.

## 🎭 Utilisateurs disponibles

| ID | Nom | Avatar | Status |
|----|-----|--------|--------|
| 1 | Vous | 👤 | online |
| 2 | Marie Dubois | 👩 | online |
| 3 | Jean Martin | 👨 | offline |
| 4 | Sophie Laurent | 👩‍💼 | online |
| 5 | Pierre Durand | 👨‍💻 | away |
| 6 | Emma Bernard | 👩‍🎨 | online |
| 7 | Lucas Petit | 👨‍🔬 | offline |

## 💾 Conversations disponibles

1. **Groupe Développement** (ID: 1) - 3 non lus
2. **Marie Dubois** (ID: 2) - conversation privée
3. **Équipe Marketing** (ID: 3) - 1 non lu
4. **Jean Martin** (ID: 4) - conversation privée
5. **Groupe Projet OwaHub** (ID: 5) - 5 non lus
6. **Sophie Laurent** (ID: 6) - conversation privée

## 🆘 Besoin d'aide ?

📖 **Documentation complète** : `/mock-data/README.md`
📚 **Exemples détaillés** : `/mock-data/USAGE_EXAMPLES.md`
🏗️ **Architecture** : `/ARCHITECTURE.md`

## 🚀 Prochaines étapes

1. ✅ Tout est prêt, commencez à coder !
2. 📝 Consultez `USAGE_EXAMPLES.md` pour plus d'exemples
3. 🔧 Modifiez `mock-data/` pour ajouter vos données
4. 🎨 Personnalisez l'UI selon vos besoins
5. 🔌 Quand prêt, remplacez les APIs mock par de vraies APIs

---

**💡 Astuce** : L'ID utilisateur 1 représente toujours "Vous" dans toutes les données !