(function (A) {
  function statusBlock() {
    if (A.pwa.isFileProtocol()) {
      return `<div class="install-status warn">
        <strong>Let op:</strong>&nbsp;de app is nu geopend vanaf uw bestandssysteem
        (<code>file://</code>). Installeren als PWA werkt alleen via een webserver
        (bijv. <code>http://localhost</code> of een gedeploydde versie).
      </div>`;
    }
    if (A.pwa.isStandalone()) {
      return `<div class="install-status ok">
        <strong>Geïnstalleerd.</strong>&nbsp;U gebruikt de app al in PWA-modus.
      </div>`;
    }
    if (!A.pwa.isSupported()) {
      return `<div class="install-status warn">
        Deze browser ondersteunt PWA-installatie niet volledig. Probeer het in
        Chrome, Edge, Safari (iOS 16.4+) of een Chromium-gebaseerde browser.
      </div>`;
    }
    return `<div class="install-status info">
      Volg onderstaande stappen om de app op dit apparaat te installeren.
    </div>`;
  }

  function stepsForPlatform(platform) {
    if (platform === 'ios') {
      return `<ol>
        <li>Tik onderin het scherm op het <strong>Delen</strong>-pictogram
          (vierkant met pijl omhoog).</li>
        <li>Scrol omlaag en tik op <strong>Zet op beginscherm</strong>.</li>
        <li>Bevestig met <strong>Voeg toe</strong>. Het Duimstok-icoon verschijnt
          tussen uw apps.</li>
        <li>Open de app vanaf het beginscherm voor volledige werking offline.</li>
      </ol>
      <p style="font-size:12px;color:#666;margin-top:10px;">
        iOS ondersteunt geen automatische installatieknop. Installatie gebeurt
        altijd via het Delen-menu van Safari.
      </p>`;
    }
    if (platform === 'android') {
      return `<ol>
        <li>Gebruik de knop <em>App installeren</em> hieronder, of</li>
        <li>Tik rechtsboven op <strong>\u22EE</strong> (menu) en kies
          <strong>App installeren</strong> / <strong>Toevoegen aan startscherm</strong>.</li>
        <li>Bevestig met <strong>Installeren</strong>.</li>
      </ol>`;
    }
    if (platform === 'desktop-chromium') {
      return `<ol>
        <li>Gebruik de knop <em>App installeren</em> hieronder, of</li>
        <li>Klik op het installeerpictogram <strong>\u2B07</strong> rechts in de
          adresbalk.</li>
        <li>Als alternatief: menu <span class="key">\u22EE</span>
          &rarr; <strong>Apps</strong> &rarr; <strong>Deze site installeren</strong>.</li>
      </ol>`;
    }
    if (platform === 'firefox') {
      return `<ol>
        <li>Firefox desktop ondersteunt PWA-installatie niet standaard.</li>
        <li>Maak een snelkoppeling op het bureaublad via
          <strong>Bestand</strong> &rarr; <strong>Pagina opslaan als...</strong>
          of gebruik Firefox op Android, waar <em>Toevoegen aan startscherm</em>
          wel werkt.</li>
      </ol>`;
    }
    if (platform === 'desktop-safari') {
      return `<ol>
        <li>Ga naar het menu <strong>Archief</strong> &rarr;
          <strong>Voeg toe aan Dock</strong> (macOS Sonoma of nieuwer).</li>
        <li>De app verschijnt in het Dock en werkt offline.</li>
      </ol>`;
    }
    return `<ol>
      <li>Uw browser is niet herkend. Zoek in het menu naar
        <em>"Installeren"</em> of <em>"Toevoegen aan startscherm"</em>.</li>
    </ol>`;
  }

  function benefitsBlock() {
    return `<div class="install-benefits">
      <h3>Voordelen van installatie</h3>
      <ul>
        <li>App opent vanaf uw startscherm, zonder browseradresbalk.</li>
        <li>Werkt offline \u2014 inspecties zijn ook zonder dekking in te vullen.</li>
        <li>Foto's en gegevens blijven lokaal opgeslagen op het apparaat.</li>
        <li>Snellere start omdat bestanden in de cache staan.</li>
      </ul>
    </div>`;
  }

  function mainCTA() {
    if (A.pwa.isFileProtocol()) return '';
    if (A.pwa.isStandalone()) return '';
    return `<button class="install-cta" id="installCta"
      ${A.pwa.canPromptInstall() ? '' : 'disabled'}>
      ${A.pwa.canPromptInstall() ? 'App installeren' : 'Installatie niet beschikbaar via knop'}
    </button>`;
  }

  A.renderInstallScreen = function () {
    const body = document.getElementById('installBody');
    const platform = A.pwa.getPlatform();
    body.innerHTML = `
      <div class="install-hero">
        <img src="icons/icon.svg" alt="Duimstok app-icoon">
        <h2>Duimstok-inspecties als app</h2>
        <p>Installeer deze applicatie op uw telefoon, tablet of desktop
          voor offline gebruik in het veld.</p>
      </div>
      ${statusBlock()}
      <div class="install-steps">
        <h3>Installatie op uw apparaat</h3>
        ${stepsForPlatform(platform)}
        ${mainCTA()}
      </div>
      ${benefitsBlock()}
    `;

    const cta = document.getElementById('installCta');
    if (cta && !cta.disabled) {
      cta.addEventListener('click', async () => {
        cta.disabled = true;
        cta.textContent = 'Bezig...';
        await A.pwa.promptInstall();
        A.renderInstallScreen();
      });
    }
  };

  A.openInstallScreen = function () {
    A.renderInstallScreen();
    A.showScreen('screen-install');
  };

  document.addEventListener('pwa:install-available', () => {
    if (document.getElementById('screen-install').classList.contains('active')) {
      A.renderInstallScreen();
    }
  });

  document.addEventListener('pwa:installed', () => {
    if (document.getElementById('screen-install').classList.contains('active')) {
      A.renderInstallScreen();
    }
  });
})(window.App.Application);