/// Vault initialization wizard — 4-step flow for creating new idfoto vaults.
///
/// Step 1: Choose host type (Gitea / GitHub)
/// Step 2: Configure connection (URL, repo, token) + test
/// Step 3: Create vault (carrier image, passphrase, generate secrets, push files)
/// Step 4: Finish (download reference image, push config to extension or copy JSON)

import { createGitHost, uint8ArrayToBase64 } from '../service-worker/git-host';
import type { GitHost } from '../service-worker/git-host';
import type { VaultConfig } from '../shared/types';

// --- WASM module (loaded dynamically) ---

type WasmModule = typeof import('idfoto-wasm');
let wasm: WasmModule | null = null;

async function loadWasm(): Promise<WasmModule> {
  if (wasm) return wasm;
  const mod = await import(
    // @ts-ignore TS2307 — resolved at runtime, not by TS/webpack
    /* webpackIgnore: true */ '../idfoto_wasm.js'
  ) as WasmModule & { default: (input?: string | URL) => Promise<void> };
  await mod.default('../idfoto_wasm_bg.wasm');
  wasm = mod;
  return mod;
}

// --- State ---

interface WizardState {
  step: number;
  hostType: 'gitea' | 'github';
  hostUrl: string;
  repoPath: string;
  apiToken: string;
  connectionTested: boolean;
  carrierImageBytes: Uint8Array | null;
  passphrase: string;
  passphraseConfirm: string;
  referenceImageBytes: Uint8Array | null;
  creating: boolean;
  error: string | null;
  extensionDetected: boolean;
  configPushed: boolean;
}

const state: WizardState = {
  step: 1,
  hostType: 'gitea',
  hostUrl: '',
  repoPath: '',
  apiToken: '',
  connectionTested: false,
  carrierImageBytes: null,
  passphrase: '',
  passphraseConfirm: '',
  referenceImageBytes: null,
  creating: false,
  error: null,
  extensionDetected: false,
  configPushed: false,
};

// --- Helpers ---

function escapeHtml(s: string): string {
  return s
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}

function passphraseStrength(pw: string): 'weak' | 'fair' | 'good' | 'strong' {
  let score = 0;
  if (pw.length >= 8) score++;
  if (pw.length >= 14) score++;
  if (/[a-z]/.test(pw) && /[A-Z]/.test(pw)) score++;
  if (/[0-9]/.test(pw)) score++;
  if (/[^a-zA-Z0-9]/.test(pw)) score++;
  if (score <= 1) return 'weak';
  if (score <= 2) return 'fair';
  if (score <= 3) return 'good';
  return 'strong';
}

// --- Render ---

function render(): void {
  const app = document.getElementById('app');
  if (!app) return;

  const progressHtml = `
    <div class="progress-bar">
      <div class="step ${state.step > 1 ? 'done' : state.step === 1 ? 'current' : ''}"></div>
      <div class="step ${state.step > 2 ? 'done' : state.step === 2 ? 'current' : ''}"></div>
      <div class="step ${state.step > 3 ? 'done' : state.step === 3 ? 'current' : ''}"></div>
      <div class="step ${state.step > 4 ? 'done' : state.step === 4 ? 'current' : ''}"></div>
    </div>
  `;

  let stepHtml = '';
  switch (state.step) {
    case 1: stepHtml = renderStep1(); break;
    case 2: stepHtml = renderStep2(); break;
    case 3: stepHtml = renderStep3(); break;
    case 4: stepHtml = renderStep4(); break;
  }

  app.innerHTML = `
    <div class="pad" style="padding-top:12px;">
      <div class="brand" style="margin-bottom:4px;">idfoto vault setup</div>
      ${progressHtml}
      ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
      ${stepHtml}
    </div>
  `;

  switch (state.step) {
    case 1: attachStep1(); break;
    case 2: attachStep2(); break;
    case 3: attachStep3(); break;
    case 4: attachStep4(); break;
  }
}

// --- Step 1: Choose Host ---

function renderStep1(): string {
  const giteaInstructions = `
    <div class="step-instructions">
      <ol>
        <li>Create a new <strong>private</strong> repository on your Gitea instance (e.g. <code>vault</code>)</li>
        <li>Go to <strong>Settings &rarr; Applications</strong></li>
        <li>Generate a new token with <code>repo</code> (read/write) permission</li>
        <li>Copy the token &mdash; you will need it in the next step</li>
      </ol>
    </div>
  `;

  const githubInstructions = `
    <div class="step-instructions">
      <ol>
        <li>Create a new <strong>private</strong> repository on GitHub (e.g. <code>vault</code>)</li>
        <li>Go to <strong>Settings &rarr; Developer settings &rarr; Personal access tokens &rarr; Fine-grained tokens</strong></li>
        <li>Generate a new token scoped to the vault repo with <strong>Contents</strong> read/write permission</li>
        <li>Copy the token &mdash; you will need it in the next step</li>
      </ol>
    </div>
  `;

  return `
    <div class="wizard-step">
      <h3>choose host</h3>
      <div class="form-group">
        <label class="label">host type</label>
        <div class="toggle-group">
          <button class="${state.hostType === 'gitea' ? 'active' : ''}" data-host="gitea">Gitea</button>
          <button class="${state.hostType === 'github' ? 'active' : ''}" data-host="github">GitHub</button>
        </div>
      </div>
      ${state.hostType === 'gitea' ? giteaInstructions : githubInstructions}
      <div class="form-actions">
        <button class="btn btn-primary" id="next-btn">next</button>
      </div>
    </div>
  `;
}

function attachStep1(): void {
  document.querySelectorAll('.toggle-group button').forEach(btn => {
    btn.addEventListener('click', () => {
      state.hostType = (btn as HTMLElement).dataset.host as 'gitea' | 'github';
      state.connectionTested = false;
      render();
    });
  });

  document.getElementById('next-btn')?.addEventListener('click', () => {
    state.step = 2;
    state.error = null;
    render();
  });
}

// --- Step 2: Configure Connection ---

function renderStep2(): string {
  return `
    <div class="wizard-step">
      <h3>configure connection</h3>
      <div class="form-group" ${state.hostType === 'github' ? 'style="display:none;"' : ''}>
        <label class="label" for="host-url">host url</label>
        <input id="host-url" type="text" value="${escapeHtml(state.hostUrl)}" placeholder="https://git.example.com">
      </div>
      <div class="form-group">
        <label class="label" for="repo-path">repository path</label>
        <input id="repo-path" type="text" value="${escapeHtml(state.repoPath)}" placeholder="user/vault">
      </div>
      <div class="form-group">
        <label class="label" for="api-token">api token</label>
        <input id="api-token" type="password" value="${escapeHtml(state.apiToken)}" placeholder="paste your token here">
      </div>
      <div class="form-actions">
        <button class="btn" id="test-btn">test connection</button>
        ${state.connectionTested ? '<span class="test-result pass">connected</span>' : ''}
      </div>
      <div class="form-actions" style="margin-top:12px;">
        <button class="btn" id="back-btn">back</button>
        <button class="btn btn-primary" id="next-btn" ${!state.connectionTested ? 'disabled' : ''}>next</button>
      </div>
    </div>
  `;
}

function attachStep2(): void {
  document.getElementById('test-btn')?.addEventListener('click', async () => {
    const hostUrl = state.hostType === 'github'
      ? 'https://api.github.com'
      : (document.getElementById('host-url') as HTMLInputElement).value.trim();
    const repoPath = (document.getElementById('repo-path') as HTMLInputElement).value.trim();
    const apiToken = (document.getElementById('api-token') as HTMLInputElement).value.trim();

    if (!repoPath || !apiToken) {
      state.error = 'Repository path and API token are required';
      render();
      return;
    }
    if (state.hostType === 'gitea' && !hostUrl) {
      state.error = 'Host URL is required for Gitea';
      render();
      return;
    }

    state.hostUrl = hostUrl;
    state.repoPath = repoPath;
    state.apiToken = apiToken;

    try {
      const host = createGitHost(state.hostType, hostUrl, repoPath, apiToken);
      await host.listDir('');
      state.connectionTested = true;
      state.error = null;
    } catch (err: unknown) {
      state.connectionTested = false;
      state.error = `Connection failed: ${err instanceof Error ? err.message : String(err)}`;
    }
    render();
  });

  document.getElementById('back-btn')?.addEventListener('click', () => {
    state.step = 1;
    state.error = null;
    render();
  });

  document.getElementById('next-btn')?.addEventListener('click', () => {
    if (!state.connectionTested) return;
    state.step = 3;
    state.error = null;
    render();
  });
}

// --- Step 3: Create Vault ---

function renderStep3(): string {
  const strength = state.passphrase ? passphraseStrength(state.passphrase) : null;

  return `
    <div class="wizard-step">
      <h3>create vault</h3>
      <div class="form-group">
        <label class="label">carrier image (JPEG)</label>
        <div class="file-drop ${state.carrierImageBytes ? 'has-file' : ''}" id="file-drop">
          <input type="file" id="file-input" accept="image/jpeg" style="display:none;">
          ${state.carrierImageBytes
            ? '<p class="secondary">image loaded</p>'
            : '<p class="secondary">click to select a JPEG photo</p>'}
        </div>
        <p class="muted" style="margin-top:4px;">A 256-bit secret will be steganographically embedded in this image.</p>
      </div>
      <div class="form-group">
        <label class="label" for="passphrase">passphrase</label>
        <input id="passphrase" type="password" value="${escapeHtml(state.passphrase)}" placeholder="enter a strong passphrase">
        ${strength ? `
          <div class="strength-bar">
            <div class="strength-bar-fill ${strength}"></div>
          </div>
          <p class="muted" style="margin-top:2px;">strength: ${strength}</p>
        ` : ''}
      </div>
      <div class="form-group">
        <label class="label" for="passphrase-confirm">confirm passphrase</label>
        <input id="passphrase-confirm" type="password" value="${escapeHtml(state.passphraseConfirm)}" placeholder="re-enter passphrase">
      </div>
      <div class="form-actions">
        <button class="btn" id="back-btn">back</button>
        <button class="btn btn-primary" id="create-btn" ${state.creating ? 'disabled' : ''}>
          ${state.creating ? '<span class="spinner"></span> creating...' : 'create vault'}
        </button>
      </div>
    </div>
  `;
}

function attachStep3(): void {
  const fileDrop = document.getElementById('file-drop')!;
  const fileInput = document.getElementById('file-input') as HTMLInputElement;

  fileDrop.addEventListener('click', () => fileInput.click());

  fileInput.addEventListener('change', () => {
    const file = fileInput.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => {
      state.carrierImageBytes = new Uint8Array(reader.result as ArrayBuffer);
      state.error = null;
      render();
    };
    reader.readAsArrayBuffer(file);
  });

  // Track passphrase changes without full re-render
  document.getElementById('passphrase')?.addEventListener('input', (e) => {
    state.passphrase = (e.target as HTMLInputElement).value;
    // Update strength bar inline
    const strength = passphraseStrength(state.passphrase);
    const bar = document.querySelector('.strength-bar-fill') as HTMLElement | null;
    const label = document.querySelector('.strength-bar + .muted') as HTMLElement | null;
    if (bar) {
      bar.className = `strength-bar-fill ${strength}`;
    }
    if (label) {
      label.textContent = `strength: ${strength}`;
    }
    if (!bar && state.passphrase) {
      render();
    }
  });

  document.getElementById('passphrase-confirm')?.addEventListener('input', (e) => {
    state.passphraseConfirm = (e.target as HTMLInputElement).value;
  });

  document.getElementById('back-btn')?.addEventListener('click', () => {
    state.step = 2;
    state.error = null;
    render();
  });

  document.getElementById('create-btn')?.addEventListener('click', async () => {
    // Read current values from DOM
    state.passphrase = (document.getElementById('passphrase') as HTMLInputElement).value;
    state.passphraseConfirm = (document.getElementById('passphrase-confirm') as HTMLInputElement).value;

    if (!state.carrierImageBytes) {
      state.error = 'Please select a carrier JPEG image';
      render();
      return;
    }
    if (!state.passphrase) {
      state.error = 'Passphrase is required';
      render();
      return;
    }
    if (state.passphrase !== state.passphraseConfirm) {
      state.error = 'Passphrases do not match';
      render();
      return;
    }

    state.creating = true;
    state.error = null;
    render();

    try {
      const w = await loadWasm();

      // 1. Generate 32-byte image secret
      const imageSecret = new Uint8Array(32);
      crypto.getRandomValues(imageSecret);

      // 2. Embed secret into carrier JPEG
      state.referenceImageBytes = new Uint8Array(
        w.embed_image_secret(state.carrierImageBytes, imageSecret)
      );

      // 3. Generate 32-byte salt
      const salt = new Uint8Array(32);
      crypto.getRandomValues(salt);

      // 4. Create KDF params
      const paramsJson = '{"argon2_m":65536,"argon2_t":3,"argon2_p":4}';

      // 5. Derive master key
      const masterKey = w.derive_master_key(
        state.passphrase,
        imageSecret,
        salt,
        paramsJson,
      );

      // 6. Encrypt empty manifest
      const manifestJson = '{"entries":{},"version":1}';
      const encryptedManifest = w.encrypt_manifest(manifestJson, masterKey);

      // 7. Push vault files via git API
      const hostUrl = state.hostType === 'github' ? 'https://api.github.com' : state.hostUrl;
      const host = createGitHost(state.hostType, hostUrl, state.repoPath, state.apiToken);

      await host.writeFile(
        '.idfoto/salt',
        salt,
        'init: vault salt',
      );

      const paramsBytes = new TextEncoder().encode(paramsJson);
      await host.writeFile(
        '.idfoto/params.json',
        paramsBytes,
        'init: KDF parameters',
      );

      const devicesJson = '{"devices":[]}';
      const devicesBytes = new TextEncoder().encode(devicesJson);
      await host.writeFile(
        '.idfoto/devices.json',
        devicesBytes,
        'init: device registry',
      );

      await host.writeFile(
        'manifest.enc',
        new Uint8Array(encryptedManifest),
        'init: encrypted manifest',
      );

      // 8. Advance to step 4
      state.creating = false;
      state.step = 4;
      state.error = null;

      // Detect extension
      detectExtension();

      render();
    } catch (err: unknown) {
      state.creating = false;
      state.error = `Vault creation failed: ${err instanceof Error ? err.message : String(err)}`;
      render();
    }
  });
}

// --- Step 4: Finish ---

function detectExtension(): void {
  try {
    if (typeof chrome !== 'undefined' && chrome.runtime && chrome.runtime.sendMessage) {
      // Try to ping the extension
      chrome.runtime.sendMessage({ type: 'is_unlocked' }, (response) => {
        if (chrome.runtime.lastError) {
          state.extensionDetected = false;
        } else {
          state.extensionDetected = true;
        }
        render();
      });
    }
  } catch {
    state.extensionDetected = false;
  }
}

function renderStep4(): string {
  const config: VaultConfig = {
    hostType: state.hostType,
    hostUrl: state.hostType === 'github' ? 'https://api.github.com' : state.hostUrl,
    repoPath: state.repoPath,
    apiToken: state.apiToken,
  };

  const configJson = JSON.stringify(config, null, 2);

  return `
    <div class="wizard-step">
      <div class="success-box">
        <h3>vault created</h3>
        <p class="secondary">Your vault has been initialized and pushed to the repository.</p>
      </div>

      <div class="form-group">
        <label class="label">reference image</label>
        <p class="muted" style="margin-bottom:8px;">
          Download and store this image securely. It is your second factor for decryption.
          Without it, you cannot unlock the vault.
        </p>
        <button class="btn btn-primary" id="download-ref-btn">download reference.jpg</button>
      </div>

      ${state.extensionDetected ? `
        <div class="form-group" style="margin-top:16px;">
          <label class="label">extension configuration</label>
          <button class="btn btn-primary" id="push-config-btn" ${state.configPushed ? 'disabled' : ''}>
            ${state.configPushed ? 'config saved to extension' : 'save config to extension'}
          </button>
          ${state.configPushed ? '<span class="test-result pass" style="margin-left:8px;">saved</span>' : ''}
        </div>
      ` : `
        <div class="form-group" style="margin-top:16px;">
          <label class="label">extension configuration</label>
          <p class="muted" style="margin-bottom:8px;">
            Copy this JSON and paste it into the extension setup, or save it for later.
          </p>
          <div class="config-blob" id="config-blob">${escapeHtml(configJson)}</div>
          <button class="btn" id="copy-config-btn">copy to clipboard</button>
        </div>
      `}
    </div>
  `;
}

function attachStep4(): void {
  document.getElementById('download-ref-btn')?.addEventListener('click', () => {
    if (!state.referenceImageBytes) return;
    const blob = new Blob([state.referenceImageBytes.buffer as ArrayBuffer], { type: 'image/jpeg' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'reference.jpg';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  });

  document.getElementById('push-config-btn')?.addEventListener('click', async () => {
    if (!state.referenceImageBytes) return;

    const config: VaultConfig = {
      hostType: state.hostType,
      hostUrl: state.hostType === 'github' ? 'https://api.github.com' : state.hostUrl,
      repoPath: state.repoPath,
      apiToken: state.apiToken,
    };

    const imageBase64 = uint8ArrayToBase64(state.referenceImageBytes);

    try {
      chrome.runtime.sendMessage(
        { type: 'save_setup', config, imageBase64 },
        (response: { ok: boolean; error?: string }) => {
          if (response?.ok) {
            state.configPushed = true;
          } else {
            state.error = response?.error ?? 'Failed to save config to extension';
          }
          render();
        },
      );
    } catch (err: unknown) {
      state.error = `Failed to communicate with extension: ${err instanceof Error ? err.message : String(err)}`;
      render();
    }
  });

  document.getElementById('copy-config-btn')?.addEventListener('click', async () => {
    const blob = document.getElementById('config-blob');
    if (!blob) return;
    try {
      await navigator.clipboard.writeText(blob.textContent ?? '');
      const btn = document.getElementById('copy-config-btn')!;
      btn.textContent = 'copied!';
      setTimeout(() => { btn.textContent = 'copy to clipboard'; }, 2000);
    } catch {
      // Fallback: select the text
      const range = document.createRange();
      range.selectNodeContents(blob);
      const sel = window.getSelection();
      sel?.removeAllRanges();
      sel?.addRange(range);
    }
  });
}

// --- Boot ---

document.addEventListener('DOMContentLoaded', () => {
  render();
});