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

const empty = {
  imap_host: '', imap_port: 993, imap_secure: true, imap_user: '', imap_pass: '', imap_pass_set: false,
  smtp_host: '', smtp_port: 465, smtp_secure: true, smtp_user: '', smtp_pass: '', smtp_pass_set: false,
  from_email: '', poll_enabled: false,
};

export default function MailSettings() {
  const [form, setForm] = useState(empty);
  const [loading, setLoading] = useState(true);
  const [saveStatus, setSaveStatus] = useState(null);
  const [imapStatus, setImapStatus] = useState(null);
  const [smtpStatus, setSmtpStatus] = useState(null);
  const [saving, setSaving] = useState(false);
  const [testing, setTesting] = useState({ imap: false, smtp: false });

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

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

  // Выбор типа соединения сам подставляет стандартный порт.
  // 'ssl' = безопасное на спец. порт (TLS), 'starttls' = обычное соединение.
  function setConnection(proto, mode) {
    const secure = mode === 'ssl';
    const port = proto === 'imap' ? (secure ? 993 : 143) : (secure ? 465 : 587);
    setForm((f) => ({ ...f, [`${proto}_secure`]: secure, [`${proto}_port`]: port }));
  }

  async function save(e) {
    e.preventDefault();
    setSaving(true);
    setSaveStatus(null);
    try {
      await api('/mail', { method: 'PUT', body: form });
      setSaveStatus({ type: 'ok', text: 'Настройки сохранены' });
      // После сохранения помечаем пароли как заданные и чистим поля ввода.
      setForm((f) => ({
        ...f,
        imap_pass: '', smtp_pass: '',
        imap_pass_set: f.imap_pass ? true : f.imap_pass_set,
        smtp_pass_set: f.smtp_pass ? true : f.smtp_pass_set,
      }));
    } catch (err) {
      setSaveStatus({ type: 'error', text: err.message });
    } finally {
      setSaving(false);
    }
  }

  async function test(kind) {
    setTesting((t) => ({ ...t, [kind]: true }));
    const setStatus = kind === 'imap' ? setImapStatus : setSmtpStatus;
    setStatus(null);
    try {
      const data = await api(`/mail/test-${kind}`, { method: 'POST', body: form });
      setStatus({ type: 'ok', text: data.message });
    } catch (err) {
      setStatus({ type: 'error', text: err.message });
    } finally {
      setTesting((t) => ({ ...t, [kind]: false }));
    }
  }

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

  return (
    <form className="stack" onSubmit={save}>
      {/* IMAP */}
      <div className="card">
        <h2>IMAP — чтение входящих</h2>
        <div className="grid2">
          <label>Хост
            <input value={form.imap_host} onChange={(e) => set('imap_host', e.target.value)} placeholder="imap.company.com" />
          </label>
          <label>Порт
            <input type="number" value={form.imap_port} onChange={(e) => set('imap_port', e.target.value)} />
          </label>
          <label>Логин
            <input value={form.imap_user} onChange={(e) => set('imap_user', e.target.value)} placeholder="user@company.com" />
          </label>
          <label>Пароль
            <input type="password" value={form.imap_pass} onChange={(e) => set('imap_pass', e.target.value)}
              placeholder={form.imap_pass_set ? '•••••• (сохранён, оставьте пустым)' : ''} />
          </label>
        </div>
        <label>Тип соединения
          <select value={form.imap_secure ? 'ssl' : 'starttls'} onChange={(e) => setConnection('imap', e.target.value)}>
            <option value="ssl">Безопасное на спец. порт — SSL/TLS (993)</option>
            <option value="starttls">Обычное соединение — STARTTLS (143)</option>
          </select>
        </label>
        <div className="actions">
          <button type="button" className="secondary" disabled={testing.imap} onClick={() => test('imap')}>
            {testing.imap ? 'Проверка…' : 'Проверить IMAP'}
          </button>
        </div>
        {imapStatus && <div className={imapStatus.type === 'ok' ? 'success' : 'error'}>{imapStatus.text}</div>}
      </div>

      {/* SMTP */}
      <div className="card">
        <h2>SMTP — отправка ответов</h2>
        <div className="grid2">
          <label>Хост
            <input value={form.smtp_host} onChange={(e) => set('smtp_host', e.target.value)} placeholder="smtp.company.com" />
          </label>
          <label>Порт
            <input type="number" value={form.smtp_port} onChange={(e) => set('smtp_port', e.target.value)} />
          </label>
          <label>Логин
            <input value={form.smtp_user} onChange={(e) => set('smtp_user', e.target.value)} placeholder="user@company.com" />
          </label>
          <label>Пароль
            <input type="password" value={form.smtp_pass} onChange={(e) => set('smtp_pass', e.target.value)}
              placeholder={form.smtp_pass_set ? '•••••• (сохранён, оставьте пустым)' : ''} />
          </label>
        </div>
        <label>Тип соединения
          <select value={form.smtp_secure ? 'ssl' : 'starttls'} onChange={(e) => setConnection('smtp', e.target.value)}>
            <option value="ssl">Безопасное на спец. порт — SSL/TLS (465)</option>
            <option value="starttls">Обычное соединение — STARTTLS (587)</option>
          </select>
        </label>
        <div className="actions">
          <button type="button" className="secondary" disabled={testing.smtp} onClick={() => test('smtp')}>
            {testing.smtp ? 'Проверка…' : 'Проверить SMTP'}
          </button>
        </div>
        {smtpStatus && <div className={smtpStatus.type === 'ok' ? 'success' : 'error'}>{smtpStatus.text}</div>}
      </div>

      {/* Автоответчик */}
      <div className="card">
        <h2>Автоответчик</h2>
        <label>Email отправителя (From)
          <input value={form.from_email} onChange={(e) => set('from_email', e.target.value)}
            placeholder="olivia.carter@novabeyondtech.com" />
          <span className="muted" style={{ fontSize: 12 }}>Адрес, с которого уходят ответы. Если пусто — берётся логин IMAP. Должен быть подтверждён в Postmark.</span>
        </label>
        <label className="checkbox">
          <input type="checkbox" checked={form.poll_enabled} onChange={(e) => set('poll_enabled', e.target.checked)} />
          Включить автоматический опрос входящей почты (создаёт черновики в журнале; отправка — вручную)
        </label>
      </div>

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