package dwn

var motrHandle = templ.NewOnceHandle()

templ importScripts() {
	<script src="https://cdn.sonr.io/js/htmx.min.js"></script>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/alpinejs" defer></script>
}

templ indexFile(cfg string) {
	<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="UTF-8"/>
			<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
			<link href="https://cdn.sonr.io/stylesheet.css" rel="stylesheet"/>
			@importScripts()
			<style>
                [x-cloak] {
                    display: none;
                }
            </style>
			<title>Sonr DWN</title>
			<script>
                if ("serviceWorker" in navigator) {
                    window.addEventListener("load", function() {
                        navigator.serviceWorker
                            .register("/sw.js")
                            .then(function (registration) {
                                console.log("Service Worker registered with scope:", registration.scope);
                            })
                            .catch(function (error) {
                                console.log("Service Worker registration failed:", error);
                            });
                    });
                }
            </script>
		</head>
		<body class="flex items-center justify-center h-full bg-neutral-50 lg:p-24 md:16 p-4">
			<main class="flex-row items-center justify-center mx-auto w-fit max-w-screen-sm gap-y-3">
				<div id="output">Loading...</div>
			</main>
			@motrHandle.Once() {
				<script src="/assets/main.js" type="module"></script>
				@initializeMotr(cfg)
			}
		</body>
	</html>
}

script initializeMotr(config string) {
    const motr = new Motr(JSON.parse(config));

    async function demo() {
        try {
            // Insert a new account
            const accountId = await motr.insertAccount({
                name: 'John Doe',
                address: '0x1234567890123456789012345678901234567890',
                publicKey: 'sample_public_key',
                chainCode: 'SONR',
                index: 0,
                controller: 'sample_controller',
                createdAt: new Date()
            });

            console.log('Inserted account with ID:', accountId);

            // Retrieve the account
            const account = await motr.getAccount(accountId);
            console.log('Retrieved account:', account);

            // Insert a new credential
            const credentialId = await motr.insertCredential({
                subject: 'john@example.com',
                label: 'John\'s Device',
                controller: 'sample_controller',
                attestationType: 'platform',
                origin: 'https://app.sonr.io'
            });

            console.log('Inserted credential with ID:', credentialId);

            // Retrieve the credential
            const credential = await motr.getCredential(credentialId);
            console.log('Retrieved credential:', credential);

            document.getElementById('output').innerHTML = `
                <h2>Demo Results:</h2>
                <p>Inserted account ID: ${accountId}</p>
                <p>Retrieved account name: ${account.name}</p>
                <p>Inserted credential ID: ${credentialId}</p>
                <p>Retrieved credential subject: ${credential.subject}</p>
            `;
        } catch (error) {
            console.error('Error in demo:', error);
            document.getElementById('output').innerHTML = `<p>Error: ${error.message}</p>`;
        }
    }
    // Run the demo when the page loads
    window.onload = demo;
}
