@extends('layouts.app')

@section('content')
    <div class="min-h-screen flex items-center justify-center bg-gray-50">
        <div class="max-w-lg w-full bg-white rounded-lg shadow-md p-8">
            <div class="text-center">
                <div class="mb-6">
                    <div class="w-16 h-16 bg-green-500 text-white rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                    </div>
                    <h1 class="text-3xl font-bold text-gray-900 mb-2">Setup Complete!</h1>
                    <p class="text-gray-600 mb-6">
                        Great! You've successfully configured Lemmy Poster. Your feeds will now be monitored and articles will be automatically posted to your configured channels.
                    </p>
                </div>
                
                <!-- Progress indicator -->
                <div class="flex justify-center mb-8 space-x-2">
                    <div class="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">✓</div>
                    <div class="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">✓</div>
                    <div class="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">✓</div>
                    <div class="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">✓</div>
                </div>
                
                <div class="space-y-4 mb-8">
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <h3 class="font-semibold text-blue-900 mb-2">What happens next?</h3>
                        <ul class="text-sm text-blue-800 space-y-1 text-left">
                            <li>• Your feeds will be checked regularly for new articles</li>
                            <li>• New articles will be automatically posted to your channels</li>
                            <li>• You can monitor activity in the Articles and Logs sections</li>
                        </ul>
                    </div>
                    
                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                        <h3 class="font-semibold text-yellow-900 mb-2">Want more control?</h3>
                        <p class="text-sm text-yellow-800 text-left mb-2">
                            Set up <strong>routing rules</strong> to control which articles get posted where based on keywords, titles, or content.
                        </p>
                        <a href="{{ route('routing.index') }}" 
                           class="inline-block bg-yellow-200 hover:bg-yellow-300 text-yellow-900 px-3 py-1 rounded-md text-sm transition duration-200">
                            Configure Routing →
                        </a>
                    </div>
                </div>
                
                <div class="space-y-3">
                    <a href="{{ route('feeds.index') }}" 
                       class="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 transition duration-200 inline-block">
                        Go to Dashboard
                    </a>
                    
                    <div class="text-sm text-gray-500">
                        <a href="{{ route('articles') }}" class="hover:text-blue-600">View Articles</a>
                        •
                        <a href="{{ route('logs') }}" class="hover:text-blue-600">Check Logs</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection