// Initialize the app container.
const app = document.getElementById('app');
app.innerHTML = `
  <div style="height: 100vh; display: flex; flex-direction: column;">
    <div style="padding: 20px;">
      <div id="statusIndicator">
        <span class="spinner"></span> Services starting...
      </div>
      <div id="translationControls">
        <select id="languageSelect">
          <option value="Spanish">Spanish</option>
          <option value="French">French</option>
          <option value="German">German</option>
        </select>
        <button id="translateButton">Translate Document</button>
      </div>
    </div>
    <div id="editor" style="flex: 1; border: 1px solid black; min-height: 0;"></div>
  </div>
`;

// Load Document Authoring SDK
const script = document.createElement('script');
script.src = 'https://document-authoring-cdn.pspdfkit.com/releases/document-authoring-1.0.26-umd.js';
script.crossOrigin = true;
document.head.appendChild(script);

script.onload = async () => {
  const docAuthSystem = await DocAuth.createDocAuthSystem({});
  
  const editor = await docAuthSystem.createEditor(
    document.getElementById("editor"),
    {
      document: await docAuthSystem.importDOCX(fetch('./Sample.docx')),
    }
  );

  // Translation function with language parameter
  async function translate(content, lang) {
    try {
      const response = await fetch('/client/api/v1/chat/completions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          messages: [
            {
              role: "system",
              content: "You are a translator. Only provide the translation, no explanations or additional text."
            },
            {
              role: "user",
              content: `Translate the following text to ${lang}: ${content}`
            }
          ],
          model: "gemma-2b",
          stream: false
        })
      });

      if (!response.ok) {
        throw new Error('Translation request failed');
      }

      const data = await response.json();
      return data.choices[0].message.content;
    } catch (error) {
      console.error("Translation error:", error);
      throw new Error("Failed to generate translation");
    }
  }

  // Function to recursively translate text in the JSON structure
  async function translateRecursive(obj, lang) {
    for (let key in obj) {
      if (typeof obj[key] === "string" && key === "text" && obj[key].length > 0) {
        obj[key] = await translate(obj[key], lang);
      } else if (typeof obj[key] === "object") {
        await translateRecursive(obj[key], lang);
      }
    }
  }

  // Add translation button handler
  const translateButton = document.getElementById('translateButton');
  const languageSelect = document.getElementById('languageSelect');
  
  translateButton.addEventListener('click', async () => {
    try {
      const selectedLanguage = languageSelect.value;
      translateButton.disabled = true;
      translateButton.innerHTML = '<span class="spinner"></span> Translating...';

      const jsonDoc = await editor.currentDocument().saveDocument();
      await translateRecursive(jsonDoc.container.document, selectedLanguage);
      const translatedDoc = await docAuthSystem.loadDocument(jsonDoc);
      editor.setCurrentDocument(translatedDoc);
    } catch (error) {
      alert('Translation failed: ' + error.message);
    } finally {
      translateButton.disabled = false;
      translateButton.innerHTML = 'Translate Document';
    }
  });
};