import { englishPage } from "./language"

export async function handleRequest(request) {
    let {pathname, host} = new URL(request.url.toLowerCase())
    if (pathname.endsWith('/'))  pathname = pathname.substring(0, pathname.length - 1)
	console.log('pathname', pathname, 'host', host)

    if (pathname === '/voice-audit.html') {
		console.log('we find the uri')
        let page = englishPage(request) ? HOMEPAGE_EN : HOMEPAGE
        page = page.replace('$[{host}]', host)
        return new Response(page, {headers: {"Content-Type": "text/html; charset=utf-8"}})
    } 
	console.log('we could not find uri')
    return new Response('Not Found', {
        status: 404,
        statusText: 'Not Found',
        headers: {
          'Content-Type': 'text/plain',
        },
      });
}

const HOMEPAGE_EN = `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fraud Identification</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
    }
    #fileInputContainer {
      margin-top: 20px;
      padding: 10px;
      width: 80%;
      max-width: 500px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #uploadRow {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #uploadButton {
      padding: 10px 20px;
      font-size: 16px;
      margin-left: 10px;
      cursor: pointer;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      transition: background-color 0.3s;
    }
    #uploadButton:hover {
      background-color: #45a049;
    }
    #light {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: green;
      margin-left: 10px;
      transition: background-color 0.3s;
      box-shadow: 0 0 5px #000;
    }
	#asrresult,#result{
		margin-top: 20px;
		padding: 10px;
		width: 80%;
		max-width: 700px;
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		text-align: center;
		height: 200px;
		overflow-y: auto; 
	}
  </style>
</head>
<body>
  <div id="fileInputContainer">
    <h2>upload file</h2>
    <div id="uploadRow">
      <input type="file" id="fileInput" name="file" required>
      <button id="uploadButton">start audit</button>
      <div id="light"></div>
	  <label id="statusLabel" for="sURL">audit state</label>
    </div>
  </div>

<div id="asrresult">...</div>
<div id="result">...</div>

<script>
	let intervalId;
	let seconds = 0;
	const light = document.getElementById('light');
	const statusLabel = document.getElementById('statusLabel');
    document.getElementById('uploadButton').addEventListener('click', async function() {
		clearInterval(intervalId);
		intervalId = setInterval(() => {
            seconds++;
            if (seconds%2 > 0){
				light.style.backgroundColor = 'white';
			} else {
				light.style.backgroundColor = 'green';
			}
        }, 1000);
		document.getElementById('result').innerText = 'checking, be patiention pls';
		document.getElementById('asrresult').innerText = 'checking, be patiention pls';
		
		

        const fileInput = document.getElementById('fileInput');
        if (fileInput.files.length === 0) {
            alert("select a audio file");
            return;
        }
		
        const formData = new FormData();
        formData.append("model", "whisper-base");
        formData.append("file", fileInput.files[0]);

        try {
            const response = await fetch(your url, { 
                method: 'POST',
				headers: {
                    'Authorization': 'Bearer your token', 
                },
                body: formData
            });

            if (response.ok) {
				clearInterval(intervalId);
				document.getElementById('asrresult').innerText = '';
                const asrresult = await response.json();
                document.getElementById('asrresult').innerText = JSON.stringify(asrresult, null, 2);
				llm(asrresult.text);
            } else {
				clearInterval(intervalId);
                document.getElementById('asrresult').innerText = "upload fail: " + response.statusText;
            }
        } catch (error) {
			clearInterval(intervalId);
            console.error('Error:', error);
            document.getElementById('asrresult').innerText = "some error happen when transition";
        }
    });
	
	async function llm(text) {
		document.getElementById('result').innerText = '';
	    const requestBody = {
        messages: [
				{
					role: "user",
					content: [
						{
							type: "template",
							id: "fc46404bc3724043b19789dab83d9e63",
							variables: {
								question: text,
							},
						},
					],
				},
			],
			stream: false,
		};
		try {
			const response = await fetch("aiget way url", {
				method: "POST",
				headers: {
					"Authorization": "Bearer " + your token,
					"Content-Type": "application/json"
				},
				body: JSON.stringify(requestBody)
			});

			if (!response.ok) {
				document.getElementById('result').innerText = "audit failed";
				throw new Error("HTTP error " + response.status);
			}
			const result = await response.json();
			let content = "";
			if (result.choices && result.choices.length > 0) {
				const messageObject = result.choices[0].message;
				if (messageObject && messageObject.content) {
					content = messageObject.content;
					try {
						parsedContent = JSON.parse(messageObject.content);
						document.getElementById('result').innerText = content;
						if (parsedContent.cmd === 0){
							light.style.backgroundColor = 'green';
							statusLabel.innerText = 'normal';
						} else if (parsedContent.cmd === 1){
							light.style.backgroundColor = 'red';
							statusLabel.innerText = 'Involved in fraud';
						}else if (parsedContent.cmd === 2){
							light.style.backgroundColor = 'orange';
							statusLabel.innerText = 'Involving politics';
						}else if (parsedContent.cmd === 3){
							light.style.backgroundColor = 'yellow';
							statusLabel.innerText = 'Involving pornography';
						}else if (parsedContent.cmd === 4){
							light.style.backgroundColor = 'black';
							statusLabel.innerText = 'Involving terrorism';
						}else if (parsedContent.cmd === 5){
							light.style.backgroundColor = 'blue';
							statusLabel.innerText = 'Involving gambling';
						}
					} catch (error) {
						console.error("Error parsing content as JSON:", error);
						document.getElementById('result').innerText = "Content parsing error";
					}
				}
			}



			
		} catch (error) {
			console.error("Error: ", error);
		}
	}
</script>

</body>
</html>
`