#Browser Integration

// Create and open a Lix instance in memory
const lixFile = await newLixFile();
const lix = await openLix({
  blob: lixFile,
  providePlugins: [jsonPlugin],
});

// Get a file handle using the File System Access API
const fileHandle = await window.showSaveFilePicker({
  suggestedName: "document.lix",
  types: [
    {
      description: "Lix Files",
      accept: {
        "application/octet-stream": [".lix"],
      },
    },
  ],
});

// Create a new Lix file
const lixFile = await newLixFile();

// Write the initial file
const writable = await fileHandle.createWritable();
await writable.write(lixFile);
await writable.close();

// Open the file
const file = await fileHandle.getFile();
const lix = await openLix({
  fileHandle,
  providePlugins: [jsonPlugin],
});

// Using a helper library like idb-keyval
import { set, get } from "idb-keyval";

// Save Lix file to IndexedDB
async function saveLixToIDB(lixFile) {
  await set("my-document.lix", lixFile);
}

// Load Lix file from IndexedDB
async function loadLixFromIDB() {
  const lixFile = await get("my-document.lix");
  if (lixFile) {
    return await openLix({
      blob: lixFile,
      providePlugins: [jsonPlugin],
    });
  }
  // Create new file if not found
  const newLixFile = await newLixFile();
  await set("my-document.lix", newLixFile);
  return await openLix({
    blob: newLixFile,
    providePlugins: [jsonPlugin],
  });
}

// Check if OPFS is supported
if ("storage" in navigator && "getDirectory" in navigator.storage) {
  const root = await navigator.storage.getDirectory();
  const fileHandle = await root.getFileHandle("document.lix", { create: true });

  // Create or load Lix file
  let lixFile;
  try {
    const file = await fileHandle.getFile();
    lixFile = await file.arrayBuffer();
  } catch (e) {
    // Create new file if reading fails
    lixFile = await newLixFile();
    const writable = await fileHandle.createWritable();
    await writable.write(lixFile);
    await writable.close();
  }

  // Open Lix with the file
  const lix = await openLix({
    blob: lixFile,
    providePlugins: [jsonPlugin],
  });
}

// Create a worker
const worker = new Worker("lix-worker.js");

// Send commands to the worker
worker.postMessage({
  type: "CREATE_FILE",
});

// Listen for responses
worker.onmessage = (event) => {
  if (event.data.type === "FILE_CREATED") {
    console.log("Lix file created with ID:", event.data.fileId);
  }
};

// Import Lix in the worker
importScripts("path-to-lix-bundle.js");

// Initialize Lix instance
let lix;

// Handle messages from the main thread
self.onmessage = async (event) => {
  const { type, data } = event.data;

  switch (type) {
    case "CREATE_FILE":
      const lixFile = await newLixFile();
      lix = await openLix({
        blob: lixFile,
        providePlugins: [jsonPlugin],
      });
      self.postMessage({ type: "FILE_CREATED", fileId: lix.id });
      break;

    case "INSERT_FILE":
      const file = await lix.db
        .insertInto("file")
        .values(data)
        .returningAll()
        .executeTakeFirstOrThrow();
      self.postMessage({ type: "FILE_INSERTED", file });
      break;

    // Add more command handlers
  }
};

async function setupAutoSave(lix, fileHandle, interval = 5000) {
  let lastSaveTime = Date.now();
  let pendingSave = false;

  // Function to save changes
  async function saveChanges() {
    if (pendingSave) return;

    pendingSave = true;
    try {
      const serialized = await lix.serialize();
      const writable = await fileHandle.createWritable();
      await writable.write(serialized);
      await writable.close();
      lastSaveTime = Date.now();
      console.log("Auto-saved at", new Date().toLocaleTimeString());
    } catch (err) {
      console.error("Auto-save failed:", err);
    } finally {
      pendingSave = false;
    }
  }

  // Set up periodic saving
  const intervalId = setInterval(async () => {
    // Only save if there are unsaved changes
    const hasChanges = await lix.hasUnsavedChanges();
    if (hasChanges) {
      await saveChanges();
    }
  }, interval);

  // Add event listener for page unload
  window.addEventListener("beforeunload", async (event) => {
    const hasChanges = await lix.hasUnsavedChanges();
    if (hasChanges) {
      // Synchronous save before unload
      await saveChanges();
    }
  });

  // Return cleanup function
  return () => clearInterval(intervalId);
}

// Check for File System Access API
const hasFileSystemAccess = "showOpenFilePicker" in window;

// Check for OPFS
const hasOPFS = "storage" in navigator && "getDirectory" in navigator.storage;

// Check for WebAssembly
const hasWasm =
  typeof WebAssembly === "object" &&
  typeof WebAssembly.instantiate === "function";

// Choose appropriate storage strategy based on available features
function chooseStorageStrategy() {
  if (hasFileSystemAccess) {
    return "file-system-access";
  } else if (hasOPFS) {
    return "opfs";
  } else {
    return "indexeddb";
  }
}

// Batch multiple changes in a single transaction
await lix.db.transaction().execute(async (trx) => {
  const snapshot = await trx
    .insertInto("snapshot")
    .values({ created_at: new Date().toISOString() })
    .returningAll()
    .executeTakeFirstOrThrow();

  // Insert multiple changes at once
  await trx
    .insertInto("change")
    .values(
      multipleChanges.map((change) => ({
        ...change,
        snapshot_id: snapshot.id,
      })),
    )
    .execute();
});

// Check for performance.memory (Chrome only)
if (performance.memory) {
  console.log(
    "JS Heap Size:",
    performance.memory.usedJSHeapSize / 1048576,
    "MB",
  );
}

// Use FinalizationRegistry to track object cleanup
const registry = new FinalizationRegistry((name) => {
  console.log(`${name} has been garbage collected`);
});

// Register objects for cleanup tracking
registry.register(largeDataObject, "Large data object");

// Listen for online/offline events
window.addEventListener("online", async () => {
  console.log("Connection restored, syncing changes...");
  await syncChangesToServer(lix);
});

window.addEventListener("offline", () => {
  console.log("Connection lost, working in offline mode");
});

// Check initial state
if (navigator.onLine) {
  console.log("Starting in online mode");
} else {
  console.log("Starting in offline mode");
}