@extends('layouts.app')

@section('content')
<div class="max-w-2xl mx-auto py-6 sm:px-6 lg:px-8">
    <div class="px-4 py-6 sm:px-0">
        <div class="mb-6">
            <h1 class="text-2xl font-semibold text-gray-900">Edit Routing</h1>
            <p class="mt-1 text-sm text-gray-600">
                {{ $feed->name }} → {{ $channel->name }} ({{ $channel->platformInstance->name }})
            </p>
        </div>

        <div class="bg-white shadow sm:rounded-lg">
            <form action="{{ route('routing.update', [$feed, $channel]) }}" method="POST" class="px-4 py-5 sm:p-6">
                @csrf
                @method('PUT')

                <div class="grid grid-cols-1 gap-6">
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Routing Details</h3>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div class="grid grid-cols-2 gap-4 text-sm">
                                <div>
                                    <span class="font-medium text-gray-700">Feed:</span>
                                    <div class="flex items-center mt-1">
                                        @if($feed->type === 'rss')
                                            <x-heroicon-o-rss class="w-4 h-4 text-orange-500 mr-2" />
                                        @else
                                            <x-heroicon-o-globe-alt class="w-4 h-4 text-blue-500 mr-2" />
                                        @endif
                                        {{ $feed->name }}
                                    </div>
                                </div>
                                <div>
                                    <span class="font-medium text-gray-700">Channel:</span>
                                    <div class="flex items-center mt-1">
                                        <x-heroicon-o-hashtag class="w-4 h-4 text-gray-400 mr-2" />
                                        {{ $channel->name }}
                                        <span class="ml-2 text-gray-500">({{ $channel->platformInstance->name }})</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" 
                               name="is_active" 
                               id="is_active" 
                               value="1"
                               {{ old('is_active', $routing->pivot->is_active) ? 'checked' : '' }}
                               class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                        <label for="is_active" class="ml-2 block text-sm text-gray-900">
                            Active
                        </label>
                    </div>

                    <div>
                        <label for="priority" class="block text-sm font-medium text-gray-700">Priority</label>
                        <input type="number" 
                               name="priority" 
                               id="priority" 
                               min="0" 
                               max="100" 
                               value="{{ old('priority', $routing->pivot->priority) }}"
                               class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('priority') border-red-300 @enderror"
                               placeholder="0">
                        <p class="mt-1 text-sm text-gray-500">Higher numbers = higher priority (0-100)</p>
                        @error('priority')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="filters" class="block text-sm font-medium text-gray-700">Filters</label>
                        <textarea name="filters" 
                                  id="filters" 
                                  rows="6" 
                                  class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('filters') border-red-300 @enderror"
                                  placeholder='{"keywords": ["technology", "AI"], "exclude_keywords": ["sports"]}'>{{ old('filters', $routing->pivot->filters ? json_encode($routing->pivot->filters, JSON_PRETTY_PRINT) : '') }}</textarea>
                        <p class="mt-1 text-sm text-gray-500">JSON format for content filtering rules</p>
                        @error('filters')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="bg-blue-50 border border-blue-200 rounded-md p-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <x-heroicon-o-information-circle class="w-5 h-5 text-blue-400" />
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-blue-800">Filter Examples</h3>
                                <div class="mt-2 text-sm text-blue-700">
                                    <p>You can use filters to control which content gets routed:</p>
                                    <ul class="list-disc list-inside mt-1 space-y-1">
                                        <li><code>{"keywords": ["tech", "AI"]}</code> - Include only articles with these keywords</li>
                                        <li><code>{"exclude_keywords": ["sports"]}</code> - Exclude articles with these keywords</li>
                                        <li><code>{"min_length": 500}</code> - Minimum article length</li>
                                        <li><code>{"max_age_hours": 24}</code> - Only articles from last 24 hours</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-6 flex items-center justify-between">
                    <form action="{{ route('routing.destroy', [$feed, $channel]) }}" method="POST" class="inline"
                          onsubmit="return confirm('Are you sure you want to delete this routing?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="bg-red-600 py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white hover:bg-red-700">
                            Delete Routing
                        </button>
                    </form>

                    <div class="flex items-center space-x-3">
                        <a href="{{ route('routing.index') }}" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            Cancel
                        </a>
                        <button type="submit" class="bg-indigo-600 py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            Update Routing
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection