#HTML

/**
 * @file Example component
 * @description Demonstrates a page title with auto-updating time, showcasing basic Esmx framework functionality
 */

export default class App {
    /**
     * Current time in ISO format
     * @type {string}
     */
    public time = '';

    /**
     * Creates application instance
     * @param {SsrContext} [ssrContext] - Server context containing import metadata collection
     */
    public constructor(public ssrContext?: SsrContext) {
        // No additional initialization needed in constructor
    }

    /**
     * Renders page content
     * @returns {string} Returns page HTML structure
     */
    public render(): string {
        // Ensure proper import metadata collection in server environment
        if (this.ssrContext) {
            this.ssrContext.importMetaSet.add(import.meta);
        }

        return `
        <div id="app">
            <h1><a href="https://www.esmnext.com/guide/frameworks/html.html" target="_blank">Esmx Quick Start</a></h1>
            <time datetime="${this.time}">${this.time}</time>
        </div>
        `;
    }

    /**
     * Client-side initialization
     * @throws {Error} Throws error when time display element is not found
     */
    public onClient(): void {
        // Get time display element
        const time = document.querySelector('#app time');
        if (!time) {
            throw new Error('Time display element not found');
        }

        // Set interval to update time every second
        setInterval(() => {
            this.time = new Date().toISOString();
            time.setAttribute('datetime', this.time);
            time.textContent = this.time;
        }, 1000);
    }

    /**
     * Server-side initialization
     */
    public onServer(): void {
        this.time = new Date().toISOString();
    }
}

/**
 * Server context interface
 * @interface
 */
export interface SsrContext {
    /**
     * Import metadata collection
     * @type {Set<ImportMeta>}
     */
    importMetaSet: Set<ImportMeta>;
}

/**
 * @file Application instance creation
 * @description Responsible for creating and configuring application instances
 */

import App from './app';

export function createApp() {
    const app = new App();
    return {
        app
    };
}

/**
 * @file Client entry file
 * @description Handles client-side interaction logic and dynamic updates
 */

import { createApp } from './create-app';

// Create application instance and initialize
const { app } = createApp();
app.onClient();

/**
 * @file Node.js server entry file
 * @description Configures development environment and server startup, providing SSR runtime
 */

import http from 'node:http';
import type { EsmxOptions } from '@esmx/core';

export default {
    /**
     * Configures development environment application creator
     * @description Creates and configures Rspack application instance for development builds and HMR
     * @param esmx Esmx framework instance providing core functionality
     * @returns Configured Rspack application instance supporting HMR and live preview
     */
    async devApp(esmx) {
        return import('@esmx/rspack').then((m) =>
            m.createRspackHtmlApp(esmx, {
                config(context) {
                    // Customize Rspack compilation configuration here
                }
            })
        );
    },

    /**
     * Configures and starts HTTP server
     * @description Creates HTTP server instance with Esmx middleware for SSR requests
     * @param esmx Esmx framework instance providing middleware and rendering
     */
    async server(esmx) {
        const server = http.createServer((req, res) => {
            // Process requests with Esmx middleware
            esmx.middleware(req, res, async () => {
                // Perform server-side rendering
                const rc = await esmx.render({
                    params: { url: req.url }
                });
                res.end(rc.html);
            });
        });

        server.listen(3000, () => {
            console.log('Server started: http://localhost:3000');
        });
    }
} satisfies EsmxOptions;

/**
 * @file Server-side rendering entry file
 * @description Handles SSR process, HTML generation and resource injection
 */

import type { RenderContext } from '@esmx/core';
import type App from './app';
import type { SsrContext } from './app';
import { createApp } from './create-app';

// Encapsulates page content generation logic
const renderToString = (app: App, ssrContext: SsrContext): string => {
    // Inject server context into application instance
    app.ssrContext = ssrContext;
    // Initialize server-side
    app.onServer();

    // Generate page content
    return app.render();
};

export default async (rc: RenderContext) => {
    // Create application instance
    const { app } = createApp();
    // Generate page content using renderToString
    const html = renderToString(app, {
        importMetaSet: rc.importMetaSet
    });

    // Commit dependency collection to ensure all required resources are loaded
    await rc.commit();

    // Generate complete HTML structure
    rc.html = `<!DOCTYPE html>
<html lang="en">
<head>
    ${rc.preload()}
    <title>Esmx Quick Start</title>
    ${rc.css()}
</head>
<body>
    ${html}
    ${rc.importmap()}
    ${rc.moduleEntry()}
    ${rc.modulePreload()}
</body>
</html>
`;
};