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

export default function ApplicationTest() {
  const [body, setBody] = useState('');
  const [subject, setSubject] = useState('');
  const [result, setResult] = useState(null);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  async function preview(e) {
    e.preventDefault();
    setError('');
    setResult(null);
    setLoading(true);
    try {
      const d = await api('/application/preview', { method: 'POST', body: { body, subject } });
      setResult(d.result);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="stack">
      <form className="card" onSubmit={preview}>
        <h2>Тест разбора анкеты</h2>
        <p className="muted">Вставь текст анкеты — увидишь распознанные поля, ставку и готовый ответ. Ничего не отправляется.</p>
        <label>Тема письма (необязательно)
          <input value={subject} onChange={(e) => setSubject(e.target.value)} placeholder="Application form" />
        </label>
        <label>Текст анкеты
          <textarea rows={12} value={body} onChange={(e) => setBody(e.target.value)}
            placeholder={'Country: PH\nFirst Name: ...\nE-mail: ...\nEmployment desired: Full time'} />
        </label>
        {error && <div className="error">{error}</div>}
        <div className="actions">
          <button type="submit" disabled={loading}>{loading ? 'Разбор…' : 'Разобрать'}</button>
        </div>
      </form>

      {result && (
        <div className="card">
          <h2>Результат разбора</h2>
          <table className="table">
            <tbody>
              <tr><td className="muted">Ответ на</td><td><b>{result.to || '—'}</b></td></tr>
              <tr><td className="muted">Имя</td><td>{result.parsed.firstName} {result.parsed.lastName}</td></tr>
              <tr><td className="muted">Страна</td><td>{result.parsed.country || '—'}</td></tr>
              <tr><td className="muted">Занятость</td><td>{result.parsed.employmentRaw || '—'} → {result.parsed.employment || 'не определена'}</td></tr>
              <tr><td className="muted">Ставка</td><td><b>{result.rate || '—'}</b></td></tr>
              <tr><td className="muted">Тема ответа</td><td>{result.subject || '—'}</td></tr>
            </tbody>
          </table>
          {result.warnings?.length > 0 && (
            <div className="error" style={{ marginTop: 14 }}>
              {result.warnings.map((w, i) => <div key={i}>⚠ {w}</div>)}
            </div>
          )}
          {result.ok
            ? <div className="success">Анкета распознана полностью — ответ готов к отправке.</div>
            : <div className="error">Анкета распознана не полностью — отправка невозможна.</div>}
        </div>
      )}

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