{% extends "layout.html" %}

{% set active_nav = model_name %}

{% block extra_css %}
    .header-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
    }

    .table-card {
        padding: 0;
        overflow: hidden;
        margin-bottom: 32px;
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
    }

    .data-table th {
        text-align: left;
        padding: 6px 12px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border);
        background-color: #f1f5f9;
    }

    .data-table td {
        padding: 4px 12px;
        font-size: 0.8rem;
        border-bottom: 1px solid var(--border);
        color: #334155;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.7rem;
        font-weight: 600;
    }

    .status-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
    }

    .status-active .status-dot { background-color: var(--success); }
    .status-active { color: #065f46; }

    .status-inactive .status-dot { background-color: var(--text-muted); }
    .status-inactive { color: var(--text-muted); }

    .action-btns {
        display: flex;
        gap: 6px;
    }

    .action-btn {
        background: none;
        border: none;
        color: var(--primary);
        cursor: pointer;
        font-size: 0.75rem;
        font-weight: 600;
        transition: color 0.2s;
    }

    .action-btn:hover {
        color: var(--text-main);
    }

    .action-btn.delete:hover {
        color: var(--error);
    }

    /* Footer Stats */
    .table-footer-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .footer-stat-card {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 20px;
    }

    .footer-stat-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }

    .footer-stat-info .label {
        font-size: 0.7rem;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--text-muted);
        margin-bottom: 2px;
    }

    .footer-stat-info .value {
        font-size: 1.25rem;
        font-weight: 700;
    }

    /* Pagination */
    .pagination {
        padding: 16px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid var(--border);
        background-color: #fafafa;
    }

    .pagination-info {
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    .pagination-btns {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .page-size-selector {
        font-size: 0.85rem;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .page-size-selector select {
        padding: 4px 8px;
        border: 1px solid var(--border);
        border-radius: 4px;
        outline: none;
        background: white;
    }

    .activity-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 2px 8px;
        background-color: #f1f5f9;
        color: var(--text-muted);
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
        border: 1px solid var(--border);
    }

    .activity-badge.active {
        background-color: #ecfeff;
        color: var(--primary);
        border-color: #cffafe;
    }

    .activity-badge i {
        font-size: 0.7rem;
    }
{% endblock %}

{% block content %}

<div class="header-actions">
    <div>
        <h1 class="page-title">{{ model_name|capitalize }}</h1>
        <div style="display: flex; align-items: center; gap: 10px; margin-top: 4px;">
            <p class="page-subtitle" style="margin: 0;">Manage and monitor your {{ model_name }} records.</p>
            <div class="activity-badge {% if has_date_field %}active{% endif %}" title="Activity in last 24 hours">
                <i class="fas {% if has_date_field %}fa-bolt{% else %}fa-circle-info{% endif %}"></i>
                {% if has_date_field %}
                    {{ recent_count }} new today
                {% else %}
                    date_field not set
                {% endif %}
            </div>
        </div>
    </div>
    <button class="btn btn-primary" onclick="location.href='/admin/{{ model_name }}/new'">
        <i class="fas fa-plus"></i> Create {{ model_name|capitalize }}
    </button>
</div>

<div class="card table-card">
    <table class="data-table">
        <thead id="table-head">
            <!-- Columns injected via JS -->
        </thead>
        <tbody id="table-body">
            <!-- Loading indicator -->
            <tr>
                <td colspan="100%" style="text-align: center; padding: 48px; color: var(--text-muted);">
                    <i class="fas fa-circle-notch fa-spin"></i> Loading {{ model_name }} data...
                </td>
            </tr>
        </tbody>
    </table>
    
    <div class="pagination">
        <div class="pagination-info" id="pagination-info">
            Showing 0-0 of 0 {{ model_name }}
        </div>
        <div class="pagination-btns">
            <div class="page-size-selector">
                <span>Per page:</span>
                <select id="page-size-select">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                    <option value="50">50</option>
                </select>
            </div>
            <div style="display: flex; gap: 8px;">
                <button class="btn btn-secondary btn-sm" id="prev-btn">Previous</button>
                <button class="btn btn-secondary btn-sm" id="next-btn">Next</button>
            </div>
        </div>
    </div>
</div>

<div class="table-footer-stats">
    <div class="card footer-stat-card">
        <div class="footer-stat-icon" style="background-color: #e0f2fe; color: #0369a1;">
            <i class="fas fa-user-group"></i>
        </div>
        <div class="footer-stat-info">
            <div class="label">Total {{ model_name|capitalize }}</div>
            <div class="value" id="total-count">0</div>
        </div>
    </div>
    <div class="card footer-stat-card">
        <div class="footer-stat-icon" style="background-color: #e0e7ff; color: #4338ca;">
            <i class="fas fa-bolt"></i>
        </div>
        <div class="footer-stat-info">
            <div class="label">New Today</div>
            <div class="value">{% if has_date_field %}{{ recent_count }}{% else %}--{% endif %}</div>
        </div>
    </div>
    <div class="card footer-stat-card">
        <div class="footer-stat-icon" style="background-color: #fee2e2; color: #b91c1c;">
            <i class="fas fa-triangle-exclamation"></i>
        </div>
        <div class="footer-stat-info">
            <div class="label">Attention Needed</div>
            <div class="value">{% if has_attention_filter %}{{ attention_count }}{% else %}--{% endif %}</div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
    const modelName = "{{ model_name }}";
    const apiBaseUrl = "/admin/api";
    let currentPage = 1;
    let pageSize = 10;
    let currentSortField = 'id';
    let currentSortDir = 'desc';

    async function loadData() {
        try {
            // 1. Fetch Schema to get configuration
            const schemaResponse = await fetch(`${apiBaseUrl}/schema`);
            const schema = await schemaResponse.json();
            const modelSchema = schema.models.find(m => m.name === modelName);
            const listDisplay = modelSchema ? modelSchema.list_display : null;

            // 2. Fetch Data
            const skip = (currentPage - 1) * pageSize;
            const url = `${apiBaseUrl}/${modelName}?skip=${skip}&limit=${pageSize}&order_by=${currentSortField}&order_dir=${currentSortDir}`;
            const response = await fetch(url);
            const result = await response.json();
            const data = result.data;
            const total = result.total;

            document.getElementById('total-count').textContent = total;
            
            const start = data.length > 0 ? skip + 1 : 0;
            const end = skip + data.length;
            document.getElementById('pagination-info').textContent = `Showing ${start}-${end} of ${total} ${modelName}`;

            // Update button states
            document.getElementById('prev-btn').disabled = currentPage === 1;
            document.getElementById('next-btn').disabled = end >= total;

            if (data.length === 0 && currentPage === 1) {
                document.getElementById('table-body').innerHTML = '<tr><td colspan="100%" style="text-align: center; padding: 48px;">No records found</td></tr>';
                return;
            }

            // 3. Determine columns to show
            let columns = [];
            if (listDisplay && listDisplay.length > 0) {
                columns = listDisplay;
            } else {
                columns = Object.keys(data[0]);
                if (columns.includes('id')) {
                    columns = ['id', ...columns.filter(c => c !== 'id')];
                }
            }

            const headRow = document.getElementById('table-head');
            headRow.innerHTML = '<tr>' + 
                columns.map(col => {
                    const isSorted = currentSortField === col;
                    const icon = isSorted ? (currentSortDir === 'asc' ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort';
                    return `
                        <th onclick="toggleSort('${col}')" style="cursor: pointer; user-select: none;">
                            <div style="display: flex; align-items: center; gap: 8px;">
                                ${col.replace('_', ' ')}
                                <i class="fas ${icon}" style="font-size: 0.7rem; color: ${isSorted ? 'var(--primary)' : '#ccc'}"></i>
                            </div>
                        </th>
                    `;
                }).join('') + 
                '<th>Actions</th></tr>';

            const body = document.getElementById('table-body');
            body.innerHTML = data.map(row => `
                <tr>
                    ${columns.map(col => {
                        const val = row[col];
                        
                        // Special rendering for specific fields
                        if (col === 'id') return `<td style="font-family: monospace; color: var(--text-muted); font-size: 0.8rem;">#${val}</td>`;
                        
                        if (col === 'email' || col === 'name') {
                            const name = row['name'] || (row['email'] ? row['email'].split('@')[0] : 'Item');
                            return `
                                <td>
                                    <span style="font-weight: 600;">${val}</span>
                                    ${col === 'name' && row['email'] ? `<span style="font-size: 0.7rem; color: var(--text-muted); margin-left: 4px;">(${row['email']})</span>` : ''}
                                </td>
                            `;
                        }

                        if (typeof val === 'boolean' || col === 'is_active') {
                            const isActive = val === true || val === 'true';
                            return `
                                <td>
                                    <span class="status-badge ${isActive ? 'status-active' : 'status-inactive'}">
                                        <div class="status-dot"></div>
                                        ${isActive ? 'Active' : 'Inactive'}
                                    </span>
                                </td>
                            `;
                        }

                        return `<td>${val}</td>`;
                    }).join('')}
                    <td>
                        <div class="action-btns">
                            <button class="action-btn" onclick="location.href='/admin/${modelName}/${row.id}/detail'" title="View">
                                <i class="far fa-eye"></i>
                            </button>
                            <button class="action-btn" onclick="location.href='/admin/${modelName}/${row.id}'" title="Edit">
                                <i class="fas fa-pencil-alt"></i>
                            </button>
                            <button class="action-btn delete" onclick="deleteRecord('${row.id}')" title="Delete">
                                <i class="far fa-trash-alt"></i>
                            </button>
                        </div>
                    </td>
                </tr>
            `).join('');
        } catch (error) {
            console.error('Error loading data:', error);
            document.getElementById('table-body').innerHTML = '<tr><td colspan="100%" style="text-align: center; padding: 48px; color: var(--error);">Error loading data</td></tr>';
        }
    }

    function toggleSort(field) {
        if (currentSortField === field) {
            currentSortDir = currentSortDir === 'asc' ? 'desc' : 'asc';
        } else {
            currentSortField = field;
            currentSortDir = 'asc';
        }
        currentPage = 1; // Reset to first page on sort
        loadData();
    }

    async function deleteRecord(id) {
        if (!confirm('Are you sure you want to delete this record?')) return;
        try {
            const response = await fetch(`${apiBaseUrl}/${modelName}/${id}`, { method: 'DELETE' });
            if (response.ok) {
                loadData();
            } else {
                alert('Failed to delete record');
            }
        } catch (error) {
            alert('Error deleting record');
        }
    }

    document.getElementById('prev-btn').addEventListener('click', () => {
        if (currentPage > 1) {
            currentPage--;
            loadData();
        }
    });

    document.getElementById('next-btn').addEventListener('click', () => {
        currentPage++;
        loadData();
    });

    document.getElementById('page-size-select').addEventListener('change', (e) => {
        pageSize = parseInt(e.target.value);
        currentPage = 1;
        loadData();
    });

    loadData();
</script>
{% endblock %}