// Settings view — verification defaults, migration defaults, connection info

import { api } from './api.js';
import { state } from './state.js';
import { escHtml } from './utils.js';

const SETTINGS_KEY = 'migrator_settings';

export function loadSettings() {
  try { return JSON.parse(localStorage.getItem(SETTINGS_KEY)) || {}; }
  catch { return {}; }
}

export function saveSettings(settings) {
  localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
}

export function renderSettings() {
  const outlet = document.getElementById('router-outlet');
  const s = loadSettings();

  outlet.innerHTML = `
    <div class="page-header">
      <div>
        <div class="page-title">Settings</div>
        <div class="page-subtitle">Configure verification defaults and migration behavior</div>
      </div>
    </div>

    <!-- Verification defaults -->
    <div class="settings-section">
      <div class="settings-section-header">
        <div class="settings-section-title">Verification</div>
        <div class="settings-section-sub">Default recipient for test envelopes</div>
      </div>
      <div class="settings-section-body">
        <div class="setting-row">
          <div class="setting-body">
            <div class="setting-label">Test Recipient Name</div>
            <div class="setting-desc">Pre-filled in the Send Test dialog on the Verification screen</div>
          </div>
          <div class="setting-control" style="min-width:240px">
            <input type="text" class="form-input" id="set-recipient-name"
                   value="${escHtml(s.testRecipientName || '')}"
                   placeholder="e.g. Test User" />
          </div>
        </div>
        <div class="setting-row">
          <div class="setting-body">
            <div class="setting-label">Test Recipient Email</div>
            <div class="setting-desc">Pre-filled in the Send Test dialog</div>
          </div>
          <div class="setting-control" style="min-width:240px">
            <input type="email" class="form-input" id="set-recipient-email"
                   value="${escHtml(s.testRecipientEmail || '')}"
                   placeholder="e.g. test@example.com" />
          </div>
        </div>
        <div class="setting-row">
          <div class="setting-body">
            <div class="setting-label">Auto-Void Timer (hours)</div>
            <div class="setting-desc">Reminder to void test envelopes after this many hours (display only — no automatic action)</div>
          </div>
          <div class="setting-control">
            <input type="number" class="form-input" id="set-auto-void"
                   value="${s.autoVoidHours ?? 24}" min="1" max="168" style="width:80px" />
          </div>
        </div>
      </div>
    </div>

    <!-- Migration defaults -->
    <div class="settings-section">
      <div class="settings-section-header">
        <div class="settings-section-title">Migration Defaults</div>
        <div class="settings-section-sub">Pre-set options in the migration options modal</div>
      </div>
      <div class="settings-section-body">
        <div class="setting-row">
          <div class="setting-body">
            <div class="setting-label">Overwrite Existing by Default</div>
            <div class="setting-desc">When on, the Overwrite Existing toggle in the migration modal starts enabled</div>
          </div>
          <div class="setting-control">
            <button class="toggle ${s.defaultOverwrite ? 'on' : ''}" id="set-overwrite"
              role="switch" aria-checked="${!!s.defaultOverwrite}"></button>
          </div>
        </div>
        <div class="setting-row">
          <div class="setting-body">
            <div class="setting-label">Include Documents by Default</div>
            <div class="setting-desc">Embed PDFs in the Docusign template payload</div>
          </div>
          <div class="setting-control">
            <button class="toggle ${s.defaultIncludeDocs !== false ? 'on' : ''}" id="set-include-docs"
              role="switch" aria-checked="${s.defaultIncludeDocs !== false}"></button>
          </div>
        </div>
      </div>
    </div>

    <!-- Connection info (read-only) -->
    <div class="settings-section">
      <div class="settings-section-header">
        <div class="settings-section-title">Connections</div>
        <div class="settings-section-sub">Current platform connection status (connect via top bar)</div>
      </div>
      <div class="settings-section-body" id="settings-conn-info">
        <div style="padding:8px 0;font-size:13px;color:var(--text-muted)">Loading…</div>
      </div>
    </div>

    <!-- Save -->
    <div style="display:flex;gap:8px;align-items:center">
      <button class="btn btn-primary" id="btn-save-settings">Save Settings</button>
      <span id="save-confirm" style="font-size:13px;color:var(--success);display:none">✓ Saved</span>
    </div>
  `;

  // Wire toggles
  document.querySelectorAll('.toggle').forEach(btn => {
    btn.addEventListener('click', () => {
      btn.classList.toggle('on');
      btn.setAttribute('aria-checked', btn.classList.contains('on'));
    });
  });

  // Save
  document.getElementById('btn-save-settings')?.addEventListener('click', () => {
    const updated = {
      testRecipientName:  document.getElementById('set-recipient-name')?.value.trim() || '',
      testRecipientEmail: document.getElementById('set-recipient-email')?.value.trim() || '',
      autoVoidHours:      parseInt(document.getElementById('set-auto-void')?.value) || 24,
      defaultOverwrite:   document.getElementById('set-overwrite')?.classList.contains('on') || false,
      defaultIncludeDocs: document.getElementById('set-include-docs')?.classList.contains('on') !== false,
    };
    saveSettings(updated);
    const confirm = document.getElementById('save-confirm');
    if (confirm) {
      confirm.style.display = 'inline';
      setTimeout(() => { confirm.style.display = 'none'; }, 2500);
    }
  });

  // Load connection info
  _loadConnInfo();
}

async function _loadConnInfo() {
  const connEl = document.getElementById('settings-conn-info');
  if (!connEl) return;

  try {
    const data = await api.auth.status();
    connEl.innerHTML = `
      <div class="conn-info-row">
        <span class="conn-info-label">Adobe Sign</span>
        <span class="conn-info-value">${data.adobe ? 'Connected' : 'Not connected'}</span>
        <span class="conn-info-status">
          <span class="badge ${data.adobe ? 'badge-green' : 'badge-gray'}">${data.adobe ? '● Connected' : '○ Disconnected'}</span>
        </span>
      </div>
      <div class="conn-info-row">
        <span class="conn-info-label">Docusign</span>
        <span class="conn-info-value">${data.docusign ? 'Connected' : 'Not connected'}</span>
        <span class="conn-info-status">
          <span class="badge ${data.docusign ? 'badge-green' : 'badge-gray'}">${data.docusign ? '● Connected' : '○ Disconnected'}</span>
        </span>
      </div>
      <div class="conn-info-row">
        <span class="conn-info-label">Docusign Account ID</span>
        <span class="conn-info-value mono">${escHtml(data.docusign_account_id || '—')}</span>
        <span class="conn-info-status"></span>
      </div>
      <div class="conn-info-row">
        <span class="conn-info-label">API Environment</span>
        <span class="conn-info-value mono">${escHtml(data.base_url || '—')}</span>
        <span class="conn-info-status"></span>
      </div>
    `;
  } catch (e) {
    connEl.innerHTML = `<div class="callout error"><span class="callout-icon">❌</span>Failed to load connection info: ${escHtml(e.message)}</div>`;
  }
}