{% extends "base.html" %}

{% block title %}{{ username }} - User Profile - 20min.ch Comment Analysis{% endblock %}

{% block last_updated %}{{ now }}{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url_for('index') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('users') }}">Users</a></li>
                <li class="breadcrumb-item active" aria-current="page">User Profile</li>
            </ol>
        </nav>
    </div>
</div>

<!-- User Profile Header -->
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <div class="d-flex justify-content-between align-items-center">
                    <h2 class="mb-0"><i class="fas fa-user-circle"></i> {{ username }}</h2>
                    {% if user_metrics and user_metrics.bot_score is defined %}
                    <span class="badge {{ getBotScoreClass(user_metrics.bot_score) }} fs-5">
                        Bot Score: {{ user_metrics.bot_score }}
                    </span>
                    {% else %}
                    <span class="badge bg-secondary fs-5">
                        Bot Score: N/A
                    </span>
                    {% endif %}
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h4>User Statistics</h4>
                        <table class="table">
                            <tbody>
                                <tr>
                                    <th>Total Comments:</th>
                                    <td>{{ user_metrics.comments_count if user_metrics and user_metrics.comments_count is defined else 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Total Articles:</th>
                                    <td>{{ user_metrics.articles_count if user_metrics and user_metrics.articles_count is defined else 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Comments per Day:</th>
                                    <td>{{ user_metrics.comments_per_day|round(1) if user_metrics and user_metrics.comments_per_day is defined else 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Active Hours:</th>
                                    <td>{{ user_metrics.hour_distribution|length if user_metrics and user_metrics.hour_distribution is defined else 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>First Seen:</th>
                                    <td>
                                        {% if user_metrics and user_metrics.first_seen is defined %}
                                        <script>document.write(formatDate("{{ user_metrics.first_seen }}"))</script>
                                        {% else %}
                                        N/A
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <th>Last Seen:</th>
                                    <td>
                                        {% if user_metrics and user_metrics.last_seen is defined %}
                                        <script>document.write(formatDate("{{ user_metrics.last_seen }}"))</script>
                                        {% else %}
                                        N/A
                                        {% endif %}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h4>Activity Summary</h4>
                        <div class="row">
                            <div class="col-6">
                                <div class="text-center mb-3">
                                    <div class="display-5">{{ user_metrics.top_comments_count if user_metrics and user_metrics.top_comments_count is defined else '0' }}</div>
                                    <div class="text-muted">Top-level Comments</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-center mb-3">
                                    <div class="display-5">{{ user_metrics.reply_count if user_metrics and user_metrics.reply_count is defined else '0' }}</div>
                                    <div class="text-muted">Replies</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-center mb-3">
                                    <div class="display-5">{{ user_metrics.reactions_received if user_metrics and user_metrics.reactions_received is defined else '0' }}</div>
                                    <div class="text-muted">Reactions Received</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-center mb-3">
                                    <div class="display-5">{{ user_metrics.reactions_given if user_metrics and user_metrics.reactions_given is defined else '0' }}</div>
                                    <div class="text-muted">Reactions Given</div>
                                </div>
                            </div>
                        </div>
                        
                        {% if user_metrics and user_metrics.bot_score is defined and user_metrics.bot_score >= 70 %}
                        <div class="alert alert-warning mt-3">
                            <h5 class="alert-heading"><i class="fas fa-exclamation-triangle"></i> Potential Bot Activity</h5>
                            <p>This user's activity patterns suggest potential automated behavior or coordinated activity.</p>
                            <hr>
                            <p class="mb-0">
                                <strong>Factors:</strong>
                                {% if user_metrics.comments_per_day > 50 %}
                                <span class="badge bg-warning text-dark">High Frequency</span>
                                {% endif %}
                                {% if user_metrics and user_metrics.similar_comments_count is defined and user_metrics.similar_comments_count > 0 %}
                                <span class="badge bg-warning text-dark">Similar Comments</span>
                                {% endif %}
                                {% if user_metrics.hour_distribution|length < 3 %}
                                <span class="badge bg-warning text-dark">Limited Activity Hours</span>
                                {% endif %}
                                {% if user_metrics.comment_interval_consistency > 70 %}
                                <span class="badge bg-warning text-dark">Consistent Timing</span>
                                {% endif %}
                            </p>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Activity Analysis -->
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" id="userTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="activity-tab" data-bs-toggle="tab" 
                                data-bs-target="#activity" type="button" role="tab" 
                                aria-controls="activity" aria-selected="true">
                            Activity Analysis
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="comments-tab" data-bs-toggle="tab" 
                                data-bs-target="#comments" type="button" role="tab" 
                                aria-controls="comments" aria-selected="false">
                            Comments
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="network-tab" data-bs-toggle="tab" 
                                data-bs-target="#network" type="button" role="tab" 
                                aria-controls="network" aria-selected="false">
                            Network
                        </button>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content" id="userTabContent">
                    <!-- Activity Analysis Tab -->
                    <div class="tab-pane fade show active" id="activity" role="tabpanel" aria-labelledby="activity-tab">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <i class="fas fa-clock"></i> Activity by Hour of Day
                                    </div>
                                    <div class="card-body">
                                        <canvas id="hourlyActivityChart" width="400" height="300"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <i class="fas fa-chart-pie"></i> Reactions Received
                                    </div>
                                    <div class="card-body">
                                        <canvas id="reactionsChart" width="400" height="300"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <i class="fas fa-calendar-alt"></i> Activity Timeline
                                    </div>
                                    <div class="card-body">
                                        <canvas id="activityTimelineChart" width="800" height="200"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Comments Tab -->
                    <div class="tab-pane fade" id="comments" role="tabpanel" aria-labelledby="comments-tab">
                        <div class="mb-3">
                            <div class="input-group">
                                <input type="text" class="form-control" id="commentSearch" 
                                       placeholder="Search user comments...">
                                <button class="btn btn-outline-secondary" type="button" id="searchButton">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="comment-list">
                            {% for comment in user_comments %}
                            <div class="card mb-3 comment-card {% if comment.is_reply %}comment-reply{% endif %}">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <div>
                                            <a href="{{ url_for('article_detail', article_id=comment.article_id) }}" class="fw-bold">
                                                {{ comment.article_title }}
                                            </a>
                                            {% if comment.is_reply %}
                                            <small class="text-muted ms-2">
                                                replying to 
                                                <a href="{{ url_for('user_detail', username=comment.parent_author) }}">
                                                    {{ comment.parent_author }}
                                                </a>
                                            </small>
                                            {% endif %}
                                        </div>
                                        <small class="text-muted">
                                            <script>document.write(formatDate("{{ comment.timestamp }}"))</script>
                                        </small>
                                    </div>
                                    <p class="card-text">{{ comment.text }}</p>
                                    <div class="d-flex justify-content-between align-items-center mt-3">
                                        <div>
                                            {% for reaction_type, count in comment.reactions.items() %}
                                            {% if count > 0 %}
                                            <span class="badge bg-secondary me-1">
                                                {{ reaction_type }}: {{ count }}
                                            </span>
                                            {% endif %}
                                            {% endfor %}
                                        </div>
                                        <a href="{{ url_for('article_detail', article_id=comment.article_id) }}" 
                                           class="btn btn-sm btn-outline-primary">
                                            View in Article
                                        </a>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                            
                            {% if user_comments|length == 0 %}
                            <div class="text-center py-5">
                                <i class="fas fa-comments fa-3x text-muted mb-3"></i>
                                <p class="mb-0">No comments found for this user.</p>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- Network Tab -->
                    <div class="tab-pane fade" id="network" role="tabpanel" aria-labelledby="network-tab">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <i class="fas fa-users"></i> Most Replied To
                                    </div>
                                    <div class="card-body">
                                        <canvas id="repliedToChart" width="400" height="300"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <i class="fas fa-comment-dots"></i> Replies Received
                                    </div>
                                    <div class="card-body">
                                        <canvas id="repliesReceivedChart" width="400" height="300"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Similar Users -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <i class="fas fa-users"></i> Similar Users
                            </div>
                            <div class="card-body">
                                {% if similar_users is defined and similar_users|length > 0 %}
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>Username</th>
                                                <th>Similarity Score</th>
                                                <th>Common Articles</th>
                                                <th>Bot Score</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for similar in similar_users %}
                                            <tr>
                                                <td>
                                                    <a href="{{ url_for('user_detail', username=similar.username) }}">
                                                        {{ similar.username }}
                                                    </a>
                                                </td>
                                                <td>{{ similar.similarity_score }}%</td>
                                                <td>{{ similar.common_articles }}</td>
                                                <td>
                                                    <span class="badge {{ getBotScoreClass(similar.bot_score) }}">
                                                        {{ similar.bot_score }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <a href="{{ url_for('user_detail', username=similar.username) }}" 
                                                       class="btn btn-sm btn-primary">
                                                        <i class="fas fa-user"></i> View
                                                    </a>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                {% else %}
                                <div class="text-center py-5">
                                    <i class="fas fa-users fa-3x text-muted mb-3"></i>
                                    <p class="mb-0">No similar users found.</p>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <!-- Potential Coordination Group -->
                        {% if coordination_group is defined and coordination_group %}
                        <div class="card mb-4">
                            <div class="card-header bg-warning">
                                <i class="fas fa-exclamation-triangle"></i> Potential Coordination Group
                            </div>
                            <div class="card-body">
                                <p>This user may be part of a coordinated group with the following users:</p>
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>Username</th>
                                                <th>Coordination Score</th>
                                                <th>Bot Score</th>
                                                <th>Common Articles</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for member in coordination_group.members %}
                                            <tr>
                                                <td>
                                                    <a href="{{ url_for('user_detail', username=member.username) }}">
                                                        {{ member.username }}
                                                    </a>
                                                </td>
                                                <td>{{ member.coordination_score }}%</td>
                                                <td>
                                                    <span class="badge {{ getBotScoreClass(member.bot_score) }}">
                                                        {{ member.bot_score }}
                                                    </span>
                                                </td>
                                                <td>{{ member.common_articles }}</td>
                                                <td>
                                                    <a href="{{ url_for('user_detail', username=member.username) }}" 
                                                       class="btn btn-sm btn-primary">
                                                        <i class="fas fa-user"></i> View
                                                    </a>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                                <div class="alert alert-info mt-3">
                                    <strong>Coordination indicators:</strong>
                                    <ul>
                                        <li>Similar commenting patterns ({{ coordination_group.pattern_similarity }}%)</li>
                                        <li>Temporal proximity of comments ({{ coordination_group.temporal_proximity }}%)</li>
                                        <li>Content similarity ({{ coordination_group.content_similarity }}%)</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Hourly Activity Chart
    const hourlyActivityCtx = document.getElementById('hourlyActivityChart').getContext('2d');
    const hourlyActivityChart = new Chart(hourlyActivityCtx, {
        type: 'bar',
        data: {
            labels: Array.from({length: 24}, (_, i) => i),
            datasets: [{
                label: 'Comments',
                data: {{ hourly_activity|tojson }},
                backgroundColor: 'rgba(13, 110, 253, 0.7)',
                borderColor: 'rgba(13, 110, 253, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Number of Comments'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Hour of Day (24h)'
                    }
                }
            },
            plugins: {
                title: {
                    display: true,
                    text: 'Comments by Hour of Day'
                }
            }
        }
    });
    
    // Reactions Chart
    const reactionsCtx = document.getElementById('reactionsChart').getContext('2d');
    const reactionData = {
        labels: Object.keys({{ reactions_received|tojson }}),
        datasets: [{
            label: 'Reaction Count',
            data: Object.values({{ reactions_received|tojson }}),
            backgroundColor: [
                'rgba(40, 167, 69, 0.7)',    // awesome
                'rgba(220, 53, 69, 0.7)',    // bad
                'rgba(255, 193, 7, 0.7)',    // nonsense
                'rgba(108, 117, 125, 0.7)',  // unnecessary
                'rgba(23, 162, 184, 0.7)',   // smart
                'rgba(13, 110, 253, 0.7)'    // exact
            ],
            borderColor: [
                'rgba(40, 167, 69, 1)',
                'rgba(220, 53, 69, 1)',
                'rgba(255, 193, 7, 1)',
                'rgba(108, 117, 125, 1)',
                'rgba(23, 162, 184, 1)',
                'rgba(13, 110, 253, 1)'
            ],
            borderWidth: 1
        }]
    };
    
    const reactionsChart = new Chart(reactionsCtx, {
        type: 'pie',
        data: reactionData,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Reactions Received'
                }
            }
        }
    });
    
    // Activity Timeline Chart
    const timelineCtx = document.getElementById('activityTimelineChart').getContext('2d');
    const timelineChart = new Chart(timelineCtx, {
        type: 'line',
        data: {
            labels: {{ activity_timeline.labels|tojson }},
            datasets: [{
                label: 'Comments',
                data: {{ activity_timeline.comments|tojson }},
                borderColor: 'rgba(13, 110, 253, 1)',
                backgroundColor: 'rgba(13, 110, 253, 0.1)',
                fill: true,
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Number of Comments'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Date'
                    }
                }
            },
            plugins: {
                title: {
                    display: true,
                    text: 'Comment Activity Over Time'
                }
            }
        }
    });
    
    // Most Replied To Chart
    const repliedToCtx = document.getElementById('repliedToChart').getContext('2d');
    const repliedToChart = new Chart(repliedToCtx, {
        type: 'bar',
        data: {
            labels: {{ most_replied_to.labels|tojson }},
            datasets: [{
                label: 'Replies Sent',
                data: {{ most_replied_to.data|tojson }},
                backgroundColor: 'rgba(23, 162, 184, 0.7)',
                borderColor: 'rgba(23, 162, 184, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Number of Replies'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Users'
                    }
                }
            },
            plugins: {
                title: {
                    display: true,
                    text: 'Users Most Replied To'
                }
            }
        }
    });
    
    // Replies Received Chart
    const repliesReceivedCtx = document.getElementById('repliesReceivedChart').getContext('2d');
    const repliesReceivedChart = new Chart(repliesReceivedCtx, {
        type: 'bar',
        data: {
            labels: {{ replies_received.labels|tojson }},
            datasets: [{
                label: 'Replies Received',
                data: {{ replies_received.data|tojson }},
                backgroundColor: 'rgba(40, 167, 69, 0.7)',
                borderColor: 'rgba(40, 167, 69, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Number of Replies'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Users'
                    }
                }
            },
            plugins: {
                title: {
                    display: true,
                    text: 'Replies Received From Users'
                }
            }
        }
    });
    
    // Comment search functionality
    document.getElementById('searchButton').addEventListener('click', function() {
        const searchTerm = document.getElementById('commentSearch').value.toLowerCase();
        const comments = document.querySelectorAll('.comment-card');
        
        comments.forEach(comment => {
            const commentText = comment.querySelector('.card-text').textContent.toLowerCase();
            
            if (commentText.includes(searchTerm)) {
                comment.style.display = 'block';
            } else {
                comment.style.display = 'none';
            }
        });
    });
    
    // Reset search when clearing the input
    document.getElementById('commentSearch').addEventListener('input', function() {
        if (this.value === '') {
            const comments = document.querySelectorAll('.comment-card');
            comments.forEach(comment => {
                comment.style.display = 'block';
            });
        }
    });
    
    // Enter key triggers search
    document.getElementById('commentSearch').addEventListener('keyup', function(event) {
        if (event.key === 'Enter') {
            document.getElementById('searchButton').click();
        }
    });
});
</script>
{% endblock %}