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

import { api } from './api.js';
import { escHtml } from './utils.js';
import { disconnectPlatform, showDocusignAccountPicker, switchAccount } from './auth.js';
import { navigate } from './router.js';
import { resetQuickStart } from './help.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 and account actions</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>

    <div class="settings-section">
      <div class="settings-section-header">
        <div class="settings-section-title">Help & Onboarding</div>
        <div class="settings-section-sub">Make it easy to get oriented again or share the app with a first-time tester</div>
      </div>
      <div class="settings-section-body">
        <div class="setting-row">
          <div class="setting-body">
            <div class="setting-label">Open Full Help</div>
            <div class="setting-desc">See the in-app guide with the recommended first-time flow and screen-by-screen overview.</div>
          </div>
          <div class="setting-control">
            <button class="btn btn-secondary" id="btn-open-help">Open Help</button>
          </div>
        </div>
        <div class="setting-row">
          <div class="setting-body">
            <div class="setting-label">Show Quick Start Again</div>
            <div class="setting-desc">Re-enable the Templates quick-start card if you dismissed it earlier.</div>
          </div>
          <div class="setting-control">
            <button class="btn btn-primary" id="btn-reset-quick-start">Show Quick Start</button>
          </div>
        </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);
    }
  });

  document.getElementById('btn-open-help')?.addEventListener('click', () => {
    navigate('#/help');
  });

  document.getElementById('btn-reset-quick-start')?.addEventListener('click', () => {
    resetQuickStart();
    navigate('#/templates');
  });

  // 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${data.adobe_account_name ? ` — ${escHtml(data.adobe_account_name)}` : ''}` : '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 ? (data.docusign_account_selection_required ? 'Connected — account selection required' : `Connected${data.docusign_account_name ? ` — ${escHtml(data.docusign_account_name)}` : ''}`) : 'Not connected'}</span>
        <span class="conn-info-status">
          <span class="badge ${data.docusign ? (data.docusign_account_selection_required ? 'badge-amber' : 'badge-green') : 'badge-gray'}">${data.docusign ? (data.docusign_account_selection_required ? '● Choose account' : '● Connected') : '○ Disconnected'}</span>
        </span>
      </div>
      <div class="conn-info-row conn-info-actions">
        <span class="conn-info-label">Adobe Actions</span>
        <span class="conn-info-value">
          <button class="btn btn-secondary" id="btn-disconnect-adobe" ${data.adobe ? '' : 'disabled'}>Disconnect Adobe Sign</button>
        </span>
        <span class="conn-info-status"></span>
      </div>
      <div class="conn-info-row conn-info-actions">
        <span class="conn-info-label">Docusign Actions</span>
        <span class="conn-info-value" style="display:flex;gap:8px;flex-wrap:wrap">
          <button class="btn btn-secondary" id="btn-disconnect-docusign" ${data.docusign ? '' : 'disabled'}>Disconnect Docusign</button>
          <button class="btn btn-primary" id="btn-switch-docusign" ${data.docusign ? '' : 'disabled'}>Switch Docusign Account</button>
          <button class="btn btn-secondary" id="btn-choose-docusign-account" ${data.docusign ? '' : 'disabled'}>Choose Account</button>
        </span>
        <span class="conn-info-status"></span>
      </div>
      <div class="conn-info-row">
        <span class="conn-info-label">Adobe Auth Mode</span>
        <span class="conn-info-value mono">${escHtml(data.adobe_auth_mode || '—')}</span>
        <span class="conn-info-status"></span>
      </div>
      <div class="conn-info-row">
        <span class="conn-info-label">Docusign Auth Mode</span>
        <span class="conn-info-value mono">${escHtml(data.docusign_auth_mode || '—')}</span>
        <span class="conn-info-status"></span>
      </div>
      <div class="conn-info-row">
        <span class="conn-info-label">Browser Session ID</span>
        <span class="conn-info-value mono">${escHtml(data.session_id || '—')}</span>
        <span class="conn-info-status"></span>
      </div>
      <div class="conn-info-row">
        <span class="conn-info-label">Admin Access</span>
        <span class="conn-info-value">${data.is_admin ? 'Yes — this session can view all audit logs.' : 'No — this session can only view its own audit logs.'}</span>
        <span class="conn-info-status"></span>
      </div>
      <div class="conn-info-row">
        <span class="conn-info-label">Switch Account Note</span>
        <span class="conn-info-value">Use <strong>Choose Account</strong> or <strong>Switch Docusign Account</strong> to select from the DocuSign accounts available to this login. The picker is sorted alphabetically and supports search.</span>
        <span class="conn-info-status"></span>
      </div>
      <div class="conn-info-row">
        <span class="conn-info-label">Adobe Account ID</span>
        <span class="conn-info-value mono">${escHtml(data.adobe_account_id || '—')}</span>
        <span class="conn-info-status"></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>`;
    return;
  }

  document.getElementById('btn-disconnect-adobe')?.addEventListener('click', async () => {
    await disconnectPlatform('adobe');
    await _loadConnInfo();
  });
  document.getElementById('btn-disconnect-docusign')?.addEventListener('click', async () => {
    await disconnectPlatform('docusign');
    await _loadConnInfo();
  });
  document.getElementById('btn-switch-docusign')?.addEventListener('click', async () => {
    await switchAccount('docusign');
  });
  document.getElementById('btn-choose-docusign-account')?.addEventListener('click', async () => {
    await showDocusignAccountPicker({ forceRefresh: true });
  });

  if (data.docusign && data.docusign_account_selection_required) {
    await showDocusignAccountPicker();
  }
}