'use client';

import { useEffect, useState } from 'react';
import { socket } from '@/lib/socket';

export default function SocketTest() {
  const [isConnected, setIsConnected] = useState(false);
  const [transport, setTransport] = useState('N/A');
  const [messages, setMessages] = useState<string[]>([]);
  const [testMessage, setTestMessage] = useState('');

  useEffect(() => {
    // Connexion au socket
    socket.connect();

    // Événements de connexion
    socket.on('connect', () => {
      setIsConnected(true);
      setTransport(socket.io.engine.transport.name);
      console.log('✅ Socket.IO connecté !');
    });

    socket.on('disconnect', () => {
      setIsConnected(false);
      setTransport('N/A');
      console.log('❌ Socket.IO déconnecté');
    });

    // Test de réception de messages
    socket.on('test-message', (data) => {
      console.log('📥 Réception test-message:', data);
      setMessages(prev => [...prev, `Reçu: ${data.message} à ${new Date().toLocaleTimeString()}`]);
    });

    // Test de typing indicator
    socket.on('typing-start', (data) => {
      console.log('📥 Réception typing-start:', data);
      setMessages(prev => [...prev, `👤 ${data.username} est en train de taper...`]);
    });

    socket.on('typing-stop', (data) => {
      console.log('📥 Réception typing-stop:', data);
      setMessages(prev => [...prev, `👤 ${data.username} a arrêté de taper`]);
    });

    // Nettoyage
    return () => {
      socket.disconnect();
    };
  }, []);

  const sendTestMessage = () => {
    if (testMessage.trim()) {
      console.log('📤 Émission test-message:', testMessage);
      socket.emit('test-message', { 
        message: testMessage,
        timestamp: new Date().toISOString()
      });
      setMessages(prev => [...prev, `Envoyé: ${testMessage} à ${new Date().toLocaleTimeString()}`]);
      setTestMessage('');
    }
  };

  const simulateTyping = () => {
    console.log('📤 Émission typing-start');
    socket.emit('typing-start', { username: 'Test User' });
    setTimeout(() => {
      console.log('📤 Émission typing-stop');
      socket.emit('typing-stop', { username: 'Test User' });
    }, 2000);
  };

  return (
    <div className="p-6 bg-white rounded-lg shadow-lg max-w-2xl mx-auto">
      <h2 className="text-2xl font-bold mb-4">🧪 Test Socket.IO</h2>
      
      {/* Statut de connexion */}
      <div className="mb-6">
        <div className="flex items-center gap-2 mb-2">
          <div className={`w-3 h-3 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`}></div>
          <span className="font-semibold">
            Statut: {isConnected ? 'Connecté' : 'Déconnecté'}
          </span>
        </div>
        <p className="text-sm text-gray-600">
          Transport: {transport}
        </p>
      </div>

      {/* Zone de test */}
      <div className="mb-6">
        <div className="flex gap-2 mb-4">
          <input
            type="text"
            value={testMessage}
            onChange={(e) => setTestMessage(e.target.value)}
            placeholder="Message de test..."
            className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            onKeyPress={(e) => e.key === 'Enter' && sendTestMessage()}
          />
          <button
            onClick={sendTestMessage}
            disabled={!isConnected || !testMessage.trim()}
            className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:bg-gray-300"
          >
            Envoyer
          </button>
        </div>
        
        <button
          onClick={simulateTyping}
          disabled={!isConnected}
          className="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 disabled:bg-gray-300"
        >
          Simuler Typing
        </button>
      </div>

      {/* Messages */}
      <div className="bg-gray-50 p-4 rounded-md h-64 overflow-y-auto">
        <h3 className="font-semibold mb-2">Messages de test:</h3>
        {messages.length === 0 ? (
          <p className="text-gray-500 italic">Aucun message pour le moment...</p>
        ) : (
          <div className="space-y-1">
            {messages.map((msg, index) => (
              <div key={index} className="text-sm p-2 bg-white rounded border">
                {msg}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}