{{>header.html page_title="Setup check" header_widgets="" }}

<link rel="stylesheet" href="{{assets}}/css/design-v2-common.css" media="all" nonce="{{nonce}}">

<style>
  {{custom_css}}

  .sc-shell .tv-section-body { padding: 18px 20px; }

  .sc-progress {
    width: 100%;
    height: 6px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
  }
  .sc-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--blue));
    transition: width .3s ease;
  }
  .sc-run-note {
    font-family: var(--mono);
    color: var(--fg-dim);
    letter-spacing: 0.02em;
  }

  .sc-table {
    table-layout: fixed;
    width: 100%;
  }
  .sc-table .sc-category-row td {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--mono);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .sc-table tbody tr.sc-category-row:hover td { background: var(--bg); }
  .sc-table-wrap {
    overflow-x: hidden;
  }
  .sc-table thead th:last-child,
  .sc-table tbody td:last-child {
    text-align: left;
    white-space: normal;
  }
  .sc-col-status { width: 120px; }
  .sc-col-check { width: 34%; }
  .sc-label {
    color: var(--fg);
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .sc-message {
    font-family: var(--mono);
    letter-spacing: 0.01em;
    color: var(--fg-dimmer);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .sc-note-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: var(--bf-r-pill);
    border: 1px solid var(--border);
    background: var(--bg-raised);
    color: var(--fg-dim);
    font-family: var(--mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
  }
  .sc-note-badge.is-good {
    color: var(--green);
    border-color: var(--green-border);
    background: var(--green-bg);
  }

  .sc-callout.is-bad {
    border-left-color: var(--red);
    background: var(--red-bg);
  }
  .sc-callout.is-bad .tv-callout-head { color: var(--red); }

  .sc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
  }
  .sc-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }
  .sc-field-label {
    color: var(--fg);
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  .sc-field-help {
    color: var(--fg-dim);
    line-height: 1.5;
  }
  .sc-input {
    width: 100%;
    max-width: 32rem;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--bf-r-md);
    border: 1px solid var(--border);
    background: var(--bg-raised);
    color: var(--fg);
    font-family: var(--sans);
    font-size: var(--fs-md);
    outline: none;
    transition: border-color .12s, background .12s, box-shadow .12s;
  }
  .sc-input::placeholder { color: var(--fg-muted); }
  .sc-input:focus {
    border-color: var(--accent-border);
    background: var(--bg-panel);
    box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.12);
  }

  .sc-freq-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .sc-freq.is-active {
    color: var(--accent);
    border-color: var(--accent-border);
    background: var(--accent-bg);
  }

  .sc-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
  }
  .sc-actions-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .sc-actions-note {
    font-family: var(--mono);
    color: var(--fg-dimmer);
    letter-spacing: 0.02em;
  }

  .sc-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
  }
  .sc-btn-activate,
  .sc-btn-activate.is-good {
    color: #fff;
    border-color: var(--green-border);
    background: var(--green);
  }
  .sc-btn-activate:hover:not(:disabled),
  .sc-btn-activate.is-good:hover:not(:disabled) {
    color: #fff;
    border-color: var(--green-border);
    background: color-mix(in oklab, var(--green) 88%, black 12%);
  }
  .sc-btn-activate.is-bad {
    color: #fff;
    border-color: var(--red-border);
    background: var(--red);
  }
  .sc-btn-activate.is-bad:hover:not(:disabled) {
    color: #fff;
    border-color: var(--red-border);
    background: color-mix(in oklab, var(--red) 88%, black 12%);
  }

  @media (max-width: 860px) {
    .sc-form-grid { grid-template-columns: 1fr; }
  }
</style>

<script type="text/javascript" nonce="{{nonce}}">
  window.BITFIRE_NONCE = '{{api_code}}';
</script>

<div class="bf-man-content">
  <div class="tv-shell sc-shell">

    <div id="alert_block"></div>

    <section class="tv-hero">
      <h1>
        Setup check
        <span class="tv-count-pill" id="sc_overall_state">pending</span>
      </h1>
      <p class="lede">Verify your environment before enabling BitFire protection. BitFire checks filesystem access, PHP configuration, network connectivity, WordPress integration, and common conflicts, then applies safe fixes when possible.  Click "Activate Protection" at the bottom of the page to activate.</p>
    </section>

    <section class="tv-section">
      <div class="tv-section-head">
        <div class="tv-section-head-text">
          <div class="tv-section-eyebrow">01 &middot; Environment verification</div>
          <h2>System checks</h2>
          <p class="tv-section-blurb fs-lg">Run a full readiness check before activation. Red items must be resolved before protection can be enabled.</p>
        </div>
        <div class="tv-section-actions">
          <span class="tv-toggle-status fs-sm" id="sc_status_inline">waiting to start</span>
        </div>
      </div>
      <div class="tv-section-body">
        <div id="check_running">
          <div class="sc-progress" aria-hidden="true">
            <div id="check_progress_bar" class="sc-progress-bar"></div>
          </div>
          <div id="check_status_text" class="sc-run-note fs-sm" role="status">Initializing system checks...</div>
        </div>
      </div>
    </section>

    <dl id="check_summary" class="tv-summary hidden">
      <div class="tv-stat">
        <dt class="tv-stat-k">Passed</dt>
        <dd class="tv-stat-v is-good" id="sum_pass">0</dd>
        <div class="tv-stat-sub">ready</div>
      </div>
      <div class="tv-stat">
        <dt class="tv-stat-k">Warnings</dt>
        <dd class="tv-stat-v is-warn" id="sum_warn">0</dd>
        <div class="tv-stat-sub">review suggested</div>
      </div>
      <div class="tv-stat">
        <dt class="tv-stat-k">Critical</dt>
        <dd class="tv-stat-v is-bad" id="sum_fail">0</dd>
        <div class="tv-stat-sub">must fix</div>
      </div>
      <div class="tv-stat">
        <dt class="tv-stat-k">Info</dt>
        <dd class="tv-stat-v" id="sum_info">0</dd>
        <div class="tv-stat-sub">context only</div>
      </div>
    </dl>

    <div id="critical_block" class="hidden">
      <div class="tv-callout sc-callout is-bad" role="alert">
        <div class="tv-callout-head">
          <span class="ic" aria-hidden="true">!</span>
          <span>Critical issues detected</span>
        </div>
        <p>Resolve the items marked as <strong>fail</strong> before activating BitFire protection.</p>
      </div>
    </div>

    <section id="check_results" class="tv-section hidden">
      <div class="tv-section-head">
        <div class="tv-section-head-text">
          <div class="tv-section-eyebrow">02 &middot; Findings</div>
          <h2>Check results</h2>
          <p class="tv-section-blurb fs-lg">Grouped by subsystem so you can review the full environment in one pass.</p>
        </div>
      </div>
      <div class="tv-table-wrap">
        <table class="tv-table sc-table" id="results_table">
          <thead>
            <tr>
              <th class="sc-col-status">Status</th>
              <th class="sc-col-check">Check</th>
              <th>Details</th>
            </tr>
          </thead>
          <tbody id="results_body"></tbody>
        </table>
      </div>
    </section>

    <section id="activate_section" class="tv-section hidden">
      <div class="tv-section-head">
        <div class="tv-section-head-text">
          <div class="tv-section-eyebrow">03 &middot; Activation</div>
          <h2>Notifications &amp; activation</h2>
          <p class="tv-section-blurb fs-lg">Choose where BitFire should send alerts, then complete setup.</p>
        </div>
      </div>
      <div class="tv-section-body">
        <div class="sc-form-grid">
          <label class="sc-field" for="setup_email">
            <span class="sc-field-label fs-md">Notification email</span>
            <span class="sc-field-help fs-sm">Receive security alerts, uptime reports, and plugin vulnerability notifications.</span>
            <input type="email" class="sc-input" id="setup_email" autocomplete="off" placeholder="you@example.com" value="{{-your_email}}">
          </label>

          <div class="sc-field">
            <span class="sc-field-label fs-md">Notification frequency</span>
            <span class="sc-field-help fs-sm">Choose how often to receive routine notifications.</span>
            <div class="sc-freq-row" role="group" aria-label="Notification frequency">
              <button type="button" class="tv-btn sc-freq" data-freq="daily" onclick="set_freq('daily')">Daily</button>
              <button type="button" class="tv-btn sc-freq" data-freq="weekly" onclick="set_freq('weekly')">Weekly</button>
              <button type="button" class="tv-btn sc-freq" data-freq="never" onclick="set_freq('never')">Never</button>
            </div>
          </div>
        </div>

        <div class="sc-actions">
          <button type="button" class="tv-btn" id="btn_recheck">Re-run checks</button>
          <div class="sc-actions-right">
            <span id="activate_spin" class="tv-spin hidden" aria-hidden="true"></span>
            <span id="activate_status" class="sc-actions-note fs-sm"></span>
            <button type="button" class="tv-btn sc-btn-activate is-good js-activate-protection" id="btn_activate">Activate protection</button>
          </div>
        </div>
      </div>
    </section>

  </div>
</div>

<script type="text/javascript" nonce="{{nonce}}">
(function() {

  var STATUS_BADGES = {
    pass: '<span class="tv-badge is-good"><span class="dot"></span><span>pass</span></span>',
    warn: '<span class="tv-badge is-warn"><span class="dot"></span><span>warning</span></span>',
    fail: '<span class="tv-badge is-bad"><span class="dot"></span><span>fail</span></span>',
    info: '<span class="tv-badge is-info"><span class="dot"></span><span>info</span></span>'
  };

  var CATEGORY_LABELS = {
    proxy: 'Web Proxy / CDN Detection',
    filesystem: 'Filesystem',
    disk: 'Disk Space',
    extensions: 'PHP Extensions',
    auto_prepend: 'Always-On Protection (auto_prepend)',
    php_config: 'PHP Configuration',
    wordpress: 'WordPress Environment',
    network: 'Network Connectivity',
    conflicts: 'Security Plugin Conflicts'
  };

  var notification_freq = 'weekly';

  function esc(s) {
    var d = document.createElement('div');
    d.appendChild(document.createTextNode(s || ''));
    return d.innerHTML;
  }

  function text_or_dash(s) {
    if (s === null || s === undefined || s === '') {
      return '-';
    }
    return esc(String(s));
  }

  function update_freq_buttons() {
    var btns = document.querySelectorAll('.sc-freq');
    for (var i = 0; i < btns.length; i++) {
      if (btns[i].getAttribute('data-freq') === notification_freq) {
        btns[i].classList.add('is-active');
      } else {
        btns[i].classList.remove('is-active');
      }
    }
  }

  window.set_freq = function(val) {
    notification_freq = val;
    update_freq_buttons();
  };

  function render_results(checks) {
    var body = GBI('results_body');
    body.innerHTML = '';
    var last_cat = '';

    for (var i = 0; i < checks.length; i++) {
      var c = checks[i];

      if (c.category !== last_cat) {
        last_cat = c.category;
        var cat_row = document.createElement('tr');
        cat_row.className = 'sc-category-row';
        cat_row.innerHTML = '<td colspan="3">' + esc(CATEGORY_LABELS[c.category] || c.category) + '</td>';
        body.appendChild(cat_row);
      }

      var row = document.createElement('tr');
      if (c.status === 'fail') {
        row.setAttribute('data-status', 'suspicious');
      } else if (c.status === 'warn') {
        row.setAttribute('data-status', 'orphaned');
      }

      var fixed_badge = c.auto_fixed ? '<span class="sc-note-badge is-good">auto-fixed</span>' : '';
      var details = '';
      if (c.value !== null && c.value !== undefined && c.value !== '') {
        details += '<span class="sc-message">' + esc(String(c.value)) + '</span>';
        if (c.message) {
          details += '<br>';
        }
      }
      if (c.message) {
        details += '<span class="sc-message">' + esc(String(c.message)) + '</span>';
      }
      if (!details) {
        details = '<span class="sc-message">-</span>';
      }

      row.innerHTML =
        '<td>' + (STATUS_BADGES[c.status] || '') + '</td>' +
        '<td><div class="sc-label">' + esc(c.label) + fixed_badge + '</div></td>' +
        '<td>' + details + '</td>';
      body.appendChild(row);
    }
  }

  function set_running_state(text, pct) {
    GBI('check_progress_bar').style.width = pct + '%';
    GBI('check_status_text').innerText = text;
    GBI('sc_status_inline').innerText = text;
  }

  function set_overall_state(text) {
    GBI('sc_overall_state').innerText = text;
  }

  function each_activate_button(fn) {
    var btns = document.querySelectorAll('.js-activate-protection');
    for (var i = 0; i < btns.length; i++) {
      fn(btns[i]);
    }
  }

  function set_activate_buttons(disabled, text, state) {
    each_activate_button(function(btn) {
      if (disabled) {
        btn.setAttribute('disabled', 'disabled');
      } else {
        btn.removeAttribute('disabled');
      }
      btn.classList.remove('is-good', 'is-bad', 'is-info');
      btn.classList.add(state === 'bad' ? 'is-bad' : 'is-good');
      btn.innerText = text;
    });
  }

  function apply_activation_state(has_critical) {
    var note = GBI('activate_status');

    if (has_critical) {
      set_activate_buttons(true, 'Fix critical issues first', 'bad');
      note.innerText = 'activation blocked';
    } else {
      set_activate_buttons(false, 'Activate protection', 'good');
      note.innerText = 'ready to activate';
    }
  }

  function run_checks() {
    GBI('check_running').classList.remove('hidden');
    GBI('check_summary').classList.add('hidden');
    GBI('check_results').classList.add('hidden');
    GBI('activate_section').classList.add('hidden');
    GBI('critical_block').classList.add('hidden');

    set_activate_buttons(true, 'Activate protection', 'good');
    GBI('activate_status').innerText = 'waiting for checks';
    set_overall_state('running');
    set_running_state('Running system checks...', 10);

    var pct = 10;
    var prog = setInterval(function() {
      pct = Math.min(pct + Math.random() * 8, 90);
      GBI('check_progress_bar').style.width = pct + '%';
    }, 300);

    BitFire_api('system_check', {})
      .then(function(r) { return r.json(); })
      .then(function(data) {
        clearInterval(prog);
        set_running_state('System checks complete.', 100);

        if (!data.success) {
          set_activate_buttons(true, 'Activate protection', 'good');
          GBI('activate_status').innerText = 'system check failed';
          set_overall_state('error');
          set_running_state('System check failed: ' + (data.note || 'unknown error'), 100);
          return;
        }

        var checks = data.data.checks || [];
        var summary = data.data.summary || {};

        GBI('sum_pass').innerText = summary.pass || 0;
        GBI('sum_warn').innerText = summary.warn || 0;
        GBI('sum_fail').innerText = summary.fail || 0;
        GBI('sum_info').innerText = summary.info || 0;

        render_results(checks);

        GBI('check_running').classList.add('hidden');
        GBI('check_summary').classList.remove('hidden');
        GBI('check_results').classList.remove('hidden');
        GBI('activate_section').classList.remove('hidden');

        if (summary.has_critical) {
          GBI('critical_block').classList.remove('hidden');
          set_overall_state('needs attention');
        } else {
          set_overall_state('ready');
        }

        apply_activation_state(!!summary.has_critical);
      })
      .catch(function(err) {
        clearInterval(prog);
        set_activate_buttons(true, 'Activate protection', 'good');
        GBI('activate_status').innerText = 'system check failed';
        set_overall_state('error');
        set_running_state('Error running checks: ' + err.message, 100);
      });
  }

  function api_json(method, payload) {
    return BitFire_api(method, payload)
      .then(function(r) { return r.json(); })
      .then(function(data) {
        if (!data || !data.success) {
          var note = (data && data.note) ? data.note : ('BitFire API ' + method + ' failed');
          if (typeof bf_api_error === 'function') {
            bf_api_error(note);
          }
          throw new Error(note);
        }
        return data;
      });
  }

  function activate() {
    var email = GBI('setup_email').value.trim();
    GBI('activate_spin').classList.remove('hidden');
    GBI('activate_status').innerText = 'saving settings';
    set_activate_buttons(true, 'Activating protection...', 'good');

    var saves = [];
    if (email) {
      saves.push(api_json('toggle_config_value', {param: 'notification_email', value: email}));
    }
    saves.push(api_json('toggle_config_value', {param: 'notification_type', value: notification_freq}));

    Promise.all(saves)
      .then(function() {
        return api_json('toggle_config_value', {param: 'wizard', value: 'true'});
      })
      .then(function() {
        return api_json('toggle_config_value', {param: 'configured', value: 'true'});
      })
      .then(function() {
        GBI('activate_spin').classList.add('hidden');
        GBI('activate_status').innerText = 'activation complete';
        window.location.href = window.location.pathname + '?page=bitfire_settings&bf_top=1#bitfire-top';
      })
      .catch(function(err) {
        GBI('activate_spin').classList.add('hidden');
        GBI('activate_status').innerText = 'save failed';
        set_activate_buttons(false, 'Activate protection', 'good');
        if (typeof bf_api_error === 'function') {
          bf_api_error('Error saving configuration: ' + err.message);
        }
      });
  }

  document.addEventListener('DOMContentLoaded', function() {
    update_freq_buttons();
    each_activate_button(function(btn) {
      btn.addEventListener('click', activate);
    });
    GBI('btn_recheck').addEventListener('click', run_checks);
    run_checks();
  });

})();
</script>

{{gtag}}