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

const STATUS_LABEL = {
  pending: 'Ожидает',
  sent: 'Отправлено',
  rejected: 'Отклонено',
  error: 'Ошибка',
};

export default function Journal() {
  const [emails, setEmails] = useState([]);
  const [filter, setFilter] = useState('pending');
  const [loading, setLoading] = useState(true);
  const [status, setStatus] = useState(null);
  const [polling, setPolling] = useState(false);
  const [busyId, setBusyId] = useState(null);
  const [drafts, setDrafts] = useState({}); // id -> отредактированный текст

  async function load() {
    setLoading(true);
    try {
      const q = filter === 'all' ? '' : `?status=${filter}`;
      const d = await api(`/emails${q}`);
      setEmails(d.emails);
      // подтягиваем тексты черновиков в локальное состояние
      const map = {};
      for (const e of d.emails) map[e.id] = e.draft_reply;
      setDrafts(map);
    } catch (e) {
      setStatus({ type: 'error', text: e.message });
    } finally {
      setLoading(false);
    }
  }
  useEffect(() => { load(); }, [filter]);

  async function poll() {
    setPolling(true);
    setStatus(null);
    try {
      const r = await api('/emails/poll', { method: 'POST' });
      if (!r.polled) setStatus({ type: 'error', text: r.reason || 'Опрос не выполнен' });
      else setStatus({ type: 'ok', text: `Опрос выполнен. Новых черновиков: ${r.created ?? 0}` });
      await load();
    } catch (e) {
      setStatus({ type: 'error', text: e.message });
    } finally {
      setPolling(false);
    }
  }

  async function action(id, fn) {
    setBusyId(id);
    setStatus(null);
    try {
      await fn();
      await load();
    } catch (e) {
      setStatus({ type: 'error', text: e.message });
    } finally {
      setBusyId(null);
    }
  }

  const saveDraft = (e) => api(`/emails/${e.id}`, { method: 'PUT', body: { draft_reply: drafts[e.id] } });
  const send = (e) => action(e.id, async () => { await saveDraft(e); await api(`/emails/${e.id}/send`, { method: 'POST' }); });
  const reject = (e) => action(e.id, () => api(`/emails/${e.id}/reject`, { method: 'POST' }));

  return (
    <div className="stack">
      <div className="card">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <h2 style={{ margin: 0 }}>Журнал писем</h2>
          <div className="actions" style={{ margin: 0 }}>
            <select value={filter} onChange={(e) => setFilter(e.target.value)}>
              <option value="pending">Ожидают</option>
              <option value="sent">Отправленные</option>
              <option value="rejected">Отклонённые</option>
              <option value="error">Ошибки</option>
              <option value="all">Все</option>
            </select>
            <button type="button" className="secondary" disabled={polling} onClick={poll}>
              {polling ? 'Опрос…' : 'Проверить почту сейчас'}
            </button>
          </div>
        </div>
        {status && <div className={status.type === 'ok' ? 'success' : 'error'}>{status.text}</div>}
      </div>

      {loading ? (
        <div className="card"><p className="muted">Загрузка…</p></div>
      ) : emails.length === 0 ? (
        <div className="card"><p className="muted">Писем нет.</p></div>
      ) : (
        emails.map((e) => (
          <div className="card" key={e.id}>
            <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
              <div>
                <div><b>{e.subject || '(без темы)'}</b></div>
                <div className="muted" style={{ fontSize: 13 }}>
                  От: {e.from_name ? `${e.from_name} <${e.from_addr}>` : e.from_addr}
                  {' · '}{e.kind === 'application' ? 'анкета' : 'обычное'}
                  {' · '}{e.received_at}
                </div>
                <div className="muted" style={{ fontSize: 13 }}>Ответ на: <b>{e.reply_to || '—'}</b></div>
              </div>
              <span className={`badge badge-${e.status}`}>{STATUS_LABEL[e.status] || e.status}</span>
            </div>

            {e.error && <div className="error" style={{ marginTop: 10 }}>{e.error}</div>}

            {e.status === 'pending' ? (
              <>
                <label style={{ marginTop: 12 }}>Черновик ответа
                  <textarea rows={8} value={drafts[e.id] ?? ''} onChange={(ev) => setDrafts((d) => ({ ...d, [e.id]: ev.target.value }))} />
                </label>
                <div className="actions">
                  <button type="button" disabled={busyId === e.id} onClick={() => send(e)}>
                    {busyId === e.id ? 'Отправка…' : 'Отправить'}
                  </button>
                  <button type="button" className="secondary" disabled={busyId === e.id} onClick={() => action(e.id, () => saveDraft(e))}>Сохранить черновик</button>
                  <button type="button" className="danger" disabled={busyId === e.id} onClick={() => reject(e)}>Отклонить</button>
                </div>
              </>
            ) : (
              <details style={{ marginTop: 10 }}>
                <summary style={{ cursor: 'pointer', color: 'var(--muted)' }}>Показать ответ</summary>
                <pre className="preview" style={{ padding: 0, marginTop: 10 }}>{e.draft_reply}</pre>
              </details>
            )}
          </div>
        ))
      )}
    </div>
  );
}
