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

function Stat({ label, value, tone }) {
  return (
    <div className={`stat ${tone ? `stat-${tone}` : ''}`}>
      <div className="stat-value">{value}</div>
      <div className="stat-label">{label}</div>
    </div>
  );
}

function Flag({ ok, label }) {
  return (
    <div className="flag">
      <span className={ok ? 'dot dot-ok' : 'dot dot-off'} />
      {label}: <b>{ok ? 'да' : 'нет'}</b>
    </div>
  );
}

export default function Overview({ user }) {
  const [stats, setStats] = useState(null);
  const [error, setError] = useState('');

  async function load() {
    try {
      const d = await api('/stats');
      setStats(d.stats);
    } catch (e) {
      setError(e.message);
    }
  }
  useEffect(() => {
    load();
    const t = setInterval(load, 15000); // авто-обновление каждые 15с
    return () => clearInterval(t);
  }, []);

  if (error) return <div className="card"><div className="error">{error}</div></div>;
  if (!stats) return <div className="card"><p className="muted">Загрузка…</p></div>;

  const m = stats.mine;

  return (
    <div className="stack">
      <div className="card">
        <h2>Мои письма</h2>
        <div className="stats-grid">
          <Stat label="Ожидают" value={m.pending} tone="pending" />
          <Stat label="Отправлено" value={m.sent} tone="sent" />
          <Stat label="Отклонено" value={m.rejected} />
          <Stat label="Ошибки" value={m.error} tone="error" />
          <Stat label="Всего" value={m.total} />
        </div>
      </div>

      <div className="card">
        <h2>Состояние</h2>
        <div className="flags">
          <Flag ok={stats.account.autoreply_enabled} label="Автоответчик включён" />
          <Flag ok={stats.account.imap_configured} label="IMAP настроен" />
          <Flag ok={stats.account.smtp_configured} label="SMTP настроен" />
          <Flag ok={stats.account.profile_complete} label="Профиль заполнен" />
        </div>
        <p className="muted" style={{ marginTop: 12 }}>Интервал опроса почты: каждые {stats.poll_interval} сек.</p>
      </div>

      {stats.global && (
        <div className="card">
          <h2>Глобально (администратор)</h2>
          <div className="stats-grid">
            <Stat label="Пользователей" value={stats.global.users} />
            <Stat label="Переписок для обучения" value={stats.global.training_files} />
            <Stat label="Автоответчик у польз." value={stats.global.autoreply_users} />
            <Stat label="Писем — ожидают" value={stats.global.emails.pending} tone="pending" />
            <Stat label="Писем — отправлено" value={stats.global.emails.sent} tone="sent" />
            <Stat label="Писем — ошибки" value={stats.global.emails.error} tone="error" />
          </div>
          <div className="flags" style={{ marginTop: 14 }}>
            <Flag ok={stats.global.api_key_set} label="Claude API ключ задан" />
            <div className="flag">Модель: <b>{stats.global.model}</b></div>
          </div>
        </div>
      )}
    </div>
  );
}
