Revealjs

/* Base reveal.js styles
 *
 * Copy this file as styles.css for each new presentation.
 * Customize the CSS variables (especially colors) for your theme.
 *
 * IMPORTANT: All font sizes use pt (points) for predictable sizing.
 * Base text is intentionally small (16pt) to fit content-heavy slides.
 * Use .text-lg, .text-xl, etc. classes when slides have less content.
 */

/* ===========================================
   CSS VARIABLES - Customize these for each presentation
   =========================================== */
:root {
  /* ===========================================
     BACKGROUND COLORS
     For dark presentations, change to dark colors (e.g., #1a1a2e, #0d1117)
     Then update --text-color and --muted-color to light colors below.
     =========================================== */
  --background-color: #ffffff;              /* Main slide background */
  --section-divider-bg: #ffffff;            /* Section divider background (set different for contrast) */

  /* Typography - ALWAYS use pt for font sizes */
  --heading-font: "Source Sans Pro", Helvetica, sans-serif;
  --body-font: "Source Sans Pro", Helvetica, sans-serif;
  --base-font-size: 32px;   /* Only px value - sets reveal.js base */
  --text-size: 16pt;        /* Base body text - intentionally small */
  --h1-size: 48pt;
  --h2-size: 36pt;
  --h3-size: 24pt;
  --footnote-size: 11pt;

  /* Colors - CUSTOMIZE THESE */
  --primary-color: #2196F3;    /* Main accent color */
  --secondary-color: #ff9800;  /* Secondary accent */
  --text-color: #222;          /* Main text - use light color (e.g., #f0f0f0) for dark backgrounds */
  --muted-color: #666;         /* Secondary text - use lighter color for dark backgrounds */
  --line-color: #333;          /* Decorative lines */

  /* Layout */
  --slide-padding: 60px;
  --slide-padding-top: 40px;
  --content-gap: 30px;

  /* Border radius for custom components */
  --box-radius: 8px;           /* Set to 0 for sharp corners */
}

/* ===========================================
   BASE STYLES - Override reveal.js defaults
   =========================================== */

.reveal {
  font-family: var(--body-font);
  font-size: var(--base-font-size);
}

/* Restore bold after reset.css strips it with font: inherit */
.reveal strong,
.reveal b {
  font-weight: bold;
}

/* Apply background colors */
.reveal-viewport {
  background-color: var(--background-color);
}

/* Section divider background via data-state */
.reveal-viewport.is-section-divider .slide-background.present {
  background-color: var(--section-divider-bg) !important;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  font-family: var(--heading-font);
  text-transform: none;
  color: var(--text-color);
  font-weight: 600;
  line-height: 1.2;
}

.reveal h1 { font-size: var(--h1-size); }
.reveal h2 { font-size: var(--h2-size); margin-bottom: 0; }
.reveal h3 { font-size: var(--h3-size); }

.reveal p,
.reveal li,
.reveal td,
.reveal th,
.reveal blockquote {
  font-size: var(--text-size);
  color: var(--text-color);
  line-height: 1.5;
}

/* ===========================================
   LISTS
   =========================================== */

.reveal ul {
  list-style: none;
  padding-left: 0;
  margin: 15px 0;
}

.reveal ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
}

.reveal ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--text-color);
  border-radius: 50%;
}

.reveal ul ul li::before {
  background: var(--muted-color);
  width: 6px;
  height: 6px;
}

/* Prevent double-sizing for nested elements */
.reveal blockquote p {
  font-size: inherit;
}

/* ===========================================
   SLIDE LAYOUT
   =========================================== */

.reveal .slides section {
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  padding: var(--slide-padding-top) var(--slide-padding) var(--slide-padding) var(--slide-padding) !important;
  box-sizing: border-box;
  text-align: left;
}

/* Vertical stack wrapper - no padding, just pass through */
.reveal .slides section.stack {
  padding: 0 !important;
}

/* Content area - fills remaining space */
.reveal .slides section > .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: var(--content-gap);
  text-align: left;
}

/* Footnotes at bottom */
.reveal .slides section > .footnote {
  position: absolute;
  bottom: 15px;
  left: var(--slide-padding);
  right: var(--slide-padding);
  font-size: var(--footnote-size);
  color: var(--muted-color);
}

/* ===========================================
   SECTION DIVIDERS - Centered title slides
   =========================================== */

.reveal .slides section.section-divider {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center;
}

.reveal .slides section.section-divider h1 {
  font-size: 56pt;
  text-align: center;
}

.reveal .slides section.section-divider p {
  font-size: 20pt;
  color: var(--muted-color);
}

/* ===========================================
   TEXT SIZE UTILITIES

   Base text is 16pt - use these to scale UP when
   slides have less content and you want to fill space.
   =========================================== */

.text-lg { font-size: 18pt !important; }   /* Slightly larger */
.text-xl { font-size: 20pt !important; }   /* Medium emphasis */
.text-2xl { font-size: 24pt !important; }  /* Strong emphasis */
.text-3xl { font-size: 28pt !important; }  /* Very large */
.text-4xl { font-size: 32pt !important; }  /* Maximum body text */

/* Other text utilities */
.text-muted { color: var(--muted-color) !important; }
.text-center { text-align: center !important; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.1em; }
.font-light { font-weight: 300; }
.font-bold { font-weight: 600; }

/* ===========================================
   BLOCKQUOTES
   =========================================== */

.reveal blockquote {
  border-left: 4px solid var(--primary-color);
  padding-left: 20px;
  margin: 20px 0;
  font-style: italic;
  background: none;
  box-shadow: none;
  width: 100%;
  max-width: none;
}

.reveal blockquote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  color: var(--muted-color);
}

/* ===========================================
   OPTIONAL: TITLE WITH UNDERLINE

   Add this to presentations where you want
   a line under the slide title.
   =========================================== */

/*
.reveal .slides section > h1,
.reveal .slides section > h2 {
  flex-shrink: 0;
  margin: 0;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--line-color);
}
*/

/* ===========================================
   OPTIONAL: DECORATIVE ELEMENTS
   =========================================== */

/* Top decorative line on all slides */
/*
.reveal .slides section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary-color);
}
*/

/* Bottom decorative line */
/*
.reveal .slides section::after {
  content: '';
  position: absolute;
  bottom: 40px;
  left: var(--slide-padding);
  right: var(--slide-padding);
  height: 2px;
  background: var(--line-color);
}
*/

#!/usr/bin/env node

/**
 * Validates chart configurations in a reveal.js presentation.
 * Checks for valid JSON syntax and required properties.
 *
 * Usage: node check-charts.js <path-to-html>
 */

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

const VALID_CHART_TYPES = ['line', 'bar', 'pie', 'doughnut', 'radar', 'polarArea', 'bubble', 'scatter'];

function extractCharts(html) {
  const $ = cheerio.load(html);
  const charts = [];

  $('canvas[data-chart]').each((index, element) => {
    const $el = $(element);
    const chartType = $el.attr('data-chart');
    const externalSrc = $el.attr('data-chart-src') || null;

    // Get the raw HTML content inside the canvas to extract the comment
    const innerHtml = $el.html() || '';

    // Extract JSON/CSV from HTML comment
    const commentMatch = innerHtml.match(/<!--([\s\S]*?)-->/);
    const configText = commentMatch ? commentMatch[1].trim() : null;

    // Calculate line number by finding position in original HTML
    // Get the outer HTML and find it in the source
    const outerHtml = $.html(element);
    const position = html.indexOf(outerHtml.substring(0, 50));
    const lineNumber = position >= 0
      ? (html.substring(0, position).match(/\n/g) || []).length + 1
      : -1;

    charts.push({
      type: chartType,
      configText,
      externalSrc,
      lineNumber,
      preview: outerHtml.substring(0, 80) + '...'
    });
  });

  return charts;
}

function validateChart(chart, index) {
  const errors = [];
  const warnings = [];
  const lineInfo = chart.lineNumber > 0 ? `line ${chart.lineNumber}` : 'unknown line';
  const prefix = `Chart ${index + 1} (${lineInfo}, type: ${chart.type})`;

  // Check chart type
  if (!VALID_CHART_TYPES.includes(chart.type)) {
    errors.push(`${prefix}: Invalid chart type '${chart.type}'. Valid types: ${VALID_CHART_TYPES.join(', ')}`);
  }

  // If there's no config and no external source, that's an error
  if (!chart.configText && !chart.externalSrc) {
    errors.push(`${prefix}: No chart configuration found. Add JSON in HTML comment or use data-chart-src attribute.`);
    return { errors, warnings };
  }

  // If using external source, just note it
  if (chart.externalSrc) {
    warnings.push(`${prefix}: Uses external data source '${chart.externalSrc}' - ensure file exists`);
  }

  // If there's config text, try to parse it
  if (chart.configText) {
    // Check if it looks like CSV (no opening brace)
    const trimmed = chart.configText.trim();
    if (!trimmed.startsWith('{')) {
      // Looks like CSV data - basic validation
      const lines = trimmed.split('\n').filter(l => l.trim());
      if (lines.length < 2) {
        errors.push(`${prefix}: CSV data should have at least a header row and one data row`);
      } else {
        const headerCols = lines[0].split(',').length;
        for (let i = 1; i < lines.length; i++) {
          const dataCols = lines[i].split(',').length;
          if (dataCols !== headerCols) {
            warnings.push(`${prefix}: CSV row ${i + 1} has ${dataCols} columns, header has ${headerCols}`);
          }
        }
      }
    } else {
      // Try to parse as JSON
      try {
        const config = JSON.parse(trimmed);

        // Check for required properties
        if (!config.data && !chart.externalSrc) {
          errors.push(`${prefix}: Missing required 'data' property in chart configuration`);
        }

        if (config.data) {
          // Check for labels (required for most chart types)
          if (!config.data.labels && !['scatter', 'bubble'].includes(chart.type)) {
            warnings.push(`${prefix}: Missing 'data.labels' - chart may not display correctly`);
          }

          // Check for datasets
          if (!config.data.datasets || !Array.isArray(config.data.datasets)) {
            errors.push(`${prefix}: Missing or invalid 'data.datasets' array`);
          } else if (config.data.datasets.length === 0) {
            errors.push(`${prefix}: 'data.datasets' array is empty`);
          } else {
            // Check each dataset
            config.data.datasets.forEach((dataset, i) => {
              if (!dataset.data && !chart.externalSrc) {
                errors.push(`${prefix}: Dataset ${i + 1} is missing 'data' property`);
              }
            });
          }
        }

        // Check for maintainAspectRatio: false (recommended)
        if (!config.options || config.options.maintainAspectRatio !== false) {
          warnings.push(`${prefix}: Missing 'options.maintainAspectRatio: false' - chart may overflow`);
        }
      } catch (e) {
        errors.push(`${prefix}: Invalid JSON syntax - ${e.message}`);

        // Try to give helpful hints
        if (e.message.includes('Unexpected token')) {
          errors.push(`  Hint: Check for missing commas, quotes, or brackets`);
        }
      }
    }
  }

  return { errors, warnings };
}

function main() {
  const htmlPath = process.argv[2];

  if (!htmlPath) {
    console.error('Usage: node check-charts.js <path-to-html>');
    process.exit(1);
  }

  if (!fs.existsSync(htmlPath)) {
    console.error(`Error: File not found: ${htmlPath}`);
    process.exit(1);
  }

  const html = fs.readFileSync(htmlPath, 'utf-8');
  const charts = extractCharts(html);

  console.log(`Checking charts in: ${htmlPath}\n`);

  if (charts.length === 0) {
    console.log('No charts found in presentation.');
    return;
  }

  console.log(`Found ${charts.length} chart(s)\n`);

  let totalErrors = 0;
  let totalWarnings = 0;

  charts.forEach((chart, index) => {
    const { errors, warnings } = validateChart(chart, index);

    if (errors.length === 0 && warnings.length === 0) {
      console.log(`✓ Chart ${index + 1} (line ${chart.lineNumber}, type: ${chart.type}): OK`);
    } else {
      if (errors.length > 0) {
        errors.forEach(e => console.log(`✗ ${e}`));
        totalErrors += errors.length;
      }
      if (warnings.length > 0) {
        warnings.forEach(w => console.log(`⚠ ${w}`));
        totalWarnings += warnings.length;
      }
    }
  });

  console.log(`\n${'─'.repeat(50)}`);
  console.log(`Total: ${charts.length} charts, ${totalErrors} errors, ${totalWarnings} warnings`);

  if (totalErrors > 0) {
    process.exit(1);
  }
}

main();

/** Checks reveal.js slides for content overflow using Puppeteer */
const puppeteer = require('puppeteer');
const path = require('path');

async function checkSlideOverflow(htmlPath) {
  const absolutePath = path.resolve(htmlPath);
  const fileUrl = `file://${absolutePath}`;

  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  // Set viewport to standard presentation size
  await page.setViewport({ width: 1920, height: 1080 });

  await page.goto(fileUrl, { waitUntil: 'networkidle0' });

  // Wait for reveal.js to initialize
  await page.waitForFunction(() => typeof Reveal !== 'undefined' && Reveal.isReady());

  // Get all slides using DOM query (includes vertical slides)
  const results = await page.evaluate(() => {
    const allSlides = document.querySelectorAll('.slides > section, .slides > section > section');
    const slides = [];

    allSlides.forEach((slide, i) => {
      // Skip stack parents (sections that contain nested sections)
      const isStackParent = slide.parentElement.classList.contains('slides') && slide.querySelector('section');
      if (isStackParent) return;

      const id = slide.id || `slide-${i}`;
      const scrollHeight = slide.scrollHeight;
      const scrollWidth = slide.scrollWidth;
      const clientHeight = slide.clientHeight;
      const clientWidth = slide.clientWidth;

      const hasVerticalOverflow = scrollHeight > clientHeight;
      const hasHorizontalOverflow = scrollWidth > clientWidth;

      slides.push({
        index: i,
        id,
        hasOverflow: hasVerticalOverflow || hasHorizontalOverflow,
        hasVerticalOverflow,
        hasHorizontalOverflow,
        dimensions: {
          scrollHeight,
          clientHeight,
          scrollWidth,
          clientWidth,
          verticalDiff: scrollHeight - clientHeight,
          horizontalDiff: scrollWidth - clientWidth
        }
      });
    });

    return slides;
  });

  await browser.close();
  return results;
}

async function main() {
  const htmlPath = process.argv[2];
  if (!htmlPath) {
    console.error('Usage: node check-overflow.js <path-to-html>');
    process.exit(1);
  }

  console.log(`Checking slides for overflow: ${htmlPath}\n`);

  const results = await checkSlideOverflow(htmlPath);

  let hasAnyOverflow = false;

  for (const slide of results) {
    if (slide.hasOverflow) {
      hasAnyOverflow = true;
      console.log(`OVERFLOW: Slide ${slide.index} (${slide.id})`);
      if (slide.hasVerticalOverflow) {
        console.log(`  - Vertical overflow: ${slide.dimensions.verticalDiff}px (content: ${slide.dimensions.scrollHeight}px, container: ${slide.dimensions.clientHeight}px)`);
      }
      if (slide.hasHorizontalOverflow) {
        console.log(`  - Horizontal overflow: ${slide.dimensions.horizontalDiff}px (content: ${slide.dimensions.scrollWidth}px, container: ${slide.dimensions.clientWidth}px)`);
      }
    }
  }

  if (!hasAnyOverflow) {
    console.log('No overflow detected on any slides.');
  }

  console.log(`\nTotal slides checked: ${results.length}`);
}

main().catch(err => {
  console.error('Error:', err);
  process.exit(1);
});

#!/usr/bin/env node

/**
 * Creates a reveal.js presentation scaffold with the specified options.
 * Usage: node create-presentation.js [options]
 */

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

// Path to the base styles file (relative to this script)
const BASE_STYLES_PATH = path.join(__dirname, '..', 'references', 'base-styles.css');

function parseArgs(args) {
  const options = {
    slides: null,
    structure: null,
    output: 'presentation.html',
    title: 'Presentation',
    stylesFile: 'styles.css',
  };

  for (let i = 0; i < args.length; i++) {
    const arg = args[i];
    if (arg === '--slides' || arg === '-s') {
      options.slides = parseInt(args[++i], 10);
    } else if (arg === '--structure') {
      options.structure = args[++i].split(',').map(n => n === 'd' ? 'd' : parseInt(n, 10));
    } else if (arg === '--output' || arg === '-o') {
      options.output = args[++i];
    } else if (arg === '--title') {
      options.title = args[++i];
    } else if (arg === '--styles') {
      options.stylesFile = args[++i];
    } else if (arg === '--help' || arg === '-h') {
      printHelp();
      process.exit(0);
    }
  }

  return options;
}

function printHelp() {
  console.log(`
create-presentation.js - Generate a reveal.js presentation scaffold

Usage: node create-presentation.js [options]

Options:
  --slides, -s <num>    Number of horizontal slides (simple mode)
  --structure <list>    Mixed layout: comma-separated values (e.g., "1,1,d,3,1,d,1")
                        - Number 1 = single horizontal slide
                        - Number >1 = vertical stack of that many slides
                        - 'd' = section divider slide
                        Cannot be used with --slides
  --output, -o <file>   Output HTML filename (default: presentation.html)
  --title <text>        Presentation title (default: Presentation)
  --styles <file>       Custom CSS filename (default: styles.css)
  --help, -h            Show this help message

Examples:
  node create-presentation.js --slides 10 -o my-deck.html
  node create-presentation.js --structure 1,1,d,3,1,d,1 -o my-deck.html
  node create-presentation.js --structure 1,1,1,d,3,d,1,1 --title "Q4 Review"
`);
}

/** Generates slides from a structure array (e.g., [1, 1, 'd', 5, 1, 2]) */
function generateSlides(structure) {
  let slides = '';
  let hIndex = 1; // Horizontal index (1-based for display)
  let dividerCount = 1;

  for (let colIndex = 0; colIndex < structure.length; colIndex++) {
    const item = structure[colIndex];

    if (item === 'd') {
      // Section divider
      slides += `
      <section id="divider-${dividerCount}" class="section-divider" data-state="is-section-divider">
        <h1>Section ${dividerCount} Title</h1>
      </section>
`;
      dividerCount++;
      hIndex++;
    } else if (item === 1) {
      // Single horizontal slide
      if (hIndex === 1) {
        slides += `
      <section id="title" class="section-divider" data-state="is-section-divider">
        <h1>Presentation Title</h1>
      </section>
`;
      } else {
        slides += `
      <section id="slide-${hIndex}">
        <h2>Slide ${hIndex} Title Here</h2>
      </section>
`;
      }
      hIndex++;
    } else {
      // Vertical stack
      slides += `
      <section>
`;
      for (let vIndex = 1; vIndex <= item; vIndex++) {
        slides += `        <section id="slide-${hIndex}-${vIndex}">
          <h2>Slide ${hIndex}.${vIndex} Title Here</h2>
        </section>
`;
      }
      slides += `      </section>
`;
      hIndex++;
    }
  }

  return slides;
}

function generateHTML(options) {
  const slidesContent = generateSlides(options.structure);

  return `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>${options.title}</title>

  <!-- Reveal.js core -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reset.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css">

  <!-- Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

  <!-- Custom styles -->
  <link rel="stylesheet" href="${options.stylesFile}">

  <!-- Chart.js for data visualization -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <div class="reveal">
    <div class="slides">
${slidesContent}
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/chart/plugin.js"></script>
  <script>
    Reveal.initialize({
      width: 1280,
      height: 720,
      margin: 0,
      controls: true,
      progress: true,
      slideNumber: false,
      hash: true,
      transition: 'slide',
      center: false,
      plugins: [ RevealChart ],
      chart: {
        defaults: Object.assign({
          color: 'rgba(0, 0, 0, 0.8)',
          borderColor: 'rgba(0, 0, 0, 0.8)',
          devicePixelRatio: 2
        }, window.location.search.includes('export') ? { animation: false } : {})
      }
    });
  </script>
</body>
</html>
`;
}

function main() {
  const args = process.argv.slice(2);
  const options = parseArgs(args);

  // Validate mutually exclusive options
  if (options.slides !== null && options.structure !== null) {
    console.error('Error: Cannot use both --slides and --structure. Choose one.');
    process.exit(1);
  }

  // Default to 5 horizontal slides if neither specified
  if (options.slides === null && options.structure === null) {
    options.structure = [1, 1, 1, 1, 1];
  } else if (options.slides !== null) {
    // Convert --slides N to structure of N ones
    if (options.slides < 1 || isNaN(options.slides)) {
      console.error('Error: Slide count must be at least 1.');
      process.exit(1);
    }
    options.structure = Array(options.slides).fill(1);
  } else {
    // Validate structure
    if (options.structure.some(n => n !== 'd' && (n < 1 || isNaN(n)))) {
      console.error('Error: Structure values must be positive integers or "d" for dividers.');
      process.exit(1);
    }
  }

  const totalSlides = options.structure.reduce((a, b) => a + (b === 'd' ? 1 : b), 0);

  // Determine output directory from the output path
  const outputDir = path.dirname(options.output);

  // Ensure output directory exists
  if (outputDir && outputDir !== '.') {
    fs.mkdirSync(outputDir, { recursive: true });
  }

  // Generate and write HTML
  const html = generateHTML(options);
  fs.writeFileSync(options.output, html);
  console.log(`Created ${options.output}`);

  // Copy example-styles.css to output directory as styles.css (if it doesn't exist)
  const stylesOutputPath = outputDir && outputDir !== '.'
    ? path.join(outputDir, options.stylesFile)
    : options.stylesFile;

  if (!fs.existsSync(stylesOutputPath)) {
    if (fs.existsSync(BASE_STYLES_PATH)) {
      fs.copyFileSync(BASE_STYLES_PATH, stylesOutputPath);
      console.log(`Copied base-styles.css to ${stylesOutputPath}`);
    } else {
      console.warn(`Warning: Could not find ${BASE_STYLES_PATH}`);
      console.warn(`Please manually copy the base styles to ${stylesOutputPath}`);
    }
  } else {
    console.log(`${stylesOutputPath} already exists, skipping`);
  }

  console.log(`\nPresentation created with ${totalSlides} slides (structure: ${options.structure.join(',')}).`);
  console.log(`Customize colors in ${stylesOutputPath}, then open ${options.output} in a browser to view.`);
}

main();

#!/usr/bin/env node

/**
 * Local HTML Editor
 * 
 * Usage: node edit-html.js <path-to-html-file>
 * 
 * Opens your HTML file in the browser with editable text regions.
 * Click any text to edit it, then click "Save" to write changes back to the file.
 * 
 * By default, all <p>, <h1>-<h6>, <li>, <td>, <th>, <span>, and <div> elements
 * become editable. You can customize this by modifying EDITABLE_SELECTORS.
 */

const http = require('http');
const fs = require('fs');
const path = require('path');
const { exec } = require('child_process');

// Configuration
const PORT = 3456;
const EDITABLE_SELECTORS = 'p, h1, h2, h3, h4, h5, h6, li, td, th, span:not(.edit-toolbar *), div:not(.edit-toolbar):not([contenteditable="false"])';

// Get the HTML file from command line args
const htmlFile = process.argv[2];

if (!htmlFile) {
  console.error('Usage: node edit-html.js <path-to-html-file>');
  console.error('Example: node edit-html.js index.html');
  process.exit(1);
}

const htmlFilePath = path.resolve(htmlFile);

if (!fs.existsSync(htmlFilePath)) {
  console.error(`File not found: ${htmlFilePath}`);
  process.exit(1);
}

// The editor script that gets injected into the HTML
const editorScript = `
<style>
  .edit-toolbar {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 999999;
    background: #333;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .edit-toolbar button {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
  }
  .edit-toolbar button:hover {
    background: #45a049;
  }
  .edit-toolbar button.secondary {
    background: #666;
  }
  .edit-toolbar button.secondary:hover {
    background: #555;
  }
  .edit-toolbar .status {
    color: #fff;
    font-size: 13px;
    margin-left: 10px;
  }
  .edit-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    z-index: 9999999;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  .edit-toast.error {
    background: #d32f2f;
  }
  .edit-toast.visible {
    opacity: 1;
  }
  [contenteditable="true"] {
    outline: 2px dashed transparent;
    transition: outline-color 0.2s;
  }
  [contenteditable="true"]:hover {
    outline-color: #4CAF5066;
  }
  [contenteditable="true"]:focus {
    outline-color: #4CAF50;
    outline-style: solid;
  }
</style>

<div class="edit-toast" id="editToast"></div>
<div class="edit-toolbar">
  <button onclick="saveChanges()">💾 Save</button>
  <button class="secondary" onclick="location.reload()">↻ Reload</button>
  <span class="status" id="editStatus">Click any text to edit</span>
</div>

<script>
  function showToast(msg, isError) {
    const toast = document.getElementById('editToast');
    toast.textContent = msg;
    toast.className = 'edit-toast visible' + (isError ? ' error' : '');
    setTimeout(() => { toast.className = 'edit-toast'; }, 2000);
  }

  // Show toast on reload after save
  const params = new URLSearchParams(location.search);
  if (params.has('saved')) { showToast('Saved successfully'); history.replaceState(null, '', '/'); }
  if (params.has('error')) { showToast('Error: ' + params.get('error'), true); history.replaceState(null, '', '/'); }

  // Make elements editable
  document.querySelectorAll('${EDITABLE_SELECTORS}').forEach(el => {
    // Skip if inside toolbar or already has contenteditable set to false
    if (el.closest('.edit-toolbar') || el.getAttribute('contenteditable') === 'false') return;

    // Skip elements that only contain other editable elements (to avoid nested editing)
    const hasOnlyElementChildren = el.children.length > 0 &&
      Array.from(el.childNodes).every(n => n.nodeType !== 3 || !n.textContent.trim());
    if (hasOnlyElementChildren && el.tagName !== 'LI') return;

    el.setAttribute('contenteditable', 'true');
  });

  // Escape to exit edit mode (blur the active element)
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && document.activeElement.getAttribute('contenteditable') === 'true') {
      document.activeElement.blur();
    }
  });

  // Track changes
  let hasChanges = false;
  document.addEventListener('input', (e) => {
    if (e.target.getAttribute('contenteditable') === 'true') {
      hasChanges = true;
      document.getElementById('editStatus').textContent = 'Unsaved changes';
    }
  });

  // Save function
  async function saveChanges() {
    // Clone the document and strip editor UI from the clone (leave live DOM intact)
    const clone = document.documentElement.cloneNode(true);
    clone.querySelectorAll('.edit-toolbar, .edit-toast').forEach(el => el.remove());
    clone.querySelectorAll('[contenteditable]').forEach(el => el.removeAttribute('contenteditable'));
    clone.querySelectorAll('style, script').forEach(el => {
      if (el.textContent.includes('edit-toolbar') || el.textContent.includes('saveChanges')) el.remove();
    });
    const html = '<!DOCTYPE html>\\n' + clone.outerHTML;
    
    try {
      const response = await fetch('/save', {
        method: 'POST',
        headers: { 'Content-Type': 'text/html' },
        body: html
      });
      
      if (response.ok) {
        hasChanges = false;
        location.href = '/?saved=1' + location.hash;
      } else {
        throw new Error('Save failed');
      }
    } catch (err) {
      location.href = '/?error=' + encodeURIComponent(err.message) + location.hash;
    }
  }

  // Warn before leaving with unsaved changes
  window.addEventListener('beforeunload', (e) => {
    if (hasChanges) {
      e.preventDefault();
      e.returnValue = '';
    }
  });
</script>
`;

// Create the server
const server = http.createServer((req, res) => {
  // Handle save request
  if (req.method === 'POST' && req.url === '/save') {
    let body = '';
    req.on('data', chunk => body += chunk);
    req.on('end', () => {
      try {
        fs.writeFileSync(htmlFilePath, body, 'utf8');
        console.log(`✓ Saved changes to ${htmlFilePath}`);
        res.writeHead(200);
        res.end('OK');
      } catch (err) {
        console.error('Error saving:', err);
        res.writeHead(500);
        res.end('Error saving file');
      }
    });
    return;
  }

  // Serve the HTML file with editor injected
  const reqPath = req.url.split('?')[0];
  if (req.method === 'GET' && (reqPath === '/' || reqPath === '/index.html')) {
    try {
      let html = fs.readFileSync(htmlFilePath, 'utf8');
      
      // Inject the editor before </body> or at the end
      if (html.includes('</body>')) {
        html = html.replace('</body>', editorScript + '</body>');
      } else {
        html += editorScript;
      }
      
      res.writeHead(200, { 'Content-Type': 'text/html' });
      res.end(html);
    } catch (err) {
      res.writeHead(500);
      res.end('Error reading file');
    }
    return;
  }

  // Serve other static files (css, js, images) from the same directory
  const baseDir = path.dirname(htmlFilePath);
  const filePath = path.join(baseDir, req.url);
  if (!filePath.startsWith(baseDir)) { res.writeHead(403); res.end('Forbidden'); return; }
  if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
    const ext = path.extname(filePath).toLowerCase();
    const mimeTypes = {
      '.css': 'text/css',
      '.js': 'application/javascript',
      '.json': 'application/json',
      '.png': 'image/png',
      '.jpg': 'image/jpeg',
      '.jpeg': 'image/jpeg',
      '.gif': 'image/gif',
      '.svg': 'image/svg+xml',
      '.ico': 'image/x-icon',
      '.woff': 'font/woff',
      '.woff2': 'font/woff2',
    };
    res.writeHead(200, { 'Content-Type': mimeTypes[ext] || 'application/octet-stream' });
    res.end(fs.readFileSync(filePath));
    return;
  }

  res.writeHead(404);
  res.end('Not found');
});

server.listen(PORT, () => {
  const url = `http://localhost:${PORT}`;
  console.log(`\n🖊️  HTML Editor running at ${url}`);
  console.log(`   Editing: ${htmlFilePath}\n`);
  console.log('   Click any text to edit, press Escape to deselect, then click Save.\n');
  console.log('   Press Ctrl+C to stop the server.\n');

  // Try to open browser
  const openCmd = process.platform === 'darwin' ? 'open' :
                  process.platform === 'win32' ? 'start' : 'xdg-open';
  exec(`${openCmd} ${url}`);
});