@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">
            <!-- Final step label -->
            <div class="mb-5 inline-flex items-center gap-2 rounded-full border border-emerald-200/80 bg-emerald-50/90 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-emerald-800 dark:border-emerald-800/60 dark:bg-emerald-950/40 dark:text-emerald-300">
                <span class="material-symbols-outlined text-[16px] text-emerald-600 dark:text-emerald-400">flag</span>
                Final step — setup complete
            </div>

            <!-- 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-3">
                Congratulations — your application is ready
            </h1>
            <p class="text-slate-500 dark:text-slate-400 text-center text-base leading-relaxed mb-2 max-w-md">
                ProInvoice is installed and configured. Sign in with the administrator account below to open your site and start working.
            </p>
            <p class="text-slate-400 dark:text-slate-500 text-center text-sm leading-relaxed mb-8 max-w-md">
                For your security, change the temporary password right after your first login.
            </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 — open the application -->
            <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-3">
                <span class="material-symbols-outlined text-lg">language</span>
                <span>Go to your website</span>
                <span class="material-symbols-outlined text-lg">arrow_forward</span>
            </a>
            <p class="text-center text-xs text-slate-400 dark:text-slate-500 mb-8 max-w-sm">
                This opens the staff sign-in page so you can reach your dashboard.
            </p>

            <!-- Support announcement -->
            <div class="w-full rounded-xl border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-5 dark:border-slate-600 dark:from-slate-800/80 dark:to-[#0f172a] mb-2">
                <div class="flex items-start gap-3">
                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
                        <span class="material-symbols-outlined text-[22px]">headset_mic</span>
                    </div>
                    <div class="min-w-0 flex-1 text-left">
                        <h2 class="text-sm font-bold text-[#111418] dark:text-white sm:text-base">
                            Need help or run into an issue?
                        </h2>
                        <p class="mt-1 text-xs leading-relaxed text-slate-600 dark:text-slate-400 sm:text-sm">
                            Our support team can help with installation, licensing, and day-to-day questions. Visit the support hub using the button below.
                        </p>
                        <a
                            href="https://app.mathem.dev"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="mt-4 inline-flex w-full items-center justify-center gap-2 rounded-lg border-2 border-primary bg-white px-4 py-2.5 text-sm font-bold text-primary shadow-sm transition-all hover:bg-primary hover:text-white dark:bg-slate-900 dark:hover:bg-primary sm:w-auto"
                        >
                            <span class="material-symbols-outlined text-[18px]">open_in_new</span>
                            Open support &amp; resources
                        </a>
                    </div>
                </div>
            </div>

            <p class="mt-4 text-center text-xs text-slate-400 dark:text-slate-500">
                Support link opens in a new tab: <span class="font-mono text-[11px] text-slate-500 dark:text-slate-400">https://app.mathem.dev</span>
            </p>
        </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">© {{ date('Y') }} 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