/*
 * Zeichnet die Bildkarten des Solarchecks von EB Solar und rastert sie zu PNG.
 *
 * Die Formularbausteine zeigen eine Auswahl als Bildkarten, sobald eine Option ein Bild aus der
 * Mediathek hat - und die Mediathek nimmt JPEG, PNG und WebP, kein SVG. Deshalb entstehen die
 * Symbole hier als SVG (leicht zu ändern, alles in einer Datei) und werden mit Chromium auf
 * 800 × 600 gerastert, dem Seitenverhältnis 4:3 der Karte. Stil wie die übrigen Symbole der
 * Website: dünne Linie in Tinte, runde Enden, ein roter Akzent, helle Fläche dahinter.
 *
 *   node scripts/build-ebsolar-options.mjs            → var/ebsolar-assets/options/*.png und *.svg
 */
import { chromium } from 'playwright';
import { mkdir, writeFile } from 'node:fs/promises';

const ziel = process.argv[2] || 'var/ebsolar-assets/options';
const TINTE = '#252b30', ROT = '#b52c2c', HELL = '#f5f6f6', PAPIER = '#ffffff', GRAU = '#c9ced0';

/** Ein Bild: 800 × 600, helle Fläche, Inhalt in der Mitte. */
const bild = (inhalt) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
<rect width="800" height="600" fill="${HELL}"/>
<g fill="none" stroke="${TINTE}" stroke-width="14" stroke-linecap="round" stroke-linejoin="round">${inhalt}</g>
</svg>`;

/** Eine Person: Kopf und Schultern. */
const person = (x, y, s = 1, farbe = TINTE) => `
<circle cx="${x}" cy="${y - 120 * s}" r="${46 * s}" stroke="${farbe}"/>
<path d="M${x - 88 * s} ${y + 70 * s}v-${30 * s}a${88 * s} ${88 * s} 0 0 1 ${176 * s} 0v${30 * s}" stroke="${farbe}"/>`;

/** Ein Haus: Wände plus Dach nach Angabe; das Dach ist der Akzent. */
const haus = (dach) => `
<path d="M190 520V300M610 520V300M150 520h500"/>
<rect x="360" y="410" width="80" height="110" rx="6"/>
${dach}`;

/** Ein Dach als schräge Fläche mit Modulen im Raster. */
const module = (spalten, zeilen) => {
    const x0 = 160, y0 = 150, b = 480, h = 300, scher = 90;
    const zellen = [];
    for (let z = 0; z < zeilen; z++) {
        for (let s = 0; s < spalten; s++) {
            const bx = b / spalten, bh = h / zeilen;
            const x = x0 + s * bx + (z * bh) * (scher / h), y = y0 + z * bh;
            zellen.push(`<path d="M${x + 8} ${y + 8}h${bx - 16}l${(bh - 16) * scher / h} ${bh - 16}h-${bx - 16}z" fill="${ROT}" fill-opacity=".14" stroke="${ROT}" stroke-width="8"/>`);
        }
    }
    return `<path d="M${x0} ${y0}h${b}l${scher} ${h}h-${b}z"/>${zellen.join('')}`;
};

const fragezeichen = (x, y, s = 1) => `<path d="M${x - 40 * s} ${y - 50 * s}a${40 * s} ${40 * s} 0 1 1 ${58 * s} ${36 * s}c-${14 * s} ${9 * s}-${18 * s} ${18 * s}-${18 * s} ${34 * s}" stroke="${ROT}"/><circle cx="${x}" cy="${y + 65 * s}" r="9" fill="${ROT}" stroke="none"/>`;

const batterie = (inhalt, farbe = TINTE) => `
<rect x="190" y="200" width="380" height="200" rx="26" stroke="${farbe}"/>
<path d="M570 260h30a20 20 0 0 1 20 20v40a20 20 0 0 1-20 20h-30" stroke="${farbe}"/>
${inhalt}`;

const bilder = {
    // Wie viele Personen leben im Haushalt?
    'personen-1': person(400, 320, 1.3),
    'personen-2': person(300, 320, 1.15) + person(500, 320, 1.15),
    'personen-3-4': person(210, 330) + person(400, 330) + person(590, 330),
    'personen-4-plus': person(160, 330, .85) + person(320, 330, .85) + person(480, 330, .85) + person(640, 330, .85)
        + `<path d="M715 140v70M680 175h70" stroke="${ROT}"/>`,

    // Welche Form hat Ihr Dach?
    'dach-flach': haus(`<path d="M150 300h500" stroke="${ROT}"/><path d="M200 300v-40h400v40" stroke="${ROT}"/>`),
    'dach-sattel': haus(`<path d="M140 320 400 120l260 200" stroke="${ROT}"/>`),
    'dach-pult': haus(`<path d="M150 330 650 190" stroke="${ROT}"/><path d="M610 300v-95" />`),
    'dach-versetzt': `
<path d="M120 520h560M160 520V370M440 520V270M660 520V330"/>
<rect x="260" y="420" width="70" height="100" rx="6"/>
<path d="M120 380 290 250l150 120" stroke="${ROT}"/><path d="M440 290 560 180l130 140" stroke="${ROT}"/>`,
    'dach-sonstiges': haus(`<path d="M140 320 400 120l260 200" stroke="${GRAU}"/>`) + fragezeichen(400, 250, 1.1),

    // Wie groß ist Ihre Dachfläche?
    'flaeche-50': module(2, 1),
    'flaeche-100': module(3, 2),
    'flaeche-200': module(5, 3),
    'flaeche-200-plus': module(7, 4),
    'flaeche-unsicher': `<path d="M160 150h480l90 300H160z" stroke="${GRAU}"/>` + fragezeichen(400, 300, 1.4),

    // Aus welchem Material besteht die Dacheindeckung?
    'eindeckung-ziegel': [0, 1, 2, 3].map(z => [0, 1, 2, 3, 4].map(s => {
        if (z % 2 === 1 && s === 4) return '';
        const x = 150 + s * 100 + (z % 2) * 50, y = 170 + z * 80;
        return `<path d="M${x} ${y}a50 50 0 0 0 100 0" stroke="${z === 2 && s === 2 ? ROT : TINTE}"/>`;
    }).join('')).join(''),
    'eindeckung-bitumen': `
<path d="M130 440h540v50H130z"/>
<circle cx="250" cy="360" r="70"/><circle cx="250" cy="360" r="26"/>
<path d="M320 400h340" stroke="${ROT}" stroke-width="22"/>
<path d="M250 430h410" stroke="${ROT}" stroke-width="22" stroke-opacity=".35"/>`,
    'eindeckung-blech': `
<path d="M120 340h50l30-70h60l30 70h60l30-70h60l30 70h60l30-70h60l30 70h30"/>
<path d="M120 420h50l30-70h60l30 70h60l30-70h60l30 70h60l30-70h60l30 70h30" stroke="${GRAU}"/>
<path d="M120 340v80M680 340v80" stroke="${GRAU}"/>
<path d="M350 340l30-70h60l30 70" stroke="${ROT}"/>`,
    'eindeckung-anderes': `<rect x="200" y="150" width="400" height="300" rx="20" stroke="${GRAU}"/>` + fragezeichen(400, 300, 1.4),

    // Wünschen Sie einen Stromspeicher?
    'speicher-ja': batterie(`<path d="M420 230 350 310h60l-30 70 70-80h-60z" fill="${ROT}" stroke="${ROT}" stroke-width="10"/>`),
    'speicher-nein': batterie('', GRAU) + `<path d="M190 470 610 130" stroke="${ROT}"/>`,
};

await mkdir(ziel, { recursive: true });
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 800, height: 600 }, deviceScaleFactor: 1 });
for (const [name, inhalt] of Object.entries(bilder)) {
    const svg = bild(inhalt);
    await writeFile(`${ziel}/${name}.svg`, svg);
    await page.setContent(`<!doctype html><body style="margin:0;background:${PAPIER}">${svg}</body>`);
    await page.locator('svg').screenshot({ path: `${ziel}/${name}.png`, omitBackground: false });
    console.log('gezeichnet:', name);
}
await browser.close();