import React, { useState } from 'react';
import ChatMessage from '../components/ChatMessage';
import InputArea from '../components/InputArea';

export default function Home() {
  const [messages, setMessages] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const API_URL = 'http://localhost:8000/api/v1/chat'; // آدرس endpoint

  const handleSend = async (message) => {
    setIsLoading(true);
    setError(null);
    const userMessage = { type: 'user', content: message };
    setMessages((prev) => [...prev, userMessage]);

    try {
      const res = await fetch(API_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          message: message,
          user_id: 1,
        }),
      });

      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const data = await res.json();
      setMessages((prev) => [...prev, { type: 'bot', ...data }]);
    } catch (e) {
      setError(e.message);
      setMessages((prev) => [
        ...prev,
        { type: 'bot', content: `❌ خطا در ارسال پیام: ${e.message}` },
      ]);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center py-10 px-4">
      {/* Header */}
      <div className="w-full max-w-4xl mb-8 text-center">
        <h1 className="text-3xl md:text-4xl font-extrabold text-gray-800 mb-2">
          🧠 Enterprise Search Chat
        </h1>
        <p className="text-gray-600">چت هوشمند جستجوی تجاری</p>
      </div>

      {/* Chat Container */}
      <div className="w-full max-w-4xl bg-white rounded-xl shadow-lg overflow-hidden flex flex-col h-[70vh]">
        {/* Messages Area */}
        <div className="flex-1 overflow-y-auto p-6 space-y-4 bg-gray-50">
          {messages.length === 0 && (
            <div className="text-center text-gray-400 py-10">
              <p className="text-lg">پیامی موجود نیست. شروع کنید!</p>
              <p className="text-sm mt-2">مثال: برند اپکس بالای 5 میلیون</p>
            </div>
          )}
          {messages.map((msg, idx) => (
            <ChatMessage key={idx} {...msg} />
          ))}
          {isLoading && (
            <div className="text-center text-gray-500 py-4 animate-pulse">
              <p>در حال پردازش...</p>
            </div>
          )}
          {error && (
            <div className="bg-red-100 text-red-700 p-3 rounded-lg text-center">
              {error}
            </div>
          )}
        </div>

        {/* Input Area */}
        <div className="p-4 bg-white border-t border-gray-200">
          <InputArea onSend={handleSend} />
        </div>
      </div>

      {/* Footer */}
      <div className="mt-6 text-center">
        Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noreferrer" className="text-blue-600 hover:text-blue-800 font-bold underline">anyCoder</a>
      </div>
    </div>
  );
}