/**
 * gen-display-preview.js
 * ----------------------
 * Lokales Admin-Werkzeug: erstellt Bildschirmfotos aller Simulationen
 * (Onboarding/Start + Spielverlauf) in zwei Auflösungen (iPad + Full HD)
 * und generiert daraus eine statische Galerie-Seite.
 *
 * Ausgabe:  App/.LocalDeveloperTools/display-preview/
 *             shots/<id>__<vp>__<screen>.png
 *             display_preview.html
 *
 * Start:    node gen-display-preview.js
 */
const { chromium } = require('@playwright/test');
const fs = require('fs');
const path = require('path');

// --- Pfade ---------------------------------------------------------------
const APP_DIR   = 'C:/xampp/htdocs/geograsim/App';
const SIMS_DIR  = path.join(APP_DIR, 'sims');
const OUT_DIR   = path.join(APP_DIR, '.LocalDeveloperTools', 'display-preview');
const SHOTS_DIR = path.join(OUT_DIR, 'shots');
const BASE_URL  = 'http://localhost/geograsim/App/sims';

// --- Viewports -----------------------------------------------------------
const VIEWPORTS = [
  { key: 'ipad',   label: 'iPad',    w: 1180, h: 820  },
  { key: 'fullhd', label: 'Full HD', w: 1920, h: 1080 },
];

// --- Freundliche Namen ---------------------------------------------------
const NAMES = {
  weltkueche:      '🍲 Welt-Küche',
  fluss:           '🌊 Flussmanagement',
  heli:            '🚁 Helikopter-Navigation',
  energiemanager:  '⚡ Energiemanager',
  'eu-werkstatt':  '🇪🇺 EU-Werkstatt',
  farmer:          '🌾 Farmer',
  busfahrt:        '🚌 Busfahrt',
  sonnensystem:    '🪐 Sonnensystem',
  tourismustal:    '🏔️ Tourismustal',
  tourismusregion: '🗺️ Tourismusregion',
  logistik:        '🚚 Logistik',
  fluggesellschaft:'✈️ Fluggesellschaft',
  staustufen:      '💧 Staustufen',
  entscheidungstag:'📅 Entscheidungstag',
  vulkan:          '🌋 Vulkan',
  wal:             '🐋 Wal',
  kofferdetektiv:  '🧳 Kofferdetektiv',
  stadt:           '🏙️ Stadt',
};

// --- Sims finden ---------------------------------------------------------
function findSims() {
  return fs.readdirSync(SIMS_DIR, { withFileTypes: true })
    .filter(d => d.isDirectory() && fs.existsSync(path.join(SIMS_DIR, d.name, 'game.html')))
    .map(d => d.name)
    .sort();
}

// --- In-Page: sichtbaren Start-/Weiter-Button klicken --------------------
async function clickStartLike(page) {
  return await page.evaluate(() => {
    const isVisible = (el) => {
      if (!el) return false;
      const r = el.getBoundingClientRect();
      if (r.width < 4 || r.height < 4) return false;
      if (r.bottom < 0 || r.right < 0) return false;
      const st = getComputedStyle(el);
      return st.visibility !== 'hidden' && st.display !== 'none' && st.opacity !== '0'
        && !el.disabled && !el.classList.contains('hidden');
    };
    // 1) Prioritäts-Selektoren (bekannte Start-/Primary-Buttons der Plattform)
    const prio = [
      '.ggs-qi-btn-primary', '[data-action="start"]',
      '#btnStart', '#obs-start', '#phase-start',
      '.sn-btn-primary', '.ggs-btn-primary',
      '.era-card-cta', '.scene-btn',
      '.map-btn', '.btn.primary', '.primary', '.next',
    ];
    for (const sel of prio) {
      const el = [...document.querySelectorAll(sel)].find(isVisible);
      if (el) { el.click(); return sel + ' :: ' + (el.textContent || '').trim().slice(0, 24); }
    }
    // 2) Text-basiert — führende Emojis/Pfeile/Ziffern strippen, dann Anfang prüfen
    const clean = (s) => (s || '').replace(/^[^\p{L}]+/u, '').trim();
    const rx = /^(los geht|los!|los →|los\b|start|starten|jetzt starten|neue partie|partie starten|spielen|spiel starten|beginnen|anfangen|einsteigen|erntejahr starten|routenplanung starten|in dieser welt starten|szene|weiter|verstanden|fertig|karte wählen|auswählen)/i;
    const cands = [...document.querySelectorAll('button, a.btn, a[role=button], .btn, [role=button], [onclick]')];
    const el = cands.find(e => {
      if (!isVisible(e)) return false;
      const t = clean(e.textContent);
      return t.length > 0 && t.length < 44 && rx.test(t);
    });
    if (el) { el.click(); return 'text :: ' + (el.textContent || '').trim().slice(0, 24); }
    return null;
  }).catch(() => null);
}

// --- Ein Screenshot ------------------------------------------------------
async function shoot(page, file) {
  try {
    await page.screenshot({ path: file }); // Viewport-Ausschnitt (exakte Auflösung)
    return true;
  } catch (e) {
    console.log('   ! Screenshot-Fehler:', e.message.slice(0, 80));
    return false;
  }
}

(async () => {
  const sims = findSims();
  // Optional: nur bestimmte Sims neu schießen (HTML wird immer komplett neu erzeugt).
  const onlyArg = (process.argv.find(a => a.startsWith('--only=')) || '').slice(7);
  const shootList = onlyArg ? onlyArg.split(',').map(s => s.trim()).filter(Boolean) : sims;
  console.log('Gefundene Sims (' + sims.length + '):', sims.join(', '));
  if (onlyArg) console.log('Neu geschossen werden nur:', shootList.join(', '));
  fs.mkdirSync(SHOTS_DIR, { recursive: true });

  const browser = await chromium.launch();
  // results[id][vp] = { start:bool, play:bool, play2:bool, errs:[] }
  const results = {};

  for (const vp of VIEWPORTS) {
    console.log('\n===== Viewport ' + vp.label + ' (' + vp.w + '×' + vp.h + ') =====');
    for (const id of shootList) {
      results[id] = results[id] || {};
      const r = { start: false, play: false, play2: false, errs: [] };
      results[id][vp.key] = r;

      const ctx = await browser.newContext({
        viewport: { width: vp.w, height: vp.h },
        deviceScaleFactor: 1,
      });
      const page = await ctx.newPage();
      page.on('pageerror', e => { if (r.errs.length < 4) r.errs.push('PE:' + e.message.slice(0, 60)); });
      page.on('console', m => { if (m.type() === 'error' && r.errs.length < 4) r.errs.push('CON:' + m.text().slice(0, 60)); });

      const url = BASE_URL + '/' + id + '/game.html';
      try {
        await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
      } catch (e) {
        r.errs.push('GOTO:' + e.message.slice(0, 50));
      }

      // 1) Onboarding/Start
      await page.waitForTimeout(2500);
      r.start = await shoot(page, path.join(SHOTS_DIR, id + '__' + vp.key + '__start.png'));

      // 2) Spielverlauf: mehrere Runden klicken (Onboarding schließen -> Menü -> Spiel -> Tutorial weg)
      let clicks = 0, last = null;
      for (let round = 0; round < 4; round++) {
        const clicked = await clickStartLike(page);
        if (!clicked) break;
        clicks++;
        if (clicked === last) break; // gleiches Element erneut -> Abbruch
        last = clicked;
        await page.waitForTimeout(800);
      }
      if (clicks > 0) {
        await page.waitForTimeout(2500);
        r.play = await shoot(page, path.join(SHOTS_DIR, id + '__' + vp.key + '__play.png'));

        // 3) optionaler zweiter Play-Screen: noch ein Weiter/Start, falls vorhanden
        const more = await clickStartLike(page);
        if (more && more !== last) {
          await page.waitForTimeout(2000);
          r.play2 = await shoot(page, path.join(SHOTS_DIR, id + '__' + vp.key + '__play2.png'));
        }
      }

      const flags = [r.start ? 'S' : '-', r.play ? 'P' : '-', r.play2 ? 'P2' : '--'].join(' ');
      console.log('  ' + id.padEnd(18) + '[' + flags + ']'
        + (clicks ? '  clicks=' + clicks : '  (kein Start-Button)')
        + (r.errs.length ? '  ' + r.errs.slice(0, 2).join(' | ') : ''));

      await ctx.close();
    }
  }

  await browser.close();

  // --- HTML generieren ---------------------------------------------------
  const genDate = new Date().toLocaleString('de-AT', {
    year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit',
  });

  const screens = [
    { key: 'start', label: 'Onboarding / Start' },
    { key: 'play',  label: 'Spielverlauf' },
    { key: 'play2', label: 'Spielverlauf (2)' },
  ];

  function cell(id, vp, screenKey) {
    const rel = 'shots/' + id + '__' + vp.key + '__' + screenKey + '.png';
    const abs = path.join(SHOTS_DIR, id + '__' + vp.key + '__' + screenKey + '.png');
    if (fs.existsSync(abs)) {
      return '<a href="' + rel + '" target="_blank" class="shot">'
        + '<img loading="lazy" src="' + rel + '" alt="' + id + ' ' + vp.label + ' ' + screenKey + '">'
        + '<span class="cap">' + vp.label + ' · ' + vp.w + '×' + vp.h + '</span></a>';
    }
    return '<div class="missing">— kein Screenshot —<span class="cap">' + vp.label + '</span></div>';
  }

  let blocks = '';
  for (const id of sims) {
    const name = NAMES[id] || (id.charAt(0).toUpperCase() + id.slice(1));
    // nur Screen-Zeilen zeigen, die mindestens ein Bild haben
    const activeScreens = screens.filter(sc =>
      VIEWPORTS.some(vp => fs.existsSync(path.join(SHOTS_DIR, id + '__' + vp.key + '__' + sc.key + '.png')))
    );
    const rows = (activeScreens.length ? activeScreens : [screens[0]]).map(sc =>
      '<tr><th class="screen">' + sc.label + '</th>'
      + VIEWPORTS.map(vp => '<td>' + cell(id, vp, sc.key) + '</td>').join('')
      + '</tr>'
    ).join('\n');

    blocks += '\n<section class="sim" id="sim-' + id + '">'
      + '<h2>' + name + ' <span class="simid">' + id + '</span></h2>'
      + '<table><thead><tr><th class="screen"></th>'
      + VIEWPORTS.map(vp => '<th>' + vp.label + ' <span class="res">' + vp.w + '×' + vp.h + '</span></th>').join('')
      + '</tr></thead><tbody>' + rows + '</tbody></table></section>';
  }

  const nav = sims.map(id =>
    '<a href="#sim-' + id + '">' + (NAMES[id] || id) + '</a>'
  ).join('');

  const html = `<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Display-Vorschau (lokal)</title>
<style>
  :root { --bg:#f4f2ec; --card:#fff; --ink:#1f2b26; --accent:#1f4b37; --muted:#6b7a72; --line:rgba(0,0,0,.08); }
  * { box-sizing:border-box; }
  body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); }
  header { background:var(--accent); color:#fff; padding:20px 28px; position:sticky; top:0; z-index:10; box-shadow:0 2px 10px rgba(0,0,0,.15); }
  header h1 { margin:0; font-size:1.4rem; }
  header .meta { font-size:.82rem; opacity:.85; margin-top:4px; }
  nav.toc { display:flex; flex-wrap:wrap; gap:6px; padding:14px 28px; background:#e9e6dd; border-bottom:1px solid var(--line); }
  nav.toc a { font-size:.82rem; text-decoration:none; color:var(--accent); background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px 11px; }
  nav.toc a:hover { background:var(--accent); color:#fff; }
  main { padding:24px 28px 60px; max-width:1500px; margin:0 auto; }
  section.sim { background:var(--card); border-radius:14px; padding:18px 20px 22px; margin-bottom:26px; box-shadow:0 4px 14px rgba(0,0,0,.06); scroll-margin-top:90px; }
  section.sim h2 { margin:0 0 14px; font-size:1.25rem; color:var(--accent); display:flex; align-items:baseline; gap:10px; }
  .simid { font-size:.72rem; font-weight:600; color:var(--muted); background:#eef0ec; padding:2px 8px; border-radius:6px; letter-spacing:.03em; }
  table { width:100%; border-collapse:collapse; table-layout:fixed; }
  thead th { text-align:left; font-size:.82rem; color:var(--muted); padding:0 0 8px; font-weight:700; }
  thead th .res { font-weight:500; opacity:.7; }
  th.screen { width:150px; vertical-align:top; font-size:.9rem; color:var(--ink); padding-top:8px; }
  td { padding:6px 6px 14px; vertical-align:top; width:calc((100% - 150px)/2); }
  a.shot { display:block; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#0d1512; text-decoration:none; }
  a.shot img { display:block; width:100%; max-width:100%; height:auto; }
  .cap { display:block; font-size:.72rem; color:var(--muted); padding:5px 8px; background:#fafafa; border-top:1px solid var(--line); }
  a.shot .cap { color:#c8d4ce; background:#141f1a; border-top:none; }
  .missing { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:120px; border:1px dashed var(--line); border-radius:8px; color:var(--muted); font-size:.85rem; background:#faf9f5; }
  .missing .cap { background:none; border:none; }
  @media (max-width:820px){ th.screen{width:90px;} td{width:calc((100% - 90px)/2);} }
</style>
</head>
<body>
<header>
  <h1>Display-Vorschau (lokal)</h1>
  <div class="meta">${sims.length} Simulationen · je Onboarding/Start + Spielverlauf · iPad 1180×820 &amp; Full HD 1920×1080 · generiert am ${genDate}</div>
</header>
<nav class="toc">${nav}</nav>
<main>${blocks}
</main>
</body>
</html>`;

  const outFile = path.join(OUT_DIR, 'display_preview.html');
  fs.writeFileSync(outFile, html, 'utf8');
  console.log('\nHTML geschrieben: ' + outFile);

  // --- Zusammenfassung ---------------------------------------------------
  console.log('\n===== ZUSAMMENFASSUNG =====');
  let totalShots = 0, missingPlay = [];
  for (const id of sims) {
    const parts = [];
    for (const vp of VIEWPORTS) {
      const r = (results[id] && results[id][vp.key]) || {};
      const n = (r.start ? 1 : 0) + (r.play ? 1 : 0) + (r.play2 ? 1 : 0);
      totalShots += n;
      parts.push(vp.label + ':' + n + '/3(' + (r.start ? 'S' : '-') + (r.play ? 'P' : '-') + (r.play2 ? '2' : '-') + ')');
      if (!r.play) missingPlay.push(id + '/' + vp.key);
    }
    console.log('  ' + id.padEnd(18) + parts.join('  '));
  }
  console.log('\nScreenshots gesamt: ' + totalShots);
  console.log('Fehlende Play-Screens: ' + (missingPlay.length ? missingPlay.join(', ') : 'keine'));
  console.log('Seite: http://localhost/geograsim/App/.LocalDeveloperTools/display-preview/display_preview.html');
})();