<%- include('../partials/header') %>
<%- include('../partials/sidebar') %>

<div class="page-wrapper">
    <!-- Slim Sub-header -->
    <div class="page-header py-2 py-md-3 bg-white border-bottom shadow-xs">
        <div class="container-xl d-flex justify-content-between align-items-center">
            <div>
                <h3 class="fw-bold text-dark mb-0 fs-2">Overview</h3>
            </div>
            <button class="btn btn-primary btn-sm fw-bold shadow-sm rounded-3 px-3" data-bs-toggle="modal" data-bs-target="#addModal">
                <i class="ti ti-plus me-1"></i> Add Tool
            </button>
        </div>
    </div>
    
    <div class="page-body mt-3">
        <div class="container-xl">
            
            <!-- 1. STATS CARDS -->
            <div class="row g-2 g-md-3 mb-3 mb-md-4">
                <div class="col-6 col-lg-3">
                    <div class="stat-card p-3">
                        <div class="d-flex align-items-center justify-content-between mb-1">
                            <span class="text-muted fw-semibold small">Total Tools</span>
                            <div class="icon-shape grad-primary shadow-sm"><i class="ti ti-tools fs-3"></i></div>
                        </div>
                        <h2 class="fw-bold mb-0 text-dark" id="statTotal">0</h2>
                    </div>
                </div>

                <div class="col-6 col-lg-3">
                    <div class="stat-card p-3">
                        <div class="d-flex align-items-center justify-content-between mb-1">
                            <span class="text-muted fw-semibold small">Active</span>
                            <div class="icon-shape grad-success shadow-sm"><i class="ti ti-circle-check fs-3"></i></div>
                        </div>
                        <h2 class="fw-bold mb-0 text-success" id="statActive">0</h2>
                    </div>
                </div>

                <div class="col-6 col-lg-3">
                    <div class="stat-card p-3">
                        <div class="d-flex align-items-center justify-content-between mb-1">
                            <span class="text-muted fw-semibold small">Disabled</span>
                            <div class="icon-shape grad-danger shadow-sm"><i class="ti ti-ban fs-3"></i></div>
                        </div>
                        <h2 class="fw-bold mb-0 text-danger" id="statDisabled">0</h2>
                    </div>
                </div>

                <div class="col-6 col-lg-3">
                    <div class="stat-card p-3">
                        <div class="d-flex align-items-center justify-content-between mb-1">
                            <span class="text-muted fw-semibold small">Total Hits</span>
                            <div class="icon-shape grad-dark shadow-sm"><i class="ti ti-chart-bar fs-3"></i></div>
                        </div>
                        <h2 class="fw-bold mb-0 text-dark" id="statUsage">0</h2>
                    </div>
                </div>
            </div>

            <!-- 2. TOOLS MANAGEMENT LIST -->
            <div class="card border-0 shadow-sm rounded-4 p-3 bg-white">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div>
                        <h4 class="fw-bold text-dark mb-0">Tools List</h4>
                        <span class="text-muted small" id="badgeCount">Loading...</span>
                    </div>
                </div>

                <div class="d-flex flex-column gap-2" id="toolsList">
                    <div class="text-center py-4 text-muted">Loading tools...</div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Modal: Add Tool -->
<div class="modal fade" id="addModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <div class="modal-header border-bottom py-3">
                <h5 class="modal-title fw-bold text-dark"><i class="ti ti-plus text-primary me-2"></i>Add New Tool</h5>
                <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal"></button>
            </div>
            <form id="addForm">
                <div class="modal-body p-3 p-md-4">
                    <div class="mb-3">
                        <label class="form-label fw-bold text-dark small">Tool Name</label>
                        <input type="text" id="tName" class="form-control rounded-3" placeholder="e.g. Word Counter" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold text-dark small">Category</label>
                        <select id="tCat" class="form-select rounded-3">
                            <option value="Text">📝 Text Tool</option>
                            <option value="Security">🔒 Security Tool</option>
                            <option value="Utility">⚙️ Utility Tool</option>
                            <option value="Image">🖼️ Image Tool</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold text-dark small">HTML File Name</label>
                        <input type="text" id="tSlug" class="form-control rounded-3" placeholder="e.g. word-counter.html" required>
                    </div>
                </div>
                <div class="modal-footer border-top p-3">
                    <button type="button" class="btn btn-light rounded-3" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary fw-bold rounded-3 px-4">Save Tool</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    loadAll();

    async function loadAll() {
        const s = await (await fetch('/api/admin/stats')).json();
        document.getElementById('statTotal').innerText = s.totalTools || 0;
        document.getElementById('statActive').innerText = s.activeTools || 0;
        document.getElementById('statDisabled').innerText = s.disabledTools || 0;
        document.getElementById('statUsage').innerText = s.totalUsage || 0;
        document.getElementById('badgeCount').innerText = `${s.totalTools || 0} Total Registered`;

        const tools = await (await fetch('/api/admin/tools')).json();
        const container = document.getElementById('toolsList');
        
        if(!tools || tools.length === 0) {
            container.innerHTML = '<div class="text-center py-4 text-muted">No tools found. Tap "Add Tool" button above.</div>';
            return;
        }

        container.innerHTML = tools.map(t => `
            <div class="tool-item-card p-3 d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div class="d-flex align-items-center gap-3">
                    <div class="avatar bg-blue-lt text-primary rounded-3 fw-bold fs-3">
                        ${t.name.charAt(0).toUpperCase()}
                    </div>
                    <div>
                        <h4 class="fw-bold text-dark mb-0 fs-3">${t.name}</h4>
                        <div class="d-flex align-items-center gap-2 mt-1">
                            <span class="badge bg-secondary-lt text-dark rounded-pill">${t.category}</span>
                            <span class="badge bg-dark-lt text-dark rounded-pill">${t.usageCount || 0} hits</span>
                            <span class="badge ${t.active ? 'bg-success-lt text-success' : 'bg-danger-lt text-danger'} rounded-pill fw-bold">
                                ${t.active ? '● Active' : '○ Disabled'}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="d-flex align-items-center gap-2 ms-auto">
                    <button class="btn btn-sm ${t.active ? 'btn-outline-warning' : 'btn-outline-success'} fw-bold rounded-pill px-3" onclick="toggleT('${t.id}')">
                        ${t.active ? 'Disable' : 'Enable'}
                    </button>
                    <button class="btn btn-sm btn-outline-danger rounded-circle p-2" onclick="delT('${t.id}')">
                        <i class="ti ti-trash fs-3"></i>
                    </button>
                </div>
            </div>
        `).join('');
    }

    async function toggleT(id) { 
        await fetch('/api/admin/tools/toggle/' + id, { method: 'POST' }); 
        loadAll(); 
    }
    
    async function delT(id) { 
        if(confirm('Delete this tool?')) { 
            await fetch('/api/admin/tools/' + id, { method: 'DELETE' }); 
            loadAll(); 
        } 
    }

    document.getElementById('addForm').onsubmit = async (e) => {
        e.preventDefault();
        await fetch('/api/admin/tools', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                name: document.getElementById('tName').value,
                category: document.getElementById('tCat').value,
                slug: document.getElementById('tSlug').value
            })
        });
        bootstrap.Modal.getInstance(document.getElementById('addModal')).hide();
        document.getElementById('addForm').reset();
        loadAll();
    };
</script>

<%- include('../partials/footer') %>