relicario/extension/src/popup/components/settings-vault.ts

/// Vault-level settings screen. Covers retention (trash + field history),
/// generator defaults (preview + "configure" → opens popover), and
/// autofill origin-ack revocation.

import { getState, setState, sendMessage, navigate, escapeHtml, openVaultTab } from '../../shared/state';
import type {
  VaultSettings, TrashRetention, HistoryRetention, GeneratorRequest,
} from '../../shared/types';
import { openGeneratorPanel, closeGeneratorPanel, isGeneratorPanelOpen } from './generator-panel';
import { GLYPH_NEXT } from '../../shared/glyphs';

let pendingSettings: VaultSettings | null = null;
let activeKeyHandler: ((e: KeyboardEvent) => void) | null = null;

export function teardown(): void {
  closeGeneratorPanel();
  if (activeKeyHandler) {
    document.removeEventListener('keydown', activeKeyHandler);
    activeKeyHandler = null;
  }
  pendingSettings = null;
}

// --- Retention helpers ---

function trashRetentionToValue(r: TrashRetention): string {
  if (r.kind === 'forever') return 'forever';
  return `days:${r.value}`;
}

function valueToTrashRetention(v: string): TrashRetention {
  if (v === 'forever') return { kind: 'forever' };
  const m = /^days:(\d+)$/.exec(v);
  if (m) return { kind: 'days', value: Number(m[1]) };
  return { kind: 'forever' };
}

function historyRetentionToValue(r: HistoryRetention): string {
  if (r.kind === 'forever') return 'forever';
  if (r.kind === 'last_n') return `last_n:${r.value}`;
  return `days:${r.value}`;
}

function valueToHistoryRetention(v: string): HistoryRetention {
  if (v === 'forever') return { kind: 'forever' };
  const mLast = /^last_n:(\d+)$/.exec(v);
  if (mLast) return { kind: 'last_n', value: Number(mLast[1]) };
  const mDays = /^days:(\d+)$/.exec(v);
  if (mDays) return { kind: 'days', value: Number(mDays[1]) };
  return { kind: 'forever' };
}

// --- Generator summary ---

function generatorSummary(req: GeneratorRequest): string {
  if (req.kind === 'random') {
    const classes: string[] = [];
    if (req.classes.lower)   classes.push('lower');
    if (req.classes.upper)   classes.push('upper');
    if (req.classes.digits)  classes.push('digits');
    if (req.classes.symbols) classes.push('symbols');
    const sc = req.symbol_charset.kind;
    return `Random, ${req.length} chars, ${classes.join('+') || 'no classes'}, ${sc} symbols`;
  }
  return `BIP39, ${req.word_count} words, "${req.separator}" separator, ${req.capitalization}`;
}

// --- Time formatting ---

function relativeTime(unixSec: number): string {
  const now = Math.floor(Date.now() / 1000);
  const diff = now - unixSec;
  if (diff < 60)    return 'just now';
  if (diff < 3600)  return `${Math.floor(diff / 60)}m ago`;
  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
  return `${Math.floor(diff / 86400)}d ago`;
}

// --- Render ---

export function renderVaultSettings(app: HTMLElement): void {
  const state = getState();
  const base = state.vaultSettings;
  if (!base) {
    app.innerHTML = `<div class="pad"><p class="muted">Vault settings not loaded yet.</p></div>`;
    return;
  }
  pendingSettings = JSON.parse(JSON.stringify(base)) as VaultSettings;

  function rerender(): void {
    if (!pendingSettings) return;
    const acksEntries = Object.entries(pendingSettings.autofill_origin_acks)
      .sort(([, a], [, b]) => b - a);

    app.innerHTML = `
      <div class="pad">
        <div class="settings-header">
          <button class="btn" id="back-btn">← back</button>
          <h3 style="margin:0;">vault settings</h3>
        </div>

        <div class="settings-section">
          <div class="settings-section__title">retention</div>
          <div class="settings-row">
            <span class="settings-row__label">trash</span>
            <select id="trash-retention">
              <option value="forever">Forever</option>
              <option value="days:7">7 days</option>
              <option value="days:30">30 days</option>
              <option value="days:60">60 days</option>
              <option value="days:90">90 days</option>
              <option value="days:180">180 days</option>
              <option value="days:365">365 days</option>
            </select>
          </div>
          <div class="settings-row">
            <span class="settings-row__label">field history</span>
            <select id="history-retention">
              <option value="forever">Forever</option>
              <option value="last_n:3">Last 3</option>
              <option value="last_n:5">Last 5</option>
              <option value="last_n:10">Last 10</option>
              <option value="days:30">30 days</option>
              <option value="days:90">90 days</option>
              <option value="days:365">365 days</option>
            </select>
          </div>
        </div>

        <div class="settings-section">
          <div class="settings-section__title">generator</div>
          <p class="gen-preview-line">${escapeHtml(generatorSummary(pendingSettings.generator_defaults))}</p>
          <button class="gen-trigger" id="configure-gen" type="button" title="configure generator defaults" aria-expanded="false">✨</button>
        </div>

        <div class="settings-section">
          <div class="settings-section__title">autofill origins</div>
          ${acksEntries.length === 0
            ? `<p class="muted">No origins acknowledged yet.</p>`
            : acksEntries.map(([host, ts]) => `
              <div class="ack-row">
                <span class="ack-row__host">${escapeHtml(host)}</span>
                <span class="ack-row__meta">${escapeHtml(relativeTime(ts))}</span>
                <button class="ack-row__revoke" data-revoke="${escapeHtml(host)}">revoke</button>
              </div>
            `).join('')}
        </div>

        <div class="settings-section">
          <div class="settings-section__title">attachments</div>
          <div class="settings-row">
            <span class="settings-row__label">max file size</span>
            <select id="attachment-cap">
              <option value="5242880">5 MB</option>
              <option value="10485760">10 MB</option>
              <option value="26214400">25 MB</option>
              <option value="52428800">50 MB</option>
            </select>
          </div>
        </div>

        <div class="settings-section">
          <div class="settings-section__title">backup &amp; restore</div>
          <div class="settings-row">
            <button class="btn" id="open-backup">Backup &amp; restore ${GLYPH_NEXT}</button>
          </div>
        </div>

        <div class="settings-section">
          <div class="settings-section__title">import</div>
          <div class="settings-row">
            <button class="btn" id="open-import">LastPass CSV ${GLYPH_NEXT}</button>
          </div>
        </div>

        <div class="settings-footer">
          <button class="btn" id="discard-btn">discard</button>
          <button class="btn btn-primary" id="save-btn" disabled>save changes</button>
        </div>
      </div>
    `;

    // Set current select values
    (document.getElementById('trash-retention') as HTMLSelectElement).value =
      trashRetentionToValue(pendingSettings.trash_retention);
    (document.getElementById('history-retention') as HTMLSelectElement).value =
      historyRetentionToValue(pendingSettings.field_history_retention);
    const capValue = pendingSettings.attachment_caps?.per_attachment_max_bytes ?? 10485760;
    (document.getElementById('attachment-cap') as HTMLSelectElement).value = String(capValue);

    wireHandlers();
    updateSaveEnabled();
  }

  function updateSaveEnabled(): void {
    const saveBtn = document.getElementById('save-btn') as HTMLButtonElement | null;
    if (!saveBtn || !pendingSettings || !base) return;
    const changed = JSON.stringify(pendingSettings) !== JSON.stringify(base);
    saveBtn.disabled = !changed;
  }

  function wireHandlers(): void {
    document.getElementById('back-btn')?.addEventListener('click', () => navigate('list'));
    document.getElementById('discard-btn')?.addEventListener('click', () => navigate('list'));
    document.getElementById('open-backup')?.addEventListener('click', () => openVaultTab('backup'));
    document.getElementById('open-import')?.addEventListener('click', () => openVaultTab('import'));

    document.getElementById('trash-retention')?.addEventListener('change', (e) => {
      if (!pendingSettings) return;
      pendingSettings.trash_retention = valueToTrashRetention((e.target as HTMLSelectElement).value);
      updateSaveEnabled();
    });

    document.getElementById('history-retention')?.addEventListener('change', (e) => {
      if (!pendingSettings) return;
      pendingSettings.field_history_retention = valueToHistoryRetention((e.target as HTMLSelectElement).value);
      updateSaveEnabled();
    });

    document.getElementById('attachment-cap')?.addEventListener('change', (e) => {
      if (!pendingSettings) return;
      const bytes = Number((e.target as HTMLSelectElement).value);
      pendingSettings.attachment_caps = {
        ...pendingSettings.attachment_caps,
        per_attachment_max_bytes: bytes,
      };
      updateSaveEnabled();
    });

    document.querySelectorAll<HTMLButtonElement>('[data-revoke]').forEach((btn) => {
      btn.addEventListener('click', () => {
        if (!pendingSettings) return;
        const host = btn.dataset.revoke ?? '';
        delete pendingSettings.autofill_origin_acks[host];
        rerender();
      });
    });

    document.getElementById('configure-gen')?.addEventListener('click', (e) => {
      const trigger = e.currentTarget as HTMLElement;
      if (isGeneratorPanelOpen()) {
        closeGeneratorPanel();
        return;
      }
      const generatorSection = trigger.closest('.settings-section') as HTMLElement | null;
      if (!generatorSection || pendingSettings === null) return;
      openGeneratorPanel({
        parent: generatorSection,
        trigger,
        initial: pendingSettings.generator_defaults,
        context: 'configure-defaults',
      });
    });

    document.getElementById('save-btn')?.addEventListener('click', async () => {
      if (!pendingSettings) return;
      const resp = await sendMessage({ type: 'update_vault_settings', settings: pendingSettings });
      if (resp.ok) {
        // Refresh cached state and navigate back.
        const refreshed = await sendMessage({ type: 'get_vault_settings' });
        if (refreshed.ok && refreshed.data) {
          const vs = (refreshed.data as { settings: VaultSettings }).settings;
          if (vs) {
            setState({ vaultSettings: vs, generatorDefaults: vs.generator_defaults });
          }
        }
        navigate('list');
      } else {
        setState({ error: resp.error });
      }
    });
  }

  rerender();

  const handler = (e: KeyboardEvent) => {
    if (e.key === 'Escape') {
      if (activeKeyHandler) document.removeEventListener('keydown', activeKeyHandler);
      activeKeyHandler = null;
      navigate('list');
    }
  };
  activeKeyHandler = handler;
  document.addEventListener('keydown', handler);
}