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

export default function Profile() {
  const [form, setForm] = useState({ full_name: '', company: '', position: '', signature: '' });
  const [loading, setLoading] = useState(true);
  const [status, setStatus] = useState(null); // { type: 'ok'|'error', text }
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    api('/profile')
      .then((d) => setForm(d.profile))
      .catch((e) => setStatus({ type: 'error', text: e.message }))
      .finally(() => setLoading(false));
  }, []);

  function set(field, value) {
    setForm((f) => ({ ...f, [field]: value }));
  }

  async function save(e) {
    e.preventDefault();
    setSaving(true);
    setStatus(null);
    try {
      await api('/profile', { method: 'PUT', body: form });
      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="card" onSubmit={save}>
      <h2>Профиль</h2>
      <p className="muted">Эти данные подставляются в письмо: кто отвечает, от какой компании.</p>
      <div className="grid2">
        <label>Имя
          <input value={form.full_name} onChange={(e) => set('full_name', e.target.value)} placeholder="Иван Петров" />
        </label>
        <label>Компания
          <input value={form.company} onChange={(e) => set('company', e.target.value)} placeholder="ООО Ромашка" />
        </label>
        <label>Должность
          <input value={form.position} onChange={(e) => set('position', e.target.value)} placeholder="Менеджер по продажам" />
        </label>
      </div>
      <label>Подпись (добавляется в конец каждого ответа)
        <textarea rows={4} value={form.signature} onChange={(e) => set('signature', e.target.value)}
          placeholder={'С уважением,\nИван Петров\nООО Ромашка'} />
      </label>
      {status && <div className={status.type === 'ok' ? 'success' : 'error'}>{status.text}</div>}
      <div className="actions">
        <button type="submit" disabled={saving}>{saving ? 'Сохранение…' : 'Сохранить'}</button>
      </div>
    </form>
  );
}
