{% extends "base.html" %}

{% block title %}Admin Panel - Models - VidAI{% endblock %}

{% block head %}
<style>
    .container { max-width: 1400px; margin: 2rem auto; padding: 0 2rem; }
    .admin-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 2rem; }
    .card-header { margin-bottom: 1.5rem; }
    .card-header h3 { margin: 0; color: #1e293b; }
    .btn { padding: 0.75rem 2rem; background: #667eea; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
    .btn:hover { background: #5a67d8; }
    .btn-danger { background: #dc2626; }
    .btn-danger:hover { background: #b91c1c; }
    .btn-icon { padding: 0.5rem; background: none; border: none; cursor: pointer; color: #64748b; }
    .btn-icon:hover { color: #374151; }
    .table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
    .table th, .table td { padding: 1rem; text-align: left; border-bottom: 1px solid #e5e7eb; }
    .table th { background: #f8fafc; font-weight: 600; color: #374151; }
    .actions-cell { display: flex; gap: 0.5rem; }
    .form-group { margin-bottom: 1rem; }
    .form-group label { display: block; margin-bottom: 0.5rem; color: #374151; font-weight: 500; }
    .form-group input, .form-group select { width: 100%; padding: 0.5rem; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 1rem; }
    .form-group input:focus, .form-group select:focus { outline: none; border-color: #667eea; }
    .alert { padding: 0.75rem; border-radius: 8px; margin-bottom: 1rem; }
    .alert-error { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
    .alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }

    /* Modal Styles */
    .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
    .modal.show { display: flex; align-items: center; justify-content: center; }
    .modal-content { background-color: white; margin: 0; padding: 0; width: 90%; max-width: 600px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); height: 80vh; overflow-y: auto; display: flex; flex-direction: column; }
    .modal-header { padding: 1rem 2rem; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
    .modal-body { padding: 1rem; flex: 1; }
    .modal-footer { padding: 1rem 2rem; border-top: 1px solid #e5e7eb; text-align: right; flex-shrink: 0; }
    .form-row { display: flex; gap: 1rem; }
    .form-row .form-group { flex: 1; }
</style>
{% endblock %}

{% block content %}
<div class="container">
        <div class="admin-card">
            <div class="card-header">
                <h3><i class="fas fa-brain"></i> Model Management</h3>
            </div>

            {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ 'error' if category == 'error' else 'success' }}">{{ message }}</div>
                {% endfor %}
            {% endif %}
            {% endwith %}

            <table class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Path</th>
                        <th>VRAM (GB)</th>
                        <th>Status</th>
                        <th>Created</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for model in models %}
                    <tr>
                        <td>{{ model.get('name', 'N/A') }}</td>
                        <td>{{ model.get('type', 'N/A').title() }}</td>
                        <td>{{ model.get('path', 'N/A') }}</td>
                        <td>{{ model.get('vram_estimate', 0) }}</td>
                        <td><span class="status-{{ 'active' if model.get('available') else 'inactive' }}">{{ 'Available' if model.get('available') else 'Hidden' }}</span></td>
                        <td>{{ model.get('created_at', 'N/A')[:10] if model.get('created_at') else 'N/A' }}</td>
                        <td class="actions-cell">
                            <button onclick="editModel({{ model.get('id') }}, '{{ model.get('name') }}', '{{ model.get('type') }}', '{{ model.get('path') }}', {{ model.get('vram_estimate', 0) }}, {{ model.get('available')|lower }})" class="btn-icon" title="Edit"><i class="fas fa-edit"></i></button>
                            <button onclick="deleteModel({{ model.get('id') }}, '{{ model.get('name') }}')" class="btn-icon" title="Delete" style="color: #dc2626;"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="admin-card">
            <div class="card-header">
                <h3><i class="fas fa-plus"></i> Add New Model</h3>
            </div>

            <form method="post" action="/admin/models/add">
                <div class="form-group">
                    <label for="name">Model Name</label>
                    <input type="text" id="name" name="name" required>
                </div>

                <div class="form-group">
                    <label for="type">Type</label>
                    <select id="type" name="type" required>
                        <option value="local">Local File</option>
                        <option value="huggingface">Hugging Face</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="path">Path/Model ID</label>
                    <input type="text" id="path" name="path" required placeholder="e.g., /path/to/model or Qwen/Qwen2.5-VL-7B-Instruct">
                </div>

                <div class="form-group">
                    <label for="vram_estimate">VRAM Estimate (GB)</label>
                    <input type="number" id="vram_estimate" name="vram_estimate" value="0" min="0" step="0.1">
                </div>

                <div class="form-group">
                    <label>
                        <input type="checkbox" id="available" name="available" checked>
                        Available (visible to users)
                    </label>
                </div>

                <button type="submit" class="btn">Add Model</button>
            </form>
        </div>

        </div>

    <!-- Edit Model Modal -->
    <div id="editModelModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Edit Model</h3>
                <span onclick="closeEditModal()" style="cursor: pointer; font-size: 1.5rem;">&times;</span>
            </div>
            <form id="editModelForm" method="post" action="">
                <div class="modal-body">
                    <input type="hidden" id="editModelId" name="model_id">
                    <div class="form-group">
                        <label for="editName">Model Name</label>
                        <input type="text" id="editName" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="editType">Type</label>
                        <select id="editType" name="type" required>
                            <option value="local">Local File</option>
                            <option value="huggingface">Hugging Face</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editPath">Path/Model ID</label>
                        <input type="text" id="editPath" name="path" required>
                    </div>
                    <div class="form-group">
                        <label for="editVram">VRAM Estimate (GB)</label>
                        <input type="number" id="editVram" name="vram_estimate" min="0" step="0.1" required>
                    </div>
                    <div class="form-group">
                        <label>
                            <input type="checkbox" id="editAvailable" name="available">
                            Available (visible to users)
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="closeEditModal()" class="btn" style="background: #6b7280;">Cancel</button>
                    <button type="submit" class="btn">Update Model</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function editModel(id, name, type, path, vram, available) {
            document.getElementById('editModelId').value = id;
            document.getElementById('editName').value = name;
            document.getElementById('editType').value = type;
            document.getElementById('editPath').value = path;
            document.getElementById('editVram').value = vram;
            document.getElementById('editAvailable').checked = available;
            document.getElementById('editModelForm').action = `/admin/models/${id}/update`;
            document.getElementById('editModelModal').classList.add('show');
            document.body.style.overflow = 'hidden';
        }

        function closeEditModal() {
            document.getElementById('editModelModal').classList.remove('show');
            document.body.style.overflow = 'auto';
        }

        function deleteModel(id, name) {
            if (confirm(`Are you sure you want to delete model "${name}"? This action cannot be undone.`)) {
                // Create a form and submit it
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = `/admin/models/${id}/delete`;

                document.body.appendChild(form);
                form.submit();
            }
        }

        // Close modal when clicking outside
        window.onclick = function(event) {
            const modal = document.getElementById('editModelModal');
            if (event.target == modal) {
                closeEditModal();
            }
        }
    </script>
</div>
{% endblock %}