#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');
}