import tpl from "./templates/html.js";

export default function(bx){

	// use URL params to select render method
	// Baxxon.reqURL is an instance of node URL

	switch(bx.reqURL.searchParams.get('render')){
		case 'txt':
			bx.render.TEXT( "Hello World\nText rendered from a Baxxon JS Module" );
			return;
		case 'html':
			let html = `<!DOCTYPE html><body><h1>Hello World</h1><p>html rendered from a Baxxon JS module</p></body></html>`
			bx.render.HTML( html );
			return;
		case 'md':
			const md = "# Hello World\n ## Markdown rendered from a Baxxon JS module"
			bx.render.MARKDOWN( md );
			return;
		case 'json':
			const json = { hello: "world" }
			bx.render.JSON( json );
			return;
		case 'file':
			bx.render.FILE( 'logo-baxxon.svg' );
			return;
	}

	bx.templates.init(tpl);
	bx.templates.get('head').setVars({
		title: `Baxxon - Examples - Dynamic Content`,
		js: "",
		style: ``,
	});
	bx.templates.get('body').setVars({
		title: "Dynamic Content",
		subtitle: "Server-side logic, Markdown parsing, and Template merging.",
		intro: bx.renderContent("content/intro.md")
	});

	let paramDemo = "";
    if(bx.params.length > 0){
		paramDemo = `
        <div class="code-block">
            <strong>Current bx.params:</strong>
            <pre>${JSON.stringify(bx.params, null, 2)}</pre>
            <strong>Search Params:</strong>
            <pre>${JSON.stringify(Object.fromEntries(bx.reqURL.searchParams), null, 2)}</pre>
        </div>
        <p><a href="./">Clear Params</a></p>`;
    }
	else{
        paramDemo = `
        <p>Baxxon treats the URL as a data structure. Try clicking a "deep" link to see how the Slash-Param Engine parses it into the <code>bx.params</code> array instantly:</p>
        <ul>
            <li><a href="shop/shoes/color/red/size/10">shop/shoes/color/red/size/10</a></li>
            <li><a href="admin/user/edit/42">admin/user/edit/42</a></li>
        </ul>`;
	}

    const demo = `
	<section>
        <h2>The Slash-Param Engine</h2>
        <p>Any URL segments that follow your JS module path are automatically converted into data. No complex regex routers or configuration files are required.</p>
        ${paramDemo}
    </section>

    <section>
        <h2>Render methods</h2>
        <p>JS modules can terminate a request using various built-in render methods. These are consistent across pages and APIs.</p>
        <ul> 
            <li><a href="/render/txt">bx.render.TEXT()</a> (Plain text)</li>
            <li><a href="/render/html">bx.render.HTML()</a> (Standard HTML)</li>
            <li><a href="/render/md">bx.render.MARKDOWN()</a> (Auto-parsed MD)</li>
            <li><a href="/render/json">bx.render.JSON()</a> (API responses)</li>
            <li><a href="/render/file">bx.render.FILE()</a> (Stream assets)</li>
        </ul>
    </section>

    <section>
        <h2>The Template Engine</h2>
        <p>This page uses the <code>bx.templates</code> API. It allows you to define HTML structures with <code>{placeholder}</code> syntax and merge data efficiently. It is the same engine Baxxon uses to render its internal error pages.</p>
    </section>

    <section>
        <h2>HTTP Error Handling</h2>
        <p>Baxxon handles errors natively. Because of the <strong>Visual Contract</strong>, requesting a non-existent file or an unsupported file type triggers a deterministic error response.</p>
        <ul>
            <li><a href="this-page-does-not-exist">404: Module Not Found</a></li>
            <li><a href="demo/invalid-file.php">415: Unsupported File Type</a></li>
        </ul>
    </section>
    `;

	bx.templates.get('body').setVar("demo", demo);

	bx.templates.get('root').setVars({
		head: bx.templates.merge('head'),
		body: bx.templates.merge('body'),
		js: "",
	});
	bx.render.HTML(bx.templates.merge('root'));
}
