import { useState } from 'react';
import { api } from '../api.js';

export default function GenerateTest() {
  const [from, setFrom] = useState('');
  const [subject, setSubject] = useState('');
  const [body, setBody] = useState('');
  const [draft, setDraft] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  async function generate(e) {
    e.preventDefault();
    setError('');
    setDraft('');
    setLoading(true);
    try {
      const d = await api('/generate', { method: 'POST', body: { from, subject, body } });
      setDraft(d.draft);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="stack">
      <form className="card" onSubmit={generate}>
        <h2>Тест генерации ответа</h2>
        <p className="muted">
          Вставь сюда входящее письмо — ИИ сгенерирует ответ по обучающим перепискам и твоему профилю.
          Реальная почта не затрагивается.
        </p>
        <div className="grid2">
          <label>От кого
            <input value={from} onChange={(e) => setFrom(e.target.value)} placeholder="client@example.com" />
          </label>
          <label>Тема
            <input value={subject} onChange={(e) => setSubject(e.target.value)} placeholder="Запрос коммерческого предложения" />
          </label>
        </div>
        <label>Текст входящего письма
          <textarea rows={8} value={body} onChange={(e) => setBody(e.target.value)}
            placeholder="Здравствуйте! Подскажите, пожалуйста, сроки и стоимость..." />
        </label>
        {error && <div className="error">{error}</div>}
        <div className="actions">
          <button type="submit" disabled={loading}>{loading ? 'Генерация…' : 'Сгенерировать ответ'}</button>
        </div>
      </form>

      {draft && (
        <div className="card">
          <h2>Черновик ответа</h2>
          <pre className="preview" style={{ padding: 0 }}>{draft}</pre>
        </div>
      )}
    </div>
  );
}
