// ════════════════════════════════════════════════════════════════
// /admin/settings — системные настройки (super_admin only)
// ════════════════════════════════════════════════════════════════

function SettingsPage({ currentUser }) {
  const A = window.SDH_ADMIN;
  const [s, setS] = React.useState(A.settings);
  const [dirty, setDirty] = React.useState(false);
  const [showResetInvites, setShowResetInvites] = React.useState(false);

  const [saveMsg, setSaveMsg] = React.useState(null);

  function update(key, value) {
    setS(prev => ({ ...prev, [key]: value }));
    setDirty(true);
    setSaveMsg(null);
  }
  async function save() {
    setSaveMsg(null);
    if (window.SDH_USE_API && window.SDH_API) {
      try {
        const resp = await window.SDH_API.patch('/api/admin/settings', s);
        if (resp && resp.settings) {
          Object.assign(A.settings, resp.settings);
          setS(resp.settings);
        }
        setDirty(false);
        setSaveMsg({ type: 'ok', text: 'Сохранено' });
      } catch (e) {
        setSaveMsg({ type: 'error', text: (e && e.message) || 'Ошибка сохранения' });
      }
      return;
    }
    // Mock
    Object.assign(A.settings, s);
    setDirty(false);
    setSaveMsg({ type: 'ok', text: 'Сохранено локально (mock)' });
  }

  if (currentUser.role !== 'super_admin') {
    return <AccessDenied requiredRole="super_admin" currentRole={currentUser.role} />;
  }

  return (
    <div className="sdh-fade">
      <PageHeader
        section="управление"
        title="Системные настройки"
        accent="настройки"
        subtitle="Глобальные параметры Data Hub. Изменения применяются сразу и логируются. Только super-admin."
        right={
          <button className="sdh-btn sdh-btn--bronze" disabled={!dirty} onClick={save}
            style={{ opacity: dirty ? 1 : 0.4 }}>
            Сохранить
          </button>
        }
      />

      <section className="sdh-container" style={{ paddingBottom: 'var(--space-16)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)', maxWidth: 720 }}>
          <SettingsBlock title="бюджет"
            help={{
              title: 'Budget guard',
              what: 'Максимум LLM расходов в долларах за месяц и действие при превышении.',
              why: 'Это страховка от случайного цикла в коде, который сожрёт месячный бюджет за час. Default disable_cron безопаснее warn_only — лучше потерять полдня обновлений, чем месячный бюджет.',
            }}>
            <SettingRow label="максимум $/мес">
              <input type="number" min="5" max="500" value={s.budget_monthly_usd}
                onChange={e => update('budget_monthly_usd', Number(e.target.value))}
                style={{ ...authFieldStyle, width: 120 }} />
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-tertiary)' }}>
                ≈ {Math.round(s.budget_monthly_usd * 92).toLocaleString('ru-RU')} ₽
              </span>
            </SettingRow>
            <SettingRow label="при превышении">
              <select value={s.budget_action} onChange={e => update('budget_action', e.target.value)} style={window.selectStyle}>
                <option value="disable_cron">остановить cron автоматически</option>
                <option value="warn_only">только предупредить, не останавливать</option>
                <option value="block_all">блокировать все новые LLM-операции</option>
              </select>
            </SettingRow>
            <p className="sdh-quote" style={{ margin: 0, fontSize: 12.5 }}>
              При выбранном «остановить cron» при превышении бюджета автозапуск pipeline отключится. В шапке появится bronze badge «Бюджет исчерпан». Email уведомление отключено до подключения провайдера (deferred).
            </p>
          </SettingsBlock>

          <SettingsBlock title="cron"
            help={{
              title: 'Cron pipeline',
              what: 'Автоматический сбор новых стартапов из источников каждые N часов.',
              why: 'Чем чаще, тем свежее данные, но тем выше расход токенов. 6 часов — комфортная середина. Меньше 3 часов — для растущих кластеров (например, перед демо-днём).',
            }}>
            <SettingRow label="cron включён">
              <Toggle value={s.cron_enabled} onChange={v => update('cron_enabled', v)} />
            </SettingRow>
            <SettingRow label="частота">
              <div style={{ display: 'flex', gap: 4 }}>
                {[1, 3, 6, 12, 24].map(h => (
                  <button key={h} className={`sdh-chip ${s.cron_frequency_hours === h ? 'is-active' : ''}`}
                    onClick={() => update('cron_frequency_hours', h)}
                    style={{ padding: '4px 10px', fontSize: 12 }}>{h}ч</button>
                ))}
              </div>
            </SettingRow>
          </SettingsBlock>

          <SettingsBlock title="email уведомления (deferred)"
            help={{
              title: 'Email уведомления',
              what: 'Триггеры, по которым система должна слать письма.',
              why: 'На текущем этапе email-провайдер не подключён, эти настройки сохраняются в БД но реально письма не идут. Подключение Resend / Yandex SMTP — отдельная фаза.',
            }}>
            <SettingRow label="cron упал">
              <Toggle value={s.email_alerts_cron_failure} onChange={v => update('email_alerts_cron_failure', v)} />
            </SettingRow>
            <SettingRow label="токены истекают">
              <Toggle value={s.email_alerts_expired_tokens} onChange={v => update('email_alerts_expired_tokens', v)} />
            </SettingRow>
            <SettingRow label="ежедневный дайджест">
              <Toggle value={s.email_alerts_daily_digest} onChange={v => update('email_alerts_daily_digest', v)} />
            </SettingRow>
            <div style={{
              padding: 'var(--space-3)',
              background: 'var(--hue-amber-subtle)',
              border: '1px solid var(--hue-amber)',
              borderRadius: 'var(--radius-md)',
              fontSize: 12, color: 'var(--hue-amber)',
              lineHeight: 1.5,
            }}>
              ⚠ Email отправка не работает (deferred · v1.1). Все триггеры сохраняются в очередь logs/email_queue.log, реально не уходят. Подключение провайдера планируется отдельной фазой.
            </div>
          </SettingsBlock>

          <SettingsBlock title="brand guards"
            help={{
              title: 'Брэнд-гарды',
              what: 'Жёсткие правила контента: только русский, без тире, без упоминаний AI-провайдеров.',
              why: 'Защита от случайного срыва бренда. Например, AI попросит "—" в перечислении, или назовёт провайдера в подписке экрана. Эти флаги включают runtime-валидацию.',
            }}>
            <SettingRow label="запрет упоминаний AI-провайдеров">
              <Toggle value={s.brand_no_ai_providers} onChange={v => update('brand_no_ai_providers', v)} disabled />
              <span className="sdh-mono-label" style={{ marginBottom: 0 }}>всегда включено</span>
            </SettingRow>
            <SettingRow label="запрет тире (только точки и запятые)">
              <Toggle value={s.brand_no_em_dash} onChange={v => update('brand_no_em_dash', v)} disabled />
              <span className="sdh-mono-label" style={{ marginBottom: 0 }}>всегда включено</span>
            </SettingRow>
            <SettingRow label="только русский в UI">
              <Toggle value={s.brand_russian_only} onChange={v => update('brand_russian_only', v)} disabled />
              <span className="sdh-mono-label" style={{ marginBottom: 0 }}>всегда включено</span>
            </SettingRow>
          </SettingsBlock>

          <SettingsBlock title="опасная зона">
            <div style={{
              padding: 'var(--space-4)',
              background: 'var(--hue-rose-subtle)',
              border: '1px solid var(--hue-rose)',
              borderRadius: 'var(--radius-md)',
            }}>
              <h4 style={{ margin: '0 0 var(--space-2)', fontSize: 14, fontWeight: 600, color: 'var(--hue-rose)' }}>
                Действия без возврата
              </h4>
              <p style={{ margin: '0 0 var(--space-4)', fontSize: 12.5, color: 'var(--text-secondary)' }}>
                Сначала экспортируйте, потом нажимайте. Отменить нельзя.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <button className="sdh-btn" style={{ width: 'fit-content' }}>
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4">
                    <path d="M5 1v6m0 0L2.5 4.5M5 7l2.5-2.5M2 9v1a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V9" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  Экспорт всех данных (JSON)
                </button>

                {showResetInvites ? (
                  <div style={{ display: 'flex', gap: 8 }}>
                    <span style={{ flex: 1, fontSize: 12, color: 'var(--text-primary)' }}>
                      Отозвать все непринятые приглашения?
                    </span>
                    <button className="sdh-btn sdh-btn--ghost" onClick={() => setShowResetInvites(false)}>Отмена</button>
                    <button className="sdh-btn" style={{ border: '1px solid var(--hue-rose)', color: 'var(--hue-rose)' }}
                      onClick={() => setShowResetInvites(false)}>Отозвать</button>
                  </div>
                ) : (
                  <button className="sdh-btn" style={{ width: 'fit-content', border: '1px solid var(--hue-rose)', color: 'var(--hue-rose)' }}
                    onClick={() => setShowResetInvites(true)}>
                    Сбросить все непринятые приглашения
                  </button>
                )}
              </div>
            </div>
          </SettingsBlock>
        </div>
      </section>
    </div>
  );
}

function SettingsBlock({ title, help, children }) {
  return (
    <div style={{
      background: 'var(--surface-elevated)',
      border: '1px solid var(--border-subtle)',
      borderRadius: 'var(--radius-xl)',
      padding: 'var(--space-6)',
    }}>
      <h3 className="sdh-section-label" style={{ display: 'block', marginBottom: 'var(--space-4)' }}>
        {help ? <InfoLabel {...help}>{title}</InfoLabel> : title}
      </h3>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
        {children}
      </div>
    </div>
  );
}

function SettingRow({ label, children }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '220px 1fr',
      gap: 'var(--space-4)', alignItems: 'center',
      padding: '6px 0',
    }}>
      <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>{label}</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>{children}</div>
    </div>
  );
}

function Toggle({ value, onChange, disabled }) {
  return (
    <button onClick={() => !disabled && onChange(!value)} disabled={disabled}
      style={{
        width: 38, height: 22,
        background: value ? 'var(--brand-bronze)' : 'var(--border-default)',
        opacity: disabled ? 0.6 : 1,
        borderRadius: 11, border: 'none',
        cursor: disabled ? 'not-allowed' : 'pointer',
        position: 'relative',
        padding: 0,
        transition: 'background .15s',
      }}>
      <span style={{
        position: 'absolute',
        top: 2, left: value ? 18 : 2,
        width: 18, height: 18, background: '#fff',
        borderRadius: '50%',
        boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
        transition: 'left .15s',
      }} />
    </button>
  );
}

window.SettingsPage = SettingsPage;
window.Toggle = Toggle;