Web APIs and Browser Integration

// GET request
fetch('https://api.example.com/users')
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('Fetch error:', error);
    });

// Async/await version
async function getUsers() {
    try {
        const response = await fetch('https://api.example.com/users');
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching users:', error);
        throw error;
    }
}

// POST request with JSON
async function createUser(userData) {
    const response = await fetch('https://api.example.com/users', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer token123'
        },
        body: JSON.stringify(userData)
    });
    
    if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message);
    }
    
    return response.json();
}

// Usage
await createUser({
    name: 'John Doe',
    email: 'john@example.com'
});

// PUT request
async function updateUser(id, updates) {
    const response = await fetch(`https://api.example.com/users/${id}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(updates)
    });
    
    return response.json();
}

// DELETE request
async function deleteUser(id) {
    const response = await fetch(`https://api.example.com/users/${id}`, {
        method: 'DELETE'
    });
    
    if (response.status === 204) {
        return {success: true};
    }
    
    return response.json();
}

// Upload file with FormData
async function uploadFile(file) {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('description', 'My file');
    
    const response = await fetch('https://api.example.com/upload', {
        method: 'POST',
        body: formData  // Don't set Content-Type header - browser sets it
    });
    
    return response.json();
}

// Request with timeout
async function fetchWithTimeout(url, options = {}, timeout = 5000) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeout);
    
    try {
        const response = await fetch(url, {
            ...options,
            signal: controller.signal
        });
        
        clearTimeout(timeoutId);
        return response;
    } catch (error) {
        clearTimeout(timeoutId);
        
        if (error.name === 'AbortError') {
            throw new Error('Request timeout');
        }
        
        throw error;
    }
}

// Retry logic
async function fetchWithRetry(url, options = {}, retries = 3) {
    for (let i = 0; i < retries; i++) {
        try {
            const response = await fetch(url, options);
            
            if (response.ok) {
                return response;
            }
            
            // Don't retry client errors (4xx)
            if (response.status >= 400 && response.status < 500) {
                throw new Error(`Client error: ${response.status}`);
            }
            
            // Retry on server errors (5xx)
            if (i === retries - 1) {
                throw new Error(`Max retries reached. Status: ${response.status}`);
            }
            
            // Wait before retry (exponential backoff)
            await new Promise(resolve => setTimeout(resolve, Math.pow(2, i) * 1000));
        } catch (error) {
            if (i === retries - 1) {
                throw error;
            }
            
            // Wait before retry
            await new Promise(resolve => setTimeout(resolve, Math.pow(2, i) * 1000));
        }
    }
}

// Parallel requests
async function fetchMultiple(urls) {
    const promises = urls.map(url => fetch(url).then(r => r.json()));
    return Promise.all(promises);
}

// Usage
const [users, posts, comments] = await fetchMultiple([
    'https://api.example.com/users',
    'https://api.example.com/posts',
    'https://api.example.com/comments'
]);

// Sequential requests (when one depends on another)
async function fetchUserAndPosts(userId) {
    const user = await fetch(`/api/users/${userId}`).then(r => r.json());
    const posts = await fetch(`/api/users/${userId}/posts`).then(r => r.json());
    
    return {user, posts};
}

// Progress tracking for upload
async function uploadWithProgress(file, onProgress) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        
        xhr.upload.addEventListener('progress', (e) => {
            if (e.lengthComputable) {
                const percentComplete = (e.loaded / e.total) * 100;
                onProgress(percentComplete);
            }
        });
        
        xhr.addEventListener('load', () => {
            if (xhr.status === 200) {
                resolve(JSON.parse(xhr.responseText));
            } else {
                reject(new Error(`Upload failed: ${xhr.status}`));
            }
        });
        
        xhr.addEventListener('error', () => reject(new Error('Upload error')));
        
        const formData = new FormData();
        formData.append('file', file);
        
        xhr.open('POST', '/api/upload');
        xhr.send(formData);
    });
}

// Usage
await uploadWithProgress(file, (percent) => {
    console.log(`Upload progress: ${percent.toFixed(2)}%`);
});

// API client class
class ApiClient {
    constructor(baseURL, defaultHeaders = {}) {
        this.baseURL = baseURL;
        this.defaultHeaders = defaultHeaders;
    }
    
    async request(endpoint, options = {}) {
        const url = `${this.baseURL}${endpoint}`;
        
        const config = {
            ...options,
            headers: {
                ...this.defaultHeaders,
                ...options.headers
            }
        };
        
        const response = await fetch(url, config);
        
        if (!response.ok) {
            const error = await response.json().catch(() => ({}));
            throw new Error(error.message || `HTTP error! status: ${response.status}`);
        }
        
        // Handle no-content responses
        if (response.status === 204) {
            return null;
        }
        
        return response.json();
    }
    
    get(endpoint, options) {
        return this.request(endpoint, {...options, method: 'GET'});
    }
    
    post(endpoint, data, options) {
        return this.request(endpoint, {
            ...options,
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
        });
    }
    
    put(endpoint, data, options) {
        return this.request(endpoint, {
            ...options,
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
        });
    }
    
    delete(endpoint, options) {
        return this.request(endpoint, {...options, method: 'DELETE'});
    }
}

// Usage
const api = new ApiClient('https://api.example.com', {
    'Authorization': 'Bearer token123'
});

const users = await api.get('/users');
const newUser = await api.post('/users', {name: 'John'});
await api.delete(`/users/${newUser.id}`);

// Element selection
const header = document.getElementById('header');
const firstButton = document.querySelector('.btn');
const allButtons = document.querySelectorAll('.btn');
const items = document.getElementsByClassName('item');

// Modern selection with optional chaining
const content = document.querySelector('.container')?.querySelector('.content');

// Creating elements
const div = document.createElement('div');
div.className = 'card';
div.id = 'user-card';
div.textContent = 'User Card';

// Setting attributes
div.setAttribute('data-user-id', '123');
div.setAttribute('role', 'article');

// Using dataset for data attributes
div.dataset.userId = '123';  // Creates data-user-id
div.dataset.userName = 'John';  // Creates data-user-name

console.log(div.dataset.userId);  // '123'

// Creating complex structures
const card = document.createElement('div');
card.className = 'card';

const title = document.createElement('h3');
title.textContent = 'Card Title';

const content2 = document.createElement('p');
content2.textContent = 'Card content...';

const button = document.createElement('button');
button.textContent = 'Click Me';
button.className = 'btn btn-primary';

card.append(title, content2, button);
document.body.appendChild(card);

// Inserting elements
const container = document.querySelector('.container');

// Insert at end
container.append('Some text', div);

// Insert at start
container.prepend('First content');

// Insert before/after
const reference = document.querySelector('.reference');
reference.before(document.createElement('div'));
reference.after(document.createElement('div'));

// Replace element
const oldElement = document.querySelector('.old');
const newElement = document.createElement('div');
newElement.textContent = 'New element';
oldElement.replaceWith(newElement);

// Removing elements
const element = document.querySelector('.to-remove');
element.remove();  // Modern way

// Or
element.parentNode.removeChild(element);  // Old way

// Clone elements
const original = document.querySelector('.original');
const clone = original.cloneNode(true);  // Deep clone
document.body.appendChild(clone);

// Class manipulation
const box = document.querySelector('.box');

box.classList.add('active');
box.classList.remove('inactive');
box.classList.toggle('visible');

if (box.classList.contains('active')) {
    console.log('Box is active');
}

// Toggle with force parameter
box.classList.toggle('active', true);  // Always add
box.classList.toggle('active', false);  // Always remove

// Replace class
box.classList.replace('old-class', 'new-class');

// Working with innerHTML vs textContent
const container2 = document.querySelector('.container');

// innerHTML - parses HTML
container2.innerHTML = '<strong>Bold text</strong>';

// textContent - treats as plain text (safer, faster)
container2.textContent = '<strong>Not parsed</strong>';

// Finding elements relative to another
const parent = document.querySelector('.parent');
const child = parent.querySelector('.child');
const ancestor = child.closest('.ancestor');
const sibling = child.nextElementSibling;
const prevSibling = child.previousElementSibling;

// Check if element matches selector
if (element.matches('.active')) {
    console.log('Element is active');
}

// BAD: Multiple reflows
for (let i = 0; i < 100; i++) {
    const div = document.createElement('div');
    div.textContent = `Item ${i}`;
    document.body.appendChild(div);  // Causes reflow each time
}

// GOOD: Use DocumentFragment
const fragment = document.createDocumentFragment();

for (let i = 0; i < 100; i++) {
    const div = document.createElement('div');
    div.textContent = `Item ${i}`;
    fragment.appendChild(div);
}

document.body.appendChild(fragment);  // Single reflow

// GOOD: Build HTML string and insert once
const items = Array.from({length: 100}, (_, i) => `
    <div class="item">Item ${i}</div>
`).join('');

document.querySelector('.container').innerHTML = items;

// Helper function to create elements with properties
function createElement(tag, props = {}, children = []) {
    const element = document.createElement(tag);
    
    // Set properties
    Object.entries(props).forEach(([key, value]) => {
        if (key === 'className') {
            element.className = value;
        } else if (key === 'dataset') {
            Object.assign(element.dataset, value);
        } else if (key === 'style') {
            Object.assign(element.style, value);
        } else if (key.startsWith('on')) {
            const event = key.slice(2).toLowerCase();
            element.addEventListener(event, value);
        } else {
            element.setAttribute(key, value);
        }
    });
    
    // Add children
    children.forEach(child => {
        if (typeof child === 'string') {
            element.appendChild(document.createTextNode(child));
        } else {
            element.appendChild(child);
        }
    });
    
    return element;
}

// Usage
const button = createElement('button', {
    className: 'btn btn-primary',
    dataset: {userId: '123'},
    onclick: () => console.log('Clicked'),
    type: 'button'
}, ['Click Me']);

// Batch DOM reads and writes
// BAD: Interleaving reads and writes
elements.forEach(el => {
    const height = el.offsetHeight;  // Read
    el.style.height = height + 10 + 'px';  // Write
});

// GOOD: Batch all reads, then all writes
const heights = elements.map(el => el.offsetHeight);  // All reads
elements.forEach((el, i) => {
    el.style.height = heights[i] + 10 + 'px';  // All writes
});

// Template element for reusable DOM structures
const template = document.createElement('template');
template.innerHTML = `
    <div class="card">
        <h3 class="card-title"></h3>
        <p class="card-body"></p>
        <button class="card-btn">Action</button>
    </div>
`;

function createCard(title, body) {
    const clone = template.content.cloneNode(true);
    clone.querySelector('.card-title').textContent = title;
    clone.querySelector('.card-body').textContent = body;
    return clone;
}

document.body.appendChild(createCard('Title', 'Body text'));

// Observing DOM changes
const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
        console.log('Type:', mutation.type);
        console.log('Added:', mutation.addedNodes);
        console.log('Removed:', mutation.removedNodes);
    });
});

observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeOldValue: true
});

// Stop observing
observer.disconnect();

// Basic event listener
const button = document.querySelector('.btn');

button.addEventListener('click', (event) => {
    console.log('Button clicked!');
    console.log('Target:', event.target);
    console.log('Current target:', event.currentTarget);
});

// Event listener with options
button.addEventListener('click', handler, {
    once: true,      // Remove after first call
    capture: false,  // Bubbling phase
    passive: true    // Won't call preventDefault
});

// Remove event listener
function handleClick(event) {
    console.log('Clicked');
}

button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);

// Using AbortController to remove listeners
const controller = new AbortController();

button.addEventListener('click', () => {
    console.log('Clicked');
}, {signal: controller.signal});

// Remove listener
controller.abort();

// Multiple elements
const buttons = document.querySelectorAll('.btn');

buttons.forEach(button => {
    button.addEventListener('click', (e) => {
        console.log('Button clicked:', e.target.textContent);
    });
});

// Prevent default behavior
const link = document.querySelector('a');

link.addEventListener('click', (event) => {
    event.preventDefault();  // Don't navigate
    console.log('Link clicked but not followed');
});

// Form submission
const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
    event.preventDefault();  // Don't submit to server
    
    const formData = new FormData(form);
    const data = Object.fromEntries(formData);
    
    console.log('Form data:', data);
    
    // Handle form submission with fetch
    fetch('/api/submit', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    });
});

// Keyboard events
const input = document.querySelector('input');

input.addEventListener('keydown', (event) => {
    console.log('Key:', event.key);
    console.log('Code:', event.code);
    console.log('Ctrl:', event.ctrlKey);
    console.log('Shift:', event.shiftKey);
    console.log('Alt:', event.altKey);
    
    // Check for specific key
    if (event.key === 'Enter') {
        console.log('Enter pressed');
    }
    
    // Check for key combination
    if (event.ctrlKey && event.key === 's') {
        event.preventDefault();  // Prevent browser save
        console.log('Ctrl+S pressed');
    }
});

// Input event (fires on every change)
input.addEventListener('input', (event) => {
    console.log('Current value:', event.target.value);
});

// Change event (fires when input loses focus)
input.addEventListener('change', (event) => {
    console.log('Final value:', event.target.value);
});

// Mouse events
const box = document.querySelector('.box');

box.addEventListener('mouseenter', () => {
    console.log('Mouse entered');
});

box.addEventListener('mouseleave', () => {
    console.log('Mouse left');
});

box.addEventListener('mousemove', (event) => {
    console.log('Mouse position:', event.clientX, event.clientY);
});

// Touch events
box.addEventListener('touchstart', (event) => {
    console.log('Touch started');
    console.log('Touches:', event.touches.length);
});

box.addEventListener('touchmove', (event) => {
    event.preventDefault();  // Prevent scrolling
    const touch = event.touches[0];
    console.log('Touch position:', touch.clientX, touch.clientY);
}, {passive: false});  // Must be false to call preventDefault

// Document ready
document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM fully loaded');
});

// Page load (including images, styles)
window.addEventListener('load', () => {
    console.log('Page fully loaded');
});

// Before page unload
window.addEventListener('beforeunload', (event) => {
    event.preventDefault();
    event.returnValue = '';  // Show confirmation dialog
});

// Event delegation - handle events on parent
const list = document.querySelector('.list');

// BAD: Add listener to each item (inefficient for many items)
document.querySelectorAll('.list-item').forEach(item => {
    item.addEventListener('click', handleClick);
});

// GOOD: Single listener on parent (event delegation)
list.addEventListener('click', (event) => {
    // Find closest list item
    const item = event.target.closest('.list-item');
    
    if (item) {
        console.log('Item clicked:', item.textContent);
        item.classList.toggle('selected');
    }
});

// More complex delegation
list.addEventListener('click', (event) => {
    const target = event.target;
    
    // Handle delete button
    if (target.matches('.delete-btn')) {
        const item = target.closest('.list-item');
        item.remove();
    }
    
    // Handle edit button
    if (target.matches('.edit-btn')) {
        const item = target.closest('.list-item');
        editItem(item);
    }
    
    // Handle item click (but not buttons)
    if (target.matches('.list-item') && !target.closest('button')) {
        toggleItem(target);
    }
});

// Delegation helper function
function delegate(parent, selector, eventType, handler) {
    parent.addEventListener(eventType, (event) => {
        const target = event.target.closest(selector);
        
        if (target && parent.contains(target)) {
            handler.call(target, event);
        }
    });
}

// Usage
delegate(list, '.list-item', 'click', function(event) {
    console.log('Item clicked:', this.textContent);
});

// Dynamic content with delegation
function addItem(text) {
    const item = document.createElement('div');
    item.className = 'list-item';
    item.innerHTML = `
        <span>${text}</span>
        <button class="delete-btn">Delete</button>
    `;
    list.appendChild(item);
    // No need to add new event listeners!
}

// Event bubbling example
document.querySelector('.grandparent').addEventListener('click', () => {
    console.log('Grandparent clicked');
});

document.querySelector('.parent').addEventListener('click', () => {
    console.log('Parent clicked');
});

document.querySelector('.child').addEventListener('click', (event) => {
    console.log('Child clicked');
    
    // Stop propagation to parent
    // event.stopPropagation();
});

// Clicking child logs: "Child clicked", "Parent clicked", "Grandparent clicked"

// Event capture phase
document.querySelector('.grandparent').addEventListener('click', () => {
    console.log('Grandparent (capture)');
}, true);  // Capture phase

document.querySelector('.parent').addEventListener('click', () => {
    console.log('Parent (capture)');
}, true);

document.querySelector('.child').addEventListener('click', () => {
    console.log('Child (bubble)');
});

// Order: "Grandparent (capture)", "Parent (capture)", "Child (bubble)"

// Custom event dispatcher
class EventBus {
    constructor() {
        this.events = {};
    }
    
    on(event, handler) {
        if (!this.events[event]) {
            this.events[event] = [];
        }
        this.events[event].push(handler);
    }
    
    off(event, handler) {
        if (!this.events[event]) return;
        
        this.events[event] = this.events[event].filter(h => h !== handler);
    }
    
    emit(event, data) {
        if (!this.events[event]) return;
        
        this.events[event].forEach(handler => {
            handler(data);
        });
    }
}

// Usage
const bus = new EventBus();

bus.on('user:login', (user) => {
    console.log('User logged in:', user);
});

bus.emit('user:login', {name: 'John', id: 123});

// Custom DOM events
const customEvent = new CustomEvent('myevent', {
    detail: {message: 'Hello'},
    bubbles: true,
    cancelable: true
});

element.addEventListener('myevent', (event) => {
    console.log('Custom event:', event.detail);
});

element.dispatchEvent(customEvent);

// localStorage - persists across sessions
// Store data
localStorage.setItem('username', 'john_doe');
localStorage.setItem('theme', 'dark');

// Retrieve data
const username = localStorage.getItem('username');  // 'john_doe'
const theme = localStorage.getItem('theme');        // 'dark'

// Store objects (must stringify)
const user = {
    id: 123,
    name: 'John Doe',
    email: 'john@example.com'
};

localStorage.setItem('user', JSON.stringify(user));

// Retrieve and parse
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name);  // 'John Doe'

// Remove item
localStorage.removeItem('theme');

// Clear all
localStorage.clear();

// Check if key exists
if (localStorage.getItem('username')) {
    console.log('Username exists');
}

// Iterate over all items
for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    const value = localStorage.getItem(key);
    console.log(key, value);
}

// sessionStorage - cleared when tab closes
sessionStorage.setItem('tempData', 'temporary');

// Storage helper class
class Storage {
    constructor(storage = localStorage) {
        this.storage = storage;
    }
    
    set(key, value) {
        try {
            this.storage.setItem(key, JSON.stringify(value));
            return true;
        } catch (error) {
            console.error('Storage error:', error);
            return false;
        }
    }
    
    get(key, defaultValue = null) {
        try {
            const item = this.storage.getItem(key);
            return item ? JSON.parse(item) : defaultValue;
        } catch (error) {
            console.error('Parse error:', error);
            return defaultValue;
        }
    }
    
    remove(key) {
        this.storage.removeItem(key);
    }
    
    clear() {
        this.storage.clear();
    }
    
    has(key) {
        return this.storage.getItem(key) !== null;
    }
    
    keys() {
        return Object.keys(this.storage);
    }
}

// Usage
const store = new Storage();

store.set('user', {name: 'John', age: 30});
const user2 = store.get('user');
console.log(user2.name);  // 'John'

// Listen for storage changes (in other tabs)
window.addEventListener('storage', (event) => {
    console.log('Storage changed:');
    console.log('Key:', event.key);
    console.log('Old value:', event.oldValue);
    console.log('New value:', event.newValue);
    console.log('URL:', event.url);
});

// Storage with expiration
class StorageWithExpiry {
    set(key, value, ttl) {
        const item = {
            value: value,
            expiry: Date.now() + ttl
        };
        localStorage.setItem(key, JSON.stringify(item));
    }
    
    get(key) {
        const itemStr = localStorage.getItem(key);
        
        if (!itemStr) {
            return null;
        }
        
        const item = JSON.parse(itemStr);
        
        if (Date.now() > item.expiry) {
            localStorage.removeItem(key);
            return null;
        }
        
        return item.value;
    }
}

// Usage
const storage = new StorageWithExpiry();

// Store for 1 hour
storage.set('session', {token: 'abc123'}, 60 * 60 * 1000);

// Later...
const session = storage.get('session');  // null if expired

// Handle quota exceeded errors
try {
    localStorage.setItem('large-data', 'x'.repeat(10 * 1024 * 1024));
} catch (error) {
    if (error.name === 'QuotaExceededError') {
        console.error('Storage quota exceeded');
        // Clear old data or notify user
    }
}

// Open database
function openDatabase() {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open('myDatabase', 1);
        
        // Create/upgrade schema
        request.onupgradeneeded = (event) => {
            const db = event.target.result;
            
            // Create object store
            if (!db.objectStoreNames.contains('users')) {
                const store = db.createObjectStore('users', {
                    keyPath: 'id',
                    autoIncrement: true
                });
                
                // Create indexes
                store.createIndex('email', 'email', {unique: true});
                store.createIndex('name', 'name', {unique: false});
            }
        };
        
        request.onsuccess = (event) => {
            resolve(event.target.result);
        };
        
        request.onerror = (event) => {
            reject(event.target.error);
        };
    });
}

// Add data
async function addUser(user) {
    const db = await openDatabase();
    
    return new Promise((resolve, reject) => {
        const transaction = db.transaction(['users'], 'readwrite');
        const store = transaction.objectStore('users');
        const request = store.add(user);
        
        request.onsuccess = () => {
            resolve(request.result);  // Returns generated key
        };
        
        request.onerror = () => {
            reject(request.error);
        };
    });
}

// Get data by key
async function getUser(id) {
    const db = await openDatabase();
    
    return new Promise((resolve, reject) => {
        const transaction = db.transaction(['users'], 'readonly');
        const store = transaction.objectStore('users');
        const request = store.get(id);
        
        request.onsuccess = () => {
            resolve(request.result);
        };
        
        request.onerror = () => {
            reject(request.error);
        };
    });
}

// Get data by index
async function getUserByEmail(email) {
    const db = await openDatabase();
    
    return new Promise((resolve, reject) => {
        const transaction = db.transaction(['users'], 'readonly');
        const store = transaction.objectStore('users');
        const index = store.index('email');
        const request = index.get(email);
        
        request.onsuccess = () => {
            resolve(request.result);
        };
        
        request.onerror = () => {
            reject(request.error);
        };
    });
}

// Get all data
async function getAllUsers() {
    const db = await openDatabase();
    
    return new Promise((resolve, reject) => {
        const transaction = db.transaction(['users'], 'readonly');
        const store = transaction.objectStore('users');
        const request = store.getAll();
        
        request.onsuccess = () => {
            resolve(request.result);
        };
        
        request.onerror = () => {
            reject(request.error);
        };
    });
}

// Update data
async function updateUser(user) {
    const db = await openDatabase();
    
    return new Promise((resolve, reject) => {
        const transaction = db.transaction(['users'], 'readwrite');
        const store = transaction.objectStore('users');
        const request = store.put(user);  // Updates or inserts
        
        request.onsuccess = () => {
            resolve(request.result);
        };
        
        request.onerror = () => {
            reject(request.error);
        };
    });
}

// Delete data
async function deleteUser(id) {
    const db = await openDatabase();
    
    return new Promise((resolve, reject) => {
        const transaction = db.transaction(['users'], 'readwrite');
        const store = transaction.objectStore('users');
        const request = store.delete(id);
        
        request.onsuccess = () => {
            resolve();
        };
        
        request.onerror = () => {
            reject(request.error);
        };
    });
}

// Usage
await addUser({name: 'John Doe', email: 'john@example.com'});
const user3 = await getUser(1);
const userByEmail = await getUserByEmail('john@example.com');
await updateUser({id: 1, name: 'John Smith', email: 'john@example.com'});
await deleteUser(1);

// Cursor iteration
async function iterateUsers() {
    const db = await openDatabase();
    
    return new Promise((resolve, reject) => {
        const transaction = db.transaction(['users'], 'readonly');
        const store = transaction.objectStore('users');
        const request = store.openCursor();
        
        const results = [];
        
        request.onsuccess = (event) => {
            const cursor = event.target.result;
            
            if (cursor) {
                results.push(cursor.value);
                cursor.continue();  // Move to next
            } else {
                resolve(results);  // Done
            }
        };
        
        request.onerror = () => {
            reject(request.error);
        };
    });
}

// IndexedDB wrapper class
class IDBWrapper {
    constructor(dbName, version = 1) {
        this.dbName = dbName;
        this.version = version;
        this.db = null;
    }
    
    async open(upgrade) {
        return new Promise((resolve, reject) => {
            const request = indexedDB.open(this.dbName, this.version);
            
            request.onupgradeneeded = (event) => {
                if (upgrade) {
                    upgrade(event.target.result);
                }
            };
            
            request.onsuccess = (event) => {
                this.db = event.target.result;
                resolve(this.db);
            };
            
            request.onerror = () => reject(request.error);
        });
    }
    
    async add(storeName, data) {
        const transaction = this.db.transaction([storeName], 'readwrite');
        const store = transaction.objectStore(storeName);
        
        return new Promise((resolve, reject) => {
            const request = store.add(data);
            request.onsuccess = () => resolve(request.result);
            request.onerror = () => reject(request.error);
        });
    }
    
    async get(storeName, key) {
        const transaction = this.db.transaction([storeName], 'readonly');
        const store = transaction.objectStore(storeName);
        
        return new Promise((resolve, reject) => {
            const request = store.get(key);
            request.onsuccess = () => resolve(request.result);
            request.onerror = () => reject(request.error);
        });
    }
    
    async getAll(storeName) {
        const transaction = this.db.transaction([storeName], 'readonly');
        const store = transaction.objectStore(storeName);
        
        return new Promise((resolve, reject) => {
            const request = store.getAll();
            request.onsuccess = () => resolve(request.result);
            request.onerror = () => reject(request.error);
        });
    }
    
    async delete(storeName, key) {
        const transaction = this.db.transaction([storeName], 'readwrite');
        const store = transaction.objectStore(storeName);
        
        return new Promise((resolve, reject) => {
            const request = store.delete(key);
            request.onsuccess = () => resolve();
            request.onerror = () => reject(request.error);
        });
    }
}

// Usage
const db2 = new IDBWrapper('myApp', 1);

await db2.open((db) => {
    db.createObjectStore('users', {keyPath: 'id', autoIncrement: true});
});

await db2.add('users', {name: 'John'});
const users = await db2.getAll('users');

// Copy text to clipboard
async function copyToClipboard(text) {
    try {
        await navigator.clipboard.writeText(text);
        console.log('Copied to clipboard');
    } catch (error) {
        console.error('Failed to copy:', error);
    }
}

// Usage
await copyToClipboard('Hello, World!');

// Read text from clipboard
async function readFromClipboard() {
    try {
        const text = await navigator.clipboard.readText();
        console.log('Clipboard text:', text);
        return text;
    } catch (error) {
        console.error('Failed to read:', error);
    }
}

// Copy button
document.querySelector('.copy-btn').addEventListener('click', async () => {
    const text = document.querySelector('.code').textContent;
    await copyToClipboard(text);
});

// Copy image to clipboard
async function copyImageToClipboard(blob) {
    try {
        await navigator.clipboard.write([
            new ClipboardItem({
                [blob.type]: blob
            })
        ]);
        console.log('Image copied');
    } catch (error) {
        console.error('Failed to copy image:', error);
    }
}

// Fetch and copy image
async function copyImageFromUrl(url) {
    const response = await fetch(url);
    const blob = await response.blob();
    await copyImageToClipboard(blob);
}

// Fallback for older browsers
function fallbackCopy(text) {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.style.position = 'fixed';
    textarea.style.opacity = '0';
    document.body.appendChild(textarea);
    textarea.select();
    
    try {
        const successful = document.execCommand('copy');
        console.log('Copy:', successful ? 'success' : 'failed');
    } catch (error) {
        console.error('Fallback copy failed:', error);
    }
    
    document.body.removeChild(textarea);
}

// Copy with fallback
async function copyText(text) {
    if (navigator.clipboard) {
        await navigator.clipboard.writeText(text);
    } else {
        fallbackCopy(text);
    }
}

// Listen for copy event
document.addEventListener('copy', (event) => {
    // Customize copied content
    const selection = document.getSelection().toString();
    const customText = `${selection}\n\nSource: ${window.location.href}`;
    
    event.clipboardData.setData('text/plain', customText);
    event.preventDefault();
});

// Listen for paste event
document.addEventListener('paste', (event) => {
    event.preventDefault();
    
    const text = event.clipboardData.getData('text/plain');
    console.log('Pasted:', text);
    
    // Insert at cursor or handle paste
    document.execCommand('insertText', false, text);
});

// HTML: <input type="file" id="fileInput" multiple accept="image/*">

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', (event) => {
    const files = event.target.files;
    
    for (const file of files) {
        console.log('Name:', file.name);
        console.log('Size:', file.size, 'bytes');
        console.log('Type:', file.type);
        console.log('Last modified:', new Date(file.lastModified));
    }
});

// Read text file
fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    
    if (file) {
        const reader = new FileReader();
        
        reader.onload = (e) => {
            const text = e.target.result;
            console.log('File content:', text);
        };
        
        reader.onerror = (e) => {
            console.error('Error reading file:', e);
        };
        
        reader.readAsText(file);
    }
});

// Read image and display
fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    
    if (file && file.type.startsWith('image/')) {
        const reader = new FileReader();
        
        reader.onload = (e) => {
            const img = document.createElement('img');
            img.src = e.target.result;  // Data URL
            document.body.appendChild(img);
        };
        
        reader.readAsDataURL(file);
    }
});

// Read as ArrayBuffer for binary processing
fileInput.addEventListener('change', async (event) => {
    const file = event.target.files[0];
    
    if (file) {
        const arrayBuffer = await file.arrayBuffer();
        const bytes = new Uint8Array(arrayBuffer);
        
        console.log('First 10 bytes:', bytes.slice(0, 10));
    }
});

// Progress tracking
function readFileWithProgress(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        
        reader.onprogress = (event) => {
            if (event.lengthComputable) {
                const percent = (event.loaded / event.total) * 100;
                console.log(`Progress: ${percent.toFixed(2)}%`);
            }
        };
        
        reader.onload = (event) => {
            resolve(event.target.result);
        };
        
        reader.onerror = (event) => {
            reject(reader.error);
        };
        
        reader.readAsArrayBuffer(file);
    });
}

// Multiple files
fileInput.addEventListener('change', async (event) => {
    const files = Array.from(event.target.files);
    
    const promises = files.map(file => {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = (e) => resolve({file, data: e.target.result});
            reader.onerror = reject;
            reader.readAsDataURL(file);
        });
    });
    
    const results = await Promise.all(promises);
    results.forEach(({file, data}) => {
        console.log(`${file.name}: ${data.length} characters`);
    });
});

// File validation
function validateFile(file) {
    const maxSize = 5 * 1024 * 1024;  // 5 MB
    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
    
    if (file.size > maxSize) {
        throw new Error('File too large (max 5MB)');
    }
    
    if (!allowedTypes.includes(file.type)) {
        throw new Error('Invalid file type');
    }
    
    return true;
}

fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    
    try {
        validateFile(file);
        // Process file
    } catch (error) {
        alert(error.message);
        fileInput.value = '';  // Clear input
    }
});

// HTML: <div id="dropZone">Drop files here</div>

const dropZone = document.getElementById('dropZone');

// Prevent default drag behaviors
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropZone.addEventListener(eventName, preventDefaults, false);
    document.body.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
}

// Visual feedback
['dragenter', 'dragover'].forEach(eventName => {
    dropZone.addEventListener(eventName, () => {
        dropZone.classList.add('highlight');
    }, false);
});

['dragleave', 'drop'].forEach(eventName => {
    dropZone.addEventListener(eventName, () => {
        dropZone.classList.remove('highlight');
    }, false);
});

// Handle drop
dropZone.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
    const dt = e.dataTransfer;
    const files = dt.files;
    
    handleFiles(files);
}

function handleFiles(files) {
    [...files].forEach(uploadFile);
}

function uploadFile(file) {
    const formData = new FormData();
    formData.append('file', file);
    
    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('Upload success:', data);
    })
    .catch(error => {
        console.error('Upload error:', error);
    });
}

// Preview dropped images
function handleDrop2(e) {
    const dt = e.dataTransfer;
    const files = dt.files;
    
    [...files].forEach(file => {
        if (file.type.startsWith('image/')) {
            const reader = new FileReader();
            
            reader.onload = (e) => {
                const img = document.createElement('img');
                img.src = e.target.result;
                img.style.maxWidth = '200px';
                dropZone.appendChild(img);
            };
            
            reader.readAsDataURL(file);
        }
    });
}

// Drag from element to another
const draggableItem = document.querySelector('.draggable');

draggableItem.addEventListener('dragstart', (e) => {
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', e.target.innerHTML);
    e.dataTransfer.setData('text/plain', e.target.textContent);
});

const dropTarget = document.querySelector('.drop-target');

dropTarget.addEventListener('dragover', (e) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
});

dropTarget.addEventListener('drop', (e) => {
    e.preventDefault();
    
    const html = e.dataTransfer.getData('text/html');
    dropTarget.innerHTML = html;
});

// File System Access API (modern browsers)
async function openFilePicker() {
    try {
        const [fileHandle] = await window.showOpenFilePicker({
            types: [{
                description: 'Text Files',
                accept: {'text/plain': ['.txt']}
            }],
            multiple: false
        });
        
        const file = await fileHandle.getFile();
        const text = await file.text();
        
        console.log('File content:', text);
    } catch (error) {
        console.error('Error:', error);
    }
}

// Save file
async function saveFile(content) {
    try {
        const fileHandle = await window.showSaveFilePicker({
            suggestedName: 'document.txt',
            types: [{
                description: 'Text Files',
                accept: {'text/plain': ['.txt']}
            }]
        });
        
        const writable = await fileHandle.createWritable();
        await writable.write(content);
        await writable.close();
        
        console.log('File saved');
    } catch (error) {
        console.error('Error:', error);
    }
}