<div class="p-6">
    <x-page-header title="Routes" subtitle="Manage connections between your feeds and channels">
        <button
            wire:click="openCreateModal"
            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
        >
            <svg class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
            </svg>
            Create Route
        </button>
    </x-page-header>

    <div class="space-y-6">
        @forelse ($routes as $route)
            <div class="bg-white rounded-lg shadow-sm p-6 dark:bg-gray-800" wire:key="route-{{ $route->feed_id }}-{{ $route->platform_channel_id }}">
                <div class="flex items-start justify-between">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center space-x-3 mb-2">
                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                                {{ $route->feed?->name }} → {{ $route->platformChannel?->display_name ?? $route->platformChannel?->name }}
                            </h3>
                            @if ($route->is_active)
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
                                    <svg class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                                    </svg>
                                    Active
                                </span>
                            @else
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300">
                                    <svg class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                                    </svg>
                                    Inactive
                                </span>
                            @endif
                        </div>
                        <div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-300">
                            <span>Priority: {{ $route->priority }}</span>
                            <span>&bull;</span>
                            <span>Feed: {{ $route->feed?->name }}</span>
                            <span>&bull;</span>
                            <span>{{ $route->platformChannel?->platformInstance?->platform?->channelLabel() ?? 'Channel' }}: {{ $route->platformChannel?->display_name ?? $route->platformChannel?->name }}</span>
                            <span>&bull;</span>
                            <span>Created: {{ $route->created_at->format('M d, Y') }}</span>
                            @if ($route->auto_approve === true)
                                <span>&bull;</span>
                                <span class="text-green-600 dark:text-green-400">Auto-approve: On</span>
                            @elseif ($route->auto_approve === false)
                                <span>&bull;</span>
                                <span class="text-red-600 dark:text-red-400">Auto-approve: Off</span>
                            @endif
                        </div>
                        @if ($route->platformChannel?->description)
                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                                {{ $route->platformChannel->description }}
                            </p>
                        @endif
                        @if ($route->keywords->isNotEmpty())
                            <div class="mt-3">
                                <div class="flex items-center space-x-2 mb-2">
                                    <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />
                                    </svg>
                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Keywords</span>
                                </div>
                                <div class="flex flex-wrap gap-2">
                                    @foreach ($route->keywords as $keyword)
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $keyword->is_active ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' : 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400' }}">
                                            {{ $keyword->keyword }}
                                        </span>
                                    @endforeach
                                </div>
                            </div>
                        @else
                            <div class="mt-3 text-sm text-gray-400 italic dark:text-gray-500">
                                No keyword filters - matches all articles
                            </div>
                        @endif
                    </div>
                    <div class="flex items-center space-x-2 ml-4">
                        <button
                            wire:click="openEditModal({{ $route->feed_id }}, {{ $route->platform_channel_id }})"
                            class="p-2 text-gray-400 hover:text-gray-600 rounded-md dark:text-gray-500 dark:hover:text-gray-300"
                            title="Edit route"
                        >
                            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                            </svg>
                        </button>
                        <button
                            wire:click="toggle({{ $route->feed_id }}, {{ $route->platform_channel_id }})"
                            class="p-2 text-gray-400 hover:text-gray-600 rounded-md dark:text-gray-500 dark:hover:text-gray-300"
                            title="{{ $route->is_active ? 'Deactivate route' : 'Activate route' }}"
                        >
                            @if ($route->is_active)
                                <svg class="h-4 w-4 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
                                </svg>
                            @else
                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
                                </svg>
                            @endif
                        </button>
                        <button
                            wire:click="delete({{ $route->feed_id }}, {{ $route->platform_channel_id }})"
                            wire:confirm="Are you sure you want to delete this route?"
                            class="p-2 text-gray-400 hover:text-red-600 rounded-md dark:text-gray-500"
                            title="Delete route"
                        >
                            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        @empty
            <div class="text-center py-12">
                <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
                </svg>
                <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">No routes</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    Get started by creating a new route to connect feeds with channels.
                </p>
                <div class="mt-6">
                    <button
                        wire:click="openCreateModal"
                        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                    >
                        <svg class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                        </svg>
                        Create Route
                    </button>
                </div>
            </div>
        @endforelse
    </div>

    <!-- Create Route Modal -->
    @if ($showCreateModal)
        <x-form-modal title="Create New Route" close="closeCreateModal">
                    <form wire:submit="createRoute" class="space-y-4">
                        <div>
                            <label for="newFeedId" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-200">
                                Feed
                            </label>
                            <select
                                id="newFeedId"
                                wire:model="newFeedId"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
                                required
                            >
                                <option value="">Select a feed</option>
                                @foreach ($feeds as $feed)
                                    <option value="{{ $feed->id }}">{{ $feed->name }}</option>
                                @endforeach
                            </select>
                            @error('newFeedId') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                        </div>

                        <div>
                            <label for="newChannelId" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-200">
                                Channel
                            </label>
                            <select
                                id="newChannelId"
                                wire:model="newChannelId"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
                                required
                            >
                                <option value="">Select a channel</option>
                                @foreach ($channels as $channel)
                                    <option value="{{ $channel->id }}">{{ $channel->display_name ?? $channel->name }}</option>
                                @endforeach
                            </select>
                            @error('newChannelId') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                        </div>

                        <div>
                            <label for="newPriority" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-200">
                                Priority
                            </label>
                            <input
                                type="number"
                                id="newPriority"
                                wire:model="newPriority"
                                min="0"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
                            >
                            <p class="text-sm text-gray-500 mt-1 dark:text-gray-400">Higher priority routes are processed first</p>
                        </div>

                        <div class="flex justify-end space-x-3 pt-4">
                            <button
                                type="button"
                                wire:click="closeCreateModal"
                                class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:text-gray-200 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700/50"
                            >
                                Cancel
                            </button>
                            <button
                                type="submit"
                                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700"
                            >
                                Create Route
                            </button>
                        </div>
                    </form>
        </x-form-modal>
    @endif

    <!-- Edit Route Modal -->
    @if ($editingRoute)
        <x-form-modal title="Edit Route" close="closeEditModal">
                    <div class="mb-4 p-3 bg-gray-50 rounded-md dark:bg-gray-900">
                        <p class="text-sm text-gray-600 dark:text-gray-300">
                            <strong>Feed:</strong> {{ $editingRoute->feed?->name }}
                        </p>
                        <p class="text-sm text-gray-600 dark:text-gray-300">
                            <strong>{{ $editingRoute->platformChannel?->platformInstance?->platform?->channelLabel() ?? 'Channel' }}:</strong> {{ $editingRoute->platformChannel?->display_name ?? $editingRoute->platformChannel?->name }}
                        </p>
                    </div>

                    <form wire:submit="updateRoute" class="space-y-4">
                        <div>
                            <label for="editPriority" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-200">
                                Priority
                            </label>
                            <input
                                type="number"
                                id="editPriority"
                                wire:model="editPriority"
                                min="0"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
                            >
                            <p class="text-sm text-gray-500 mt-1 dark:text-gray-400">Higher priority routes are processed first</p>
                        </div>

                        <!-- Auto-approve -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-200">Auto-approve</label>
                            <div class="flex items-center space-x-4">
                                <label class="inline-flex items-center">
                                    <input type="radio" wire:model="editAutoApprove" name="editAutoApprove" value="" class="text-blue-600 focus:ring-blue-500 dark:text-blue-400">
                                    <span class="ml-2 text-sm text-gray-700 dark:text-gray-200">Use global setting</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" wire:model="editAutoApprove" name="editAutoApprove" value="1" class="text-blue-600 focus:ring-blue-500 dark:text-blue-400">
                                    <span class="ml-2 text-sm text-gray-700 dark:text-gray-200">On</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" wire:model="editAutoApprove" name="editAutoApprove" value="0" class="text-blue-600 focus:ring-blue-500 dark:text-blue-400">
                                    <span class="ml-2 text-sm text-gray-700 dark:text-gray-200">Off</span>
                                </label>
                            </div>
                            <p class="text-sm text-gray-500 mt-1 dark:text-gray-400">Override global approval setting for this route</p>
                        </div>

                        <!-- Keyword Management -->
                        <div class="border-t pt-4">
                            <div class="flex items-center space-x-2 mb-3">
                                <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />
                                </svg>
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Keywords</span>
                                <button
                                    type="button"
                                    wire:click="$set('showKeywordInput', true)"
                                    class="inline-flex items-center p-1 text-gray-400 hover:text-gray-600 rounded-sm dark:text-gray-500 dark:hover:text-gray-300"
                                    title="Add keyword"
                                >
                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                                    </svg>
                                </button>
                            </div>

                            @if ($showKeywordInput)
                                <div class="flex space-x-2 mb-3">
                                    <input
                                        type="text"
                                        wire:model="newKeyword"
                                        wire:keydown.enter.prevent="addKeyword"
                                        placeholder="Enter keyword..."
                                        class="flex-1 px-2 py-1 border border-gray-300 rounded-sm text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:border-gray-600"
                                        autofocus
                                    >
                                    <button
                                        type="button"
                                        wire:click="addKeyword"
                                        class="px-3 py-1 bg-blue-600 text-white text-sm rounded-sm hover:bg-blue-700"
                                    >
                                        Add
                                    </button>
                                    <button
                                        type="button"
                                        wire:click="$set('showKeywordInput', false)"
                                        class="px-3 py-1 bg-gray-200 text-gray-700 text-sm rounded-sm hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200"
                                    >
                                        Cancel
                                    </button>
                                </div>
                            @endif

                            @if ($editingKeywords->isNotEmpty())
                                <div class="space-y-2">
                                    @foreach ($editingKeywords as $keyword)
                                        <div class="flex items-center justify-between px-3 py-2 rounded-sm border {{ $keyword->is_active ? 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900/20' : 'border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/40' }}">
                                            <div class="flex items-center space-x-2">
                                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium {{ $keyword->is_active ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' : 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400' }}">
                                                    {{ $keyword->keyword }}
                                                </span>
                                                <span class="text-xs text-gray-500 dark:text-gray-400">
                                                    {{ $keyword->is_active ? 'Active' : 'Inactive' }}
                                                </span>
                                            </div>
                                            <div class="flex space-x-1">
                                                <button
                                                    type="button"
                                                    wire:click="toggleKeyword({{ $keyword->id }})"
                                                    class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400"
                                                    title="{{ $keyword->is_active ? 'Deactivate keyword' : 'Activate keyword' }}"
                                                >
                                                    {{ $keyword->is_active ? 'Deactivate' : 'Activate' }}
                                                </button>
                                                <button
                                                    type="button"
                                                    wire:click="deleteKeyword({{ $keyword->id }})"
                                                    wire:confirm="Are you sure you want to delete this keyword?"
                                                    class="text-red-600 hover:text-red-800 dark:text-red-400"
                                                    title="Delete keyword"
                                                >
                                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                                                    </svg>
                                                </button>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                @if (!$showKeywordInput)
                                    <div class="text-sm text-gray-500 italic p-2 border border-gray-200 rounded-sm dark:text-gray-400 dark:border-gray-700">
                                        No keywords defined. This route will match all articles.
                                    </div>
                                @endif
                            @endif
                        </div>

                        <div class="flex justify-end space-x-3 pt-4 border-t">
                            <button
                                type="button"
                                wire:click="closeEditModal"
                                class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:text-gray-200 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700/50"
                            >
                                Cancel
                            </button>
                            <button
                                type="submit"
                                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700"
                            >
                                Update Route
                            </button>
                        </div>
                    </form>
        </x-form-modal>
    @endif
</div>
