components/ChatMessage.jsx

import React from 'react';

const ChatMessage = ({ type, content, products, clarification, debug }) => {
  return (
    <div className={`msg mb-4 p-3 rounded-lg shadow-sm ${type === 'user' ? 'bg-blue-50 border-l-4 border-blue-500' : 'bg-green-50 border-r-4 border-green-500'}`}>
      {type === 'user' && <div className="user font-bold text-blue-700 mb-1">👤 شما:</div>}
      {type === 'bot' && <div className="bot font-bold text-green-700 mb-1">🤖 پاسخ:</div>}
      
      {type === 'text' && <p className="text-gray-800 whitespace-pre-wrap">{content}</p>}
      
      {type === 'product_list' && (
        <div>
          <p className="font-bold text-gray-700 mb-2"><b>نتیجه:</b> {content}</p>
          <p className="text-sm text-gray-600 mb-3">تعداد: {products?.length || 0}</p>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {products?.map((product, index) => (
              <div key={index} className="product bg-white border border-gray-200 p-4 rounded-md shadow-sm hover:shadow-md transition-shadow">
                <div className="font-bold text-lg text-gray-800 mb-1">{product.name}</div>
                <div className="text-sm text-gray-600 mb-2">قیمت: {product.formatted_price} تومان</div>
                <div className="text-sm text-gray-500 mb-2">وضعیت: {product.stock ? '✅ موجود' : '❌ ناموجود'}</div>
                <div className="text-sm text-gray-500">
                  برند: {product.brand || '-'} | شهر: {product.city || '-'}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
      
      {clarification && (
        <div className="clarification mt-4 p-3 bg-red-50 border border-red-200 rounded text-red-700 font-bold">
          ❗ ابهام تشخیص داده شد: {clarification}
        </div>
      )}
      
      {debug && (
        <div className="debug-box mt-6 bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto">
          <details>
            <summary className="cursor-pointer font-bold hover:text-green-300">🧪 فیلترهای استخراج‌شده توسط LLM (JSON)</summary>
            <pre className="text-xs mt-2 whitespace-pre-wrap">{JSON.stringify(debug, null, 2)}</pre>
          </details>
        </div>
      )}
    </div>
  );
};

export default ChatMessage;