@extends('layouts.app')

@section('title', __('radio.wizard.title') . ' - ' . __('radio.wizard.step_short') . ' 5 - ' . config('app.name'))

@push('styles')
    <style>
        .wizard-container { max-width: 900px; margin: 0 auto; padding: 2rem; }
        .wizard-card { background: white; border-radius: 16px; padding: 2.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 2rem; }
        .wizard-header { text-align: center; margin-bottom: 2.5rem; }
        .wizard-title { font-size: 2rem; font-weight: 800; color: #1a202c; margin-bottom: 0.5rem; }
        .wizard-subtitle { color: #4a5568; font-size: 1.1rem; }
        .steps-indicator { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 2.5rem; }
        .step-dot { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; }
        .step-dot.active { background: #eeb425; color: white; }
        .step-dot.inactive { background: #e2e8f0; color: #a0aec0; }
        .step-dot.completed { background: #38a169; color: white; }
        .step-line { width: 60px; height: 3px; align-self: center; border-radius: 2px; }
        .step-line.active { background: #eeb425; }
        .step-line.inactive { background: #e2e8f0; }
        .test-card { background: #f7fafc; border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; border-left: 4px solid; }
        .test-card.success { border-color: #38a169; }
        .test-card.warning { border-color: #ecc94b; }
        .test-card.error { border-color: #e53e3e; }
        .test-card.skipped { border-color: #a0aec0; }
        .test-card.untested { border-color: #cbd5e0; }
        .test-title { font-weight: 700; font-size: 1rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
        .test-detail { color: #4a5568; font-size: 0.9rem; }
        .test-detail strong { color: #2d3748; }
        .status-badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
        .status-badge.success { background: #f0fff4; color: #38a169; }
        .status-badge.warning { background: #fffff0; color: #b7791f; }
        .status-badge.error { background: #fff5f5; color: #e53e3e; }
        .status-badge.skipped { background: #edf2f7; color: #718096; }
        .setting-row { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid #e2e8f0; font-size: 0.9rem; }
        .setting-row:last-child { border-bottom: none; }
        .setting-key { color: #4a5568; }
        .setting-value { font-weight: 600; color: #2d3748; }
        .btn-wizard { background: linear-gradient(135deg, #eeb425, #d4a52a); color: #1a202c; padding: 0.85rem 2rem; border: none; border-radius: 10px; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 12px rgba(238,180,37,0.3); text-decoration: none; display: inline-block; }
        .btn-wizard:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(238,180,37,0.4); }
        .btn-secondary { background: #e2e8f0; color: #4a5568; padding: 0.85rem 2rem; border: none; border-radius: 10px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s; text-decoration: none; display: inline-block; }
        .btn-secondary:hover { background: #cbd5e0; }
        .btn-success { background: linear-gradient(135deg, #38a169, #2f855a); color: white; padding: 0.85rem 2rem; border: none; border-radius: 10px; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 12px rgba(56,161,105,0.3); text-decoration: none; display: inline-block; }
        .btn-success:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(56,161,105,0.4); }
        .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid #e2e8f0; border-top-color: #eeb425; border-radius: 50%; animation: spin 0.8s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .result-icon { font-size: 1.2rem; }
        .test-result-section { margin-top: 1rem; padding-top: 1rem; border-top: 2px dashed #e2e8f0; }
    </style>
@endpush

@section('content')
    <div class="wizard-container">
        <div class="wizard-header">
            <h1 class="wizard-title">🧪 {{ __('radio.wizard.step5_title') }}</h1>
            <p class="wizard-subtitle">{{ __('radio.wizard.step_prefix') }} 5 {{ __('radio.wizard.of') }} 5 - {{ __('radio.wizard.step5_subtitle') }}</p>
        </div>

        <div class="steps-indicator">
            <div class="step-dot completed">✓</div>
            <div class="step-line active"></div>
            <div class="step-dot completed">✓</div>
            <div class="step-line active"></div>
            <div class="step-dot completed">✓</div>
            <div class="step-line active"></div>
            <div class="step-dot completed">✓</div>
            <div class="step-line active"></div>
            <div class="step-dot active">5</div>
        </div>
        <div style="display: flex; justify-content: center; gap: 3.5rem; margin-top: -1.5rem; margin-bottom: 1rem; font-size: 0.75rem; color: #718096;">
            <span style="color: #38a169;">✓ {{ __('radio.wizard.step1_label') }}</span>
            <span style="color: #38a169;">✓ {{ __('radio.wizard.step2_label') }}</span>
            <span style="color: #38a169;">✓ {{ __('radio.wizard.step3_label') }}</span>
            <span style="color: #38a169;">✓ {{ __('radio.wizard.step4_label') }}</span>
            <span style="color: #eeb425; font-weight: 600;">{{ __('radio.wizard.step5_label') }}</span>
        </div>

        @if(session('error'))
            <div style="background: #fff5f5; border: 1px solid #fc8181; border-radius: 10px; padding: 1rem 1.5rem; margin-bottom: 1.5rem;">
                <strong style="color: #c53030;">{{ session('error') }}</strong>
            </div>
        @endif

        <div class="wizard-card">
            <h2 style="font-size: 1.3rem; font-weight: 700; color: #2d3748; margin-bottom: 1.5rem;">
                🔌 {{ __('radio.wizard.test_title') }}
            </h2>
            <p style="color: #4a5568; margin-bottom: 1.5rem;">{{ __('radio.wizard.test_desc') }}</p>

            <div id="testResults">
                <div id="testLoading" style="display: none; text-align: center; padding: 2rem;">
                    <div class="loading-spinner" style="width: 40px; height: 40px; border-width: 4px; margin: 0 auto 1rem;"></div>
                    <p style="color: #4a5568;">{{ __('radio.wizard.test_loading') }}</p>
                </div>

                <div id="testOutput">
                    @if($testResults)
                        @include('admin.radio.wizard._test-results', ['results' => $testResults])
                    @else
                        <p style="color: #a0aec0; text-align: center; padding: 2rem;">{{ __('radio.wizard.test_prompt') }}</p>
                    @endif
                </div>
            </div>

            <div style="text-align: center; margin-top: 1rem;">
                <button onclick="runTest()" class="btn-wizard" id="testBtn">
                    🔍 {{ __('radio.wizard.test_button') }}
                </button>
            </div>
        </div>

        <div class="wizard-card">
            <h2 style="font-size: 1.3rem; font-weight: 700; color: #2d3748; margin-bottom: 1rem;">
                📋 {{ __('radio.wizard.settings_overview') }}
            </h2>
            <p style="color: #4a5568; margin-bottom: 1.5rem;">{{ __('radio.wizard.settings_overview_desc') }}</p>

            <div style="background: #f7fafc; border-radius: 10px; padding: 1.25rem;">
                @foreach($settingsList as $key => $value)
                    <div class="setting-row">
                        <span class="setting-key">{{ $key }}</span>
                        <span class="setting-value">{{ $value }}</span>
                    </div>
                @endforeach
            </div>
        </div>

        <div style="display: flex; justify-content: space-between; align-items: center;">
            <a href="{{ route('admin.radio.wizard.step', ['step' => 4]) }}" class="btn-secondary">← {{ __('radio.wizard.previous_step') }}</a>

            <form action="{{ route('admin.radio.wizard.complete') }}" method="POST" style="display: inline;" onsubmit="return confirm('{{ __('radio.wizard.install_confirm') }}')">
                @csrf
                <button type="submit" class="btn-success">
                    🚀 {{ __('radio.wizard.install_button') }}
                </button>
            </form>
        </div>
    </div>

    <script>
        function runTest() {
            const testBtn = document.getElementById('testBtn');
            const testLoading = document.getElementById('testLoading');
            const testOutput = document.getElementById('testOutput');

            testBtn.disabled = true;
            testBtn.innerHTML = '<span class="loading-spinner"></span> {{ __('radio.wizard.test_loading') }}';
            testLoading.style.display = 'block';
            testOutput.innerHTML = '';

            fetch('{{ route('admin.radio.wizard.test') }}')
                .then(r => r.json())
                .then(data => {
                    testLoading.style.display = 'none';
                    if (data.success && data.results) {
                        let html = '';
                        const tests = {
                            'stream': { label: '📡 {{ __('radio.wizard.test_result_stream') }}' },
                            'now_playing': { label: '🎵 {{ __('radio.wizard.test_result_now_playing') }}' },
                            'listeners': { label: '👥 {{ __('radio.wizard.test_result_listeners') }}' },
                        };

                        const statusIcons = { success: '✅', warning: '⚠️', error: '❌', skipped: '⏭️', untested: '❓' };
                        const statusLabels = { success: '{{ __('radio.wizard.status_success') }}', warning: '{{ __('radio.wizard.status_warning') }}', error: '{{ __('radio.wizard.status_error') }}', skipped: '{{ __('radio.wizard.status_skipped') }}', untested: '{{ __('radio.wizard.status_untested') }}' };

                        for (const [key, info] of Object.entries(tests)) {
                            const result = data.results[key];
                            if (!result) continue;

                            const icon = statusIcons[result.status] || '❓';
                            const statusLabel = statusLabels[result.status] || result.status;

                            html += '<div class="test-card ' + result.status + '">';
                            html += '<div class="test-title">' + icon + ' ' + info.label + ' <span class="status-badge ' + result.status + '">' + statusLabel + '</span></div>';
                            html += '<div class="test-detail">' + result.message;

                            if (result.content_type) {
                                html += '<br><strong>{{ __('radio.wizard.content_type') }}:</strong> ' + result.content_type;
                            }
                            if (result.http_code) {
                                html += '<br><strong>{{ __('radio.wizard.http_status') }}:</strong> ' + result.http_code;
                            }
                            if (result.song) {
                                html += '<br><strong>{{ __('radio.wizard.song') }}:</strong> ' + result.song;
                            }
                            if (result.artist) {
                                html += ' <strong>{{ __('radio.wizard.artist') }}:</strong> ' + result.artist;
                            }
                            if (result.count !== undefined) {
                                html += '<br><strong>{{ __('radio.wizard.listeners') }}:</strong> ' + result.count;
                            }
                            if (result.api_url) {
                                html += '<br><strong>{{ __('radio.wizard.api_url') }}:</strong> ' + result.api_url;
                            }

                            html += '</div></div>';
                        }

                        html += '<div class="test-result-section">';
                        if (data.results.stream && (data.results.stream.status === 'success' || data.results.stream.status === 'warning')) {
                            html += '<p style="color: #38a169; font-weight: 600;">✅ {{ __('radio.wizard.test_stream_ok') }}</p>';
                        } else if (data.results.stream && data.results.stream.status === 'error') {
                            html += '<p style="color: #e53e3e; font-weight: 600;">❌ {{ __('radio.wizard.test_stream_fail') }}</p>';
                        } else {
                            html += '<p style="color: #a0aec0;">{{ __('radio.wizard.test_not_run') }}</p>';
                        }
                        html += '</div>';

                        testOutput.innerHTML = html;
                    } else {
                        testOutput.innerHTML = '<div class="test-card error"><div class="test-title">❌ {{ __('radio.wizard.error') }}</div><div class="test-detail">' + (data.error || '{{ __('radio.wizard.unknown_error') }}') + '</div></div>';
                    }
                })
                .catch(err => {
                    testLoading.style.display = 'none';
                    testOutput.innerHTML = '<div class="test-card error"><div class="test-title">❌ {{ __('radio.wizard.error') }}</div><div class="test-detail">{{ __('radio.wizard.test_connection_fail') }} ' + err.message + '</div></div>';
                })
                .finally(() => {
                    testBtn.disabled = false;
                    testBtn.innerHTML = '🔄 {{ __('radio.wizard.test_retry') }}';
                });
        }
    </script>
@endsection