#!/usr/bin/env bun
/**
 * FINAL HYPERSCRIPT FIX VERIFICATION TEST
 * ========================================
 * Tests that hyperscript parse error is fixed and all buttons are present
 */

import { chromium } from "playwright";

const URL = "http://localhost:1999";

async function finalTest() {
  console.log("🧪 FINAL HYPERSCRIPT FIX VERIFICATION\n");
  console.log("=".repeat(60));

  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });

  const errors = [];
  page.on('console', msg => {
    if (msg.type() === 'error') errors.push(msg.text());
  });
  page.on('pageerror', err => errors.push(err.message));

  console.log("\n1️⃣  Loading page http://localhost:1999 ...");
  await page.goto(URL);
  await page.waitForTimeout(2000);

  // Check for parse errors
  const hasParseError = errors.some(e =>
    e.includes("Expected 'end' but found 'def'") ||
    e.includes("parse error") ||
    e.includes("You must parenthesize")
  );

  console.log("\n2️⃣  Checking for hyperscript parse errors...");
  if (hasParseError) {
    console.log("   ❌ PARSE ERRORS FOUND:");
    errors.forEach(e => console.log(`      ${e}`));
  } else {
    console.log("   ✅ NO PARSE ERRORS");
  }

  console.log("\n3️⃣  Checking button presence in HTML...");
  const buttons = await page.evaluate(() => {
    return {
      hamburger: {
        exists: !!document.querySelector('.hamburger-btn'),
        selector: '.hamburger-btn'
      },
      lengthToggle: {
        exists: !!document.querySelector('#lengthToggle'),
        selector: '#lengthToggle'
      },
      iconToggle: {
        exists: !!document.querySelector('#iconToggle'),
        selector: '#iconToggle'
      },
      themeToggle: {
        exists: !!document.querySelector('#themeToggle'),
        selector: '#themeToggle'
      },
      pdfBtn: {
        exists: !!document.querySelector('.pdf-btn'),
        selector: '.pdf-btn'
      },
      printBtn: {
        exists: !!document.querySelector('.print-btn'),
        selector: '.print-btn'
      }
    };
  });

  const buttonList = Object.entries(buttons);
  const presentCount = buttonList.filter(([_, v]) => v.exists).length;

  buttonList.forEach(([name, info]) => {
    console.log(`   ${info.exists ? '✅' : '❌'} ${name.padEnd(15)} (${info.selector})`);
  });

  console.log(`\n   Total: ${presentCount}/6 buttons present in HTML`);

  console.log("\n4️⃣  Checking console errors...");
  if (errors.length === 0) {
    console.log("   ✅ NO CONSOLE ERRORS");
  } else {
    console.log(`   ⚠️  ${errors.length} errors found (non-parse errors):`);
    errors.slice(0, 3).forEach(e => console.log(`      - ${e.substring(0, 80)}`));
  }

  await browser.close();

  console.log("\n" + "=".repeat(60));
  console.log("📊 FINAL RESULTS\n");

  const allTestsPassed = !hasParseError && presentCount === 6;

  if (!hasParseError) {
    console.log("✅ PARSE ERROR FIXED");
  } else {
    console.log("❌ PARSE ERROR STILL PRESENT");
  }

  if (presentCount === 6) {
    console.log("✅ ALL 6 BUTTONS PRESENT IN HTML");
  } else {
    console.log(`❌ ONLY ${presentCount}/6 BUTTONS PRESENT`);
  }

  if (allTestsPassed) {
    console.log("\n🎉 SUCCESS! Hyperscript is fixed and all buttons are present.");
    console.log("   Ready for user to test in browser with hard refresh (Cmd+Shift+R)");
  } else {
    console.log("\n⚠️  Some issues remain - see details above");
  }

  console.log("=".repeat(60) + "\n");

  return allTestsPassed;
}

const success = await finalTest();
process.exit(success ? 0 : 1);