import React, { useState } from "react";
import { useMatrix } from "../matrix/MatrixProvider.jsx";

const DEFAULT_ROOM_ID = "!foundation:matrix.org";

export default function MessageInput() {
  const [text, setText] = useState("");
  const { sendMessage, user, currentRoomId } = useMatrix();

  const handleSend = async (e) => {
    e.preventDefault();
    if (!text.trim() || !user) return;
    await sendMessage(currentRoomId || DEFAULT_ROOM_ID, text);
    setText("");
  };

  return (
    <form className="flex items-center gap-2" onSubmit={handleSend}>
      <button type="button" className="attachButton w-10 h-10 flex items-center justify-center rounded bg-[#1a1a1a] text-xl text-gray-400 mr-2">+</button>
      <input
        type="text"
        className="message-input flex-1 bg-[#0f0f0f] border border-[#1a1a1a] rounded-lg px-4 py-3 text-gray-200 text-sm focus:outline-none focus:border-blue-500 placeholder:text-gray-500"
        placeholder="Message #general (Foundation infrastructure channel)"
        maxLength={2000}
        value={text}
        onChange={e => setText(e.target.value)}
        disabled={!user}
      />
      <button type="submit" className="sendButton w-10 h-10 flex items-center justify-center rounded bg-blue-600 text-xl text-white ml-2">3a4</button>
    </form>
  );
}
