/**
 * Partial Loader for Alpine.js v3
 * Loads HTML partials before Alpine initializes
 */
class PartialLoader {
    constructor(area) {
        this.area = area; // 'admin', 'vendor', or 'shop'
        this.baseUrl = `/static/${area}/partials/`;
    }

    async load(containerId, partialName) {
        try {
            const response = await fetch(`${this.baseUrl}${partialName}`);

            if (!response.ok) {
                console.warn(`Failed to load partial: ${partialName} (${response.status})`);
                return false;
            }

            const html = await response.text();
            const container = document.getElementById(containerId);

            if (container) {
                container.innerHTML = html;
                return true;
            } else {
                console.warn(`Container not found: ${containerId}`);
                return false;
            }
        } catch (error) {
            console.error(`Error loading partial ${partialName}:`, error);
            return false;
        }
    }

    async loadAll(partials) {
        const promises = Object.entries(partials).map(
            ([containerId, partialName]) => this.load(containerId, partialName)
        );

        const results = await Promise.all(promises);
        const successCount = results.filter(r => r).length;

        console.log(`Loaded ${successCount}/${results.length} partials successfully`);

        return results.every(r => r);
    }
}

// Auto-detect area from URL path
function getAreaFromPath() {
    const path = window.location.pathname;

    if (path.includes('/admin/')) return 'admin';
    if (path.includes('/vendor/')) return 'vendor';
    if (path.includes('/shop/')) return 'shop';

    return 'shop'; // default
}

// Create global instance
window.PartialLoader = PartialLoader;
window.partialLoader = new PartialLoader(getAreaFromPath());