@push('css')
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" />
@endpush

<div>
    <ul class="list-group mb-3">
        @foreach($this->comments as $comment)
            @php
                $name = $comment->user->name ?? 'Unknown';
                $picture = $comment->user->picture ?? asset('assets/img/default-avatar.png');
            @endphp
            <li class="list-group-item">
                <div class="d-flex justify-content-between">
                    <div class="d-flex align-items-center">
                        <img src="{{ $picture }}" class="avatar avatar-xs rounded-circle me-2" alt="{{ $name }}">
                        <strong>{{ $name }}</strong>
                        <span class="ms-2">{{ $comment->body }}</span>
                    </div>
                    <button class="btn btn-sm text-danger" wire:click="deleteComment({{ $comment->id }})">&times;</button>
                </div>
                @if($comment->attachments->isNotEmpty())
                    <div class="mt-2">
                        @foreach($comment->attachments as $attachment)
                            <div class="d-flex align-items-center mt-1">
                                @if($attachment->isImage())
                                    <img src="{{ $attachment->url }}" alt="{{ $attachment->filename }}" class="me-2" style="max-width: 100px; max-height: 100px;">
                                @endif
                                <a href="{{ $attachment->url }}" target="_blank">{{ $attachment->filename }}</a>
                                <button class="btn btn-sm text-danger ms-2" wire:click="deleteAttachment({{ $attachment->id }})">&times;</button>
                            </div>
                        @endforeach
                    </div>
                @endif
            </li>
        @endforeach
    </ul>
    <div class="mb-3">
        <label class="w-100">
            <input id="comment-input" type="text" class="form-control" wire:model.defer="newComment" placeholder="Write a comment…">
        </label>
        <label class="w-100 mt-2">
            <div id="comment-attachment-dropzone" class="dropzone" wire:ignore>
                <div class="dz-message">Drop files here or click to browse.</div>
            </div>
            <span class="small text-muted">Optional file attachment.</span>
        </label>
        @if($attachment)
            <ul class="mt-2 mb-0">
                @if(is_array($attachment))
                    @foreach($attachment as $file)
                        <li>{{ $file->getClientOriginalName() }}</li>
                    @endforeach
                @else
                    <li>{{ $attachment->getClientOriginalName() }}</li>
                @endif
            </ul>
        @endif
        <button class="btn btn-primary mt-2" wire:click="addComment">Add</button>
    </div>
</div>

@push('js')
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<script>
    document.addEventListener('livewire:load', function () {
        Dropzone.autoDiscover = false;
        const commentDropzone = new Dropzone('#comment-attachment-dropzone', {
            url: '#',
            autoProcessQueue: false,
        });
        commentDropzone.on('addedfile', function(file) {
            @this.upload('attachment', file);
        });

        // Submit comment on Enter (Shift+Enter for newline)
        const input = document.getElementById('comment-input');
        if (input) {
            input.addEventListener('keydown', function(e){
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    @this.call('addComment');
                }
            });
        }
    });
</script>
@endpush