{% extends "base.html" %}

{% block title %}Profile - {{ current_user.username }}{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <!-- Profile Card -->
        <div class="col-lg-4 mb-4">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-user"></i> Profile</h5>
                </div>
                <div class="card-body text-center">
                    <div class="mb-3">
                        <i class="fas fa-user-circle fa-5x text-primary"></i>
                    </div>
                    <h4>{{ current_user.username }}</h4>
                    <p class="text-muted">{{ current_user.email }}</p>
                    {% if current_user.is_admin %}
                    <span class="badge bg-danger">Admin</span>
                    {% endif %}
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex justify-content-between">
                        <span><i class="fas fa-calendar-alt text-muted me-2"></i>Member Since</span>
                        <span>{{ current_user.created_at.strftime('%b %d, %Y') if current_user.created_at else 'N/A' }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span><i class="fas fa-clock text-muted me-2"></i>Last Login</span>
                        <span>{{ current_user.last_login.strftime('%b %d, %Y %H:%M') if current_user.last_login else 'Never' }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span><i class="fas fa-check-circle text-muted me-2"></i>Status</span>
                        <span class="badge {{ 'bg-success' if current_user.is_active else 'bg-danger' }}">
                            {{ 'Active' if current_user.is_active else 'Inactive' }}
                        </span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Statistics and Activity -->
        <div class="col-lg-8">
            <!-- Stats Cards -->
            <div class="row mb-4">
                <div class="col-md-4 mb-3">
                    <div class="card bg-primary text-white shadow h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-uppercase mb-1">Optimizations</h6>
                                    <h2 class="mb-0">{{ stats.total_optimizations }}</h2>
                                </div>
                                <i class="fas fa-chart-line fa-2x opacity-50"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card bg-success text-white shadow h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-uppercase mb-1">Algorithms</h6>
                                    <h2 class="mb-0">{{ stats.custom_algorithms }}</h2>
                                </div>
                                <i class="fas fa-code fa-2x opacity-50"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card bg-info text-white shadow h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-uppercase mb-1">Comparisons</h6>
                                    <h2 class="mb-0">{{ stats.total_comparisons }}</h2>
                                </div>
                                <i class="fas fa-balance-scale fa-2x opacity-50"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Algorithm Submissions -->
            <div class="card shadow mb-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0"><i class="fas fa-code-branch"></i> Algorithm Submissions</h5>
                </div>
                <div class="card-body">
                    {% if submissions %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Algorithm</th>
                                    <th>Status</th>
                                    <th>Submitted</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for sub in submissions %}
                                <tr>
                                    <td>{{ sub.algorithm_name }}</td>
                                    <td>
                                        {% if sub.status == 'pending' %}
                                        <span class="badge bg-warning">Pending Review</span>
                                        {% elif sub.status == 'approved' %}
                                        <span class="badge bg-success">Approved</span>
                                        {% elif sub.status == 'rejected' %}
                                        <span class="badge bg-danger">Rejected</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ sub.upload_date.strftime('%Y-%m-%d') if sub.upload_date else 'N/A' }}</td>
                                    <td>
                                        {% if sub.pr_url %}
                                        <a href="{{ sub.pr_url }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                            <i class="fab fa-github"></i> View PR
                                        </a>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center text-muted py-4">
                        <i class="fas fa-inbox fa-3x mb-3"></i>
                        <p>No algorithm submissions yet.</p>
                        <a href="{{ url_for('upload_algorithm_page') }}" class="btn btn-primary">
                            <i class="fas fa-upload"></i> Submit Algorithm
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Recent Activity -->
            <div class="card shadow">
                <div class="card-header bg-white">
                    <h5 class="mb-0"><i class="fas fa-history"></i> Recent Optimizations</h5>
                </div>
                <div class="card-body">
                    {% if recent_results %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Algorithm</th>
                                    <th>Function</th>
                                    <th>Best Fitness</th>
                                    <th>Time</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for result in recent_results %}
                                <tr>
                                    <td>{{ result.algorithm_name }}</td>
                                    <td>{{ result.objective_function }}</td>
                                    <td>{{ "%.6f"|format(result.best_fitness) }}</td>
                                    <td>{{ "%.2f"|format(result.execution_time) }}s</td>
                                    <td>{{ result.created_at.strftime('%Y-%m-%d %H:%M') if result.created_at else 'N/A' }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="text-center mt-3">
                        <a href="{{ url_for('history') }}" class="btn btn-outline-primary">
                            View All History <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                    {% else %}
                    <div class="text-center text-muted py-4">
                        <i class="fas fa-chart-line fa-3x mb-3"></i>
                        <p>No optimization runs yet.</p>
                        <a href="{{ url_for('optimize_page') }}" class="btn btn-primary">
                            <i class="fas fa-play"></i> Run Optimization
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Update Profile Modal -->
    <div class="modal fade" id="updateProfileModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Update Profile</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form method="POST" action="{{ url_for('update_profile') }}">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" class="form-control" 
                                   value="{{ current_user.email }}" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">New Password (leave blank to keep current)</label>
                            <input type="password" name="new_password" class="form-control" 
                                   placeholder="Enter new password">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Confirm Password</label>
                            <input type="password" name="confirm_password" class="form-control" 
                                   placeholder="Confirm new password">
                        </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">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
