<x-app-layout>
    <x-slot name="header">
        <div>
            <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Admin Setup</p>
            <h2 class="text-2xl font-bold text-slate-950 dark:text-white">API, Email & Google Login Setup Guide</h2>
            <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">Use this page after installation to confirm that ViZuTrade can send emails, use Google Login, and read API keys safely.</p>
        </div>
    </x-slot>

    @php
        $card = 'rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900';
        $code = 'mt-3 overflow-x-auto rounded-lg border border-slate-200 bg-slate-950 p-4 text-xs leading-6 text-slate-100 dark:border-slate-800';
        $label = 'text-sm font-black uppercase tracking-wide text-blue-600 dark:text-blue-300';
        $okBadge = 'rounded-full bg-emerald-100 px-3 py-1 text-xs font-black text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-200';
        $badBadge = 'rounded-full bg-amber-100 px-3 py-1 text-xs font-black text-amber-700 dark:bg-amber-950/50 dark:text-amber-200';
    @endphp

    <div class="grid gap-6 xl:grid-cols-3">
        <section class="{{ $card }}">
            <div class="flex items-start justify-between gap-4">
                <div>
                    <p class="{{ $label }}">Email Verification</p>
                    <h3 class="mt-2 text-xl font-black text-slate-950 dark:text-white">Mail Sending</h3>
                </div>
                <span class="{{ $mailStatus['configured'] ? $okBadge : $badBadge }}">
                    {{ $mailStatus['configured'] ? 'Ready' : 'Needs setup' }}
                </span>
            </div>

            <dl class="mt-5 space-y-2 text-sm">
                <div class="flex justify-between gap-4"><dt class="text-slate-500 dark:text-slate-400">Mailer</dt><dd class="font-bold text-slate-950 dark:text-white">{{ $mailStatus['mailer'] }}</dd></div>
                <div class="flex justify-between gap-4"><dt class="text-slate-500 dark:text-slate-400">Host</dt><dd class="font-bold text-slate-950 dark:text-white">{{ $mailStatus['host'] ?: 'Not set' }}</dd></div>
                <div class="flex justify-between gap-4"><dt class="text-slate-500 dark:text-slate-400">Port</dt><dd class="font-bold text-slate-950 dark:text-white">{{ $mailStatus['port'] ?: 'Not set' }}</dd></div>
                <div class="flex justify-between gap-4"><dt class="text-slate-500 dark:text-slate-400">From</dt><dd class="font-bold text-slate-950 dark:text-white">{{ $mailStatus['from_address'] ?: 'Not set' }}</dd></div>
            </dl>

            @if ($mailStatus['issues'])
                <div class="mt-5 rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-100">
                    <p class="font-black">Fix these:</p>
                    <ul class="mt-2 list-disc space-y-1 pl-5">
                        @foreach ($mailStatus['issues'] as $issue)
                            <li>{{ $issue }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ route('admin.setup-guide.test-email') }}" class="mt-5">
                @csrf
                <label for="email" class="text-sm font-bold text-slate-700 dark:text-slate-200">Send test email to</label>
                <div class="mt-2 flex flex-col gap-2 sm:flex-row">
                    <input id="email" name="email" type="email" value="{{ old('email', auth()->user()->email) }}" class="min-w-0 flex-1 rounded-lg border-slate-300 bg-white text-sm text-slate-950 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-950 dark:text-white" required>
                    <button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-black text-white hover:bg-blue-700">Send Test</button>
                </div>
                @error('email')
                    <p class="mt-2 text-sm font-bold text-red-600 dark:text-red-300">{{ $message }}</p>
                @enderror
            </form>
        </section>

        <section class="{{ $card }}">
            <div class="flex items-start justify-between gap-4">
                <div>
                    <p class="{{ $label }}">Google OAuth</p>
                    <h3 class="mt-2 text-xl font-black text-slate-950 dark:text-white">Google Login</h3>
                </div>
                <span class="{{ $googleStatus['configured'] ? $okBadge : $badBadge }}">
                    {{ $googleStatus['configured'] ? 'Ready' : 'Needs setup' }}
                </span>
            </div>

            <dl class="mt-5 space-y-2 text-sm">
                <div class="flex justify-between gap-4"><dt class="text-slate-500 dark:text-slate-400">Client ID</dt><dd class="font-bold text-slate-950 dark:text-white">{{ $googleStatus['client_id_present'] ? 'Connected' : 'Missing' }}</dd></div>
                <div class="flex justify-between gap-4"><dt class="text-slate-500 dark:text-slate-400">Client Secret</dt><dd class="font-bold text-slate-950 dark:text-white">{{ $googleStatus['client_secret_present'] ? 'Connected' : 'Missing' }}</dd></div>
            </dl>

            <div class="mt-5 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm dark:border-blue-900/50 dark:bg-blue-950/30">
                <p class="font-black text-slate-950 dark:text-white">Use this redirect URI in Google Cloud:</p>
                <p class="mt-2 break-all font-mono text-blue-700 dark:text-blue-200">{{ $googleStatus['expected_redirect'] }}</p>
            </div>

            @if ($googleStatus['issues'])
                <div class="mt-5 rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-100">
                    <p class="font-black">Fix these:</p>
                    <ul class="mt-2 list-disc space-y-1 pl-5">
                        @foreach ($googleStatus['issues'] as $issue)
                            <li>{{ $issue }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <a href="{{ route('google.redirect') }}" class="mt-5 inline-flex rounded-lg border border-blue-100 px-4 py-2 text-sm font-black text-blue-700 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">
                Test Google Login
            </a>
        </section>

        <section class="{{ $card }}">
            <div class="flex items-start justify-between gap-4">
                <div>
                    <p class="{{ $label }}">API Keys</p>
                    <h3 class="mt-2 text-xl font-black text-slate-950 dark:text-white">Market Data APIs</h3>
                </div>
                <span class="{{ $apiStatus['table_exists'] ? $okBadge : $badBadge }}">
                    {{ $apiStatus['table_exists'] ? 'Table ready' : 'Run migrations' }}
                </span>
            </div>

            <div class="mt-5 grid gap-3 text-sm">
                <div class="rounded-lg border border-blue-100 p-4 dark:border-blue-900/50">
                    <p class="font-black text-slate-950 dark:text-white">Financial Modeling Prep</p>
                    <p class="mt-1 text-slate-600 dark:text-slate-300">
                        {{ $apiStatus['fmp']['configured'] ? 'Connected through database or .env.' : 'Not connected yet.' }}
                    </p>
                </div>
                <div class="rounded-lg border border-blue-100 p-4 dark:border-blue-900/50">
                    <p class="font-black text-slate-950 dark:text-white">MetaApi</p>
                    <p class="mt-1 text-slate-600 dark:text-slate-300">
                        {{ $apiStatus['metaapi']['configured'] ? 'Connected through database or .env.' : 'Prepared for future connection.' }}
                    </p>
                </div>
            </div>

            <a href="{{ route('admin.api-settings.index') }}" class="mt-5 inline-flex rounded-lg bg-blue-600 px-4 py-2 text-sm font-black text-white hover:bg-blue-700">
                Manage API Keys
            </a>
        </section>
    </div>

    <div class="mt-8 grid gap-6 lg:grid-cols-2">
        <section class="{{ $card }}">
            <p class="{{ $label }}">Step 1</p>
            <h3 class="mt-2 text-xl font-black text-slate-950 dark:text-white">Set Up Email Verification</h3>
            <div class="mt-4 space-y-4 text-sm leading-6 text-slate-600 dark:text-slate-300">
                <p>Laravel sends email verification as a signed link. It is not a numeric code. Users click the link, then Laravel marks their email as verified.</p>
                <p>On cPanel, create an email account first, for example <strong>support@your-domain.com</strong>. Then put those SMTP details in your server `.env` file.</p>
            </div>
            <pre class="{{ $code }}"><code>MAIL_MAILER=smtp
MAIL_SCHEME=smtps
MAIL_HOST=mail.your-domain.com
MAIL_PORT=465
MAIL_USERNAME=support@your-domain.com
MAIL_PASSWORD=your-email-password
MAIL_FROM_ADDRESS=support@your-domain.com
MAIL_FROM_NAME="${APP_NAME}"</code></pre>
            <div class="mt-4 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-900 dark:border-blue-900/50 dark:bg-blue-950/30 dark:text-blue-100">
                After editing `.env`, run cache clear commands from cPanel Terminal.
            </div>
        </section>

        <section class="{{ $card }}">
            <p class="{{ $label }}">Step 2</p>
            <h3 class="mt-2 text-xl font-black text-slate-950 dark:text-white">Set Up Google Login</h3>
            <ol class="mt-4 list-decimal space-y-2 pl-5 text-sm leading-6 text-slate-600 dark:text-slate-300">
                <li>Open Google Cloud Console.</li>
                <li>Create or select a project.</li>
                <li>Configure the OAuth consent screen.</li>
                <li>Create OAuth Client ID credentials.</li>
                <li>Choose Web Application.</li>
                <li>Add the redirect URI shown on this page exactly.</li>
                <li>Copy the Client ID and Client Secret into your `.env` file.</li>
            </ol>
            <pre class="{{ $code }}"><code>GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
GOOGLE_REDIRECT_URI={{ $googleStatus['expected_redirect'] }}</code></pre>
        </section>

        <section class="{{ $card }}">
            <p class="{{ $label }}">Step 3</p>
            <h3 class="mt-2 text-xl font-black text-slate-950 dark:text-white">Set Up API Keys</h3>
            <div class="mt-4 space-y-4 text-sm leading-6 text-slate-600 dark:text-slate-300">
                <p>Use the Admin API Settings page for API keys when possible. ViZuTrade encrypts API keys in the database and masks them in the admin view.</p>
                <p>Financial Modeling Prep powers the Forex Calendar. MetaApi is prepared for future broker connection.</p>
            </div>
            <pre class="{{ $code }}"><code>FMP_API_KEY=your-fmp-api-key
METAAPI_TOKEN=your-future-metaapi-token</code></pre>
        </section>

        <section class="{{ $card }}">
            <p class="{{ $label }}">Step 4</p>
            <h3 class="mt-2 text-xl font-black text-slate-950 dark:text-white">Clear Cache After Changing .env</h3>
            <p class="mt-4 text-sm leading-6 text-slate-600 dark:text-slate-300">Laravel caches configuration. If you change `.env` and do not clear cache, the old settings may still be used.</p>
            <pre class="{{ $code }}"><code>cd /home/your-cpanel-username/vizutrade
php artisan optimize:clear
php artisan config:clear
php artisan cache:clear
php artisan route:clear
php artisan view:clear</code></pre>
        </section>
    </div>
</x-app-layout>
