<div class="comment-thread">
    <!-- Thread Header -->
    <div class="comment-thread-header">
        <div class="comment-stats">
            <span class="stat-item">
                <strong>{{total_comments}}</strong> Kommentare
            </span>
            <span class="stat-item">
                <strong>{{total_reactions}}</strong> Reaktionen
            </span>
        </div>

        <!-- Sorting Controls -->
        <div class="comment-sort">
            <label for="sort-select">Sortierung:</label>
            <select id="sort-select" data-live-action="changeSorting" onchange="this.dispatchEvent(new Event('change', {bubbles: true}))">
                <for items="sort_options" as="option">
                    <option value="{{option.value}}" {{option.is_selected}}>
                        {{option.label}}
                    </option>
                </for>
            </select>
        </div>
    </div>

    <!-- Comments List -->
    <div class="comments-list">
        <if condition="has_comments">
            <for items="prepared_comments" as="comment">
                <include template="components/comment-item" data="comment" />
            </for>
        </if>

        <if condition="!has_comments">
            <div class="comments-empty">
                <div class="empty-icon">💬</div>
                <div class="empty-text">Noch keine Kommentare vorhanden</div>
                <p class="empty-hint">Sei der Erste, der einen Kommentar hinterlässt!</p>
            </div>
        </if>
    </div>

    <!-- New Comment Form -->
    <div class="comment-form">
        <h3>Kommentar hinzufügen</h3>
        <form id="new-comment-form">
            <div class="form-group">
                <label for="comment-author">Name</label>
                <input type="text" id="comment-author" required placeholder="Dein Name">
            </div>
            <div class="form-group">
                <label for="comment-content">Kommentar</label>
                <textarea id="comment-content" rows="4" required placeholder="Was möchtest du sagen?"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Kommentar abschicken</button>
        </form>
    </div>
</div>

<!-- Comment Item Component Template -->
<template id="comment-item-template">
    <article class="comment-item" style="{{comment.indent_style}}">
        <div class="comment-header">
            <span class="comment-author">{{comment.author_name}}</span>
            <span class="comment-date">{{comment.formatted_date}}{{comment.edited_label}}</span>
        </div>

        <div class="comment-content">
            {{comment.content}}
        </div>

        <if condition="comment.show_reactions && comment.has_reactions">
            <div class="comment-reactions">
                <for items="comment.grouped_reactions" as="reaction">
                    <button
                        class="reaction-button"
                        data-live-action="addReaction"
                        data-param-comment-id="{{comment.id}}"
                        data-param-reaction="{{reaction.type}}"
                        data-param-user-id="current_user"
                    >
                        {{reaction.type}} {{reaction.count}}
                    </button>
                </for>
            </div>
        </if>

        <div class="comment-actions">
            <if condition="comment.can_reply">
                <button
                    class="action-button"
                    onclick="toggleReplyForm('{{comment.id}}')"
                >
                    Antworten
                </button>
            </if>

            <if condition="comment.show_reactions">
                <button
                    class="action-button"
                    data-live-action="addReaction"
                    data-param-comment-id="{{comment.id}}"
                    data-param-reaction="👍"
                    data-param-user-id="current_user"
                >
                    👍 Gefällt mir
                </button>
            </if>

            <if condition="comment.can_edit">
                <button
                    class="action-button"
                    onclick="editComment('{{comment.id}}')"
                >
                    ✏️ Bearbeiten
                </button>
            </if>

            <if condition="comment.can_delete">
                <button
                    class="action-button action-danger"
                    data-live-action="deleteComment"
                    data-param-comment-id="{{comment.id}}"
                    onclick="return confirm('Kommentar wirklich löschen?')"
                >
                    🗑️ Löschen
                </button>
            </if>
        </div>

        <!-- Reply Form (hidden by default) -->
        <div id="reply-form-{{comment.id}}" class="reply-form" style="display: none;">
            <textarea
                id="reply-content-{{comment.id}}"
                rows="3"
                placeholder="Deine Antwort..."
            ></textarea>
            <div class="reply-form-actions">
                <button
                    onclick="submitReply('{{comment.id}}')"
                    class="btn btn-sm btn-primary"
                >
                    Antworten
                </button>
                <button
                    onclick="toggleReplyForm('{{comment.id}}')"
                    class="btn btn-sm btn-secondary"
                >
                    Abbrechen
                </button>
            </div>
        </div>

        <!-- Nested Replies -->
        <if condition="comment.has_replies">
            <div class="comment-replies">
                <for items="comment.replies" as="reply">
                    <include template="components/comment-item" data="reply" />
                </for>
            </div>
        </if>
    </article>
</template>

<style>
.comment-thread {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.comment-thread-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e0e0e0;
}

.comment-stats {
    display: flex;
    gap: 1.5rem;
}

.stat-item {
    color: #666;
    font-size: 0.9rem;
}

.stat-item strong {
    color: #333;
    font-size: 1.1rem;
}

.comment-sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comment-sort label {
    color: #666;
    font-size: 0.9rem;
}

.comment-sort select {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
}

.comments-list {
    margin-bottom: 2rem;
}

.comment-item {
    background: #f9f9f9;
    border-left: 3px solid #2196F3;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.comment-item:hover {
    background: #f5f5f5;
    border-left-color: #1976D2;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.comment-author {
    font-weight: 600;
    color: #333;
}

.comment-date {
    color: #999;
    font-size: 0.85rem;
}

.comment-content {
    color: #555;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.comment-reactions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.reaction-button {
    padding: 0.25rem 0.75rem;
    background: white;
    border: 1px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.reaction-button:hover {
    background: #f0f0f0;
    border-color: #2196F3;
}

.comment-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.action-button {
    padding: 0.25rem 0.75rem;
    background: transparent;
    border: none;
    color: #2196F3;
    cursor: pointer;
    font-size: 0.875rem;
    transition: color 0.2s;
}

.action-button:hover {
    color: #1976D2;
    text-decoration: underline;
}

.action-danger {
    color: #f44336;
}

.action-danger:hover {
    color: #d32f2f;
}

.reply-form {
    margin-top: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.reply-form textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    font-family: inherit;
    margin-bottom: 0.5rem;
}

.reply-form-actions {
    display: flex;
    gap: 0.5rem;
}

.comment-replies {
    margin-top: 1rem;
}

.comments-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #999;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.empty-text {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    color: #666;
}

.empty-hint {
    font-size: 0.9rem;
    color: #999;
}

.comment-form {
    background: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
    border: 2px dashed #ddd;
}

.comment-form h3 {
    margin-bottom: 1rem;
    color: #333;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #555;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
}

.form-group textarea {
    resize: vertical;
}

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-primary {
    background: #2196F3;
    color: white;
}

.btn-primary:hover {
    background: #1976D2;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-secondary {
    background: #9E9E9E;
    color: white;
}

.btn-secondary:hover {
    background: #757575;
}

@media (max-width: 768px) {
    .comment-thread-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .comment-item {
        margin-left: 0 !important;
    }

    .comment-actions {
        font-size: 0.8rem;
    }
}
</style>

<script>
function toggleReplyForm(commentId) {
    const form = document.getElementById(`reply-form-${commentId}`);
    if (form) {
        form.style.display = form.style.display === 'none' ? 'block' : 'none';
    }
}

function submitReply(commentId) {
    const textarea = document.getElementById(`reply-content-${commentId}`);
    const content = textarea.value.trim();

    if (!content) {
        alert('Bitte gib eine Antwort ein');
        return;
    }

    const component = document.querySelector('[data-component-id^="comment-thread:"]');
    const button = document.createElement('button');
    button.setAttribute('data-live-action', 'addComment');
    button.setAttribute('data-param-content', content);
    button.setAttribute('data-param-author-id', 'current_user');
    button.setAttribute('data-param-author-name', 'Aktueller Benutzer');
    button.setAttribute('data-param-parent-id', commentId);
    button.style.display = 'none';

    component.appendChild(button);
    button.click();
    component.removeChild(button);

    textarea.value = '';
    toggleReplyForm(commentId);
}

function editComment(commentId) {
    const newContent = prompt('Neuer Kommentar-Inhalt:');
    if (!newContent || !newContent.trim()) {
        return;
    }

    const component = document.querySelector('[data-component-id^="comment-thread:"]');
    const button = document.createElement('button');
    button.setAttribute('data-live-action', 'editComment');
    button.setAttribute('data-param-comment-id', commentId);
    button.setAttribute('data-param-new-content', newContent);
    button.style.display = 'none';

    component.appendChild(button);
    button.click();
    component.removeChild(button);
}

// New Comment Form Handler
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('new-comment-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();

            const author = document.getElementById('comment-author').value.trim();
            const content = document.getElementById('comment-content').value.trim();

            if (!author || !content) {
                alert('Bitte fülle alle Felder aus');
                return;
            }

            const component = document.querySelector('[data-component-id^="comment-thread:"]');
            const button = document.createElement('button');
            button.setAttribute('data-live-action', 'addComment');
            button.setAttribute('data-param-content', content);
            button.setAttribute('data-param-author-id', 'user_' + Date.now());
            button.setAttribute('data-param-author-name', author);
            button.style.display = 'none';

            component.appendChild(button);
            button.click();
            component.removeChild(button);

            // Reset form
            form.reset();
        });
    }
});
</script>
