@php
    $inputType = $selectionType === 'radio' ? 'radio' : 'checkbox';
    $inputName = $selectionType === 'radio' ? $fieldName : $fieldName . '[]';
@endphp

<div class="space-y-4">
    @if($articles->isEmpty())
        <div class="text-center py-8 text-gray-500">
            <p>No articles available for selection.</p>
        </div>
    @else
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach($articles as $article)
                @php
                    $isSelected = $selectionType === 'radio'
                        ? $selectedId == $article->id
                        : in_array($article->id, $selectedIds ?? []);
                @endphp

                <label class="cursor-pointer group">
                    <input
                        type="{{ $inputType }}"
                        name="{{ $inputName }}"
                        value="{{ $article->id }}"
                        @if($isSelected) checked @endif
                        class="sr-only article-selector"
                        data-field="{{ $fieldName }}"
                        onchange="updateHiddenField(this)"
                    >

                    <div class="border-2 rounded-lg p-4 transition-all duration-200 hover:shadow-md
                        {{ $isSelected ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300' }}">

                        <div class="flex items-start space-x-3">
                            <!-- Screenshot -->
                            <div class="flex-shrink-0">
                                @if($article->urlbox_screenshot_url)
                                    <img src="{{ $article->urlbox_screenshot_url }}"
                                         alt="Article screenshot"
                                         class="w-20 h-16 object-cover rounded border">
                                @else
                                    <div class="w-20 h-16 bg-gray-200 rounded border flex items-center justify-center">
                                        <span class="text-xs text-gray-500">No image</span>
                                    </div>
                                @endif
                            </div>

                            <!-- Content -->
                            <div class="flex-1 min-w-0">
                                <h3 class="font-medium text-sm mb-1 line-clamp-2 group-hover:text-blue-600">
                                    {{ $article->title }}
                                </h3>

                                <div class="text-xs text-gray-500 mb-1">
                                    {{ $article->diffbot_site_name ?? 'Unknown source' }} •
                                    {{ $article->original_published_at ? $article->original_published_at->format('M j, Y') : 'No date' }}
                                </div>

                                <p class="text-xs text-gray-600 line-clamp-2">
                                    {{ $article->summary_short ?? 'No summary available' }}
                                </p>

                                @if($article->is_published)
                                    <span class="inline-block mt-2 text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
                                        Published {{ $article->published_on ? $article->published_on->format('Y-m-d') : 'Unknown' }}
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                </label>
            @endforeach
        </div>

        @if($articles->count() >= 30)
            <div class="text-center py-4">
                <button type="button" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                    Show More Articles
                </button>
            </div>
        @endif
    @endif
</div>

<script>
function updateHiddenField(input) {
    const fieldName = input.dataset.field;
    const hiddenField = document.querySelector(`input[name="${fieldName}"]`);

    if (input.type === 'radio') {
        // Update hidden field
        if (hiddenField) {
            hiddenField.value = input.checked ? input.value : '';
        }

        // Update visual state for radio buttons
        const allRadios = document.querySelectorAll(`input[name="${input.name}"]`);
        allRadios.forEach(radio => {
            const card = radio.closest('label').querySelector('div');
            if (radio.checked) {
                card.className = card.className.replace(/border-gray-200|hover:border-gray-300/g, '').replace(/bg-white/g, '');
                if (!card.className.includes('border-blue-500')) {
                    card.className += ' border-blue-500 bg-blue-50';
                }
            } else {
                card.className = card.className.replace(/border-blue-500|bg-blue-50/g, '');
                if (!card.className.includes('border-gray-200')) {
                    card.className += ' border-gray-200 hover:border-gray-300';
                }
            }
        });
    } else {
        // Checkbox handling
        const checkboxes = document.querySelectorAll(`input[name="${fieldName}[]"]:checked`);
        const values = Array.from(checkboxes).map(cb => cb.value);

        if (hiddenField) {
            hiddenField.value = values.join(',');
        }

        // Update visual state for checkboxes
        const allCheckboxes = document.querySelectorAll(`input[name="${fieldName}[]"]`);
        allCheckboxes.forEach(checkbox => {
            const card = checkbox.closest('label').querySelector('div');
            if (checkbox.checked) {
                card.className = card.className.replace(/border-gray-200|hover:border-gray-300/g, '').replace(/bg-white/g, '');
                if (!card.className.includes('border-blue-500')) {
                    card.className += ' border-blue-500 bg-blue-50';
                }
            } else {
                card.className = card.className.replace(/border-blue-500|bg-blue-50/g, '');
                if (!card.className.includes('border-gray-200')) {
                    card.className += ' border-gray-200 hover:border-gray-300';
                }
            }
        });
    }

    // Trigger Livewire update if available
    if (window.Livewire) {
        window.Livewire.dispatch('field-updated', { field: fieldName, value: hiddenField?.value || '' });
    }
}
</script>

<style>
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>