import { useState } from 'react';

function App() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  // Replace with your model path (e.g., "your-user/model")
  const HF_MODEL_PATH = "theguywhosucks/Patchwork-26-beforetrain";

  const handleSend = async () => {
    if (!input.trim()) return;

    setIsLoading(true);
    setMessages([...messages, { text: input, sender: 'user' }]);
    setInput('');

    try {
      const response = await fetch(
        `https://api-inference.huggingface.co/models/${HF_MODEL_PATH}`,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${process.env.HF_TOKEN}`,
          },
          body: JSON.stringify({ inputs: input }),
        }
      );

      if (!response.ok) throw new Error('Failed to fetch');

      const data = await response.json();
      // Adjust this based on your model's output format
      const botResponse = data[0]?.generated_text || data[0]?.answer || "Sorry, I couldn't generate a response.";

      setMessages((prev) => [...prev, { text: botResponse, sender: 'bot' }]);
    } catch (error) {
      setMessages((prev) => [...prev, { text: "Error: Could not get a response.", sender: 'bot' }]);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div style={{ maxWidth: '500px', margin: '0 auto', border: '1px solid #ccc', borderRadius: '8px', padding: '16px' }}>
      <h2>Chatbot</h2>
      <div style={{ height: '300px', overflowY: 'auto', border: '1px solid #eee', padding: '8px', marginBottom: '8px' }}>
        {messages.map((msg, i) => (
          <div key={i} style={{ textAlign: msg.sender === 'user' ? 'right' : 'left', margin: '4px 0' }}>
            <span style={{
              background: msg.sender === 'user' ? '#007bff' : '#f1f1f1',
              color: msg.sender === 'user' ? 'white' : 'black',
              padding: '4px 8px',
              borderRadius: '4px',
              display: 'inline-block'
            }}>
              {msg.text}
            </span>
          </div>
        ))}
        {isLoading && <div style={{ textAlign: 'left', margin: '4px 0' }}>Typing...</div>}
      </div>
      <div style={{ display: 'flex' }}>
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && handleSend()}
          style={{ flex: 1, padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
          disabled={isLoading}
        />
        <button
          onClick={handleSend}
          style={{
            marginLeft: '8px',
            padding: '8px 16px',
            background: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
          disabled={isLoading}
        >
          Send
        </button>
      </div>
    </div>
  );
}

export default App;