# 📚 Exemples d'utilisation du Mock Data

## 🎯 Utilisation basique dans un composant

### Exemple 1 : Charger et afficher les conversations

```typescript
'use client';

import { useConversations } from '../hooks';

export default function ConversationList() {
  const { conversations, loading, error } = useConversations();

  if (loading) return <div>Chargement...</div>;
  if (error) return <div>Erreur : {error}</div>;

  return (
    <div>
      {conversations.map(conv => (
        <div key={conv.id}>
          <h3>{conv.name}</h3>
          <p>{conv.lastMessage}</p>
          {conv.unreadCount > 0 && (
            <span>{conv.unreadCount} non lus</span>
          )}
        </div>
      ))}
    </div>
  );
}
```

### Exemple 2 : Chat avec messages et envoi

```typescript
'use client';

import { useState } from 'react';
import { useMessages } from '../hooks';

export default function ChatWindow({ conversationId }: { conversationId: number }) {
  const [inputText, setInputText] = useState('');
  const { messages, loading, sending, sendMessage } = useMessages(conversationId);

  const handleSend = async () => {
    await sendMessage(inputText);
    setInputText('');
  };

  if (loading) return <div>Chargement des messages...</div>;

  return (
    <div>
      {/* Afficher les messages */}
      <div>
        {messages.map(msg => (
          <div key={msg.id}>
            <strong>{msg.senderId === 1 ? 'Vous' : 'User ' + msg.senderId}</strong>
            <p>{msg.text}</p>
            <small>{msg.time}</small>
          </div>
        ))}
      </div>

      {/* Zone de saisie */}
      <div>
        <input
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && handleSend()}
          disabled={sending}
        />
        <button onClick={handleSend} disabled={sending}>
          {sending ? 'Envoi...' : 'Envoyer'}
        </button>
      </div>
    </div>
  );
}
```

### Exemple 3 : Recherche de conversations

```typescript
'use client';

import { useState } from 'react';
import { useConversations } from '../hooks';

export default function SearchConversations() {
  const [query, setQuery] = useState('');
  const { conversations, search, reload } = useConversations();

  const handleSearch = async (searchQuery: string) => {
    setQuery(searchQuery);
    if (searchQuery.trim()) {
      await search(searchQuery);
    } else {
      await reload();
    }
  };

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => handleSearch(e.target.value)}
        placeholder="Rechercher une conversation..."
      />
      
      <div>
        {conversations.length === 0 ? (
          <p>Aucune conversation trouvée</p>
        ) : (
          conversations.map(conv => (
            <div key={conv.id}>{conv.name}</div>
          ))
        )}
      </div>
    </div>
  );
}
```

## 🔧 Utilisation directe des APIs (sans hooks)

### Charger les utilisateurs d'une conversation

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

async function loadConversationWithUsers(conversationId: number) {
  // Récupérer la conversation
  const conversation = await getConversationById(conversationId);
  
  if (!conversation) {
    throw new Error('Conversation non trouvée');
  }
  
  // Récupérer les utilisateurs participants
  const users = await getUsersByIds(conversation.participants);
  
  return {
    conversation,
    users
  };
}
```

### Créer une nouvelle conversation

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

async function createNewChat(name: string, participants: number[], isGroup: boolean) {
  // Créer la conversation
  const newConversation = await createConversation(name, participants, isGroup);
  
  // Envoyer un premier message de bienvenue
  await sendMessage(
    newConversation.id,
    1, // Votre ID
    'Bienvenue dans cette conversation !'
  );
  
  return newConversation;
}
```

### Marquer une conversation comme lue

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

async function markConversationAsRead(conversationId: number, userId: number) {
  // Marquer tous les messages comme lus
  await markMessagesAsRead(conversationId, userId);
  
  // Mettre à jour le compteur de non lus
  await updateConversation(conversationId, { unreadCount: 0 });
}
```

## 🎨 Intégration avec le Context

### Utilisation avec ChatContext

```typescript
'use client';

import { useChatContext } from '@/app/contexts/ChatContext';
import { useMessages } from '../hooks';

export default function CurrentChat() {
  const { selectedChat } = useChatContext();
  const { messages, sendMessage } = useMessages(selectedChat);

  return (
    <div>
      <h2>Conversation #{selectedChat}</h2>
      {/* Afficher les messages */}
    </div>
  );
}
```

### Changer de conversation sélectionnée

```typescript
'use client';

import { useChatContext } from '@/app/contexts/ChatContext';
import { useConversations } from '../hooks';

export default function ConversationSwitcher() {
  const { setSelectedChat, setShowMobileChat } = useChatContext();
  const { conversations } = useConversations();

  const selectConversation = (id: number) => {
    setSelectedChat(id);
    setShowMobileChat(true); // Afficher le chat sur mobile
  };

  return (
    <div>
      {conversations.map(conv => (
        <button 
          key={conv.id}
          onClick={() => selectConversation(conv.id)}
        >
          {conv.name}
        </button>
      ))}
    </div>
  );
}
```

## 🔄 Gestion des états de chargement

### Loading states complets

```typescript
'use client';

import { useConversations } from '../hooks';

export default function ConversationsWithStates() {
  const { conversations, loading, error, reload } = useConversations();

  // État de chargement initial
  if (loading && conversations.length === 0) {
    return (
      <div className="flex items-center justify-center p-8">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-teal-500" />
      </div>
    );
  }

  // État d'erreur
  if (error) {
    return (
      <div className="p-4 bg-red-50 text-red-700 rounded-xl">
        <p>{error}</p>
        <button onClick={reload} className="mt-2 text-red-900 underline">
          Réessayer
        </button>
      </div>
    );
  }

  // État vide
  if (conversations.length === 0) {
    return (
      <div className="p-8 text-center text-gray-500">
        <p>Aucune conversation pour le moment</p>
        <button className="mt-4 px-4 py-2 bg-teal-500 text-white rounded-xl">
          Créer une conversation
        </button>
      </div>
    );
  }

  // État normal avec données
  return (
    <div>
      {conversations.map(conv => (
        <div key={conv.id}>{conv.name}</div>
      ))}
    </div>
  );
}
```

## 💡 Tips & Best Practices

1. **Toujours gérer les états de chargement** : Utilisez `loading`, `error` et les états vides
2. **Optimiser les re-renders** : Utilisez `useCallback` et `useMemo` si nécessaire
3. **Gestion des erreurs** : Toujours avoir un fallback UI en cas d'erreur
4. **Types TypeScript** : Toujours typer vos données avec les types fournis
5. **Délais simulés** : Les APIs ont des délais de 300-500ms pour être réalistes
6. **IDs cohérents** : L'ID 1 représente toujours "Vous" dans les données mock

## 🚀 Migration vers API réelle

Quand vous serez prêt à utiliser de vraies APIs :

1. **Gardez les hooks** : `useConversations` et `useMessages` restent identiques
2. **Remplacez les fonctions** dans `mock-data/*.ts` :
   ```typescript
   // Avant (mock)
   export const getConversations = async () => {
     await new Promise(resolve => setTimeout(resolve, 500));
     return mockConversations;
   };
   
   // Après (réel)
   export const getConversations = async () => {
     const response = await fetch('/api/conversations');
     return response.json();
   };
   ```
3. **Aucun changement dans les composants** ! 🎉