/**
 * ============================================================
 * SVGarden — https://www.svgarden.dev
 * Author : Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File   : scripts/new-snippet.mjs
 * Desc   : Interactive scaffolder — creates a compliant snippet file skeleton
 * ============================================================
 */
import { writeFile, mkdir, access } from 'node:fs/promises';
import path from 'node:path';
import readline from 'node:readline/promises';
import { SNIPPETS_DIR, CATEGORIES, DIFFICULTIES, attributionHeader } from '../src/lib/snippets.mjs';

const rl = readline.createInterface({ input: process.stdin, output: process.stdout });

const ask = async (q, { def, valid } = {}) => {
  for (;;) {
    const raw = (await rl.question(def ? `${q} [${def}]: ` : `${q}: `)).trim();
    const answer = raw || def || '';
    if (!answer) { console.log('  → required.'); continue; }
    if (valid && !valid.includes(answer)) { console.log(`  → one of: ${valid.join(', ')}`); continue; }
    return answer;
  }
};

console.log('SVGarden — new snippet scaffolder\n');

const title = await ask('Title (e.g. "Dash spinner")');
const slug = await ask('Slug (kebab-case)', { def: title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') });
const category = await ask('Category', { valid: CATEGORIES, def: 'loaders' });
const difficulty = await ask('Difficulty', { valid: DIFFICULTIES, def: 'beginner' });
const desc = await ask('One-line description');
const tags = (await ask('Tags (comma-separated)', { def: category.replace(/s$/, '') })).split(',').map((t) => t.trim()).filter(Boolean);
rl.close();

const relPath = `snippets/${category}/${slug}.html`;
const file = path.join(SNIPPETS_DIR, category, `${slug}.html`);

try {
  await access(file);
  console.error(`✖ ${relPath} already exists.`);
  process.exit(1);
} catch { /* good — does not exist */ }

const today = new Date().toISOString().slice(0, 10);
const cls = `sg-${slug}`;

const content = `${attributionHeader(relPath, desc)}
<!--svgarden
title: ${title}
slug: ${slug}
category: ${category}
tags: [${tags.join(', ')}]
difficulty: ${difficulty}
techniques: [TODO]
how_it_works: >
  TODO — explain the technique in 2 to 4 sentences that genuinely teach it.
  What property animates, why it produces this visual effect, and what the
  reader should tweak first to make it their own.
customizable:
  - { var: "--sg-color",    label: "Color", type: color, default: "#7F77DD" }
  - { var: "--sg-size",     label: "Size",  type: range, min: 24, max: 120, default: 48, unit: px }
  - { var: "--sg-duration", label: "Speed", type: range, min: 0.5, max: 4, step: 0.1, default: 1.5, unit: s }
created: ${today}
-->
<div class="${cls}" style="--sg-color:#7F77DD; --sg-size:48px; --sg-duration:1.5s;">
  <svg viewBox="0 0 50 50" width="48" height="48" aria-hidden="true" focusable="false">
    <!-- TODO: your SVG -->
    <circle cx="25" cy="25" r="20" fill="none" stroke="var(--sg-color)" stroke-width="4"/>
  </svg>
</div>
<style>
  .${cls} { width: var(--sg-size); height: var(--sg-size); }
  .${cls} svg { display: block; width: 100%; height: 100%; }
  /* TODO: @keyframes ${cls}-anim { } */
</style>
`;

await mkdir(path.dirname(file), { recursive: true });
await writeFile(file, content, 'utf8');
console.log(`✔ created ${relPath} — fill in the TODOs, then run: npm run validate`);