@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. Now activate the system to start monitoring feeds and posting articles.
                    </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>
                
                <!-- System Activation Section -->
                <div class="mb-8">
                    <div class="bg-white border-2 border-gray-200 rounded-lg p-6">
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center">
                                @if($systemStatus['is_enabled'])
                                    <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                        <x-heroicon-o-check-circle class="w-5 h-5 text-green-600" />
                                    </div>
                                    <div>
                                        <h3 class="font-semibold text-gray-900">System Status</h3>
                                        <p class="text-sm {{ $systemStatus['status_class'] }}">{{ $systemStatus['status'] }}</p>
                                    </div>
                                @else
                                    <div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-3">
                                        <x-heroicon-o-exclamation-triangle class="w-5 h-5 text-orange-600" />
                                    </div>
                                    <div>
                                        <h3 class="font-semibold text-gray-900">Ready to Activate</h3>
                                        <p class="text-sm text-orange-600">System is configured but not active</p>
                                    </div>
                                @endif
                            </div>
                            
                            @if(!$systemStatus['is_enabled'])
                                <form action="{{ route('settings.update') }}" method="POST" class="inline">
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="article_processing_enabled" value="1">
                                    <input type="hidden" name="from" value="onboarding">
                                    <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md font-medium transition-colors">
                                        Activate System
                                    </button>
                                </form>
                            @else
                                <span class="text-green-600 font-medium">✓ Active</span>
                            @endif
                        </div>
                        
                        @if(!$systemStatus['is_enabled'] && count($systemStatus['reasons']) > 0)
                            <div class="mt-4 pt-4 border-t border-gray-200">
                                <p class="text-sm text-gray-600 mb-2">System will be enabled once activated. Current setup status:</p>
                                <ul class="text-sm text-gray-600 space-y-1">
                                    @foreach($systemStatus['reasons'] as $reason)
                                        @if($reason !== 'Manually disabled by user')
                                            <li class="flex items-center">
                                                <x-heroicon-o-check-circle class="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />
                                                {{ str_replace('No active', 'Active', $reason) . ' ✓' }}
                                            </li>
                                        @endif
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </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