topsysops-app/admin-app/src/account/Messages.jsx

import { useEffect, useRef, useState } from 'react';
import { Send } from 'lucide-react';
import { api } from '../lib/api.js';

function cx(...args) {
  return args.filter(Boolean).join(' ');
}

export default function Messages() {
  const [messages, setMessages] = useState([]);
  const [loading, setLoading] = useState(true);
  const [input, setInput] = useState('');
  const [sending, setSending] = useState(false);
  const bottomRef = useRef(null);

  async function load() {
    setLoading(true);
    setMessages(await api.accountGetMessages());
    setLoading(false);
  }

  useEffect(() => {
    load();
  }, []);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  async function handleSend(e) {
    e.preventDefault();
    const text = input.trim();
    if (!text || sending) return;
    setSending(true);
    try {
      const msg = await api.accountSendMessage(text);
      setMessages((m) => [...m, msg]);
      setInput('');
    } catch (err) {
      // the user can just retry
    } finally {
      setSending(false);
    }
  }

  return (
    <div className="flex flex-col h-[calc(100vh-4rem)] md:h-[calc(100vh-2rem)] max-w-2xl">
      <h1 className="font-bold mb-1 font-display text-lg">Написать нам</h1>
      <p className="text-xs text-slate-400 dark:text-slate-500 mb-4">Сообщения видит команда TopSysOps и ответит вам здесь же.</p>

      <div className="flex-1 overflow-y-auto rounded-lg border p-4 space-y-3 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800 mb-3">
        {loading && <p className="text-sm text-slate-400">Загружаем переписку...</p>}
        {!loading && messages.length === 0 && (
          <p className="text-sm text-slate-400">Пока нет сообщений - напишите нам, если возникли вопросы.</p>
        )}
        {messages.map((m) => (
          <div
            key={m.id}
            className={cx(
              'max-w-[85%] rounded-lg px-3 py-2 text-sm whitespace-pre-wrap',
              m.sender === 'customer' ? 'ml-auto bg-emerald-500 text-white' : 'bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-100'
            )}
          >
            {m.body}
          </div>
        ))}
        <div ref={bottomRef} />
      </div>

      <form onSubmit={handleSend} className="flex gap-2">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Напишите сообщение..."
          className="flex-1 rounded-md border px-3 py-2 text-sm bg-transparent border-slate-300 dark:border-slate-700"
        />
        <button
          type="submit"
          disabled={sending}
          className="px-4 py-2 rounded-md bg-emerald-500 text-white text-sm font-medium hover:bg-emerald-600 disabled:opacity-50 inline-flex items-center gap-1"
        >
          <Send className="h-4 w-4" />
        </button>
      </form>
    </div>
  );
}