import { MockApi } from './mock_api.js';
import { RealApi } from './real_api.js';

// Toggle this to switch modes
const USE_REAL_API = true;

const Api = USE_REAL_API ? RealApi : MockApi;

// Utils
const formatBytes = (bytes, decimals = 2) => {
    if (!+bytes) return '0 Bytes';
    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
};

const formatDate = (dateString) => {
    if (!dateString) return 'Never';
    const options = {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    };
    return new Date(dateString).toLocaleDateString(undefined, options);
};

// Component Rendering Functions
const renderDashboard = async () => {
    const stats = await Api.getDashboardStats();
    const jobs = await Api.getRecentJobs();

    return `
        <div class="animate-fade-in">
            <h2 style="margin-bottom: 1.5rem;">System Overview</h2>
            
            <div class="dashboard-grid">
                <div class="card stat-card">
                    <div class="stat-header">
                        <div class="stat-icon" style="background: rgba(99, 102, 241, 0.1); color: var(--accent-primary);">
                            <i class="ph ph-briefcase"></i>
                        </div>
                        <div class="stat-trend trend-up">
                            <i class="ph ph-trend-up"></i> +12%
                        </div>
                    </div>
                    <div class="stat-value">${stats.totalJobs}</div>
                    <div class="stat-label">Total Jobs Run</div>
                </div>

                <div class="card stat-card">
                    <div class="stat-header">
                        <div class="stat-icon" style="background: rgba(16, 185, 129, 0.1); color: var(--success);">
                            <i class="ph ph-check-circle"></i>
                        </div>
                    </div>
                    <div class="stat-value">${stats.successRate}%</div>
                    <div class="stat-label">Success Rate</div>
                </div>

                <div class="card stat-card">
                    <div class="stat-header">
                        <div class="stat-icon" style="background: rgba(236, 72, 153, 0.1); color: var(--accent-secondary);">
                            <i class="ph ph-hard-drives"></i>
                        </div>
                        <div class="stat-trend trend-up">
                            <i class="ph ph-warning"></i> ${stats.storageUsage}% used
                        </div>
                    </div>
                    <div class="stat-value">${formatBytes(stats.totalBytes)}</div>
                    <div class="stat-label">Total Backup Size</div>
                </div>

                <div class="card stat-card">
                    <div class="stat-header">
                        <div class="stat-icon" style="background: rgba(245, 158, 11, 0.1); color: var(--warning);">
                            <i class="ph ph-desktop"></i>
                        </div>
                    </div>
                    <div class="stat-value">${stats.activeClients}</div>
                    <div class="stat-label">Active Clients</div>
                </div>
            </div>

            <div class="card">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
                    <h3>Recent Jobs</h3>
                    <button class="btn btn-primary" onclick="window.location.hash='#jobs'">View All</button>
                </div>
                
                <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>Status</th>
                                <th>Job Name</th>
                                <th>Client</th>
                                <th>Level</th>
                                <th>Files</th>
                                <th>Size</th>
                                <th>Duration</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${jobs.map(job => `
                                <tr>
                                    <td>
                                        <span class="status-badge status-${job.status.toLowerCase()}">
                                            ${job.status}
                                        </span>
                                    </td>
                                    <td style="font-weight: 500;">${job.name}</td>
                                    <td style="color: var(--text-muted);">${job.client}</td>
                                    <td>${job.level}</td>
                                    <td>${job.files.toLocaleString()}</td>
                                    <td>${formatBytes(job.bytes)}</td>
                                    <td>${job.duration}</td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    `;
};

// State for Jobs View
const jobsState = {
    filter: 'All',
    search: ''
};

// Global handlers for filter updates
window.updateJobFilter = (value) => {
    jobsState.filter = value;
    // Trigger re-render of current page
    window.dispatchEvent(new Event('hashchange'));
};

window.updateJobSearch = (value) => {
    jobsState.search = value.toLowerCase();
    // Debounce re-render could be better, but simple re-render works for now
    // We'll just re-render the table body via DOM manipulation ideally, 
    // but for simplicity with this router, we can re-trigger route or just rely on input keeping focus if we are careful.
    // Re-rendering whole page loses focus. 
    // Better strategy: Store the value, but let the user press enter or wait.
    // For now, let's just make the search work on 'onchange' or 'onkeyup' with a small re-render hack

    // Actually, to avoid losing focus on every keystroke, let's just use the router re-render 
    // but we need to manage focus. 
    // Simplified approach: Just update state. The user has to trigger search? 
    // Or simpler: Just re-render. To keep input focus, we can select it after render.

    const contentArea = document.getElementById('content-area');
    // For this prototype, a full re-render is jarring. 
    // But let's stick to the request pattern.
    window.dispatchEvent(new Event('hashchange'));
};

// Helper to keep focus helper (hacky but works for simple vanilla js SPA)
const restoreFocus = () => {
    const searchInput = document.querySelector('#job-search-input');
    if (searchInput) {
        searchInput.focus();
        // Move cursor to end
        const val = searchInput.value;
        searchInput.value = '';
        searchInput.value = val;
    }
}

const renderJobs = async () => {
    const jobs = await Api.getRecentJobs();
    const allJobs = [...jobs, ...jobs, ...jobs]; // Demo duplication

    // Apply Filters
    const filteredJobs = allJobs.filter(job => {
        const matchesStatus = jobsState.filter === 'All' || job.status === jobsState.filter;
        const matchesSearch = jobsState.search === '' ||
            job.name.toLowerCase().includes(jobsState.search) ||
            job.client.toLowerCase().includes(jobsState.search);
        return matchesStatus && matchesSearch;
    });

    // Schedule focus restore after render
    setTimeout(restoreFocus, 0);

    return `
        <div class="animate-fade-in">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
                <h2>Backup Jobs</h2>
                <div style="display: flex; gap: 0.5rem; align-items: center;">
                    <div style="position: relative;">
                        <i class="ph ph-magnifying-glass" style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted);"></i>
                        <input type="text" 
                            id="job-search-input"
                            placeholder="Search jobs..." 
                            value="${jobsState.search}" 
                            oninput="updateJobSearch(this.value)"
                            style="padding-left: 36px; background: var(--bg-card); border: 1px solid var(--border-color); color: white; border-radius: 6px; height: 40px; width: 250px; outline: none;">
                    </div>
                    <select onchange="updateJobFilter(this.value)" style="background: var(--bg-card); border: 1px solid var(--border-color); color: white; border-radius: 6px; height: 40px; padding: 0 12px; outline: none; cursor: pointer;">
                        <option value="All" ${jobsState.filter === 'All' ? 'selected' : ''}>All Status</option>
                        <option value="Success" ${jobsState.filter === 'Success' ? 'selected' : ''}>Success</option>
                        <option value="Running" ${jobsState.filter === 'Running' ? 'selected' : ''}>Running</option>
                        <option value="Error" ${jobsState.filter === 'Error' ? 'selected' : ''}>Error</option>
                    </select>
                    <button class="btn btn-primary" style="height: 40px;"><i class="ph ph-play"></i> Run Job</button>
                </div>
            </div>

             <div class="card">
                <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>Status</th>
                                <th>Job Name</th>
                                <th>Client</th>
                                <th>Level</th>
                                <th>Start Time</th>
                                <th>Files</th>
                                <th>Size</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${filteredJobs.length > 0 ? filteredJobs.map(job => `
                                <tr>
                                    <td>
                                        <span class="status-badge status-${job.status.toLowerCase()}">
                                            ${job.status}
                                        </span>
                                    </td>
                                    <td style="font-weight: 500;">${job.name}</td>
                                    <td style="color: var(--text-muted);">${job.client}</td>
                                    <td>${job.level}</td>
                                    <td>${formatDate(job.startTime)}</td>
                                    <td>${job.files.toLocaleString()}</td>
                                    <td>${formatBytes(job.bytes)}</td>
                                </tr>
                            `).join('') : `
                                <tr>
                                    <td colspan="7" style="text-align: center; padding: 2rem; color: var(--text-muted);">
                                        No jobs found matching your filters.
                                    </td>
                                </tr>
                            `}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    `;
};

const renderClients = async () => {
    const clients = await Api.getClients();
    return `
        <div class="animate-fade-in">
             <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
                <h2>Clients</h2>
                <button class="btn btn-primary" onclick="openAddClientModal()"><i class="ph ph-plus"></i> Add Client</button>
            </div>

            <div class="dashboard-grid">
                ${clients.map(client => `
                    <div class="card">
                        <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
                            <div style="width: 48px; height: 48px; background: var(--bg-hover); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
                                <i class="ph ph-desktop"></i>
                            </div>
                            <span class="status-badge status-${client.status === 'Online' ? 'success' : 'error'}">
                                ${client.status}
                            </span>
                        </div>
                        <h3 style="margin-bottom: 0.5rem;">${client.name}</h3>
                        <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem;">${client.os}</p>
                        
                        <div style="padding-top: 1rem; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; font-size: 0.85rem;">
                            <span style="color: var(--text-muted);">Last Backup</span>
                            <span>${formatDate(client.lastBackup)}</span>
                        </div>
                    </div>
                `).join('')}
            </div>
        </div>
    `;
};

// Router
const router = async () => {
    const contentArea = document.getElementById('content-area');
    const hash = window.location.hash || '#dashboard';
    const page = hash.substring(1);

    // Update Sidebar Active State
    document.querySelectorAll('.nav-item').forEach(el => {
        el.classList.toggle('active', el.dataset.page === page);
    });

    // Update Breadcrumbs
    document.querySelector('.current-page').textContent = page.charAt(0).toUpperCase() + page.slice(1);

    contentArea.innerHTML = `
        <div class="loading-state">
            <div class="spinner"></div>
            <p>Loading...</p>
        </div>
    `;

    try {
        let content = '';
        switch (page) {
            case 'dashboard':
                content = await renderDashboard();
                break;
            case 'jobs':
                content = await renderJobs();
                break;
            case 'clients':
                content = await renderClients();
                break;
            case 'storage':
                const storageDevices = await Api.getStorage();

                content = `
                    <div class="animate-fade-in">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
                            <h2>Storage Daemons</h2>
                            <button class="btn btn-primary"><i class="ph ph-plus"></i> Add Storage</button>
                        </div>
                        
                        <div class="card">
                             <div class="table-container">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Type</th>
                                            <th>Status</th>
                                            <th>Capacity</th>
                                            <th>Usage</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        ${storageDevices.length > 0 ? storageDevices.map(dev => `
                                            <tr>
                                                <td style="font-weight: 500;">${dev.name}</td>
                                                <td>${dev.type}</td>
                                                <td>
                                                    <span class="status-badge status-${dev.status === 'Active' ? 'success' : 'running'}">
                                                        ${dev.status}
                                                    </span>
                                                </td>
                                                <td>${dev.capacity}</td>
                                                <td>
                                                    <div style="display: flex; flex-direction: column; gap: 0.25rem;">
                                                        <span>${dev.used}</span>
                                                        ${dev.percent > 0 ? `
                                                            <div style="width: 100px; height: 4px; background: #2d3748; border-radius: 2px;">
                                                                <div style="width: ${dev.percent}%; height: 100%; background: ${dev.percent > 75 ? 'var(--warning)' : 'var(--accent-primary)'}; border-radius: 2px;"></div>
                                                            </div>
                                                        ` : ''}
                                                    </div>
                                                </td>
                                                <td>
                                                    <button class="icon-btn"><i class="ph ph-dots-three-vertical"></i></button>
                                                </td>
                                            </tr>
                                        `).join('') : `
                                            <tr>
                                                <td colspan="6" style="text-align: center; padding: 2rem; color: var(--text-muted);">
                                                    No storage devices found.
                                                </td>
                                            </tr>
                                        `}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                `;
                break;
            case 'settings':
                content = '<div class="animate-fade-in"><h2>Settings</h2><p>Coming soon...</p></div>';
                break;
            default:
                content = '<div class="animate-fade-in"><h2>404 Not Found</h2></div>';
        }
        contentArea.innerHTML = content;
    } catch (error) {
        console.error(error);
        contentArea.innerHTML = '<div class="animate-fade-in"><h2>Error loading content</h2></div>';
    }
};

// Init
window.addEventListener('hashchange', router);
window.addEventListener('DOMContentLoaded', () => {
    router();

    // Append Modal to Body if not exists
    if (!document.getElementById('client-modal')) {
        const modal = document.createElement('div');
        modal.id = 'client-modal';
        modal.innerHTML = `
            <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 1000;" id="client-modal-overlay">
                <div class="card" style="width: 400px; max-width: 90%;">
                    <h3 style="margin-bottom: 1.5rem;">Add New Client</h3>
                    <form onsubmit="handleClientSubmit(event)">
                        <div style="margin-bottom: 1rem;">
                            <label style="display: block; margin-bottom: 0.5rem; color: var(--text-muted);">Client Name</label>
                            <input type="text" name="name" required style="width: 100%; padding: 0.5rem; background: var(--bg-hover); border: 1px solid var(--border-color); color: white; border-radius: 6px;">
                        </div>
                        <div style="margin-bottom: 1rem;">
                            <label style="display: block; margin-bottom: 0.5rem; color: var(--text-muted);">Address (IP/Host)</label>
                            <input type="text" name="address" required style="width: 100%; padding: 0.5rem; background: var(--bg-hover); border: 1px solid var(--border-color); color: white; border-radius: 6px;">
                        </div>
                        <div style="margin-bottom: 1.5rem;">
                            <label style="display: block; margin-bottom: 0.5rem; color: var(--text-muted);">Password</label>
                            <input type="password" name="password" required style="width: 100%; padding: 0.5rem; background: var(--bg-hover); border: 1px solid var(--border-color); color: white; border-radius: 6px;">
                        </div>
                        <div style="display: flex; justify-content: flex-end; gap: 1rem;">
                            <button type="button" class="btn" onclick="closeClientModal()" style="background: transparent; border: 1px solid var(--border-color); color: white;">Cancel</button>
                            <button type="submit" class="btn btn-primary">Save Client</button>
                        </div>
                    </form>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
    }
});

window.openAddClientModal = () => {
    document.getElementById('client-modal-overlay').style.display = 'flex';
};

window.closeClientModal = () => {
    document.getElementById('client-modal-overlay').style.display = 'none';
};

window.handleClientSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData.entries());

    try {
        const btn = e.target.querySelector('button[type="submit"]');
        const origText = btn.textContent;
        btn.textContent = 'Saving...';
        btn.disabled = true;

        const res = await fetch(`${Api.getBaseUrl()}/clients`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });

        if (!res.ok) throw new Error((await res.json()).error);

        alert('Client added successfully!');
        closeClientModal();
        e.target.reset();
        window.dispatchEvent(new Event('hashchange')); // Reload view
    } catch (err) {
        alert('Error adding client: ' + err.message);
    } finally {
        const btn = e.target.querySelector('button[type="submit"]');
        btn.textContent = 'Save Client';
        btn.disabled = false;
    }
};
