@extends('installer::app')
@section('content')
    <div class="text-center card">
        <div class="card-header">
            <p class="mb-0"><i class="fas fa-check-circle text-success me-2"></i>Installation Complete</p>
        </div>
        <div class="card-body py-5">
            <div class="mb-4">
                <i class="fas fa-rocket text-primary" style="font-size: 4rem;"></i>
            </div>
            <h3 class="text-success mb-3">🎉 API Installation Complete!</h3>
            <p class="text-muted mb-4">Your backend API is now live and ready to accept requests.</p>
            
            <div class="card bg-light mx-auto mb-4" style="max-width: 500px;">
                <div class="card-body">
                    <h6 class="text-muted mb-3">API Base URL</h6>
                    <code class="d-block p-3 bg-dark text-light rounded" id="api-url">{{ url('/api') }}</code>
                </div>
            </div>

            <div class="mb-4">
                <h6 class="text-muted mb-3">Installation Summary</h6>
                <ul class="list-unstyled">
                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Database configured</li>
                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Admin account created</li>
                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> API ready to accept requests</li>
                </ul>
            </div>

            <div class="d-flex justify-content-center gap-3">
                <button type="button" class="btn btn-primary" id="test-api-btn">
                    <i class="fas fa-heartbeat me-2"></i>Test API Status
                </button>
                <button type="button" class="btn btn-outline-secondary" onclick="copyApiUrl()">
                    <i class="fas fa-copy me-2"></i>Copy API URL
                </button>
            </div>

            <div id="api-status-result" class="mt-4" style="display: none;">
                <div class="alert" id="api-status-alert">
                    <span id="api-status-message"></span>
                </div>
            </div>

            <div class="mt-4 p-3 bg-light rounded">
                <small class="text-muted">
                    <i class="fas fa-info-circle me-1"></i>
                    Connect your React frontend and admin panel to this API URL.
                </small>
            </div>
        </div>
        <div class="card-footer">
            <p class="mb-0">Installation complete. You can now close this page.</p>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    function copyApiUrl() {
        const apiUrl = document.getElementById('api-url').textContent;
        navigator.clipboard.writeText(apiUrl).then(() => {
            toastr.success('API URL copied to clipboard!');
        }).catch(() => {
            toastr.error('Failed to copy URL');
        });
    }

    document.getElementById('test-api-btn').addEventListener('click', function() {
        const btn = this;
        const resultDiv = document.getElementById('api-status-result');
        const alertDiv = document.getElementById('api-status-alert');
        const messageSpan = document.getElementById('api-status-message');
        
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Testing...';
        
        fetch('{{ url("/api/health") }}')
            .then(response => response.json())
            .then(data => {
                resultDiv.style.display = 'block';
                alertDiv.className = 'alert alert-success';
                messageSpan.innerHTML = '<i class="fas fa-check-circle me-2"></i><strong>API is healthy!</strong> Status: ' + data.status + ' | Environment: ' + data.environment;
            })
            .catch(error => {
                resultDiv.style.display = 'block';
                alertDiv.className = 'alert alert-danger';
                messageSpan.innerHTML = '<i class="fas fa-times-circle me-2"></i><strong>API check failed:</strong> ' + error.message;
            })
            .finally(() => {
                btn.disabled = false;
                btn.innerHTML = '<i class="fas fa-heartbeat me-2"></i>Test API Status';
            });
    });
</script>
@endpush