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

export default function Training() {
  const [files, setFiles] = useState([]);
  const [loading, setLoading] = useState(true);
  const [status, setStatus] = useState(null);
  const [uploading, setUploading] = useState(false);
  const [preview, setPreview] = useState(null); // { filename, content }
  const fileInput = useRef(null);

  // Поля для ручного ввода переписки текстом.
  const [pasteName, setPasteName] = useState('');
  const [pasteText, setPasteText] = useState('');

  async function load() {
    setLoading(true);
    try {
      const d = await api('/training');
      setFiles(d.files);
    } catch (e) {
      setStatus({ type: 'error', text: e.message });
    } finally {
      setLoading(false);
    }
  }
  useEffect(() => { load(); }, []);

  // Загрузка одного или нескольких .txt: читаем в браузере и шлём как текст.
  async function onFiles(e) {
    const list = Array.from(e.target.files || []);
    if (!list.length) return;
    setUploading(true);
    setStatus(null);
    try {
      for (const file of list) {
        const content = await file.text();
        await api('/training', { method: 'POST', body: { filename: file.name, content } });
      }
      setStatus({ type: 'ok', text: `Загружено файлов: ${list.length}` });
      await load();
    } catch (err) {
      setStatus({ type: 'error', text: err.message });
    } finally {
      setUploading(false);
      if (fileInput.current) fileInput.current.value = '';
    }
  }

  async function addPasted(e) {
    e.preventDefault();
    if (!pasteText.trim()) return;
    setUploading(true);
    setStatus(null);
    try {
      await api('/training', {
        method: 'POST',
        body: { filename: pasteName.trim() || `переписка-${Date.now()}.txt`, content: pasteText },
      });
      setPasteName('');
      setPasteText('');
      setStatus({ type: 'ok', text: 'Переписка добавлена' });
      await load();
    } catch (err) {
      setStatus({ type: 'error', text: err.message });
    } finally {
      setUploading(false);
    }
  }

  async function remove(id) {
    if (!confirm('Удалить эту переписку из обучения?')) return;
    try {
      await api(`/training/${id}`, { method: 'DELETE' });
      await load();
    } catch (err) {
      setStatus({ type: 'error', text: err.message });
    }
  }

  async function showPreview(id) {
    try {
      const d = await api(`/training/${id}`);
      setPreview(d.file);
    } catch (err) {
      setStatus({ type: 'error', text: err.message });
    }
  }

  return (
    <div className="stack">
      <div className="card">
        <h2>Обучение ИИ на переписках</h2>
        <p className="muted">
          Загрузите примеры реальных переписок (.txt). По ним Claude учится стилю, тону и структуре ответов.
          Эти примеры общие для всех пользователей и видны только администратору.
        </p>

        <div className="actions">
          <input
            ref={fileInput}
            type="file"
            accept=".txt,text/plain"
            multiple
            onChange={onFiles}
            disabled={uploading}
            style={{ padding: '8px' }}
          />
        </div>

        <details style={{ marginTop: 16 }}>
          <summary style={{ cursor: 'pointer', color: 'var(--muted)' }}>…или вставить переписку текстом</summary>
          <form onSubmit={addPasted} style={{ marginTop: 12 }}>
            <label>Название
              <input value={pasteName} onChange={(e) => setPasteName(e.target.value)} placeholder="клиент-возврат.txt" />
            </label>
            <label>Текст переписки
              <textarea rows={8} value={pasteText} onChange={(e) => setPasteText(e.target.value)}
                placeholder={'Клиент: Здравствуйте, хочу вернуть товар...\nМенеджер: Добрый день! Конечно...'} />
            </label>
            <div className="actions">
              <button type="submit" disabled={uploading}>Добавить переписку</button>
            </div>
          </form>
        </details>

        {status && <div className={status.type === 'ok' ? 'success' : 'error'}>{status.text}</div>}
      </div>

      <div className="card">
        <h2>Загруженные переписки ({files.length})</h2>
        {loading ? (
          <p className="muted">Загрузка…</p>
        ) : files.length === 0 ? (
          <p className="muted">Пока ничего не загружено.</p>
        ) : (
          <table className="table">
            <thead>
              <tr><th>Файл</th><th>Размер</th><th>Добавлен</th><th></th></tr>
            </thead>
            <tbody>
              {files.map((f) => (
                <tr key={f.id}>
                  <td>{f.filename}</td>
                  <td className="muted">{f.size} симв.</td>
                  <td className="muted">{f.created_at}</td>
                  <td style={{ whiteSpace: 'nowrap' }}>
                    <button className="secondary" onClick={() => showPreview(f.id)}>Просмотр</button>
                    {' '}
                    <button className="danger" onClick={() => remove(f.id)}>Удалить</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {preview && (
        <div className="modal-backdrop" onClick={() => setPreview(null)}>
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            <div className="modal-head">
              <h3>{preview.filename}</h3>
              <button className="secondary" onClick={() => setPreview(null)}>Закрыть</button>
            </div>
            <pre className="preview">{preview.content}</pre>
          </div>
        </div>
      )}
    </div>
  );
}
