// ── Mobile-friendly config landing page (HTML) ──
// Served at GET /addons/config/{code}

export function renderConfigPage(params: {
  code: string;
  addonName: string;
  configureUrl: string | null;
  status: string;
  publicHost: string;
  appName: string;
  error?: string | null;
}): string {
  const { code, addonName, configureUrl, status, publicHost, appName, error } = params;
  const statusBadge = statusBadgeHtml(status);

  return `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Configure ${escapeHtml(addonName)} · ${escapeHtml(appName)}</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #0f0f0f; color: #e0e0e0;
      min-height: 100vh; display: flex; flex-direction: column; align-items: center;
      padding: 24px; line-height: 1.5;
    }
    .container { max-width: 480px; width: 100%; }
    .card {
      background: #1a1a2e; border-radius: 16px; padding: 32px 24px;
      margin-top: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    }
    h1 { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 8px; }
    .subtitle { color: #888; font-size: 14px; margin-bottom: 24px; }
    .addon-name { font-size: 20px; font-weight: 600; color: #00a3ff; margin-bottom: 16px; }
    .status-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
    .badge {
      display: inline-block; padding: 4px 12px; border-radius: 99px;
      font-size: 12px; font-weight: 600; text-transform: uppercase;
    }
    .badge.pending { background: #2a2a4a; color: #888; }
    .badge.active { background: #003366; color: #00a3ff; }
    .badge.completed { background: #003300; color: #00ff88; }
    .badge.cancelled { background: #330000; color: #ff4444; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 14px 24px; border-radius: 12px; border: none;
      font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none;
      width: 100%; transition: opacity 0.2s;
    }
    .btn:active { opacity: 0.8; }
    .btn-primary { background: #00a3ff; color: #fff; }
    .btn-secondary { background: #2a2a4a; color: #e0e0e0; margin-top: 12px; }
    .btn-success { background: #00cc66; color: #fff; }
    .btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .btn-pulse { animation: pulse 2s infinite; }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
    .input-group { margin-top: 16px; }
    label { display: block; font-size: 14px; color: #888; margin-bottom: 8px; }
    input[type="url"] {
      width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid #333;
      background: #121220; color: #e0e0e0; font-size: 14px;
      transition: border-color 0.2s;
    }
    input[type="url"]:focus { outline: none; border-color: #00a3ff; }
    .help-text { font-size: 12px; color: #666; margin-top: 8px; }
    .error-text { color: #ff4444; font-size: 13px; margin-top: 8px; }
    .success-text { color: #00ff88; font-size: 13px; margin-top: 8px; }
    .qrcode { display: flex; justify-content: center; margin: 24px 0; }
    .footer { margin-top: 24px; text-align: center; font-size: 12px; color: #555; }
  </style>
</head>
<body>
  <div class="container">
    <div class="card">
      <div class="subtitle">${escapeHtml(appName)} · Addon Configuration</div>
      <h1>Configure Addon</h1>
      <div class="addon-name">${escapeHtml(addonName)}</div>

      <div class="status-row">
        <span>Status:</span>
        ${statusBadge}
      </div>

      ${error ? `<div class="error-text">${escapeHtml(error)}</div>` : ""}

      ${status === "pending" || status === "active" ? `
        ${configureUrl ? `
          <a href="${escapeHtml(configureUrl)}" class="btn btn-primary btn-pulse" target="_blank">
            Open Configure Page
          </a>
          <p class="help-text" style="margin-top:12px; text-align:center;">
            Configure the addon in your browser, then paste the final manifest URL below.
          </p>
        ` : `
          <p class="help-text">This addon requires a configured manifest URL. Paste it below.</p>
        `}

        <div class="input-group">
          <label for="manifestUrl">Configured Manifest URL</label>
          <input type="url" id="manifestUrl" placeholder="https://example.com/configured/manifest.json" />
          <button class="btn btn-success" id="submitBtn" onclick="submitConfig()">Submit & Complete</button>
          <p class="help-text" id="statusText"></p>
        </div>
      ` : status === "completed" ? `
        <div class="success-text">✓ Configuration complete!</div>
        <p class="help-text" style="margin-top:8px;">You can close this page. Return to the app.</p>
      ` : `
        <div class="error-text">✗ Session expired or cancelled. Please start again from the app.</div>
      `}

      ${status !== "completed" ? `
        <button class="btn btn-secondary" onclick="cancelSession()">Cancel</button>
      ` : ""}
    </div>
    <div class="footer">
      ${escapeHtml(appName)} · Config code: ${escapeHtml(code)}<br>
      This page expires in 30 minutes.
    </div>
  </div>

  <script>
    const code = ${JSON.stringify(code)};
    let pollTimer = null;

    ${status === "pending" || status === "active" ? `
    // Poll status
    async function pollStatus() {
      try {
        const r = await fetch('/addons/config/' + code + '/status');
        const data = await r.json();
        if (data.status === 'completed') {
          window.location.reload();
        }
      } catch(e) {}
    }
    pollTimer = setInterval(pollStatus, 3000);
    ` : ""}

    // Submit configured manifest URL
    async function submitConfig() {
      const url = document.getElementById('manifestUrl').value.trim();
      if (!url) {
        document.getElementById('statusText').textContent = 'Please enter a manifest URL';
        return;
      }
      document.getElementById('submitBtn').disabled = true;
      document.getElementById('statusText').textContent = 'Validating...';
      try {
        const r = await fetch('/addons/config/' + code + '/complete', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ configuredManifestUrl: url }),
        });
        const data = await r.json();
        if (data.status === 'completed') {
          document.getElementById('statusText').className = 'success-text';
          document.getElementById('statusText').textContent = '✓ Configuration complete!';
          setTimeout(() => window.location.reload(), 1500);
        } else {
          document.getElementById('statusText').className = 'error-text';
          document.getElementById('statusText').textContent = data.error || 'Validation failed';
          document.getElementById('submitBtn').disabled = false;
        }
      } catch(e) {
        document.getElementById('statusText').className = 'error-text';
        document.getElementById('statusText').textContent = 'Network error';
        document.getElementById('submitBtn').disabled = false;
      }
    }

    // Cancel session
    async function cancelSession() {
      try {
        await fetch('/addons/config/' + code + '/cancel', { method: 'POST' });
        window.location.reload();
      } catch(e) {}
    }

    // Cleanup
    window.addEventListener('beforeunload', () => { if (pollTimer) clearInterval(pollTimer); });
  </script>
</body>
</html>`;
}

function statusBadgeHtml(status: string): string {
  const labels: Record<string, string> = {
    pending: "⏳ Waiting for phone",
    active: "📱 Configuring",
    completed: "✅ Done",
    cancelled: "✗ Cancelled",
  };
  return `<span class="badge ${status}">${labels[status] || status}</span>`;
}

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