@props(['comment', 'level' => 0])

@php
    // Check if this comment or any of its descendants are not deleted
    $hasNonDeletedDescendants = false;
    if ($comment->deleted_at === null) {
        $hasNonDeletedDescendants = true;
    } else {
        // Check if any children are not deleted
        foreach ($comment->children as $child) {
            if ($child->deleted_at === null) {
                $hasNonDeletedDescendants = true;
                break;
            }
            // Recursively check grandchildren
            if (count($child->children) > 0) {
                foreach ($child->children as $grandchild) {
                    if ($grandchild->deleted_at === null) {
                        $hasNonDeletedDescendants = true;
                        break 2;
                    }
                }
            }
        }
    }
@endphp

<style>
    .comment-thread {
        position: relative;
        padding-left: 1rem;
    }
    .comment-thread::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: #e5e7eb;
    }
    .comment-card {
        position: relative;
        margin-left: 1rem;
        padding: 1rem;
        background: white;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
        transition: background-color 0.2s ease-in-out;
    }
    .comment-card:hover {
        background-color: #f9fafb;
    }
    .comment-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    .comment-content {
        margin-bottom: 0.5rem;
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .comment-footer {
        display: flex;
        align-items: center;
        font-size: 0.875rem;
        color: #6b7280;
    }
    .comment-actions {
        display: flex;
        gap: 1rem;
        margin-left: 1rem;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
    }
    .comment-card:hover .comment-actions {
        opacity: 1;
    }
    .comment-action {
        color: #6b7280;
        text-decoration: none;
        cursor: pointer;
    }
    .comment-action:hover {
        color: #374151;
        text-decoration: underline;
    }
    .expand-button {
        margin-top: 0.25rem;
        color: #6b7280;
        cursor: pointer;
    }
    .expand-button:hover {
        color: #374151;
    }
    .expand-button i {
        transition: transform 0.2s ease-in-out;
    }
    .expand-button[aria-expanded="true"] i {
        transform: rotate(180deg);
    }
</style>

@if($hasNonDeletedDescendants)
    <div class="comment-thread" style="margin-left: {{ $level * 2 }}rem;">
        <div class="comment-card">
            <div class="comment-header">
                <div class="flex items-center">
                    <div class="text-sm font-medium text-gray-900">
                        {{ $comment->title ?? 'Unknown User' }}
                    </div>
                </div>
            </div>
            <div class="comment-content">
                <div class="flex items-center">
                    <div class="flex-1">
                        @if($comment->deleted_at)
                            <span class="text-gray-500 italic">Comment deleted</span>
                        @else
                            {{ $comment->body }}
                        @endif
                    </div>
                    @if($comment->children->isNotEmpty() && $comment->children->whereNull('deleted_at')->isNotEmpty())
                        <button 
                            wire:click="toggleComment({{ $comment->id }})"
                            class="expand-button ml-3"
                            title="{{ $this->isExpanded($comment->id) ? 'Collapse' : 'Expand' }}"
                            aria-expanded="{{ $this->isExpanded($comment->id) ? 'true' : 'false' }}">
                            <i class="fas fa-chevron-down"></i>
                        </button>
                    @endif
                </div>
            </div>
            <div class="comment-footer">
                <div class="text-sm text-gray-500">
                    {{ $comment->created_at->format('M d, Y h:i A') }}
                </div>
                @if(!$comment->deleted_at)
                    <div class="comment-actions">
                        <a 
                            wire:click="replyToComment({{ $comment->id }})" 
                            class="comment-action"
                            title="Reply">
                            Reply
                        </a>
                        @if(auth()->user() && auth()->user()->id === $comment->creator_id)
                            <a 
                                wire:click="confirmDelete({{ $comment->id }})" 
                                class="comment-action"
                                title="Delete">
                                Delete
                            </a>
                        @endif
                    </div>
                @endif
            </div>
        </div>

        @if(!$comment->deleted_at && $this->replyingToCommentId === $comment->id)
            <div class="comment-card" style="margin-left: 1rem;">
                <form wire:submit.prevent="submitReply" class="space-y-4">
                    <div>
                        <textarea
                            wire:model="replyContent"
                            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
                            rows="3"
                            placeholder="Write your reply..."
                        ></textarea>
                    </div>
                    <div class="flex justify-end space-x-2">
                        <button 
                            wire:click="cancelReply" 
                            type="button"
                            class="btn secondary-btn">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-outline whitespace-nowrap md">
                            Submit
                        </button>
                    </div>
                </form>
            </div>
        @endif

        @if($comment->children->isNotEmpty() && $this->isExpanded($comment->id))
            @foreach($comment->children as $child)
                <x-comment-row :comment="$child" :level="$level + 1"/>
            @endforeach
        @endif
    </div>
@endif