{% extends "base.html" %}

{% block title %}Setup — TechHand Remote Support{% endblock %}

{% block content %}
<style>
.tools-path-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tools-path-row input[type="text"] { flex: 1; min-width: 200px; }
</style>
<div class="app-page-header">
  <h1><i class="fas fa-sliders-h" aria-hidden="true"></i> Client setup</h1>
  <div class="app-page-header-actions">
    <a href="{{ url_for('index') }}" class="btn btn-secondary btn-sm"><i class="fas fa-home"></i> Dashboard</a>
  </div>
</div>

<div class="setup-container">
    {% if reconnect_hint %}
    <div class="client-banner-muted client-banner-warn" role="status">
        <strong>Cannot reach the TNT server.</strong>
        Check that the TNT server is running and the URL is correct (for example <code>http://&lt;server-ip&gt;:5000</code>, not this machine’s client port <code>5100</code>). Update credentials or use <strong>Retry connection</strong> on the dashboard when the server is back.
    </div>
    {% endif %}
    {% if auto_link_pending %}
    <div class="client-banner-muted client-banner-info" role="status">
        <strong>Preconfigured installer detected.</strong>
        This app will link to your organization automatically on startup. If Organization
        pages still fail, download a fresh preconfigured client from the portal (links
        are single-use) and restart the app — no manual config cleanup required.
    </div>
    {% elif need_portal %}
    <div class="client-banner-muted client-banner-info" role="status">
        <strong>Organization portal needs sign-in.</strong>
        Download a preconfigured client from the client portal while logged in as your
        org user, extract the zip, and restart this app — it links automatically.
        Or sign in below and paste an organization API key from your technician.
    </div>
    {% endif %}

    <div id="remoteHostCard" class="client-banner-muted" role="status" style="margin-top:12px; display:none;">
        <strong>Remote Host service:</strong>
        <span id="remoteHostState">checking…</span>
        <div class="form-hint" id="remoteHostHint" style="margin-top:4px;"></div>
        <div id="remoteHostActions" style="margin-top:8px; display:none;">
            <button type="button" class="btn btn-primary btn-sm" id="remoteHostInstallBtn" style="display:none;">
                <i class="fas fa-shield-alt" aria-hidden="true"></i> Install Remote Host
            </button>
            <button type="button" class="btn btn-secondary btn-sm" id="remoteHostStartBtn">
                <i class="fas fa-play" aria-hidden="true"></i> Start service
            </button>
            <span class="form-hint" id="remoteHostActionStatus" style="margin-left:8px;"></span>
        </div>
    </div>

    <details class="widget" open style="margin-top:12px;">
        <summary><i class="fas fa-plug" aria-hidden="true"></i> Connect to TNT server</summary>
        <div style="padding-top:12px;">
        <p class="form-hint" style="margin-bottom: 12px;"><strong>Recommended:</strong> sign in with your TNT username or email and password so the device receives a key tied to your account. After connecting, use the <strong>Organization</strong> section below to add an org API key. Advanced: paste only a <strong>device API key</strong> if an admin issued one from the server Clients page.</p>
        
        <form id="setupForm" method="post" action="#">
            <div class="form-group">
                <label for="server_url">Server URL:</label>
                <input type="text" id="server_url" name="server_url" 
                       value="{{ config.server_url }}" 
                       placeholder="http://server-ip:5000" required>
                <small>URL of your TNT server (e.g. https://tnt.example.com)</small>
            </div>
            
            <div class="form-group">
                <label for="api_key">Client API key (optional):</label>
                <input type="password" id="api_key" name="api_key" 
                       placeholder="Leave blank to get a key by registering below"
                       autocomplete="off">
                <small>If you have a key from the server (Clients → Regenerate API key), paste it here. Otherwise leave blank and use Connect &amp; Register.</small>
            </div>
            
            <div class="form-group">
                <label for="username">Username or email:</label>
                <input type="text" id="username" name="username" autocomplete="username">
                <small>TNT username or email (required only when registering; not needed if you pasted an API key)</small>
            </div>
            
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="password" name="password">
                <small>TNT server password (required only when registering)</small>
            </div>

            <div class="form-group recaptcha-group" id="recaptchaGroup" style="display: none;">
                <label>Security check</label>
                <div id="recaptchaContainer"></div>
                <small>Complete the captcha, then it will continue automatically. The local UI is opened at <code>http://127.0.0.1</code> (not <code>localhost</code>). If login fails with a captcha error, add <code>127.0.0.1</code> to the reCAPTCHA site key domains in Google Admin.</small>
            </div>

            <div class="form-group" id="totpStep" style="display: none;">
                <label for="totp_code">Verification code (2FA):</label>
                <input type="text" id="totp_code" name="totp_code" placeholder="000000" maxlength="8" autocomplete="one-time-code">
                <small>Enter the 6-digit code from your authenticator app</small>
            </div>
            
            <div class="form-group">
                <label for="client_name">Client Name:</label>
                <input type="text" id="client_name" name="client_name" 
                       value="{{ config.client_name or hostname }}" required>
                <small>Friendly name for this client</small>
            </div>
            
            <div class="form-group">
                <label for="location">Location:</label>
                <input type="text" id="location" name="location" 
                       value="{{ config.location or '' }}" 
                       placeholder="Branch Office, Remote Site, etc.">
                <small>Physical location of this client (optional)</small>
            </div>
            
            <div class="form-actions">
                <button type="submit" class="btn btn-primary" id="submitBtn">
                    Connect & Register
                </button>
            </div>
        </form>
        
        <div id="setupStatus" class="status-message" style="display: none;"></div>
        </div>
    </details>

    <details class="widget" open>
        <summary><i class="fas fa-user-shield" aria-hidden="true"></i> Organization</summary>
        <div style="padding-top:12px;">
        <p class="form-hint">Add your <strong>organization API key</strong> (starts with <code>tnt_</code>) to bind this client to that organization (needed for Scan this LAN) and unlock the local Organization portal. To also approve this machine for org-scoped jobs and <strong>remote support</strong>, an organization <strong>owner</strong> or <strong>superadmin</strong> enters their authenticator code below (one time).</p>
        <div class="form-group">
            <label for="org_api_key_bind">Organization API key:</label>
            <input type="password" id="org_api_key_bind" autocomplete="off">
        </div>
        <p class="form-hint" style="margin: 4px 0 8px;">Owner approval (optional — required for remote support &amp; scoped jobs):</p>
        <div class="form-group">
            <label for="verifier_username">Verifier username (owner or superadmin):</label>
            <input type="text" id="verifier_username" autocomplete="username" placeholder="Leave blank to save the key only">
        </div>
        <div class="form-group">
            <label for="totp_code_bind">Authenticator code:</label>
            <input type="text" id="totp_code_bind" maxlength="8" autocomplete="one-time-code" placeholder="Leave blank to save the key only">
        </div>
        <div class="form-actions">
            <button type="button" class="btn btn-primary" id="orgBindBtn">Save organization key</button>
        </div>
        <div id="orgBindStatus" class="status-message" style="display: none;"></div>
        </div>
    </details>

    <details class="widget" open>
        <summary><i class="fas fa-undo" aria-hidden="true"></i> Reset this device</summary>
        <div style="padding-top:12px;">
        <p class="form-hint">Clears stored device API key, login token, and org key on this computer.</p>
        <button type="button" class="btn btn-secondary" id="clearCredsBtn">Clear local credentials</button>
        <div id="clearCredsStatus" class="status-message" style="display: none;"></div>
        </div>
    </details>

    <details class="widget" open>
        <summary><i class="fas fa-folder-open" aria-hidden="true"></i> 3rd Party Tools location</summary>
        <div style="padding-top:12px;">
        <p class="form-hint">Folder where profile tools (e.g. CCleaner, scanners) are stored. Leave blank to use the default next to the client.</p>
        <div class="form-group">
            <label for="tools_base">Tools directory:</label>
            <div class="tools-path-row">
                <input type="text" id="tools_base" name="tools_base"
                       value="{{ config.tools_base or '' }}"
                       placeholder="{{ default_tools_path }}">
                <input type="file" id="tools_base_browse" style="display: none" webkitdirectory directory multiple>
                <button type="button" id="tools_base_browse_btn" class="btn btn-secondary">Browse…</button>
                <button type="button" id="tools_path_test_btn" class="btn btn-secondary">Test path</button>
            </div>
            <small id="tools_path_display">Current default: {{ default_tools_path }}</small>
        </div>
        <div class="form-actions">
            <button type="button" id="tools_path_save_btn" class="btn btn-primary">Save tools path</button>
        </div>
        <div id="toolsPathStatus" class="status-message" style="display: none;"></div>
        </div>
    </details>
    
    <details class="widget" open id="start-with-windows-card">
        <summary><i class="{{ autostart_icon|default('fas fa-power-off') }}" aria-hidden="true"></i> {{ autostart_title|default('Start at login') }}</summary>
        <div style="padding-top:12px;">
        <p class="form-hint">{{ autostart_hint|default('Run TechHand Remote Support when you log in (current user).') }}</p>
        <div class="form-group">
            <label class="toggle-label" style="display: inline-flex; align-items: center; gap: 8px; cursor: pointer;">
                <input type="checkbox" id="startWithWindows" />
                <span>{{ autostart_toggle|default('Start TechHand Remote Support at login') }}</span>
            </label>
        </div>
        <div id="startWithWindowsStatus" class="status-message" style="display: none;"></div>
        </div>
    </details>

    {% if source_update_supported %}
    <details class="widget" open id="source-update-card">
        <summary><i class="fas fa-sync-alt" aria-hidden="true"></i> Client updates</summary>
        <div style="padding-top:12px;">
        <p class="form-hint">Pull the same published TNT_Client tree staff download from Clients. Windows EXE installs still use the signed installer; this source install verifies a SHA-256 checksum before replacing files.</p>
        <div class="form-actions">
            <button type="button" class="btn btn-secondary" id="checkUpdateBtn">Check for updates</button>
        </div>
        <div id="checkUpdateStatus" class="status-message" style="display: none;"></div>
        </div>
    </details>
    {% endif %}

    <details class="widget" open>
        <summary><i class="fas fa-info-circle" aria-hidden="true"></i> Setup instructions</summary>
        <div style="padding-top:12px;">
        <ol>
            <li>Enter the <strong>Server URL</strong> of your TNT server.</li>
            <li>Enter your TNT <strong>username or email and password</strong>, client name, then <strong>Connect &amp; Register</strong>. The server issues a device API key and stores it locally.</li>
            <li>Optional: paste an <strong>organization API key</strong> in the same form, or use <strong>Organization binding</strong> afterward with owner TOTP.</li>
            <li>Advanced: paste only a <strong>device API key</strong> from the server Clients page if you are not using password registration.</li>
        </ol>
        <p>Production servers require a logged-in user to register a client unless the operator explicitly sets <code>TNT_ALLOW_LEGACY_CLIENT_REGISTER=1</code> for lab use only.</p>
        </div>
    </details>
</div>

<script>
(function() {
  // Strip sensitive params from URL (never put password/api_key/totp in address bar or history)
  try {
    var u = new URL(window.location.href);
    var changed = false;
    ['password', 'api_key', 'totp_code'].forEach(function(k) {
      if (u.searchParams.has(k)) { u.searchParams.delete(k); changed = true; }
    });
    if (changed) window.history.replaceState(null, '', u.pathname + u.search + u.hash);
  } catch (_) {}

  // Deferred reCAPTCHA: we never load the widget on page load (that fired
  // against whatever default/placeholder server URL was present). Instead,
  // when the user clicks Connect we look up the entered server's reCAPTCHA
  // config; if enabled, we render the widget with that server's site key and
  // auto-continue once the user solves it.
  let recaptchaLoaded = false;
  let recaptchaWidgetId = null;
  let recaptchaResolved = false;

  function loadRecaptcha(siteKey) {
    if (!siteKey) return;
    const container = document.getElementById('recaptchaContainer');
    const group = document.getElementById('recaptchaGroup');
    if (!container || !group) return;
    group.style.display = 'block';
    const opts = {
      sitekey: siteKey,
      size: 'normal',
      callback: function() { recaptchaResolved = true; submitSetup(); },
      'expired-callback': function() { recaptchaResolved = false; },
    };
    if (recaptchaLoaded && typeof grecaptcha !== 'undefined') {
      if (recaptchaWidgetId != null) grecaptcha.reset(recaptchaWidgetId);
      recaptchaWidgetId = grecaptcha.render(container, opts);
    } else {
      const s = document.createElement('script');
      s.src = 'https://www.google.com/recaptcha/api.js?onload=onRecaptchaLoad&render=explicit';
      s.async = true;
      s.defer = true;
      window.onRecaptchaLoad = function() {
        recaptchaLoaded = true;
        recaptchaWidgetId = grecaptcha.render(container, opts);
      };
      document.head.appendChild(s);
    }
  }

  function fetchRecaptchaConfig(serverUrl) {
    if (!serverUrl) return Promise.resolve({ enabled: false, site_key: '' });
    return fetch('/api/setup/recaptcha-config?server_url=' + encodeURIComponent(serverUrl))
      .then(r => r.json()).catch(() => ({ enabled: false, site_key: '' }));
  }

  function setBusy(busy, label) {
    const submitBtn = document.getElementById('submitBtn');
    submitBtn.disabled = busy;
    submitBtn.textContent = label || (busy ? 'Connecting…' : 'Connect & Register');
  }

  async function submitSetup() {
    const statusDiv = document.getElementById('setupStatus');
    const totpStep = document.getElementById('totpStep');
    const totpInput = document.getElementById('totp_code');
    const serverUrl = (document.getElementById('server_url').value || '').trim();
    const apiKey = (document.getElementById('api_key') || {}).value.trim();

    if (!serverUrl) {
      statusDiv.className = 'status-message error';
      statusDiv.textContent = '✗ Server URL is required.';
      statusDiv.style.display = 'block';
      return;
    }

    // Phase 1: when registering (no device API key), check whether the
    // entered server requires reCAPTCHA. Load it once and wait for the solve.
    if (!apiKey && !recaptchaResolved) {
      setBusy(true, 'Checking server…');
      const cfg = await fetchRecaptchaConfig(serverUrl);
      if (cfg.enabled && cfg.site_key) {
        loadRecaptcha(cfg.site_key);
        statusDiv.className = 'status-message';
        statusDiv.textContent = 'Complete the security check to continue.';
        statusDiv.style.display = 'block';
        setBusy(false, 'Connect & Register');
        return; // resumes via the reCAPTCHA callback
      }
      // No reCAPTCHA on this server — proceed straight through.
      recaptchaResolved = true;
    }

    setBusy(true, 'Connecting…');
    const formData = {
      server_url: serverUrl,
      username: document.getElementById('username').value,
      password: document.getElementById('password').value,
      client_name: document.getElementById('client_name').value,
      location: document.getElementById('location').value,
      api_key: apiKey || undefined
    };

    if (!apiKey && typeof grecaptcha !== 'undefined' && recaptchaWidgetId != null) {
      let token = '';
      try { token = grecaptcha.getResponse(recaptchaWidgetId) || ''; } catch (_) {}
      if (token) formData.recaptcha_token = token;
    }

    const totpCode = (totpInput && totpInput.value || '').trim();
    if (totpCode) formData.totp_code = totpCode;

    try {
      const response = await fetch('/api/setup', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });
      const data = await response.json();

      if (data.success) {
        statusDiv.className = 'status-message success';
        statusDiv.textContent = '✓ ' + data.message;
        statusDiv.style.display = 'block';
        setTimeout(function() { window.location.href = '/'; }, 2000);
      } else if (response.status === 403 && data.requires_2fa) {
        totpStep.style.display = 'block';
        statusDiv.className = 'status-message';
        statusDiv.textContent = data.error || 'Enter your 6-digit verification code.';
        statusDiv.style.display = 'block';
        setBusy(false, 'Connect & Register');
        if (totpInput) totpInput.focus();
      } else {
        // Reset reCAPTCHA so the user gets a fresh challenge on retry.
        recaptchaResolved = false;
        if (typeof grecaptcha !== 'undefined' && recaptchaWidgetId != null) {
          try { grecaptcha.reset(recaptchaWidgetId); } catch (_) {}
        }
        statusDiv.className = 'status-message error';
        statusDiv.textContent = '✗ ' + (data.error || 'Connection failed');
        statusDiv.style.display = 'block';
        setBusy(false, 'Connect & Register');
      }
    } catch (error) {
      statusDiv.className = 'status-message error';
      statusDiv.textContent = '✗ Connection failed: ' + error.message;
      statusDiv.style.display = 'block';
      setBusy(false, 'Connect & Register');
    }
  }

  document.getElementById('setupForm').addEventListener('submit', function(e) {
    e.preventDefault();
    submitSetup();
  });
})();

(function() {
  const btn = document.getElementById('orgBindBtn');
  const st = document.getElementById('orgBindStatus');
  if (!btn) return;
  btn.addEventListener('click', async function() {
    const orgKey = (document.getElementById('org_api_key_bind') || {}).value.trim();
    const verifier = (document.getElementById('verifier_username') || {}).value.trim();
    const totp = (document.getElementById('totp_code_bind') || {}).value.trim();
    st.style.display = 'none';
    if (!orgKey) {
      st.style.display = 'block';
      st.className = 'status-message error';
      st.textContent = 'Enter an organization API key.';
      return;
    }
    // If owner credentials are partially filled, require both.
    if ((verifier && !totp) || (!verifier && totp)) {
      st.style.display = 'block';
      st.className = 'status-message error';
      st.textContent = 'For owner approval, enter both the verifier username and authenticator code (or leave both blank to save the key only).';
      return;
    }
    btn.disabled = true;
    try {
      let r, data;
      if (verifier && totp) {
        // Verified device->org binding (enables remote support / scoped jobs).
        r = await fetch('/api/setup/org-binding/verify', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ org_api_key: orgKey, verifier_username: verifier, totp_code: totp })
        });
      } else {
        // Save the org key locally only (portal access; no device binding).
        r = await fetch('/api/setup/org-key', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ org_api_key: orgKey })
        });
      }
      data = await r.json();
      st.style.display = 'block';
      st.className = 'status-message ' + (data.success ? 'success' : 'error');
      st.textContent = data.success ? ('Saved: ' + (data.message || 'OK')) : (data.error || 'Failed');
    } catch (e) {
      st.style.display = 'block';
      st.className = 'status-message error';
      st.textContent = e.message || String(e);
    } finally {
      btn.disabled = false;
    }
  });
})();

(function() {
  const btn = document.getElementById('clearCredsBtn');
  const st = document.getElementById('clearCredsStatus');
  if (!btn) return;
  btn.addEventListener('click', async function() {
    if (!confirm('Clear all locally stored TechHand Remote Support credentials on this machine?')) return;
    btn.disabled = true;
    st.style.display = 'none';
    try {
      const r = await fetch('/api/setup/clear-local-credentials', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ confirm: true })
      });
      const data = await r.json();
      st.style.display = 'block';
      st.className = 'status-message ' + (data.success ? 'success' : 'error');
      st.textContent = data.success ? 'Cleared. Reloading…' : (data.error || 'Failed');
      if (data.success) setTimeout(function() { window.location.href = '/setup'; }, 800);
    } catch (e) {
      st.style.display = 'block';
      st.className = 'status-message error';
      st.textContent = e.message || String(e);
    } finally {
      btn.disabled = false;
    }
  });
})();

// Start with Windows: load state and save on change
(function() {
    const cb = document.getElementById('startWithWindows');
    const statusDiv = document.getElementById('startWithWindowsStatus');
    const card = document.getElementById('start-with-windows-card');
    if (!cb || !card) return;
    fetch('/api/settings/start-with-windows')
        .then(r => r.json())
        .then(data => {
            if (data.success) cb.checked = !!data.enabled;
        })
        .catch(() => {});
    cb.addEventListener('change', function() {
        statusDiv.style.display = 'none';
        fetch('/api/settings/start-with-windows', {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ enabled: cb.checked })
        })
            .then(r => r.json())
            .then(data => {
                statusDiv.style.display = 'block';
                statusDiv.className = 'status-message ' + (data.success ? 'success' : 'error');
                statusDiv.textContent = data.success ? ('✓ ' + (data.message || '')) : ('✗ ' + (data.error || ''));
            })
            .catch(err => {
                statusDiv.style.display = 'block';
                statusDiv.className = 'status-message error';
                statusDiv.textContent = '✗ ' + err.message;
            });
    });
})();

(function() {
    const btn = document.getElementById('checkUpdateBtn');
    const statusDiv = document.getElementById('checkUpdateStatus');
    if (!btn || !statusDiv) return;
    btn.addEventListener('click', function() {
        statusDiv.style.display = 'none';
        btn.disabled = true;
        fetch('/api/settings/check-update', { method: 'POST' })
            .then(r => r.json().then(data => ({ ok: r.ok, data: data })))
            .then(res => {
                statusDiv.style.display = 'block';
                statusDiv.className = 'status-message ' + (res.data.success ? 'success' : 'error');
                statusDiv.textContent = res.data.success
                    ? ('✓ ' + (res.data.message || ''))
                    : ('✗ ' + (res.data.error || 'Update failed'));
            })
            .catch(err => {
                statusDiv.style.display = 'block';
                statusDiv.className = 'status-message error';
                statusDiv.textContent = '✗ ' + err.message;
            })
            .finally(() => { btn.disabled = false; });
    });
})();

// Tools path: Browse (folder picker), Test, Save
(function() {
    const input = document.getElementById('tools_base');
    const browseInput = document.getElementById('tools_base_browse');
    const browseBtn = document.getElementById('tools_base_browse_btn');
    const testBtn = document.getElementById('tools_path_test_btn');
    const saveBtn = document.getElementById('tools_path_save_btn');
    const statusDiv = document.getElementById('toolsPathStatus');
    if (!input || !browseBtn || !saveBtn) return;

    browseBtn.addEventListener('click', function() {
        browseInput.click();
    });
    browseInput.addEventListener('change', function() {
        const files = this.files;
        if (files && files.length > 0 && files[0]) {
            if (files[0].path) {
                input.value = files[0].path.split(/[/\\]/).slice(0, -1).join(files[0].path.includes('\\') ? '\\' : '/');
            } else if (files[0].webkitRelativePath) {
                var folder = files[0].webkitRelativePath.split('/')[0];
                statusDiv.textContent = 'Browser cannot show full path. Folder name: ' + folder + '. Enter full path manually if needed.';
                statusDiv.className = 'status-message';
                statusDiv.style.display = 'block';
            }
            this.value = '';
        }
    });

    testBtn.addEventListener('click', async function() {
        const path = (input.value || '').trim();
        statusDiv.style.display = 'none';
        try {
            const res = await fetch('/api/settings/tools-path/validate', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ path: path })
            });
            const data = await res.json();
            statusDiv.style.display = 'block';
            if (data.valid) {
                statusDiv.className = 'status-message success';
                statusDiv.textContent = '✓ ' + (data.message || 'Path is valid');
            } else {
                statusDiv.className = 'status-message error';
                statusDiv.textContent = '✗ ' + (data.error || 'Invalid path');
            }
        } catch (e) {
            statusDiv.style.display = 'block';
            statusDiv.className = 'status-message error';
            statusDiv.textContent = '✗ ' + e.message;
        }
    });

    saveBtn.addEventListener('click', async function() {
        const path = (input.value || '').trim();
        statusDiv.style.display = 'none';
        saveBtn.disabled = true;
        try {
            const res = await fetch('/api/settings/tools-path', {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ tools_base: path })
            });
            const data = await res.json();
            statusDiv.style.display = 'block';
            if (data.success) {
                statusDiv.className = 'status-message success';
                statusDiv.textContent = '✓ Tools path saved';
            } else {
                statusDiv.className = 'status-message error';
                statusDiv.textContent = '✗ ' + (data.error || 'Save failed');
            }
        } catch (e) {
            statusDiv.style.display = 'block';
            statusDiv.className = 'status-message error';
            statusDiv.textContent = '✗ ' + e.message;
        }
        saveBtn.disabled = false;
    });
})();

// Remote Host service readiness (lock-screen / unattended remote support).
(function () {
    const card = document.getElementById('remoteHostCard');
    const stateEl = document.getElementById('remoteHostState');
    const hintEl = document.getElementById('remoteHostHint');
    const actionsEl = document.getElementById('remoteHostActions');
    const installBtn = document.getElementById('remoteHostInstallBtn');
    const startBtn = document.getElementById('remoteHostStartBtn');
    const actionStatusEl = document.getElementById('remoteHostActionStatus');
    if (!card) return;

    function renderStatus(d) {
        card.style.display = 'block';
        if (!d.platform_supported) {
            card.className = 'client-banner-muted';
            stateEl.textContent = 'not applicable on this OS';
            hintEl.textContent = 'Lock-screen remote host is a Windows feature.';
            if (actionsEl) actionsEl.style.display = 'none';
            return;
        }
        const labels = {
            full: 'running and connected ✓',
            connecting: 'running (connecting…)',
            starting: 'starting…',
            stopped: 'installed (stopped)',
            installed: 'installed (not running)',
            not_installed: 'not installed',
        };
        const classes = {
            full: 'client-banner-muted client-banner-success',
            connecting: 'client-banner-muted client-banner-warn',
            starting: 'client-banner-muted client-banner-warn',
            stopped: 'client-banner-muted client-banner-warn',
            installed: 'client-banner-muted client-banner-warn',
            not_installed: 'client-banner-muted client-banner-warn',
        };
        const level = d.level || 'not_installed';
        card.className = classes[level] || 'client-banner-muted';
        stateEl.textContent = labels[level] || level;
        hintEl.textContent = d.hint || '';
        if (actionsEl) {
            const showInstall = level === 'not_installed' || level === 'stopped';
            const showStart = level === 'installed';
            actionsEl.style.display = (showInstall || showStart) ? 'block' : 'none';
            if (installBtn) {
                installBtn.style.display = showInstall ? 'inline-flex' : 'none';
                installBtn.innerHTML = level === 'stopped'
                    ? '<i class="fas fa-shield-alt" aria-hidden="true"></i> Repair Remote Host'
                    : '<i class="fas fa-shield-alt" aria-hidden="true"></i> Install Remote Host';
            }
            if (startBtn) startBtn.style.display = showStart ? 'inline-flex' : 'none';
        }
        schedulePoll(level);
    }

    let pollTimer = null;
    function schedulePoll(level) {
        if (pollTimer) {
            clearInterval(pollTimer);
            pollTimer = null;
        }
        if (level === 'starting' || level === 'connecting') {
            pollTimer = setInterval(refreshStatus, 4000);
        }
    }

    function refreshStatus() {
        return fetch('/api/remote-host/status').then(r => r.json()).then(renderStatus).catch(() => {
            card.style.display = 'none';
        });
    }

    refreshStatus();
    document.addEventListener('visibilitychange', function () {
        if (!document.hidden) refreshStatus();
    });

    async function runRemoteHostAction(url, busyLabel) {
        if (actionStatusEl) actionStatusEl.textContent = busyLabel;
        try {
            const res = await fetch(url, { method: 'POST' });
            const data = await res.json();
            if (actionStatusEl) {
                actionStatusEl.textContent = data.success
                    ? (data.message || 'Done.')
                    : (data.error || 'Action failed.');
            }
            await refreshStatus();
        } catch (e) {
            if (actionStatusEl) actionStatusEl.textContent = e.message;
        }
    }

    if (installBtn) {
        installBtn.addEventListener('click', async function () {
            installBtn.disabled = true;
            if (startBtn) startBtn.disabled = true;
            await runRemoteHostAction('/api/remote-host/install', 'Installing (approve UAC if prompted)…');
            installBtn.disabled = false;
            if (startBtn) startBtn.disabled = false;
        });
    }

    if (startBtn) {
        startBtn.addEventListener('click', async function () {
            startBtn.disabled = true;
            if (installBtn) installBtn.disabled = true;
            await runRemoteHostAction('/api/remote-host/start', 'Starting…');
            startBtn.disabled = false;
            if (installBtn) installBtn.disabled = false;
        });
    }
})();
</script>
{% endblock %}