scripts/router.js

class Router {
    constructor() {
        this.routes = {
            '/login': this.renderLogin,
            '/register': this.renderRegister,
            '/dashboard': this.renderDashboard,
            '/projects': this.renderProjects,
            '/projects/:id': this.renderProjectDetail,
            '/buckets/:id': this.renderBucketDetail,
            '/api-keys': this.renderApiKeys,
            '/settings': this.renderSettings
        };

        window.addEventListener('hashchange', () => this.handleRoute());
        this.handleRoute();
    }

    handleRoute() {
        const path = window.location.hash.substring(1) || '/dashboard';
        const route = Object.keys(this.routes).find(r => {
            if (r.includes(':')) {
                const basePath = r.split('/:')[0];
                return path.startsWith(basePath);
            }
            return r === path;
        });

        if (route) {
            this.routes[route]();
        } else {
            this.renderNotFound();
        }
    }

    renderLogin() {
        document.getElementById('auth-container').innerHTML = `
            <bucketmaster-auth type="login"></bucketmaster-auth>
        `;
    }

    renderRegister() {
        document.getElementById('auth-container').innerHTML = `
            <bucketmaster-auth type="register"></bucketmaster-auth>
        `;
    }

    renderDashboard() {
        document.getElementById('page-content').innerHTML = `
            <h1 class="text-2xl font-bold mb-6">Dashboard</h1>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <bucketmaster-card title="Projects" value="${store.state.projects.length}" icon="folder"></bucketmaster-card>
                <bucketmaster-card title="Buckets" value="${store.state.buckets.length}" icon="database"></bucketmaster-card>
                <bucketmaster-card title="Storage Used" value="2.5 GB" icon="hard-drive"></bucketmaster-card>
            </div>
        `;
    }

    renderProjects() {
        document.getElementById('page-content').innerHTML = `
            <div class="flex justify-between items-center mb-6">
                <h1 class="text-2xl font-bold">Projects</h1>
                <bucketmaster-button id="create-project-btn" icon="plus">New Project</bucketmaster-button>
            </div>
            ${store.state.projects.length > 0 ? `
                <bucketmaster-table>
                    ${store.state.projects.map(project => `
                        <tr class="hover:bg-sun/10 transition-200 cursor-pointer" data-project-id="${project.id}">
                            <td>${project.name}</td>
                            <td>${project.buckets.length} buckets</td>
                            <td>${new Date(project.createdAt).toLocaleDateString()}</td>
                        </tr>
                    `).join('')}
                </bucketmaster-table>
            ` : `
                <bucketmaster-empty-state 
                    title="No projects yet"
                    description="Get started by creating your first project"
                    action-text="Create Project"
                    action-id="create-project-btn"
                    icon="folder-plus">
                </bucketmaster-empty-state>
            `}
        `;
    }

    renderProjectDetail() {
        const projectId = window.location.hash.split('/')[2];
        store.setCurrentProject(projectId);
        
        document.getElementById('page-content').innerHTML = `
            <div class="flex justify-between items-center mb-6">
                <h1 class="text-2xl font-bold">${store.state.currentProject?.name || 'Project'}</h1>
                <bucketmaster-button id="create-bucket-btn" icon="plus">New Bucket</bucketmaster-button>
            </div>
            ${store.state.currentProject?.buckets.length > 0 ? `
                <bucketmaster-table>
                    ${store.state.currentProject.buckets.map(bucket => `
                        <tr class="hover:bg-sun/10 transition-200 cursor-pointer" data-bucket-id="${bucket.id}">
                            <td>${bucket.name}</td>
                            <td>${bucket.files.length} files</td>
                            <td>${bucket.size}</td>
                            <td>${new Date(bucket.createdAt).toLocaleDateString()}</td>
                        </tr>
                    `).join('')}
                </bucketmaster-table>
            ` : `
                <bucketmaster-empty-state 
                    title="No buckets yet"
                    description="Create your first bucket to start uploading files"
                    action-text="Create Bucket"
                    action-id="create-bucket-btn"
                    icon="database">
                </bucketmaster-empty-state>
            `}
        `;
    }

    renderBucketDetail() {
        const bucketId = window.location.hash.split('/')[2];
        store.setCurrentBucket(bucketId);
        
        document.getElementById('page-content').innerHTML = `
            <div class="flex justify-between items-center mb-6">
                <h1 class="text-2xl font-bold">${store.state.currentBucket?.name || 'Bucket'}</h1>
                <bucketmaster-button id="upload-file-btn" icon="upload">Upload File</bucketmaster-button>
            </div>
            ${store.state.currentBucket?.files.length > 0 ? `
                <bucketmaster-table>
                    ${store.state.currentBucket.files.map(file => `
                        <tr>
                            <td class="flex items-center">
                                <i data-feather="${file.icon}" class="file-icon file-icon-${file.type.toLowerCase()}"></i>
                                ${file.name}
                            </td>
                            <td>${file.size}</td>
                            <td>${file.type}</td>
                            <td>${new Date(file.uploadedAt).toLocaleDateString()}</td>
                            <td class="text-right">
                                <div class="flex space-x-2">
                                    <button class="text-metal hover:text-sun transition-200" data-file-id="${file.id}" data-action="download">
                                        <i data-feather="download"></i>
                                    </button>
                                    <button class="text-metal hover:text-red-500 transition-200" data-file-id="${file.id}" data-action="delete">
                                        <i data-feather="trash-2"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    `).join('')}
                </bucketmaster-table>
            ` : `
                <bucketmaster-empty-state 
                    title="No files yet"
                    description="Upload your first file to this bucket"
                    action-text="Upload File"
                    action-id="upload-file-btn"
                    icon="file">
                </bucketmaster-empty-state>
            `}
        `;
    }

    renderApiKeys() {
        document.getElementById('page-content').innerHTML = `
            <div class="flex justify-between items-center mb-6">
                <h1 class="text-2xl font-bold">API Keys</h1>
                <bucketmaster-button id="create-api-key-btn" icon="plus">New API Key</bucketmaster-button>
            </div>
            ${store.state.apiKeys.length > 0 ? `
                <bucketmaster-table>
                    ${store.state.apiKeys.map(key => `
                        <tr>
                            <td>${key.name}</td>
                            <td>${key.key.substring(0, 8)}...</td>
                            <td>${new Date(key.createdAt).toLocaleDateString()}</td>
                            <td class="text-right">
                                <button class="text-metal hover:text-red-500 transition-200" data-key-id="${key.id}">
                                    <i data-feather="trash-2"></i>
                                </button>
                            </td>
                        </tr>
                    `).join('')}
                </bucketmaster-table>
            ` : `
                <bucketmaster-empty-state 
                    title="No API Keys"
                    description="Create your first API key to access the BucketMaster API"
                    action-text="Create API Key"
                    action-id="create-api-key-btn"
                    icon="key">
                </bucketmaster-empty-state>
            `}
        `;
    }

    renderSettings() {
        document.getElementById('page-content').innerHTML = `
            <h1 class="text-2xl font-bold mb-6">Settings</h1>
            <div class="bg-pure rounded-lg shadow p-6 max-w-2xl">
                <h2 class="text-xl font-semibold mb-4">Account</h2>
                <form id="account-form" class="space-y-4">
                    <div>
                        <label class="block text-metal mb-1">Name</label>
                        <input type="text" value="${store.state.user?.name || ''}" class="w-full px-3 py-2 border border-metal-200 rounded">
                    </div>
                    <div>
                        <label class="block text-metal mb-1">Email</label>
                        <input type="email" value="${store.state.user?.email || ''}" class="w-full px-3 py-2 border border-metal-200 rounded">
                    </div>
                    <div class="pt-4">
                        <bucketmaster-button type="submit">Save Changes</bucketmaster-button>
                    </div>
                </form>
            </div>
        `;
    }

    renderNotFound() {
        document.getElementById('page-content').innerHTML = `
            <bucketmaster-empty-state 
                title="Page Not Found"
                description="The page you're looking for doesn't exist"
                action-text="Go to Dashboard"
                action-id="go-to-dashboard"
                icon="alert-circle">
            </bucketmaster-empty-state>
        `;
    }
}

const router = new Router();
export default router;