{% extends "base.html" %}

{% block title %}{{ user.username }}'s Profile{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h1 class="card-title">{{ user.username }}'s Profile</h1>
                    {% if user.profile_picture %}
                        <img src="{{ url_for('static', filename='uploads/' + user.profile_picture) }}" class="img-fluid rounded-circle mb-3" alt="Profile Picture" style="background-color: transparent;">
                    {% else %}
                        <div class="profile-initial rounded-circle mb-3 d-flex justify-content-center align-items-center bg-primary" style="width: 100px; height: 100px;">
                            <span class="text-white" style="font-size: 3rem;">{{ user.username[0].upper() }}</span>
                        </div>
                    {% endif %}
                    <p class="card-text"><strong>Bio:</strong></p>
                    <div class="card-text bio-text">{{ user.rendered_bio|safe or "No bio available." }}</div>
                    <h5 class="card-title">Stats</h5>
                    <p class="card-text">Posts: {{ post_count }}</p>
                    <p class="card-text">Total Likes: {{ like_count }}</p>
                    <p class="card-text">Total Comments: {{ comment_count }}</p>
                    {% if current_user.is_authenticated and current_user.id == user.id %}
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editProfileModal">Edit Profile</button>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <h2>Posts</h2>
            {% for post in posts %}
            <div class="card mb-3">
                <div class="card-body">
                    <p class="card-text">{{ post.content|safe }}</p>
                    {% if post.image_url %}
                    <img src="{{ url_for('static', filename='uploads/' + post.image_url) }}" class="img-fluid mb-2" alt="Post image">
                    {% endif %}
                    <div class="d-flex align-items-center mt-2">
                        {% if post.author.profile_picture %}
                            <img src="{{ url_for('static', filename='uploads/' + post.author.profile_picture) }}" class="rounded-circle me-2" alt="Profile Picture" style="width: 30px; height: 30px; object-fit: cover;">
                        {% else %}
                            <div class="rounded-circle me-2 d-flex justify-content-center align-items-center bg-primary" style="width: 30px; height: 30px;">
                                <span class="text-white" style="font-size: 0.8rem;">{{ post.author.username[0].upper() }}</span>
                            </div>
                        {% endif %}
                        <small class="text-muted">
                            <a href="{{ url_for('profile', username=post.author.username) }}" class="text-decoration-none">{{ post.author.username }}</a>
                        </small>
                    </div>
                    <p class="card-text"><small class="text-muted">{{ post.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</small></p>
                    <button class="btn btn-primary btn-sm like-btn" data-post-id="{{ post.id }}">
                        <i class="bi bi-heart-fill"></i> Like (<span class="like-count">{{ post.likes|length }}</span>)
                    </button>
                    <button class="btn btn-secondary btn-sm comment-btn" data-post-id="{{ post.id }}">
                        <i class="bi bi-chat-fill"></i> Comment ({{ post.comments|length }})
                    </button>
                    {% if current_user.is_authenticated and current_user.id == post.author.id %}
                    <a href="{{ url_for('edit_post', post_id=post.id) }}" class="btn btn-warning btn-sm">
                        <i class="bi bi-pencil-fill"></i> Edit
                    </a>
                    {% endif %}
                </div>
                <div class="card-footer comment-section" id="comment-section-{{ post.id }}" style="display: none;">
                    <h6>Comments:</h6>
                    <ul class="list-unstyled">
                        {% for comment in post.comments if not comment.parent %}
                            {% with depth=1 %}
                                {% include 'comment.html' %}
                            {% endwith %}
                        {% endfor %}
                    </ul>
                    <form class="comment-form" data-post-id="{{ post.id }}">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="Add a comment" name="content" required>
                            <button class="btn btn-outline-secondary" type="submit">Send</button>
                        </div>
                    </form>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- Edit Profile Modal -->
{% if current_user.is_authenticated and current_user.id == user.id %}
<div class="modal fade" id="editProfileModal" tabindex="-1" aria-labelledby="editProfileModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editProfileModalLabel">Edit Profile</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" enctype="multipart/form-data" id="profileForm">
                    <div class="mb-3">
                        <label for="bio" class="form-label">Bio</label>
                        <textarea class="form-control" id="bio" name="bio" rows="5">{{ user.bio }}</textarea>
                        <small class="form-text text-muted">Markdown and HTML color styling are supported.</small>
                    </div>
                    <div class="mb-3">
                        <label for="profile_picture" class="form-label">Profile Picture</label>
                        <input type="file" class="form-control" id="profile_picture" name="profile_picture" accept="image/*">
                    </div>
                    <div id="cropperContainer" style="display: none;">
                        <img id="cropperImage" src="" alt="Image to crop" style="max-width: 100%;">
                    </div>
                    {% if user.profile_picture %}
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="remove_picture" name="remove_picture">
                        <label class="form-check-label" for="remove_picture">Remove current profile picture</label>
                    </div>
                    {% endif %}
                    <input type="hidden" name="cropped_data" id="croppedData">
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
<script>
$(document).ready(function() {
    let cropper;

    $('#profile_picture').change(function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(event) {
                $('#cropperImage').attr('src', event.target.result);
                $('#cropperContainer').show();
                if (cropper) {
                    cropper.destroy();
                }
                cropper = new Cropper($('#cropperImage')[0], {
                    aspectRatio: 1,
                    viewMode: 1,
                    minCropBoxWidth: 200,
                    minCropBoxHeight: 200,
                });
            }
            reader.readAsDataURL(file);
        }
    });

    $('#profileForm').submit(function(e) {
        e.preventDefault();
        if (cropper) {
            const croppedCanvas = cropper.getCroppedCanvas({
                width: 200,
                height: 200
            });
            $('#croppedData').val(croppedCanvas.toDataURL());
        }
        this.submit();
    });

    var easyMDE = new EasyMDE({
        element: document.getElementById('bio'),
        spellChecker: false,
        autofocus: true,
        lineWrapping: true,
        toolbar: [
            "bold", "italic", "heading", "quote", "unordered-list", "ordered-list",
            "link", "code", "table", "undo", "redo",
            {
                name: "custom-color",
                action: function(editor){
                    var cm = editor.codemirror;
                    var output = '';
                    var selectedText = cm.getSelection();
                    var color = prompt("Enter color (e.g., red, #ff0000, rgb(255,0,0)):");
                    if (color) {
                        output = '<span style="color: ' + color + ';">' + selectedText + '</span>';
                        cm.replaceSelection(output);
                    }
                },
                className: "fa fa-paint-brush",
                title: "Custom Color",
            }
        ],
        status: false,
        theme: "dark"
    });

    // Adjust line height in the editor
    easyMDE.codemirror.getWrapperElement().style.lineHeight = "1.3";
});
</script>
{% endblock %}

{% block styles %}
{{ super() }}
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<style>
    .bio-text {
        white-space: pre-wrap;
        word-wrap: break-word;
        max-height: 200px;
        overflow-y: auto;
        line-height: 1.3; /* Reduce line spacing */
    }
    .bio-text a {
        color: #007bff;
        text-decoration: underline;
    }
    .bio-text a:hover {
        color: #0056b3;
    }
    .EasyMDEContainer {
        background-color: #333;
    }
    .EasyMDEContainer .CodeMirror {
        color: #fff;
        background-color: #333;
    }
    .editor-toolbar {
        background-color: #444;
        border-color: #555;
    }
    .editor-toolbar button {
        color: #fff !important;
    }
    .editor-toolbar button:hover,
    .editor-toolbar button.active {
        background-color: #555;
    }
    .CodeMirror-cursor {
        border-left: 1px solid #fff;
    }
    .CodeMirror-line {
        padding: 0 !important; /* Remove extra padding */
    }
</style>
{% endblock %}