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

// Таблица ставок { CODE: {full, part} } <-> массив строк для редактирования.
function tableToRows(table) {
  return Object.entries(table || {}).map(([code, v]) => ({
    code,
    full: v?.full || '',
    part: v?.part || '',
  }));
}
function rowsToTable(rows) {
  const out = {};
  for (const r of rows) {
    const code = r.code.trim();
    if (code) out[code] = { full: r.full, part: r.part };
  }
  return out;
}

export default function ApplicationsAdmin() {
  const [domain, setDomain] = useState('');
  const [rows, setRows] = useState([]);
  const [tplFull, setTplFull] = useState('');
  const [tplPart, setTplPart] = useState('');
  const [loading, setLoading] = useState(true);
  const [status, setStatus] = useState(null);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    api('/settings')
      .then((d) => {
        setDomain(d.settings.apply_domain || '');
        setRows(tableToRows(d.settings.rate_table));
        setTplFull(d.settings.template_fulltime || '');
        setTplPart(d.settings.template_parttime || '');
      })
      .catch((e) => setStatus({ type: 'error', text: e.message }))
      .finally(() => setLoading(false));
  }, []);

  function setRow(i, key, value) {
    setRows((rs) => rs.map((r, idx) => (idx === i ? { ...r, [key]: value } : r)));
  }
  function addRow() {
    setRows((rs) => [...rs, { code: '', full: '', part: '' }]);
  }
  function removeRow(i) {
    setRows((rs) => rs.filter((_, idx) => idx !== i));
  }

  async function save(e) {
    e.preventDefault();
    setSaving(true);
    setStatus(null);
    try {
      await api('/settings', {
        method: 'PUT',
        body: {
          apply_domain: domain,
          rate_table: rowsToTable(rows),
          template_fulltime: tplFull,
          template_parttime: tplPart,
        },
      });
      setStatus({ type: 'ok', text: 'Сохранено' });
    } catch (err) {
      setStatus({ type: 'error', text: err.message });
    } finally {
      setSaving(false);
    }
  }

  if (loading) return <div className="card"><p className="muted">Загрузка…</p></div>;

  return (
    <form className="stack" onSubmit={save}>
      <div className="card">
        <h2>Распознавание анкет</h2>
        <p className="muted">Письма с этого домена отправителя считаются анкетами и обрабатываются шаблонами.</p>
        <label>Домен анкет
          <input value={domain} onChange={(e) => setDomain(e.target.value)} placeholder="novabeyondapply.com" />
        </label>
      </div>

      <div className="card">
        <h2>Таблица ставок по странам</h2>
        <p className="muted">Код страны — как в поле «Country» анкеты (PH, CA, AE…). Строка <b>default</b> применяется, если страны нет в таблице.</p>
        <table className="table">
          <thead>
            <tr><th>Код страны</th><th>Full-Time</th><th>Part-Time</th><th></th></tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}>
                <td><input value={r.code} onChange={(e) => setRow(i, 'code', e.target.value)} placeholder="PH" style={{ width: 90 }} /></td>
                <td><input value={r.full} onChange={(e) => setRow(i, 'full', e.target.value)} placeholder="2100 PHP/hour" /></td>
                <td><input value={r.part} onChange={(e) => setRow(i, 'part', e.target.value)} placeholder="1800 PHP/hour" /></td>
                <td><button type="button" className="danger" onClick={() => removeRow(i)}>×</button></td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="actions">
          <button type="button" className="secondary" onClick={addRow}>+ Добавить страну</button>
        </div>
      </div>

      <div className="card">
        <h2>Шаблоны ответов</h2>
        <p className="muted">Плейсхолдеры: <code>{'{first_name}'}</code>, <code>{'{last_name}'}</code>, <code>{'{rate}'}</code>, <code>{'{country}'}</code>, <code>{'{employment}'}</code>.</p>
        <label>Шаблон Full-Time
          <textarea rows={8} value={tplFull} onChange={(e) => setTplFull(e.target.value)} />
        </label>
        <label>Шаблон Part-Time
          <textarea rows={8} value={tplPart} onChange={(e) => setTplPart(e.target.value)} />
        </label>
      </div>

      {status && <div className={status.type === 'ok' ? 'success' : 'error'}>{status.text}</div>}
      <div className="actions">
        <button type="submit" disabled={saving}>{saving ? 'Сохранение…' : 'Сохранить'}</button>
      </div>
    </form>
  );
}
