@php $followUps = $this->allFollowUpInteractions; @endphp
@if($followUps->count() > 0)
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Interaction
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Proposal / Client
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Date
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @foreach($followUps as $interaction)
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10">
                                    <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
                                        <svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                                        </svg>
                                    </div>
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900 cursor-pointer hover:text-blue-600">
                                        @if($interaction->interactable_type === \App\Models\Proposal::class && $interaction->interactable)
                                            <a href="{{ route('proposals.edit', [$interaction->interactable, 'open_followup' => 1]) }}" class="text-blue-600 hover:text-blue-900">
                                                {{ $interaction->subject }}
                                            </a>
                                        @else
                                            {{ $interaction->subject }}
                                        @endif
                                    </div>
                                    @if($interaction->description)
                                        <div class="text-sm text-gray-500 truncate max-w-xs">{{ $interaction->description }}</div>
                                    @endif
                                </div>
                            </div>
                        </td>
                        
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm">
                                @if($interaction->interactable_type === \App\Models\Proposal::class && $interaction->interactable)
                                    <div class="font-medium text-gray-900">
                                        <a href="{{ route('proposals.edit', $interaction->interactable) }}" class="text-blue-600 hover:text-blue-900">
                                            <strong>{{ $interaction->interactable->title }}</strong>
                                        </a>
                                    </div>
                                    @if($interaction->interactable->client)
                                        <div class="text-xs text-gray-500">
                                            {{ $interaction->interactable->client->company_name ?? 'No Client' }}
                                        </div>
                                    @endif
                                @else
                                    <div class="text-sm text-gray-500">No proposal assigned</div>
                                @endif
                            </div>
                        </td>
                        
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">
                                {{ $interaction->interaction_date ? \Carbon\Carbon::parse($interaction->interaction_date)->format('M j, Y') : '—' }}
                                @if($interaction->interaction_date)
                                    <div class="text-xs text-gray-500">
                                        {{ \Carbon\Carbon::parse($interaction->interaction_date)->format('H:i') }}
                                    </div>
                                @endif
                            </div>
                        </td>
                        
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <div class="flex items-center space-x-2">
                                @if($interaction->interactable_type === \App\Models\Proposal::class && $interaction->interactable)
                                    <a href="{{ route('proposals.edit', [$interaction->interactable, 'open_followup' => 1]) }}" 
                                       class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-green-700 bg-green-100 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                        </svg>
                                        New Follow-up
                                    </a>
                                @endif
                                
                                <button wire:click="deleteInteraction({{ $interaction->id }})" 
                                        onclick="return confirm('Are you sure you want to delete this interaction?')"
                                        class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                    </svg>
                                    Delete
                                </button>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@else
    <div class="bg-white px-6 py-12 text-center">
        <div class="text-gray-500">
            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
            </svg>
            <h3 class="mt-2 text-sm font-medium text-gray-900">No follow-up interactions found</h3>
            <p class="mt-1 text-sm text-gray-500">You don't have any follow-up interactions yet.</p>
        </div>
    </div>
@endif