const fs = require('fs');
const path = require('path');

/* ============================================================
   TROX – Kartenrückseite Generator
       node generate_back.js tgc | original | both
   ============================================================ */

const MODE = (process.argv[2] || 'both').toLowerCase();

const SPECS = {
    tgc:      { width: 825, height: 1125, safe: 75, cornerRadius: 0,  dir: 'karten_export_tgc' },
    original: { width: 694, height: 1069, safe: 35, cornerRadius: 35, dir: 'karten_export_original' }
};

function buildBack(spec) {
    const { width, height, safe, cornerRadius } = spec;
    const cx = width / 2, cy = height / 2;

    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
    <defs>
        <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#111827" />
            <stop offset="100%" stop-color="#1F2937" />
        </linearGradient>
        <linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#D4AF37" />
            <stop offset="50%" stop-color="#F3E5AB" />
            <stop offset="100%" stop-color="#AA7C11" />
        </linearGradient>
        <g id="pattern-quarter">
            <path d="M 0 0 L 150 150 L 0 300 Z" fill="none" stroke="#E53935" stroke-width="2" opacity="0.4"/>
            <path d="M 0 0 L 120 120 L 0 240 Z" fill="none" stroke="#FDD835" stroke-width="2" opacity="0.4"/>
            <path d="M 0 0 L 90 90 L 0 180 Z" fill="none" stroke="#43A047" stroke-width="2" opacity="0.4"/>
            <path d="M 0 0 L 60 60 L 0 120 Z" fill="none" stroke="#2196F3" stroke-width="2" opacity="0.3"/>
        </g>
    </defs>

    <!-- Vollflächiger Hintergrund bis zum Bleed-Rand -->
    <rect width="${width}" height="${height}" ${cornerRadius ? `rx="${cornerRadius}"` : ''} fill="url(#bgGradient)" />

    <!-- Zierrahmen an der Safe Zone -->
    <rect x="${safe}" y="${safe}" width="${width - 2 * safe}" height="${height - 2 * safe}" rx="${Math.max(0, cornerRadius - 15)}" fill="none" stroke="url(#goldGradient)" stroke-width="3" opacity="0.8" />
    <rect x="${safe + 10}" y="${safe + 10}" width="${width - 2 * safe - 20}" height="${height - 2 * safe - 20}" rx="${Math.max(0, cornerRadius - 20)}" fill="none" stroke="#ffffff" stroke-width="1" opacity="0.1" />

    <!-- Eckornamente (innerhalb Safe Zone) -->
    <g transform="translate(${safe}, ${safe})">
        <use href="#pattern-quarter" />
        <use href="#pattern-quarter" transform="rotate(90) scale(1,-1)" />
    </g>
    <g transform="translate(${width - safe}, ${safe}) scale(-1, 1)">
        <use href="#pattern-quarter" />
        <use href="#pattern-quarter" transform="rotate(90) scale(1,-1)" />
    </g>
    <g transform="translate(${safe}, ${height - safe}) scale(1, -1)">
        <use href="#pattern-quarter" />
        <use href="#pattern-quarter" transform="rotate(90) scale(1,-1)" />
    </g>
    <g transform="translate(${width - safe}, ${height - safe}) scale(-1, -1)">
        <use href="#pattern-quarter" />
        <use href="#pattern-quarter" transform="rotate(90) scale(1,-1)" />
    </g>

    <!-- Zentrales Emblem -->
    <g transform="translate(${cx}, ${cy})">
        <rect x="-120" y="-120" width="240" height="240" rx="20" fill="none" stroke="url(#goldGradient)" stroke-width="4" transform="rotate(45)" />
        <rect x="-100" y="-100" width="200" height="200" rx="15" fill="none" stroke="#ffffff" stroke-width="1" opacity="0.2" transform="rotate(45)" />
        <circle cx="0" cy="0" r="70" fill="none" stroke="#E53935" stroke-width="3" opacity="0.7" />
        <circle cx="0" cy="0" r="60" fill="none" stroke="#FDD835" stroke-width="3" opacity="0.7" />
        <circle cx="0" cy="0" r="50" fill="none" stroke="#43A047" stroke-width="3" opacity="0.7" />
        <circle cx="0" cy="0" r="40" fill="none" stroke="#212121" stroke-width="3" opacity="0.7" />
        <circle cx="0" cy="0" r="30" fill="#111827" stroke="url(#goldGradient)" stroke-width="2" />

        <g transform="translate(0, -250)">
            <text x="0" y="0" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-weight="900" font-size="36" fill="url(#goldGradient)" text-anchor="middle" letter-spacing="6">TROX</text>
        </g>
        <g transform="rotate(180) translate(0, -250)">
            <text x="0" y="0" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-weight="900" font-size="36" fill="url(#goldGradient)" text-anchor="middle" letter-spacing="6">TROX</text>
        </g>
    </g>
</svg>`;
}

function generate(variant) {
    const spec = SPECS[variant];
    const outputDir = path.join(__dirname, spec.dir);
    if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, { recursive: true });
    fs.writeFileSync(path.join(outputDir, 'trox_card_back.svg'), buildBack(spec));
    console.log(`  [${variant}] Rückseite -> ${spec.dir}/trox_card_back.svg  (${spec.width}x${spec.height})`);
}

console.log('TROX – Rückseite wird generiert ...');
if (MODE === 'tgc' || MODE === 'both') generate('tgc');
if (MODE === 'original' || MODE === 'both') generate('original');
console.log('Fertig.');