{% extends "admin/base.html" %}

{% block title %}User Details - {{ user.username }} - Admin Panel{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>
        <i class="fas fa-user me-2 text-primary"></i>
        User Details: {{ user.username }}
    </h2>
    <a href="{{ url_for('admin.users') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-2"></i>Back to Users
    </a>
</div>

<!-- User Information Card -->
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-transparent border-0">
        <h5 class="card-title mb-0">
            <i class="fas fa-info-circle me-2 text-primary"></i>
            User Information
        </h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label fw-bold">User ID:</label>
                    <span class="badge bg-secondary">#{{ user.id }}</span>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Username:</label>
                    <span class="text-muted">{{ user.username }}</span>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Email:</label>
                    <span class="text-muted">{{ user.email }}</span>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Company:</label>
                    <span class="text-muted">{{ user.company if user.company else 'Not specified' }}</span>
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label fw-bold">Status:</label>
                    <span class="badge bg-{{ 'success' if user.is_active else 'danger' }}">
                        <i class="fas fa-{{ 'check-circle' if user.is_active else 'times-circle' }} me-1"></i>
                        {{ 'Active' if user.is_active else 'Inactive' }}
                    </span>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Role:</label>
                    <span class="badge bg-{{ 'primary' if user.is_admin else 'secondary' }}">
                        <i class="fas fa-{{ 'crown' if user.is_admin else 'user' }} me-1"></i>
                        {{ 'Admin' if user.is_admin else 'User' }}
                    </span>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Last Login:</label>
                    <span class="text-muted">
                        {{ user.last_login.strftime('%B %d, %Y at %H:%M') if user.last_login else 'Never' }}
                    </span>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Account Created:</label>
                    <span class="text-muted">{{ user.created_at.strftime('%B %d, %Y at %H:%M') }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- User Actions Card -->
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-transparent border-0">
        <h5 class="card-title mb-0">
            <i class="fas fa-cogs me-2 text-primary"></i>
            User Actions
        </h5>
    </div>
    <div class="card-body">
        <div class="btn-group" role="group">
            <button type="button" 
                    class="btn btn-outline-secondary reset-password-btn"
                    data-user-id="{{ user.id }}"
                    data-username="{{ user.username }}"
                    data-email="{{ user.email }}"
                    title="Reset User Password">
                <i class="fas fa-key me-2"></i>Reset Password
            </button>
            <button type="button" 
                    class="btn btn-{{ 'warning' if user.is_active else 'success' }} toggle-user-btn"
                    data-user-id="{{ user.id }}"
                    data-is-active="{{ user.is_active|tojson }}"
                    title="{{ 'Deactivate' if user.is_active else 'Activate' }} User">
                <i class="fas fa-{{ 'ban' if user.is_active else 'check' }} me-2"></i>
                {{ 'Deactivate' if user.is_active else 'Activate' }} User
            </button>
            {% if user.id != current_user.id %}
            <button type="button" 
                    class="btn btn-outline-danger delete-user-btn"
                    data-user-id="{{ user.id }}"
                    title="Delete User">
                <i class="fas fa-trash me-2"></i>Delete User
            </button>
            {% endif %}
        </div>
    </div>
</div>

<!-- Quotations History Card -->
<div class="card border-0 shadow-sm">
    <div class="card-header bg-transparent border-0">
        <h5 class="card-title mb-0">
            <i class="fas fa-file-invoice me-2 text-primary"></i>
            Quotation History ({{ quotations|length }} total)
        </h5>
    </div>
    <div class="card-body p-0">
        {% if quotations %}
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="border-0">ID</th>
                        <th class="border-0">Project Name</th>
                        <th class="border-0">Mold Type</th>
                        <th class="border-0">Country</th>
                        <th class="border-0">Total Cost</th>
                        <th class="border-0">Created</th>
                        <th class="border-0 text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for quotation in quotations %}
                    <tr>
                        <td>
                            <span class="badge bg-info">#{{ quotation.id }}</span>
                        </td>
                        <td>
                            <span class="fw-medium">{{ quotation.project_name or 'Unnamed Project' }}</span>
                        </td>
                        <td>
                            <span class="text-muted">{{ quotation.mold_main_type or 'Not specified' }}</span>
                        </td>
                        <td>
                            <span class="text-muted">{{ quotation.mold_shop_country or 'Not specified' }}</span>
                        </td>
                        <td>
                            <span class="fw-bold text-success">
                                ${{ "{:,.2f}".format(quotation.total_cost) if quotation.total_cost else 'N/A' }}
                            </span>
                        </td>
                        <td>
                            <small class="text-muted">
                                {{ quotation.created_at.strftime('%m/%d/%Y %H:%M') }}
                            </small>
                        </td>
                        <td class="text-center">
                            <a href="{{ url_for('admin.quotation_detail', id=quotation.id) }}" 
                               class="btn btn-outline-info btn-sm" 
                               title="View Quotation Details">
                                <i class="fas fa-eye"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-center py-5">
            <i class="fas fa-file-invoice fa-3x text-muted mb-3"></i>
            <h5 class="text-muted">No quotations found</h5>
            <p class="text-muted">This user hasn't created any quotations yet.</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle user status
    document.querySelectorAll('.toggle-user-btn').forEach(button => {
        button.addEventListener('click', function() {
            const userId = this.dataset.userId;
            const isActive = this.dataset.isActive === 'true';
            const action = isActive ? 'deactivate' : 'activate';
            
            if (!confirm(`Are you sure you want to ${action} this user?`)) {
                return;
            }
            
            fetch(`/admin/user/${userId}/toggle`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    location.reload();
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while updating user status');
            });
        });
    });
    
    // Delete user
    document.querySelectorAll('.delete-user-btn').forEach(button => {
        button.addEventListener('click', function() {
            const userId = this.dataset.userId;
            
            if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) {
                return;
            }
            
            fetch('/admin/delete_user', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ user_id: parseInt(userId) })
            })
            .then(response => response.json())
            .then(data => {
                if (data.message) {
                    alert('User deleted successfully');
                    window.location.href = '/admin/users';
                } else {
                    alert('Error: ' + data.error);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while deleting the user');
            });
        });
    });
    
    // Reset password functionality
    document.querySelectorAll('.reset-password-btn').forEach(button => {
        button.addEventListener('click', function() {
            const userId = this.dataset.userId;
            const username = this.dataset.username;
            const email = this.dataset.email;
            
            if (!confirm(`Are you sure you want to reset the password for user "${username}"?\n\nThis will generate a new temporary password and invalidate their current password.`)) {
                return;
            }
            
            // Show loading state
            const originalHtml = this.innerHTML;
            this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Resetting Password...';
            this.disabled = true;
            
            fetch(`/admin/user/${userId}/reset-password`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    showPasswordResetModal(data);
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while resetting the password');
            })
            .finally(() => {
                // Restore button state
                this.innerHTML = originalHtml;
                this.disabled = false;
            });
        });
    });
});

function showPasswordResetModal(data) {
    const modalHtml = `
        <div class="modal fade" id="passwordResetModal" tabindex="-1" aria-labelledby="passwordResetModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-success text-white">
                        <h5 class="modal-title" id="passwordResetModalLabel">
                            <i class="fas fa-check-circle me-2"></i>Password Reset Successful
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-success">
                            <i class="fas fa-info-circle me-2"></i>
                            Password has been reset for user <strong>${data.username}</strong> (${data.email})
                        </div>
                        
                        <div class="card mb-3">
                            <div class="card-header">
                                <h6 class="mb-0"><i class="fas fa-key me-2"></i>Temporary Password</h6>
                            </div>
                            <div class="card-body">
                                <div class="input-group">
                                    <input type="password" class="form-control" id="tempPassword" value="${data.temporary_password}" readonly>
                                    <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility()">
                                        <i class="fas fa-eye" id="passwordToggleIcon"></i>
                                    </button>
                                    <button class="btn btn-outline-primary" type="button" onclick="copyToClipboard('tempPassword')">
                                        <i class="fas fa-copy"></i> Copy
                                    </button>
                                </div>
                                <small class="text-muted">The user can log in with this temporary password and should change it immediately.</small>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0"><i class="fas fa-link me-2"></i>Password Reset Link</h6>
                            </div>
                            <div class="card-body">
                                <div class="input-group">
                                    <input type="text" class="form-control" id="resetUrl" value="${data.reset_url}" readonly>
                                    <button class="btn btn-outline-primary" type="button" onclick="copyToClipboard('resetUrl')">
                                        <i class="fas fa-copy"></i> Copy
                                    </button>
                                </div>
                                <small class="text-muted">Send this link to the user so they can set their own password. Link expires in 15 minutes.</small>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if present
    const existingModal = document.getElementById('passwordResetModal');
    if (existingModal) {
        existingModal.remove();
    }
    
    // Add modal to body
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    
    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('passwordResetModal'));
    modal.show();
    
    // Clean up modal after it's hidden
    document.getElementById('passwordResetModal').addEventListener('hidden.bs.modal', function () {
        this.remove();
    });
}

function togglePasswordVisibility() {
    const passwordField = document.getElementById('tempPassword');
    const toggleIcon = document.getElementById('passwordToggleIcon');
    
    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        toggleIcon.className = 'fas fa-eye-slash';
    } else {
        passwordField.type = 'password';
        toggleIcon.className = 'fas fa-eye';
    }
}

function copyToClipboard(elementId) {
    const element = document.getElementById(elementId);
    element.select();
    element.setSelectionRange(0, 99999); // For mobile devices
    
    navigator.clipboard.writeText(element.value).then(function() {
        // Show temporary success feedback
        const button = event.target.closest('button');
        const originalHtml = button.innerHTML;
        button.innerHTML = '<i class="fas fa-check"></i> Copied!';
        button.classList.add('btn-success');
        button.classList.remove('btn-outline-primary');
        
        setTimeout(() => {
            button.innerHTML = originalHtml;
            button.classList.remove('btn-success');
            button.classList.add('btn-outline-primary');
        }, 2000);
    }).catch(function(err) {
        console.error('Could not copy text: ', err);
        alert('Could not copy to clipboard');
    });
}
</script>
{% endblock %}

{% block styles %}
{{ super() }}
<style>
.form-label {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.card-title {
    font-size: 1.1rem;
}

.btn-group .btn {
    margin-right: 0.5rem;
}

.table th {
    font-weight: 600;
    color: #495057;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td {
    vertical-align: middle;
}
</style>
{% endblock %}