@extends('installer.layout')

@section('title', 'Installer - Success')

@section('content')
<div class="min-h-screen flex flex-col items-center justify-center p-4 antialiased text-[#111418] dark:text-white transition-colors duration-200">
    <!-- Main Card Container -->
    <main class="w-full max-w-[520px] bg-white dark:bg-[#1e293b] rounded-xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-slate-100 dark:border-slate-700 overflow-hidden relative">
        <!-- Top Decoration Line -->
        <div class="h-1.5 w-full bg-primary absolute top-0 left-0"></div>
        
        <div class="p-8 sm:p-10 flex flex-col items-center">
            <!-- Success Icon -->
            <div class="size-20 rounded-full bg-green-50 dark:bg-green-900/20 flex items-center justify-center mb-6 ring-8 ring-green-50/50 dark:ring-green-900/10">
                <span class="material-symbols-outlined text-green-500 text-5xl fill-1">check_circle</span>
            </div>
            
            <!-- Headlines -->
            <h1 class="text-2xl sm:text-3xl font-bold text-[#111418] dark:text-white text-center tracking-tight mb-2">
                Installation Successful!
            </h1>
            <p class="text-slate-500 dark:text-slate-400 text-center text-base leading-relaxed mb-8 max-w-sm">
                Your billing platform is ready to use. We've generated your initial admin credentials below.
            </p>
            
            <!-- Credentials Box -->
            <div class="w-full bg-slate-50 dark:bg-[#0f172a] border border-slate-200 dark:border-slate-700 rounded-lg p-5 mb-6 shadow-sm">
                <div class="flex items-center gap-2 mb-4 text-slate-800 dark:text-slate-200 font-semibold border-b border-slate-200 dark:border-slate-700 pb-3">
                    <span class="material-symbols-outlined text-primary text-xl">admin_panel_settings</span>
                    <span>Admin Credentials</span>
                </div>
                
                <!-- Email Field -->
                <div class="mb-4">
                    <label class="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1.5">Username / Email</label>
                    <div class="relative group">
                        <input id="adminEmail" class="w-full bg-white dark:bg-[#1e293b] text-slate-700 dark:text-slate-200 text-sm font-medium border border-slate-200 dark:border-slate-600 rounded-md py-2.5 pl-3 pr-10 focus:outline-none focus:border-primary cursor-text select-all transition-colors" readonly type="text" value="{{ $adminEmail ?? '' }}"/>
                        <button onclick="copyToClipboard('adminEmail')" class="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-primary transition-colors p-1 rounded" title="Copy Email">
                            <span class="material-symbols-outlined text-lg">content_copy</span>
                        </button>
                    </div>
                </div>
                
                <!-- Password Field -->
                <div>
                    <label class="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1.5">Temporary Password</label>
                    <div class="relative group">
                        <input id="adminPassword" class="w-full bg-white dark:bg-[#1e293b] text-slate-700 dark:text-slate-200 text-sm font-medium border border-slate-200 dark:border-slate-600 rounded-md py-2.5 pl-3 pr-20 focus:outline-none focus:border-primary cursor-text select-all font-mono transition-colors" readonly type="text" value="{{ $adminPassword ?? '' }}"/>
                        <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
                            <button onclick="togglePassword()" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors p-1 rounded" title="Toggle Visibility">
                                <span class="material-symbols-outlined text-lg">visibility</span>
                            </button>
                            <div class="w-px h-4 bg-slate-200 dark:bg-slate-600 mx-1"></div>
                            <button onclick="copyToClipboard('adminPassword')" class="text-slate-400 hover:text-primary transition-colors p-1 rounded" title="Copy Password">
                                <span class="material-symbols-outlined text-lg">content_copy</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Warning Note -->
            <div class="flex gap-3 items-start w-full bg-orange-50 dark:bg-orange-900/10 border border-orange-100 dark:border-orange-900/30 rounded-lg p-3 mb-8">
                <span class="material-symbols-outlined text-orange-500 text-xl shrink-0 mt-0.5">warning</span>
                <p class="text-xs text-orange-800 dark:text-orange-200 leading-snug">
                    <span class="font-bold">Security Alert:</span> Please change your password immediately after your first login to secure your account.
                </p>
            </div>
            
            <!-- Primary Action -->
            <a href="{{ route('login') }}" class="w-full flex items-center justify-center gap-2 bg-primary hover:bg-blue-600 text-white font-bold text-sm h-12 px-6 rounded-lg transition-all duration-200 shadow-md shadow-blue-500/20 hover:shadow-blue-500/30 mb-4">
                <span>Go to Dashboard</span>
                <span class="material-symbols-outlined text-lg">arrow_forward</span>
            </a>
            
            <!-- Secondary Links -->
            <div class="flex items-center gap-6 text-sm font-medium">
                <a class="text-slate-500 dark:text-slate-400 hover:text-primary flex items-center gap-1.5 transition-colors" href="#">
                    <span class="material-symbols-outlined text-lg">description</span>
                    Documentation
                </a>
                <a class="text-slate-500 dark:text-slate-400 hover:text-primary flex items-center gap-1.5 transition-colors" href="#">
                    <span class="material-symbols-outlined text-lg">support_agent</span>
                    Support
                </a>
            </div>
        </div>
        
        <!-- Card Footer -->
        <div class="bg-slate-50 dark:bg-[#16202e] py-3 px-8 border-t border-slate-100 dark:border-slate-700 flex justify-between items-center text-xs text-slate-400 dark:text-slate-500">
            <span>ProInvoice Installer</span>
            <span>v1.0.0</span>
        </div>
    </main>
    
    <!-- Page Footer -->
    <footer class="mt-8 text-center">
        <p class="text-slate-400 text-sm">© 2024 ProInvoice. All rights reserved.</p>
    </footer>
</div>

@push('scripts')
<script>
function copyToClipboard(elementId) {
    const element = document.getElementById(elementId);
    element.select();
    element.setSelectionRange(0, 99999); // For mobile devices
    
    try {
        // Use modern Clipboard API if available
        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(element.value).then(() => {
                showCopyFeedback(event.target.closest('button'));
            });
        } else {
            // Fallback for older browsers
            document.execCommand('copy');
            showCopyFeedback(event.target.closest('button'));
        }
    } catch (err) {
        console.error('Failed to copy:', err);
        alert('Failed to copy to clipboard');
    }
}

function showCopyFeedback(btn) {
    if (!btn) return;
    const originalHTML = btn.innerHTML;
    btn.innerHTML = '<span class="material-symbols-outlined text-lg text-green-500">check</span>';
    btn.classList.add('text-green-500');
    setTimeout(() => {
        btn.innerHTML = originalHTML;
        btn.classList.remove('text-green-500');
    }, 2000);
}

function togglePassword() {
    const passwordInput = document.getElementById('adminPassword');
    const toggleBtn = event.target.closest('button');
    const icon = toggleBtn.querySelector('.material-symbols-outlined');
    
    if (passwordInput.getAttribute('type') === 'password') {
        passwordInput.setAttribute('type', 'text');
        icon.textContent = 'visibility_off';
        toggleBtn.title = 'Hide Password';
    } else {
        passwordInput.setAttribute('type', 'password');
        icon.textContent = 'visibility';
        toggleBtn.title = 'Show Password';
    }
}
</script>
@endpush
@endsection